六、ES6中数组的扩展

扩展运算符

原地展开一个数组

//  定义一个数组
var arr = [1, 2, 3, 4];
// 直接打印数组内每个元素
console.log(...arr); // 1 2 3 4

函数调用时，逐个传入

//  定义一个数组
var arr = [1, 2, 3, 4];
// 函数内取每个参数
function fn(a, b) {
  console.log(a + b);
}
fn(...arr); // 结果3  实际传入的为数组第一个和第二个

复制数组

深复制：复制数组中的元素内容（数据）
浅复制：复制数组的内存地址

ES6的复制数组为深复制，即复制出的数组与原数组数据不会互相影响。

var arr1 = [1, 2, 3, 4, 5];
// 写法1-深复制
var arr2 = [...arr1];
arr2[2] = 6;
// 写法2
var [...arr3] = arr1;
arr3[2] = 6;
console.log(arr1, arr2, arr3); //[ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]

合并数组

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

var arr3 = [...arr1, ...arr2];

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

与结构赋值结合

1
2
3

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

字符串转化为数组

1 2	var str = "xiaokang"; console.log([...str]); // ["x", "i", "a", "o", "k", "a", "n", "g"];

扩展运算符必须与可迭代的对象配合使用。

替代`apply()`方法

call()与apply()方法的区别
call(this,arg1,arg2,arg3,...)
接受多个参数
apply(this,arr)
接受参数为一个数组

// 定义一个函数
function fn() {
  console.log("this is function.");
}
// 定义数组
let arr = [1, 2, 3];
fn(...arr);

Array提供的方法

from()

用于从一个类数组或可迭代对象中创建一个新的数组实例。

// 构建一个类数组对象
var obj = {
  0: "张无忌",
  1: "周芷若",
  2: "赵敏",
  length: 3,
};

console.log(Array.from(obj)); //[ '张无忌', '周芷若', '赵敏' ]

<body>
    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
    </ul>
    <script>
        var elems = document.getElementsByTagName('li')
        console.log(...elems);
        console.log(Array.from(elems));
    </script>
</body>

of()
创建一个具有可变数量参数的新数组实例，而不考虑参数的数量和类型。
1
2
console.log(Array.of(5)); // [ 5 ]
console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]
此方法不会因为传入参数个数不同而导致不同行为的问题。

Array对象的方法

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

方法用于浅复制数组的一部分到同一数组中的另一个位置，井返回它，而不修改其大小。

let arr = [1, 2, 3, 4, 5];

/**
 * 检索数组中 start到end区间的内容 然后复制到数组中的指定索引值
 * 不能改变数组的长度
 * 修改了原数组
 */
console.log(arr.copyWithin(4, 0, 4)); // [ 1, 2, 3, 4, 1 ]

target
0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
start
0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
如果 start 被忽略，copyWithin 将会从0开始复制。
end
0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。

find()和findIndex()

find()方法首先将数组遍历。

let arr = [1, 2, 3, 4, 5];
/**
 * find方法调用的回调函数
 * @param {any} element 数组内容的每一个元素
 * @param {any} index 数组内容的索引
 * @param {any} array 数组
 * @returns {any} 返回符合表达式的第一个元素的值，如果没有则返回undefined
 */
var result = arr.find(function (element, index, array) {
  console.log(element);
  return index > 3;
});

console.log(result);

findIndex()方法与find()方法几乎一致。findIndex()返回符合条件的元素的索引值，如果没有则返回-1。

fill()方法

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

let arr = [1, 2, 3, 4, 5];

/**
 * @param {any} 6 填充的值
 * @param {any} 1 开始填充的位置
 * @param {any} 3 结束填充的位置（不包含此索引）
 */
var result = arr.fill(6, 1, 3);
console.log(result, arr); //[ 1, 6, 6, 4, 5 ] [ 1, 6, 6, 4, 5 ]

includes
用于判断一个数组是否包含一个指定的值。根据情况，如果包含则返回true，否则返回false
1
2
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2, 2)); // false
- 第一个参数表述需要查找的元素值。
- 第二个参数表示开始查找的索引位置，如果为负数，则倒序。