面试官：ES6中有何新增特性？ —— 数组篇

数组篇

1.1 map()方法

使用该方法能遍历数组的每一个元素，并且能对数组元素做处理并返回一个新数组。

例子：给一个数字数组的每一项添加价格单位。

let array = [1, 2, 3]
//1.map方法能对数组元素做处理并返回一个新数组
//item-->元素，index-->索引
let newArray = array.map((item,index) => item + "元")
// ['1元', '2元','3元']
console.log(newArray);

1.2 filter()方法

filter()方法能根据表达式是true还是false过滤掉一些元素并返回一个新数组。

例子：把数字小于2的数字过滤掉。

let array = [1, 2, 3]
let filterArray = array.filter((item) => item >= 2)
// [ 2, 3 ]
console.log(filterArray);

1.3 some()和every()方法

在数组的判断过程中，判断整体的每一个元素是否全部都符合一项基本要求。

some方法： 一真及真， 只要有一个符合就返回，true。

every方法: 一假即假， 只要其中有一个不符合要求就返回，false

例子1：判断一个班的所有学生的成绩，看看是否有人不及格。

let scores = [80, 49, 12, 50, 69]
let result = scores.some(item => item < 60)
//返回true，有人不及格
console.log(result)

例子2：判断一个班的所有学生的成绩看看是否所有人都及格了。

let scores = [80, 49, 12, 50, 69]
let result = scores.every(item => item >= 60)
 //返回false  所有并不是都及格了
console.log(result)

1.4 reduce()和reduceRight()方法

归并方法

reduce和reduceRight方法会迭代数组的所有项，并在此基础上构建一个最终返回值。

reduce()方法从数组第一项开始遍历到最后一项。reduceRight()方法从最后一项开始遍历至第一项。

参数：

参数	说明
prev	上一次操作返回的结果。如果不给prev设置默认值，那么第一个元素就作为第一个prev
item	本次操作的元素
index	本次操作元素的索引值
array	当前操作的数组

例子1：数组求和

let arr = [20, 40, 50, 21]
let values = arr.reduce((prev, item, index, array) => {
 //给个return 循环四次 第一次输出prev是20，
 //第二次40+20是60，第三次是110 最后一次输出131
    console.log("prev" + prev)
    return prev + item
})
//131
console.log(values)

例子2：数组去重

let arr1 = ["a", "b", "c", "a", "b", "b"]
let result1 = arr1.reduce((prev, item) => {
    //includes判断是有具有指定元素 有返回true 没有返回false
    if (!prev.includes(item)) {
        //向数组添加一个新元素
        prev.push(item) 
    }
    return prev
}, []) //给prev设置默认值，设置一个默认空数组
//["a","b","c"]
console.log(result1)

例子3：统计字符的出现次数

let arr2 = ["a", "b", "a", "c", "b", "a", "c"]
//返回一个对象 统计每一个字符的出现次数
let result2 = arr2.reduce((prev, item) => {
    //判断字符是否出现过
    if (item in prev) {
        //已经出现过，次数+1
        prev[item]++ 
    } else {
        //第一次出现，赋初值为1
        prev[item] = 1
    }
    return prev
}, {})
//{a: 3, b: 2, c: 2}
console.log(result2)

1.5 forEach()方法

此方法是用来代替 for 循环遍历数组的。

参数	说明
value	数组的元素
index	数组的索引
arr	当前操作的数组

例子：遍历输出数组的每一项

let arr3 = [1, 2, 3, 4];
arr3.forEach(function (value, index, arr) {
    //0:1 1:2 2:3 3:4
    console.log(index + ":" + value);
})

1.6 find()和findLast()方法

返回值为符合条件的对应的那个值，后者从后往前遍历。

例子：从数组中获取一个大于等于2的数。

let arr6 = [1, 2, 3];
// 得到第一个符合条件的数据，返回给变量
let bigNum = arr6.find(num => num >= 2)
//2
console.log(bigNum);

1.7 findIndex()和findLastIndex()方法

返回值为符合条件的对应的那个值的下标 后者从后往前遍历 例子：从数组中获取一个大于等于2的数的下标。

let arr7 = [1, 2, 3];
let num7 = arr7.findIndex(num => num >= 2)
//1
console.log(num7);

1.8 includes()方法

方法返回一个布尔值，表示某个数组是否包含给定的值。

例子：判断数组是否包含数字3。

let arr8 = [1, 2, 3]
let isIncluds = arr8.includes(3)
//true
console.log(isIncluds);

1.9 flat()和flatMap()方法

用于将嵌套的数组"拉平"，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

let arr9 = [1, [2, 3]]
let result9 = arr9.flat()
// [ 1, 2, 3 ]
console.log(result9);

flatMap()方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法。

该方法返回一个新数组，不改变原数组。

let result9_1 = [2, 3, 4].flatMap((x) => [x, x * 2])
//[ 2, 4, 3, 6, 4, 8 ]
console.log(result9_1);

1.10 at()方法

接受一个整数作为参数，返回对应位置的成员，并支持负索引。

const arr10 = [5, 12, 8, 130, 44];
arr10.at(2) // 8
arr10.at(-2) // 130

1.11 toReversed()、toSorted()、toSpliced()和with()方法

方法	说明
toReversed()	对应reverse()，用来颠倒数组成员的位置。
toSorted()	对应sort()，用来对数组成员排序。
toSpliced()	对应splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
with(index, value)	对应splice(index, 1, value)，用来将指定位置的成员替换为新的值。

const sequence = [1, 2, 3];
sequence.toReversed() // [3, 2, 1]
sequence // [1, 2, 3]

const outOfOrder = [3, 1, 2];
outOfOrder.toSorted() // [1, 2, 3]
outOfOrder // [3, 1, 2]

const array11 = [1, 2, 3, 4];
array11.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array11 // [1, 2, 3, 4]

const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2) // [1, 2, 3]
correctionNeeded // [1, 1, 3]

1.12 of()方法

of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

1.13 扩展运算符 (...)

扩展运算符是三个点（...）,将一个数组转为用逗号分隔的参数序列。

在数组中的作用：

console.log(...[1, 2, 3])
// 1 2 3

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

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

let arr1=[11,22];
let arr2=["aa","bb"];
//es5的合并
let arr=arr1.concat(arr2);
console.log(arr) // [11, 22, "aa", "bb"]

//es6
let newarr=[...arr1,...arr2]
console.log(newarr) // [11, 22, 33, 55, "aa", "bb", "cc", "dd"]

在对象中的作用，快速实现深拷贝：

const 甲 = {
    name:  '小明',
    age: 16 
}
const 乙 = 甲

console.log(甲 === 乙) // true，因为指向同一个地址

const 甲 = {
    name:  '小明',
    age: 16 
}
const 乙 = {
    ...甲
}

console.log(甲 === 乙) // false，因为乙是先指向了一个新空间，在新空间内填充了"甲"指向地址中的数据。