[ES6]---数组的扩展（扩展运算符&&Array方法）的讲解

本文详细介绍了ES6中数组的扩展特性，包括扩展运算符的使用、数组复制、合并及字符串转换等操作。同时，还介绍了Array提供的新方法如Array.from()、Array.of()以及数组对象的方法如copyWithin()、find()、fill()等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组的扩展

扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。允许一个表达式在原地展开

// 定义一个数组
var arr = [1,2,3,4,5];
//将数组中的每一个元素打印在控制台
for(let i =0;i<arr.length;i++){
    console.log(arr[i]);
}

//利用扩展运算符

console.log(...arr);// 1 2 3 4 5

主要用于函数调用(形参和实参)

// 定义一个函数
function fn(a,b) {
    console.log(a + b);
}
fn(1,2)

// 利用扩展运算符
var args = [1,2]
fn(...args)

替代apply()方法

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

// 定义一个函数
function fn(a,b) {
    console.log(a+b);
}
var arr = [1,2]
//调用函数
fn(...arr)// 3
/*
     call()与apply(方法的区别:
    * call(this, arg1,arg2,arg3, ...)
        *接收参数为多个参数
    *apply(this, arr)
        *接收参数为一个数组
 */
fn.call(null,arr[0],arr[1]) // 3
fn.apply(null,arr)// 3

扩展运算符的应用

复制数组 –深复制
- 深复制
  - 复制数组中的元素内容(数据)
- 浅复制
  - 复制数组的内存地址

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

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

//ES5
/*
var arr2 = [];
for (var i=0; i<arr1.length; i++){
    arr2[i] = arr1[i];
}
console.log(arr2);
arr2[2] = 6;
console.log(arr2,arr1);
*/

//扩展运算符复制数组–深复制
var arr2 = [...arr1];
var [...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 ]

合并数组 – 浅拷贝

var arr1 = [1,2,3]
var 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 ]

与解构赋值结合

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

 */

//扩展运算符
/*
var [v,...list] = arr
console.log(v, list);// 1 [ 2, 3, 4, 5 ]

 */

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

var [...list,v] = arr
console.log(v, list);// SyntaxError: Rest element must be last element

字符串转换为数组

var str = 'hebei'
//ES5
console.log(str.split(''));// [ 'h', 'e', 'b', 'e', 'i' ]

//ES6
console.log([...str]);// [ 'h', 'e', 'b', 'e', 'i' ]

Array提供的方法

Array.from()方法

用于从—个类似数组的对象或可迭代对象中(包括ES6新增的Set和Map)创建一个新的数组实例

// 构建一个类数组对象– 1.可迭代;2.有效的length
var obj = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
/*
console.log(obj);// { '0': 'a', '1': 'b', '2': 'c', length: 3 }

for (var i=0; i<obj.length;i++){
    console.log(obj[i]);
}

 */
//ES5
console.log([].slice.call(obj))// [ 'a', 'b', 'c' ]

//ES6
console.log(Array.from(obj));// [ 'a', 'b', 'c' ]

//扩展运算符
// console.log([...obj]);// TypeError: obj is not iterable
console.log(...Array.from(obj));//a b c

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

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    /*
        HTMLCollection和NodeList称为类数丝
     */
    var elems = document.getElementsByTagName('li');
    // console.log(elems instanceof HTMLCollectionOf);
    console.log(...elems);
    console.log(Array.from(elems));
</script>
</body>
</html>

Array.of()方法

用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

// Array.of()如果传递一个参数时，表示一个元素内容
console.log(Array.of(5));//[5]
console.log(Array.of(1,2,3));// [1,2,3]

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

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

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

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

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

Array对象的方法

copyWithin()方法

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

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

作用
- 检索指定数组中从 start到end区间的元素，复制到当前数组中的指定索引值
参数
- target: 该参数的值最大等于当前数组的length属性值-1
- start: 表示当前截取开始的索引值
  - 如果当前参数值省略，自动从数组的开始位置进行截取
- end: 表示当前截取结束的索引值(不包含当前索引值的元素)
  - 如果当前参数值省略，自动截取到当前数组的最后
注意
- 该方法不能改变数组长度
- 修改了原有数组

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

find()与findlndex()方法

find()

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

arr.find(callback[,thisArg])

作用
- 返回find()方法的回调函数中符合表达式的第一个元素的值
参数
- callback:在数组每一项上执行的函数，该函数接收三个参数。
  - 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)

findIndex()方法

返回数组中满足提供的测试函数的第一个元素的索引值，否则返回-1。

arr.findIndex(callback[,thisArg])

作用
- 返回符合表达式结果的第一个元素的索引值
参数
- callback:在数组每一项上执行的函数，该函数接收三个参数。
  - element: 指定数组中每一项元素的值
  - index: 指定数组中每一项元索的索引值
  - array: 数组本身。
- thisArg:可选，指定callback的this参数。
特点
- 数组调用findIndex()方法,将指定数组进行遍历

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

fill()方法

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

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

作用
- 将指定内容替换指定数组中的指定位置
参数
- value:用来填充数组元素的值。
- start:可选项，起始索引，默认值为0。
- end:可选项，终止索引，默认值为this.length。
返回值
- 修改后的数组。

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()方法

用于判断-个数组是否包含一个指定的值。根据情况，如果包含则返回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, 2));//false