Day07
来源:互联网 发布:漫威电影观看顺序 知乎 编辑:程序博客网 时间:2024/05/29 04:12
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 }];
在此两数组的基础上实现一下几个操作:
1. 是否至少有一人年满19
周岁?
2. 是否每一个人都年满19
周岁?
3. 是否存在id=823423
的评论?
4. 找到id=823423
的评论的序列号(下标)。
5. 删除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
全栈部落完整系列教程:全栈部落完整电子书学习笔记
- day07
- day07
- day07
- day07
- day07
- day07
- day07
- day07
- day07
- day07
- day07
- Day07
- day07
- day07
- day07
- day07-tomcat
- day07 homework
- 作业day07
- js里面在对象里面属性可以写对象类型吗
- HDU
- 从mysql获取数据方法的封装
- 实践spring data jpa:Executing an update/delete query........
- 概率DP 换教室
- Day07
- git命令学习
- No.3 平衡二叉树
- D
- Replace To Make Regular Bracket Sequence 【栈】
- 《算法》 第四版 环境搭建 记录
- Day08
- python调用java
- poj 3764 The xor-longest Path (Trie树)