ES6数组的扩展

扩展运算符 （...）

将一个数组转化为用逗号隔开的序列

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5 复制代码

注意： 1. 如果扩展运算符后面传入一个空数组，则不产生任何效果

2. 只有函数调用的时候扩展运算符才放在圆括号中，否则放在[]中

「赋值数组」

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1; 复制代码

「合并数组」

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
const newArr = [...arr1, ...arr2,...arr3];
console.log(newArr) //['a', 'b','c','d', 'e'] 复制代码

「与解构赋值结合」

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [a, ...b] = ['a', 'b','c','d', 'e'];
console.log(a) //a
console.log(b) //["b", "c", "d", "e"] 复制代码

「扩展运算符还可以将字符串转为真正的数组。」

有一个重要的好处，那就是能够正确识别四个字节的 Unicode 字符。

console.log([...'haha']) //["h", "a", "h", "a"] 复制代码

Array.from()

用于将类似数组的对象和可遍历的对象转化为数组，

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] 复制代码

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而扩展运算符就无法转换。 Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9] 复制代码

Array.of()

Array.of方法用于将一组值，转换为数组。 Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2] 复制代码

数组实例的 find() 和 findIndex()

find()用于找出第一个符合条件的数组成员，然后返回该成员，如果没有符合条件的元素，则返回undefined;

[1, 4, -5, 10].find((n) => n < 0)
// -5 复制代码

findIndex()用于找出第一个符合条件的数组成员，然后返回该成员的下标，如果没有符合条件的成员，则返回-1；

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2 复制代码

fill()

方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7] 复制代码

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置 ['a', 'b', 'c'].fill(7, 1, 2) 如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

数组实例的 entries()，keys() 和 values()

唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

const objArr = [
    {
        name: '张三',
        age: 23
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 26
    }
]
for(item of objArr.keys()){
    console.log(item) 
}
for(item of objArr.values()){
    console.log(item) 
}
for([index, item] of objArr.entries()){
    console.log(index, item)
} 复制代码

includes()

「Array.prototype.includes（target, start）」

target: 必须参数，给定的值

start: 可选参数，搜索的起始位置，默认是从0开始的，如果是0表示倒数的位置，如果超过数组的长度则从0开始搜索 方法返回一个布尔值，表示某个数组是否包含给定的值

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

[NaN].indexOf(NaN) 复制代码

数组实例的 flat()，flatMap()

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5] 复制代码

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3] 复制代码

如果原数组有空位，flat()方法会跳过空位

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5] 复制代码

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8] 复制代码

flatMap()只能展开一层数组。

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]] 复制代码

ES6数组的方法

forEach()

「遍历数组，没有返回值，不允许在循环体内写return,不会改变原数组」

 let arr = [11,22,33,44,66]
 arr.forEach((item,index, arr) =>{
    console.log(item, index, arr)
}) 复制代码

map()

「遍历数组 ，返回一个新数组，不会改变原来的数组」

let arr = [11,22,33,44,66]
let newArr = arr.map((item,index,arr) => {
    return item*10
})
console.log(newArr) //[110, 220, 330, 440, 660]
let newArr2 = arr.map(String);  //将数组的元素变为String类型
console.log(newArr2) //["11", "22", "33", "44", "66"]
let newArr3 = newArr2.map(Number) // 将数组的元素变为Number类型
console.log(newArr3) //[11, 22, 33, 44, 66] 复制代码

filter()

「过滤掉数组中不满足条件的元素，把满足条件的元素放到一个新的数组中，不改变原来的数组」

 let arr4 = arr.filter(item => item%2 === 0);
 console.log(arr4)  //[22, 44, 66] 复制代码

reduce()

「方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。」

• 求数组项之和

let array = [1,2,3,4,5];
let temp = array.reduce((prev,cur) => {
    console.log('prev',cur)
    console.log('cur', cur)
    return prev+cur;
})
console.log(temp) 复制代码

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

• 数组元素的最大项

let array = [1,2,3,4,5];
var max = array.reduce((prev,cur)=>{
return Math.max(prev,cur)
})
console.log(max)  //5 复制代码

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

• 数组去重

var arr = [11,22,33,22,11]
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
console.log(newArr) //[11,22,33] 复制代码

• • ① 初始化一个空数组
• • ② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中

• • ③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
• • ④ ……
• • ⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
• • ⑥ 将这个初始化数组返回

