资讯专栏INFORMATION COLUMN

Day07 - Array Cardio 中文指南二

Forest10 / 301人阅读

摘要:中文指南二作者简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。第七天的练习是接着之前中文指南一的练习,继续熟练数组的方法,依旧没有页面显示效果,所以请打开浏览器的面板进行调试运行。

Day07 - Array Cardio 中文指南二

作者:©liyuechun
简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 7 篇。完整中文版指南及视频教程在 从零到壹全栈部落。

第七天的练习是接着之前Day04 - Array Cardio 中文指南一的练习,继续熟练数组的方法,依旧没有页面显示效果,所以请打开浏览器的Console面板进行调试运行。


任务表

网站给了两个数组,分别为people数组和comments数组,如下:

const people = [
    { name: "Wes", year: 1988 },
    { name: "Kait", year: 1986 },
    { name: "Irv", year: 1970 },
    { name: "Lux", year: 2015 }
];

const comments = [
    { text: "Love this!", id: 523423 },
    { text: "Super good", id: 823423 },
    { text: "You are the best", id: 2039842 },
    { text: "Ramen is my fav food ever", id: 123523 },
    { text: "Nice Nice Nice!", id: 542328 }
];

在此两数组的基础上实现一下几个操作:

是否至少有一人年满19周岁?

是否每一个人都年满19周岁?

是否存在id=823423的评论?

找到id=823423的评论的序列号(下标)。

删除id=823423的评论。

是否至少有一人年满19周岁? Array.prototype.some()

some参考文档

CASE

let isBiggerThan10 = (element, index, array) => {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Syntax

arr.some(callback[, thisArg])

Parameters

element:当前在操作的对象。

index:当前操作对象的索引。

array:在操作的数组指针。

Return value
返回true或者false,返回true,说明数组中有满足条件的数据存在,返回false,说明数组里面没有满足条件的数组存在。

项目源码

版本一:

const isAdult = people.some(function(person){
  const currentYear = new Date().getFullYear();
  if(currentYear - person.year >= 19){
    return true;
  }
});
console.log(isAdult);

版本二:

const isAdult = people.some((person) => {
  const currentYear = new Date().getFullYear();
  if(currentYear - person.year >= 19){
    return true;
  }
});
console.log(isAdult);

版本三:

const isAdult = people.some(person => (new Date().getFullYear() - person.year) >= 19 );
console.log(isAdult);
是否每一个人都年满19周岁? Array.prototype.every()

every参考文档

CASE

let isBigEnough = (element, index, array) => { 
  return element >= 10; 
} 

[12, 5, 8, 130, 44].every(isBigEnough);   // false 
[12, 54, 18, 130, 44].every(isBigEnough); // true

Syntax

arr.every(callback)

Parameters

Parameters

element:当前在操作的对象。

index:当前操作对象的索引。

array:在操作的数组指针。

Return value
返回true或者false,返回true,代表数组中所有数据都满足条件,否则,至少有一条数据不满足条件。

项目源码
const everyAdult = people.every(person => (new Date().getFullYear() - person.year) >= 19);
console.log({everyAdult});
是否存在id=823423的评论? Array.prototype.find(callback)

find参考文档

CASE

let  isBigEnough = (element) => {
  return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

Syntax

arr.find(callback)

Parameters

element:当前在操作的对象。

index:当前操作对象的索引。

array:在操作的数组指针。

Return value
如果有满足条件对象,返回该对象,否则返回undefined

项目源码
const findComment = comments.find(comment => comment.id === 823423);
console.log(findComment);
}
找到id=823423的评论的序列号(下标) Array.prototype.findIndex()

findIndex参考文档

CASE

let isBigEnough = (element) => {
  return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough); 
// index of 4th element in the Array is returned,
// so this will result in "3"

Syntax

arr.findIndex(callback)

Parameters

element:当前在操作的对象。

index:当前操作对象的索引。

array:在操作的数组指针。

Return value
返回满足条件的当前对象在数组中的索引,如果找不到满足条件的对象,返回-1

项目源码
const findCommentIndex = comments.findIndex(comment => comment.id === 823423);
console.log(findCommentIndex);
删除id=823423的评论

splice参考文档
slice参考文档

Array.prototype.splice()

CASE

在索引2的位置移除0个元素,并且插入"drum"

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// myFish 是 ["angel", "clown", "drum", "mandarin", "sturgeon"] 
// removed is [], 没有元素被移除。

从索引3开始移除1个元素。

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// 移除的原色是 ["mandarin"]
// myFish 为 ["angel", "clown", "drum", "sturgeon"]

从索引2移除一个元素,并且插入"trumpet"

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish 为 ["angel", "clown", "trumpet", "sturgeon"]
// 移除的元素为 ["drum"]

从索引0开始移除2个元素,并且插入"parrot", "anemone" 和 "blue"。

var myFish = ["angel", "clown", "trumpet", "sturgeon"];
var removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish为 ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
// 移除的元素是 ["angel", "clown"]

从索引2开始移除所有元素

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2);

