ES6数组新增了哪些扩展？

一、扩展运算符(...)

arduino 复制代码

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

更简单的实现数组复制(浅拷贝)：

ini 复制代码

const arr1 = [1,2,3]
const arr2 = [...arr1] // arr2 = [1,2,3]

实现数组合并(浅拷贝):

ini 复制代码

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

扩展运算符可以与解构赋值结合起来用于生成数组：

css 复制代码

  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest);  //输出 1 [2,3,4,5]
  
  
  const [first, ...rest] = [];
  console.log(first, rest);  //输出 undefined []
  
  const [first, ...rest] = ['hh'];
  console.log(first, rest);  //输出 'hh' []

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

ini 复制代码

const [...butLast, last] = [1, 2, 3, 4, 5]; //报错
const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错

将字符串转为真正的数组：

css 复制代码

[...'hello']  // [ "h", "e", "l", "l", "o" ]

二、数组构造函数新增的扩展

Array 构造函数有两个ES6新增的用于创建数组的静态方法：Array.from()和Array.of()。

from()用于将类数组结构转换为数组实例，而of()用于将一组参数转换为数组实例。

Array.from()

Array.from()将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)（字符串、）

Array.from拥有3个形参：

第一个为类似数组的对象，必选
第二个为加工函数，新生成的数组会经过该函数的加工再返回，可选
第三个为this作用域，表示加工函数执行时this的值。可选

javascript 复制代码

// 将字符串转为数组
Array.from('foo')  // [ "f", "o", "o" ]

// 从 Set 生成数组（数组去重）
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ]

// 将对象转为数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike);    // ['a', 'b', 'c']
Array.from([1, 2, 3], (x) => x * x)  // [1, 4, 9]

Array.of()

Array.of()用于将一组值转换为数组
没有参数时返回空数组
只有一个参数时指定数组的长度
参数个数不少于两个时，才会返回由参数组成的新数组

javascript 复制代码

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

三、数组实例对象新增的方法

关于数组实例对象新增的⽅法有如下：

copyWithin()
find()， findIndex()
fill()
entries()，keys()，values()
includes()
flat()，flatMap()

copyWithin()

将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

参数如下：

target（必需）：从该位置开始替换数据。如果为负值，表⽰倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表⽰从末尾开始计算。
end（可选）：到该位置前停⽌读取数据，默认等于数组⻓度。如果为负值，表⽰从末尾开始计算

scss 复制代码

[1, 2, 3, 4, 5].copyWithin(0, 3) 
/* 将从 3 号位开始读取直到数组结束（读取到4 和 5）
 从 0 号位开始替换，结果输出 [4, 5, 3, 4, 5] */

find()、findIndex()

find() ⽤于找出第⼀个符合条件的数组成员
findIndex 返回第⼀个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
两方法的参数有两个⼀个是回调函数此回调函数接受三个参数依次为当前的值、当前的位置和原数组，另一个是用来绑定回调函数的this对象

javascript 复制代码

  [1, 5, 10, 15].find(function (value, index, arr) {
    return value > 9;
  }); // 10

javascript 复制代码

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

csharp 复制代码

function f(v) {
      return v > this.age;
    }
let person = { name: 'John', age: 20 };
[10, 12, 26, 15].find(f, person); // 26

fill()

使⽤给定值，填充⼀个数组
三个参数（value，start，end），⽤于指定填充的值、起始位置和结束位置
如果填充的类型为对象，则是浅拷⻉

scss 复制代码

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

new Array(3).fill(7)    // [7, 7, 7]

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

entries()，keys()，values()

keys() 是对键名的遍历
values() 是对键值的遍历
entries() 是对键值对的遍历

javascript 复制代码

  for (let index of ["a", "b"].keys()) {
    console.log(index);
  }
  // 0 1
  
  for (let elem of ["a", "b"].values()) {
    console.log(elem);
  }
  // 'a' 'b'
  
  for (let [index, elem] of ["a", "b"].entries()) {
    console.log(index, elem);
  }
  // 0 "a"  1  "b"

includes()

⽤于判断数组是否包含给定的值
⽅法三个参数（value, start, end）第二个参数表⽰搜索的起始位置，默认为 0 参数为负数则表⽰倒数的位置

scss 复制代码

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

flat()，flatMap()

将数组扁平化处理，返回⼀个新数组，对原数据没有影响
flat() 默认只会"拉平"⼀层，如果想要"拉平"多层的嵌套数组，可以将 flat() ⽅法的参数写成⼀个整数，表⽰想要拉平的层数，默认为1
flatMap() ⽅法对原数组的每个成员执⾏⼀个函数相当于执⾏ Array.prototype.map() ，然后对返回值组成的数组执⾏ flat() ⽅法。该⽅法返回⼀个新数组，不改变原数组
flatMap() ⽅法还可以有第⼆个参数，⽤来绑定遍历函数⾥⾯的 this

scss 复制代码

[1, 2, [3, 4]].flat()                  // [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat(2)            // [1, 2, 3, 4, 5]
[2, 3, 4].flatMap((x) => [x, x * 2])   // [2, 4, 3, 6, 4, 8]

数组的空位

数组的空位指数组的某⼀个位置没有任何值。

ES6 则是明确将空位转为 undefined ，包括 Array.from ()、扩展运算符、 copyWithin() 、 fill() 、 entries() 、 keys() 、 find() 和 findIndex()

arr.sort()

ES6将 sort() 默认设置为稳定的排序算法
arr.sort()默认按照Unicode编码，从小到大进行排序，会改变原数组。
存在的致命缺陷：如果数组中包含数字，arr.sort()也会将其视为字符串处理，导致无法按数字大小正确排序。并没有按数字的大小进行排序，通常无法满足我们对数组的排序需求！
给sort()添加一个回调函数，根据回调函数的返回值来自定义排序规则
‌限制‌ ：arr.sort()会直接修改原数组，不会返回一个新的数组。如果需要保留原数组不变，可以先复制原数组再进行排序。

升序排列‌ ：回调函数返回负数时，元素a在b前面；返回0时，元素相等；返回正数时，元素b在a前面。例如，.sort((a, b) => a - b) 。

‌降序排列‌ ：回调函数返回正数时，元素b在a前面；返回0时，元素相等；返回负数时，元素a在b前面。例如，.sort((a, b) => b - a)。

‌字符串和数字混合排序‌ ：当数组中包含多种数据类型时（如字符串和数字），可以通过自定义排序规则来实现混合排序。例如，['c', 'a', 'f', 'b', 1, 10, 2, 12].sort((a, b) => { if (typeof a = 'number' && typeof b = 'number') { return a - b; } else { return a.localeCompare(b); } }) 可以实现先按数字排序，再按字符串排序。