Day07 - Array Cardio 中文指南二

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

Day07 - Array Cardio 中文指南二

第七天的练习是接着之前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不会改变原数组的值。

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

返回列表

上一篇：第000篇 - 一步一步了解区块链技术

下一篇：Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能