every()

「遍历数组，每一项返沪都是true,则返回true,只要有一个是false,则返回false」

let arr = [11,22,33,44,66]
let arr2 = arr.every((item,index,arr) => {
    return item % 2 === 0
})
console.log(arr2) //false 复制代码

some()

「遍历数组的元素，只要有一个返回true,就停止循环,返回一个布尔值 不改变原来的数组」

let arr = [11,22,33,44,66]
let arr3 = arr.some((item,index,arr) => {
    console.log(index) //0
    return item > 1
})
console.log(arr3) // true 复制代码

find()

「找到第一个符合条件的数组元素,就停止遍历，不改变原来的数组」

let arr = [11,22,33,44,66]
let arr4 = arr.find((value,index, arr) => {
    return value % 3 === 0
})
console.log(arr4) //33 复制代码

ES5数组的方法

splice()

「方法向/从数组中添加/删除项目，然后返回被删除的项目。——改变原来的数组」

arrayObject.splice(index,howmany,item1,.....,itemX)

• index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX 可选。向数组添加的新项目。

let arr = [1,2,3,4,5]
let arr2 = arr.splice(2,2) //下标从2开始删除2个元素
console.log(arr) //[1,2,5]
console.log(arr2)//[3,4] 复制代码

concat()

「方法用于连接两个或多个数组。」

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX是必须参数，该参数可以是具体的值，也可以是数组对象。可以是任意多个。

let arr1 = [1,2,3,4,5];
let arr2 = ['aa','bb','cc']
let arr3 = arr1.concat(arr2)
console.log(arr3) //[1, 2, 3, 4, 5, "aa", "bb", "cc"]
console.log(arr1.concat('qq','ww')) //[1, 2, 3, 4, 5, "qq", "ww"] 复制代码

join() 与 toString()

• arrayObject.join(separator)*

「方法用于把数组转化为一个字符串，如果不传参数，字符传之间默认用逗号隔开，如果传了参数，以指定的分隔符方式隔开」

• arrayObject.toString()

「该方法无需传参，可把数组转换为字符串，以逗号的方式隔开。」

let arr1 = [1,2,3,4,5];
var str1 = arr1.join()
var str2 = arr1.join('*')
console.log(str1) //1,2,3,4,5
console.log(str2) //1*2*3*4*5

let arr3 = ['aa','bb','cc']
var arr4= arr3.toString() //aa,bb,cc 复制代码

pop()与shift()——改变原数组

「pop()方法用于删除并返回数组的最后一个元素。」

「shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。」

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

let arr2 = ['aa','bb','cc']
var arr3= arr2.pop()
console.log(arr3) // cc
console.log(arr2) //(2) ["aa", "bb"] 复制代码

slice()

「方法可从已有的数组中返回选定的元素。」

arrayObject.slice(start,end)

总结

如何生成类似[1 - 100]这样的数组

fill()方法

Array(100)会生成有100空位的数组，这个数组不能使用map(),forEach(),filter()等方法遍历，因为空位会被跳过，（for of 不会跳过空位），然后使用fill() 方法给数组填充数字.

Array(3) // [empty × 100]
const arr1 = Array(100).fill(0).map((item, index) =>{ return index}) 复制代码

Array.from

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

const arr4 = Array.from(Array(100), (value, key) => key + 1); 复制代码

扩展运算符（...）

keys()是对键名的遍历

const arr2 = [...Array(100).keys() ] 复制代码

for of

这种不推介使用

let arr = []
for(let x of Array(100).keys()){
    console.log(x)
    arr.push(x+1)
}
console.log(arr) 复制代码

如何获取2个数组的并集、交集和差集

并集

let arr1  = new Set([1,2,3,4,3,2,1]); //{1,2,3,4}

let arr2 = new Set([3,3,2,66]); //{3,2,66} 复制代码
 let union  = new Set([...arr1, ...arr2]); //Set{1, 2, 3, 4, 66}
console.log([...union]) //[1, 2, 3, 4, 66] 复制代码

交集

let intersect = new Set([...arr1].filter(x => arr2.has(x)));
console.log(intersect) // {2,3} 复制代码

差集

（arr1 相对于 arr2 的）差集

let difference = new Set([...arr1].filter(x => !arr2.has(x)));
console.log(difference) // {1,4}