JavaScript高级学习：ES6新特性07——数组在ES6中的使用

本文链接：https://blog.csdn.net/GAlbinus/article/details/116195241

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节第七章

前言

本文讲解数组在ES6中的使用。

提示：以下是本篇文章正文内容，下面案例可供参考

数组在ES6中的使用

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

求数组的最大值

ES5的方式求数组最大值

let max=Math.max.apply(Math,arr);
console.log(max);   //9

ES6的方式使用数组扩展运算符求最大值

let max2=Math.max(...arr);
console.log(max2);  //9

ES6扩展运算符的使用

扩展运算符传参

function f(x,y) {
    console.log(x+y);
}

let arr2=[10,20];
f(arr2[0],arr2[1]);
f(...arr2);

扩展运算符操作伪数组

function f1() {
    console.log(arguments);		//Arguments(4) [2, 4, 6, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    let arr3=[...arguments];//固定写法：表示把伪数组转换为数组
    console.log(arr3);//[2, 4, 6, 8]
}
f1(2,4,6,8);

复制数组

传统复制数组

直接赋值的方式复制数组不会再内存中开辟新空间，此时arr4和arr5都指向同一个内存地址。

let arr4=[10,20,30];
let arr5=arr4;
console.log(`arr4的值是:${arr4}`);	//arr4的值是:10,20,30
console.log(`arr5的值是:${arr5}`);	//arr5的值是:10,20,30

如果此时更改arr5中的数据，arr4会跟着一起变化。

arr5[0]=100;	
console.log(`arr4的值是:${arr4}`);		//arr4的值是:100,20,30
console.log(`arr5的值是:${arr5}`);		//arr5的值是:100,20,30

ES6中使用扩展运算符复制数组

如果此时更改arr7中的数据，arr6不会跟着一起变化。

console.log(`arr6的值是:${arr6}`); //arr6的值是:40,50,60
console.log(`arr7的值是:${arr7}`); //arr7的值是:40,50,60
arr7[0]=400;
console.log(`arr6的值是:${arr6}`); //arr6的值是:40,50,60
console.log(`arr7的值是:${arr7}`); //arr7的值是:400,50,60

ES5中复制数组

let arr8=[7,8,9];
let arr9=arr8.map(function (item) {
    return item;
});
console.log(`arr8的值是:${arr8}`);		//arr8的值是:7,8,9
console.log(`arr9的值是:${arr9}`);		//arr9的值是:7,8,9
arr9[0]=700;
console.log(`arr8的值是:${arr8}`);		//arr8的值是:7,8,9
console.log(`arr9的值是:${arr9}`);		//arr9的值是:700,8,9

合并数组

let a1=["a","b","c"];
let a2=["d","e","f"];
let a3=[1,2,4];

ES6方案合并数组

let a4=[...a1,...a2,...a3];
console.log(a4);		//["a", "b", "c", "d", "e", "f", 1, 2, 4]

ES5方案合并数组

let a5=a1.concat(a2,a3);
console.log(a5);		//["a", "b", "c", "d", "e", "f", 1, 2, 4]

配合解构赋值拆分数组

let [a6,a7]=a1;
console.log(a6,a7);		//a b

这种写法要求扩展运算符必须在解构参数的最后一个，否则报错

let [a8,...a9]=a1;
console.log(a8);//a
console.log(a9);//["b","c"]

数组新增函数

Array.from()函数

Array.from()函数用来将伪数组转换为真数组

let obj={
    "0":"A",
    "1":"B",
    "2":"C",
    length:3
};
console.log(obj);//{0: "A", 1: "B", 2: "C", length: 3}

扩展运算转换伪数组

let arr=[...obj];
console.log(arr);//["A", "B", "C"]

from函数转换伪数组

let arr2=Array.from(obj);
console.log(arr2);//["a", "b", "c"]

function f() {
    /*arguments伪数组可以使用扩展运算符转换*/
    let a1=[...arguments];
    let a2=Array.from(arguments);
    console.log(a1);
    console.log(a2);
}
f("a","b","c");

Array.of()函数

