ES6 数组的扩展

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、数组的扩展

1、Array.from（要转的数组）

• 将类数组结构转换成真正的数组
  代码：

	let lis = document.querySelectorAll('.list li')
    let res = Array.from(lis)
    console.log(res);

• 将可遍历对象转换成数组结构
  代码：console.log(Array.from('hello'));

为什么要转换成真正的数组？
**因为很多数组的方法可以被使用**

2、Array.of （值1，值2…）

将一组值转换成数组
例：

let arr = Array.of(1,2,3,4,5)
console.log(arr);

疑问？
明明可以：

let arr = new Array(1,23,3,5);
console.log(arr)
为什么还要出来一个Array.of（）

因为：使用new Array创建数组，当参数只有一个，并且为数字时，这个参数代表的是长度，而不是数组元素

3、find（）和findIndex（）

（1）、find（）并没有改变数组的原始值

• 根据条件找到数组的某元素
• 当回调函数返回true时，返回值就是这次的item；如果一直没有返回true，则结果是undefined

语法：数组.find（function（item）{ item每一次的数组元素 }）

代码：

```clike
 let list=[
        {id:1,title:'哈哈哈'},
        {id:2,title:'呵呵呵'},
        {id:3,title:'嘻嘻嘻'}
    ]
    list.find(function(item){
        console.log(item);
    })

例：将id等于2的数组的title修改

 let list=[
        {id:1,title:'哈哈哈'},
        {id:2,title:'呵呵呵'},
        {id:3,title:'嘻嘻嘻'}
    ]
    let res = list.find(function(item){
        return item.id === 2
    })
    res.title ='呃呃呃'
    console.log(res);

（2）、findIndex（）方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

语法：Array.findIndex(function(currentValue, index, arr), thisValue);

参数：

• currentValue 必写，当前元素
• index 可选，当前元素的索引
• arr 可选，当前元素所属的对象数组
• thisValue 可选，传递给函数的值一般用“this”值。如果这个函数为空，“undefined”会传递给“this”值
  返回值：返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。

用法：
findIndex() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数；如果没有符合条件的元素返回 -1

注意事项：
（1）findIndex() 对于空数组，函数是不会执行的；
（2）findIndex() 并没有改变数组的原始值。

例：

let res = [5,6,30,25,10];
function check(number) {
return number >= 10;
}
console.log(res.findIndex(check));
输出结果：2 （2为下标索引位置）

4、fill（）填充替换

语法：数组.fill（‘填充的内容’）

• 替换填充
  例：

let arr = [1,2]
let res = arr.fill(“a”);
console.log(res)
console.log(arr)

• 为空数组填充内容
  例：

let arr = new Array(10)
let li = document.createElement(‘li’);
arr.fill(li);
console.log(arr)

• 使用参数
• fill（内容，开始位置，结束位置）
  例：

let arr = new Array(10)
let li = document.createElement(‘li’);
arr.fill(li);

arr.fill('a',2,5);
console.log(arr)

注意： 不包括结束位置

5、includes（）判断数组是否包含某个元素

语法：数组.includes（‘是否包含的元素’）

例：

let arr = [2,2,23,3,4,4,5]
let res = arr.includes(5);
console.log(res)
返回值：包含true，不包含false

6、map（）数组加工方法

map方法会遍历数组，然后，接收一个回调函数，回调函数的返回值，会替换掉当前的元素

语法：数组.map（function（item，index，arr）{ return 值 }）
返回值：新的数组（跟原数组不共享空间）

例：

let list=[
{id:1,title:‘哈哈哈’},
{id:2,title:‘呵呵呵’},
{id:3,title:‘嘻嘻嘻’}
]
let newList = list.map(function(item){
return item;
})
console.log(newList)

7、forEach（）数组遍历方法

语法：数组.forEach（function（item，index，arr）{}）

例：

let list=[
{id:1,title:‘哈哈哈’},
{id:2,title:‘呵呵呵’},
{id:3,title:‘嘻嘻嘻’}
]
list.forEach(function(item,index,arr){
console.log(item,index,arr)
})

8、every（）判读数组中的所有元素是否符合同一条件

evey接收一个回调函数，如果这个回调函数的返回值都是true，则结果为true。只要出现一次为false，则结果为false
例：

let list=[
{id:1,title:‘哈哈哈’},
{id:2,title:‘呵呵呵’},
{id:3,title:‘嘻嘻嘻’}
]
let res = list.every(function(item){
return item })
console.log(res)

9、reduce（）对数组的元素做累计处理

语法：数组.reduce（function（prev，currenv）{return 两个值的计算结果}）
返回值：总的计算结果

没有初始值参数时，prev是第一数组元素
有初始值时，prev是初始值
例：let arr = [4,2,3]
let res = arr.reduce(function(prev,currentv){
return prev + currentv
},10)
console.log(res)