// myFish 为 ["angel", "clown"] 
// 移除的原色为 ["mandarin", "sturgeon"]

Syntax

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

array.splice(start): 从索引start开始移除后面所有的元素。

array.splice(start, deleteCount): 从索引start元素删除deleteCount个元素。

array.splice(start, deleteCount, item1, item2, ...):start索引开始,删除deleteCount个元素,然后插入item1,item2,...

Array.prototype.slice()

CASE

var a = ["zero", "one", "two", "three"];
var sliced = a.slice(1, 3);

console.log(a);      // ["zero", "one", "two", "three"]
console.log(sliced); // ["one", "two"]

Syntax

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

arr.slice()等价于arr.slice(0,arr.length)

arr.slice(begin)等价于arr.slice(begin,arr.length)

arr.slice(begin, end):创建一个新数组,将索引begin-end(不包含end)的元素放到新数组中并返回新数组,原数组不被修改。

项目源码 - 删除id=823423的评论
const comments = [
 { text: "Love this!", id: 523423 },
 { text: "Super good", id: 823423 },
 { text: "You are the best", id: 2039842 },
 { text: "Ramen is my fav food ever", id: 123523 },
 { text: "Nice Nice Nice!", id: 542328 }
];
    
const findCommentIndex = comments.findIndex(comment => comment.id === 823423);

// delete the comment with the ID of 823423
//comments.splice(findCommentIndex,1);

const newComments = [
 ...comments.slice(0,findCommentIndex),
 ...comments.slice(findCommentIndex+1)
]; 

splice会修改原数组,slice不会改变原数组的值。

源码下载

Github Source Code

社群品牌:从零到壹全栈部落

定位:寻找共好,共同学习,持续输出全栈技术社群

业界荣誉:IT界的逻辑思维

文化:输出是最好的学习方式

官方公众号:全栈部落

社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)

技术交流社区:全栈部落BBS

全栈部落完整系列教程:全栈部落完整电子书学习笔记

关注全栈部落官方公众号,每晚十点接收系列原创技术推送

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84303.html

相关文章

  • Day04 - Array Cardio 指南

    摘要:指南一作者简介是推出的一个天挑战。目的是帮助人们用纯来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第篇。完整指南在从零到壹全栈部落。筛出运行结果是的组成数组返回。 Day04 - Array Cardio 指南一 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30...

    zhangyucha0 评论0 收藏0
  • JavaScript 30 - 一起做一次了不起的挑战

    摘要:加入我们,一起挑战吧扫码申请加入全栈部落 JavaScript 30 - 一起做一次了不起的挑战 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班,欢迎抢座) 在Github上看到了wesbos的一个Javascript30天挑战的repo,旨在使用纯JS来进行练习,不允许使用任何其他的库和框架,该挑战共30天,我会在这里复现这30天遇到的挑...

    1treeS 评论0 收藏0
  • day1 - JavaScript Drum Kit 中文指南

    摘要:中文指南作者简介是推出的一个天挑战。页面基础布局标签定义键盘文本说到技术概念上的特殊样式时,就要提到标签。主要代码主要属性有以下几个中有一个样式为,在本案例中,就是,是以中的为参照物,就是。 Day01 - JavaScript Drum Kit 中文指南 作者:©liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

    HackerShell 评论0 收藏0
  • Day17 - 数组排序中文指南

    摘要:一个用来创建新子字符串的函数,该函数的返回值将替换掉第一个参数匹配到的结果。返回值一个部分或全部匹配由替代模式所取代的新的字符串。 Day17 - 数组排序中文指南 作者:©黎跃春-追时间的人 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 Java...

    coordinate35 评论0 收藏0

发表评论

0条评论

Forest10

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<