[ES6] ES6 新特性之数组

扩展运算符

扩展运算符(…)允许一个表达式在原地展开，当需要多个参数(比如函数调用时)或者多个值( 比如字面量数组)。

理解：

得到数组的每一项

ES5 ：

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

ES6 ：

let arr = [1, 2, 3, 4, 5];
console.log(...arr); // 1 2 3 4 5

扩展运算符主要用于函数调用的参数(形参与实参)。

ES5：

function fn (a, b) {
    console.log(a + b);
}
fn(a, b); // 3

ES6：

function fn (a, b) {
    console.log(a + b);
}
let args = [1, 2];
fn(...args); // 3

理解：

ES6 传参方便，容易，ES5 传一个数组容易数组越界、

替代 apply() 方法

由于扩展运算符可以展开数组，所以不再需要apply()方法将数组转为函数的参数。

function f(x, y,z){}
var, args= [0, 1,2];
f.apply(null, args);// ES5的写法
f(...args);// ES6的写法

扩展运算符的应用

• 复制数组

  let arr1 = [1, 2, 3, 4, 5];
  let [...arr2] = arr1;
  console.log(arr2); // [ 1, 2, 3, 4, 5 ]
  arr2[2] = 6;
  console.log(arr2, arr1); //[ 1, 2, 6, 4, 5 ] [ 1, 2, 3, 4, 5 ]
  

  let arr1 = [1, 2, 3, 4, 5];
  let [...arr2] = arr1
  console.log(arr2); // [ 1, 2, 3, 4, 5 ]
  arr2[2] = 6;
  console.log(arr2, arr1); //[ 1, 2, 6, 4, 5 ] [ 1, 2, 3, 4, 5 ]
  

  和ES5的区别：ES6没有浅拷贝，深拷贝变得不复杂了

• 合并数组

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  // ES5 合并数组的方法
  console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
  // 利用扩展运算符
  console.log([...arr1, ...arr2]); // [ 1, 2, 3, 4, 5, 6 ]
  

  和ES5的区别：更简化了

• 与解构赋值结合

  数组截串

  ES5：

  let arr = [1, 2, 3, 4, 5];
  let v = arr[0];
  let list = arr.slice(1);
  console.log(v, list); // 1 [ 2, 3, 4, 5 ]
  

  ES6：

  let arr = [1, 2, 3, 4, 5];
  let [v, ...list] = arr
  console.log(v, list); // 1 [ 2, 3, 4, 5   ]
  

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

  let arr = [1, 2, 3, 4, 5];
  let [...list, v] = arr;
  console.log(v, list); // Rest element must be last element
  

• 字符串转换为数组

  let str = 'hebeibaoding'
  // ES5
  console.log(str.split(''));
  // ES6
  console.log([...str]);
  

注意：

• 扩展运算符必须与可迭代的对象配合使用
• 关联数组，不会报错，但是没有结果

Array 提供的方法

Array.from() 方法

Array.from() 方法用于从一个类似数组 (类数组) 或可迭代对象中创建一个 新的数组实例。

// 构建一个类数组对象 - 1. 可迭代; 2. 有效的length
let obj = {
    0: '张无忌',
    1: '周芷若',
    2: '赵敏',
    3: '小昭',
    length: 4
}
// ES5
console.log([].slice.call(obj)); // [ '张无忌', '周芷若', '赵敏', '小昭' ]
// ES6
console.log(Array.from(obj)); // [ '张无忌', '周芷若', '赵敏', '小昭' ]

值得注意的是，扩展运算符 ( … ) 也可以将某些数据结构转为数组。

function fn () {
    // arguments对象-用于接收所有的实参.
    console.log(...arguments);
}
fn(1, 2, 3);

Array.of() 方法

Array.of() 方法用于创建一个 具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

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

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array() 的行为有差异。

console.log(Array(1, 2, 3)); // [ 1, 2, 3 ]
// new Array()如果传递一个参数时，表示length
console.log(Array(5)); // [ <5 empty items> ]

值得注意的是，Array.of() 方法如果没有参数，则返回一个空数组。

console.log(Array.of()); // []
console.log(new Array()); // []
console.log(Array()); // []

Array 对象的方法

copyWithin() 方法

copyWithin() 方法用于浅拷贝数组的一部分到同一数组中的另一 个 位置，并返回它，而不修改其大小。

语法结构：

arr.copyWithin(target[, start[, end]])

• target： 0为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
• start：0为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
• end：0为基底的索引，开始复制元素的结束位置。copyWithin() 方法将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数，end 将从末尾开始计算。

该方法改变了的数组。

let arr = [1,2,3,4,5];
console.log(arr.copyWithin(3,0,4)); //[ 1, 2, 3, 1, 2 ]

这个方法是一个浅拷贝

let arr = [1,2,3,4,5];
let arr1 = arr.copyWithin(2)
console.log(arr1); // [ 1, 2, 1, 2, 3 ]
arr1[0] = 6;
console.log(arr1); // [ 6, 2, 1, 2, 3 ]
console.log(arr); //[ 6, 2, 1, 2, 3 ]

因为这个方法没有改变内存地址，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SS59nguM-1603932035396)(imgs\copyWithin()]方法原理.png)

find() 方法

find()方法返回数组中满足提供的测试函数的第一个 元素的值，否则返回 undefined。

语法结构：

arr.find(callback[, thisArg])

• callback 参数: 调用 find() 方法时的回调函数

  function(element,index, array) {}
  

  • element：指定数组中每一项元素的值
  • index：指定数组中每一项元索的索引值
  • array：指定数组本身

• thisArg：可选，指定 callback 的 this 参数。

• 特点：数组调用 find() 方法,将指定数组进行遍历

let arr = [1,2,3,4,5]
var result = arr.find(function (element,index,array) {
    return index > 1;
})
console.log(result); // 3

findIndex() 方法

findIndex()方法返回数组中满足提供的测试函数的第一个 元素的索引值，否则返回 undefined。

语法结构：

arr.findIndex(callback)

• callback 参数: 调用 find() 方法时的回调函数

  function(element,index, array) {}
  

  • element：指定数组中每一项元素的值
  • index：指定数组中每一项元索的索引值
  • array：指定数组本身

• 特点：数组调用 find() 方法,将指定数组进行遍历

• 返回符合表达式结果的第一个元素的索引值

let arr = [1,2,3,4,5]
let result = arr.findIndex(function (element,index,array) {
    return index > 1;
})
console.log(result)

和 ES5 的区别：ES6 比 ES5 里的 indexOf() 和 lastIndexOf() 较灵活了

fill() 方法

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引值。

语法结构：

arr.fill(value[, strart[, end]])

• 参数

  • value： 表示替换的内容(没有类型要求)
  • start： 表示替换开始的位置，默认值为0
  • end：表示替换结束的位置(不包含)，默认值为数组长度

• 作用：将指定内容替换指定数组中的指定位置

• 返回值：修改后的数组

let arr=[1,2,3,4,5];
var result = arr. fill(6,1,3);
console.log(result, arr) ;// [ 1, 6, 6, 4, 5 ] [ 1, 6, 6, 4, 5 ]

includes() 方法

includes() 方法用于判断一个数组是否包含一个指定的值。根据情况，如果包含则返回 true，否则返回 false。

语法结构：

arr.includes(searchElement, fromlndex);

• searchElement：需要查找的元素值。
• fromlndex:可选项，从该索引处开始查找searchElement。如果为负值，则按升序从 array.length - fromlndex 的索引开始搜索。默认为0。

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, 1)); // true
console.log(arr.includes(2, 2)); // false