let arr3=Array.of(1,3,5);
console.log(arr3);		//[1, 3, 5]

let arr4=new Array(1,3,5);
console.log(arr4);		//[1, 3, 5]

Array构造函数的参数只有一个且类型是number类型的整数时，这个参数表示的是设置数组长度

let arr5=new Array(5);
console.log(arr5);	// [empty × 5]
/*Array.of函数就是Array构造函数的一个补充用法*/
let arr6=Array.of(5);
console.log(arr6);	// [ 5]

Array.fill（）函数

Array.fill填充数组

let arr3=Array.of(1,3,5);
let arr7=arr3.fill("a");
console.log(arr7);	//["a", "a", "a"]

用可乐替换数组下标3开始到6结束的内容

let arr8=[1,2,5,7,9,11,13,15,17,19];
let arr9=arr8.fill("可乐",3,6);
console.log(arr9);

copyWithin函数

内部拷贝

举例使用：

把下标0的值替换为下标3开始到下标4结束的值

let arr=[1,2,3,4,5];
arr.copyWithin(0,3,4);  //该方法时直接操作数组，不会产生新数组
console.log(arr);//[4, 2, 3, 4, 5]

从下标开始替换内容为下标2到4的值，也就算说替换的值是按照第一个参数开始一次向下排列的

let arr2=[6,7,8,9,10];
arr2.copyWithin(1,2,4);
console.log(arr2); // [6,7,8,9,9,10]

参数为负数的情况:参数为负数表示从后向前找，数组最后的一项值表示-1

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

indexOf和includes

搜索数组

let arr4=[1,5,7,9,20,16,8,7];
console.log(arr4.indexOf(20)); //index方法找到返回下标4
console.log(arr4.indexOf(25)); //index方法找不到返回下标-1
console.log(arr4.indexOf(7));   //index方法返回第一个找到的值的下标2
console.log(arr4.indexOf(7,3));   //index方法第二个参数默认值是0。表示的是从哪里开始查找，结果是7
console.log(arr4.indexOf(7,-1));   //index方法第二个参数设置负数，表示从后向前的顺序。结果是7
console.log(arr4.indexOf(7,-10));   //index方法第二个参数的负数的绝对值大于长度时，该参数无效，等价于0，结果是2

includes的用法和indexOf完全一致，区别在于includes的返回值是布尔类型

console.log(arr4.includes(20)); //true
console.log(arr4.includes(25)); //false
console.log(arr4.includes(7));   //true
console.log(arr4.includes(7,3));   //true
console.log(arr4.includes(7,-1));   //true
console.log(arr4.includes(7,-10));   //true

flat拉平数组

flat函数表示拉平数组，参数默认为1表示把内部一层数组拉平，设置的值就表示内部需要被拉平的层级

87  =0let arr5=[1,3,5,7,9];       //一维数组
let arr6=[[1,3,5],[2,4,6],[8],[7]];       //二维数组
let arr7=[[1,3,5],[2,[4,6]],[8],[7]];       //三维数组

console.log(arr5);
console.log(arr6);
console.log(arr6.flat());   //拉平二维数组
// [1, 3, 5, 7, 9]
console.log(arr7);
console.log(arr7.flat(2));   //拉平三维数组
//[1, 3, 5, 2, 4, 6, 8, 7]
console.log(arr7.flat(Infinity));   //设置参数为Infinity表示内部层级全部拉平
//[1, 3, 5, 2, 4, 6, 8, 7]

拉平数组的格式化操作

flatMap函数只能操作一维数组，他只操作自己回调函数中的数

let arr5=[1,3,5,7,9];
let arr8=arr5.map(v=>v+1);
console.log(arr8);	//[2, 4, 6, 8, 10]


let arr9=arr5.map(v=>[v+1]);	
console.log(arr9);	
/*
0: [2]
1: [4]
2: [6]
3: [8]
4: [10]
*/
//flatMap函数只能操作一维数组，他只操作自己回调函数中的数
let arr10=arr5.flatMap(v=>[v+1]);
console.log(arr10);
[2, 4, 6, 8, 10]