es数组也是一组有序的数据
创建数组
与对象一样,在使用数组字面量表示法创建的数组不会调用Array构造函数
代码语言:javascript复制let arr1=[];//等价于let arr1=new Array()
let arr2=["1", "2"];//包含2个元素的数组, 等价于let arr2=new Array("1", "2")
let arr3=new Array(2);//length为2的数组
from()和of()
es6新增两个创建数组的静态方法
from()
代码语言:javascript复制console.log(Array.from("abcd"));//["a", "b", "c", "d"]
//通过集合,映射创建数组
let m=new Map().set(1, 2).set(3, 4);
let s=new Set().add(1).add(2).add(3);
console.log(Array.from(m));//[[1, 2], [3, 4]]
console.log(Array.from(s));//[1, 2, 3]
//浅复制
let a1=[1,2,3];
let a2=Array.from(a1);
console.log(a2);
console.log(a1===a2);//false
//可变参数
function getArgsArray(){
return Array.from(arguments);
}
console.log(getArgsArray(1,2,3));
of() 把一组参数转换成数组
代码语言:javascript复制console.log(Array.of(1,2,3));
console.log(Array.of(undefined));
数组空位
使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole),es6规范每个空位的值为undefined
代码语言:javascript复制let options=[,,,,,];//包含5个元素的数组
for(const option of options){
console.log(option===undefined);//true,true,true,true,true
}
数组索引
数组元素的数量保存在length属性中,通过修改length可以从数组末尾删除/添加元素
代码语言:javascript复制let colors=["red", "blue", "green"];
colors.length=2;
console.log(colors[2]);//undefined
colors[colors.length]="t";//在数组末尾添加元素
检测数组
代码语言:javascript复制console.log(Array.isArray("jj"))//false
console.log(Array.isArray([1,2]))//true
迭代器方法
代码语言:javascript复制let colors=["red", "blue", "green"];
//keys()返回数组的迭代器
console.log(Array.from(colors.keys()));//[0,1,2]
//values()返回数组元素的迭代器
console.log(Array.from(colors.values()));//["red", "blue", "green"]
//entries()返回索引/值对对迭代器
console.log(Array.from(colors.entries()));//[[0,"red"], [1, "blue"], [2,"green"]]
//解构
for(const [idx, element] of colors.entries()){
console.log(idx);
console.log(element);
}
复制和填充方法
es6新增了两个方法:批量复制copyWithin(), 填充数组fill()
代码语言:javascript复制let colors=[1,1,1,1,1];
//用"red"填充整个数组
console.log(colors.fill("red"));//[red,red,red]
colors.fill(0);//重置
//用"red"填充索引大于等于1的
console.log(colors.fill("red", 1));//[0, "red", "red", "red", "red"]
colors.fill(0);//重置
//用"red"填充索引大于等于1, 且小于3的
console.log(colors.fill("red", 1, 3));//[0, "red", "red", 0, 0]
colors.fill(0);//重置
//与fill()不同,copyWithin()会按照指定范围浅复制数组中的部分内容,然后插入到指定索引开始的位置
let ints, reset=()=>ints=[1,2,3,4,5,6,7];
reset();
console.log(ints.copyWithin(2, 0));//从ints中复制索引0开始的内容,插入到索引2开始的位置, [1, 2, 1, 2, 3, 4, 5]
reset();
console.log(ints.copyWithin(2, 0, 3));//从ints中复制 索引0开始到3结束 的内容,插入到索引2开始的位置, [1, 2, 1, 2, 3, 6, 7]
reset();
转换方法
代码语言:javascript复制let colors=["red", "blue", "green"];
console.log(colors.toString());//red,blue,green
console.log(colors.toLocaleString());//red,blue,green
console.log(colors);//["red", "blue", "green"]
alert(colors);//red,blue,green
let p1={
toLocaleString(){
return "p1 local string";
},
toString(){
return "p1 string"
}
}
let p2={
toLocaleString(){
return "p2 local string";
},
toString(){
return "p2 string"
}
}
let ps=[p1, p2];
console.log(ps.toString());//p1 string,p2 string
console.log(ps.toLocaleString());//p1 local string,p2 local string
alert(ps);//p1 string,p2 string
继承toLocaleString()/toString()都返回数组值的逗号分隔的字符串,如果想使用其他分隔符,则可以使用join()方法
代码语言:javascript复制console.log(colors.join(" || "));//red || blue || green
栈方法
栈:一种限制插入和删除的数据结构,先进后出
代码语言:javascript复制let ids=[1, 2, 3];
ids.push(4, 5);//在在数组末尾添加
ids.push(6);//在在数组末尾添加
console.log(ids);
let end=ids.pop();//弹出末尾的一个
console.log(end);
console.log(ids);
队列方法
队列在列表末尾添加数据,从列表开头获取数据
代码语言:javascript复制let ids=[1,2,3,4,5];
ids.push(6);//在数组末尾添加元素
ids.unshift(9,8,7);//在数组开头添加元素
console.log(ids);
let first=ids.shift();//弹出列表中第一个
console.log(first);
console.log(ids);
排序方法
数组有两个方法可以用来对元素重新排序:reverse(), sort()
代码语言:javascript复制let ids=[1,2,3,5];
//反转数组元素
console.log(ids.reverse());//[5,4,3,2,1]
let ids2=[0,1,5,10,15];
//console.log(ids2.sort(compare));//[15, 10, 5, 1, 0]
console.log(ids2.sort((a, b)=>a<b ? 1 : (a>b ? -1 : 0) ));//简写,[15, 10, 5, 1, 0]
function compare(value1, value2){
if(value1<value2){
return 1;
}else if(value1>value2){
return -1;
}else return 0;
}
操作方法
concat(), slice(), splice()
代码语言:javascript复制//concat()
let ids=[1,2,3];
//在末尾添加数组
console.log(ids.concat([5,6]).concat(7,8));
//slice()
let ids2=[1,2,3,4,5,6];
//截取数组的一部分
console.log(ids2.slice(1));//[2, 3, 4, 5, 6]
console.log(ids2.slice(1, 4));//[2, 3, 4]
//splice()
let ids3=[1,2,3,4];
let removed=ids3.splice(0, 1);//删除第一项
console.log(removed);//[1]
console.log(ids3);//直接改变了原数组,[2, 3, 4]
let ids4=[1,2,3,4];
removed=ids4.splice(1, 0, "5", "6");//在位置1插入"5","6"两个元素
console.log(removed);//空数组,[]
console.log(ids4);//直接改变了原数组,[1, "5", "6", 2, 3, 4]
let ids5=[1,2,3,4];
ids5.splice(1, 1, "7", "8");//在位置1插入"7","8"两个元素, 删除一个元素
console.log(removed);//空数组,[]
console.log(ids5);//直接改变了原数组,[1, "7", "8", 3, 4]
搜索和位置方法
es提供两类搜索数组的方法:按严格相等搜索 和按断言函数搜索
3个严格相等的搜索方法
indexOf(), lastIndexOf()返回元素所在的索引,未找到返回-1
代码语言:javascript复制let ids=[1,2,3,4,5,4];
console.log(ids.indexOf(4));//从开头搜索,3
console.log(ids.lastIndexOf(4));//从末尾搜索,5
console.log(ids.includes(4));//从开头搜索,true
断言函数
find(),findIndex()方法使用了断言函数
代码语言:javascript复制const people=[{name:"name1", age:11}, {name:"name2", age:22},];
console.log(people.find((element, index, array)=>element.age<12));//{name: "name1", age: 11}
console.log(people.findIndex((element, index, array)=>element.age<12));//0
迭代方法
遍历数组,非常重要的知识点
es为数组定义了5个迭代方法:map(), forEach(), filter(), every(), some()
代码语言:javascript复制let ids=[1,2,3,4,5];
//每个item结果都返回true,结果才是true
let result=ids.every((item, index, array)=>item>2);
console.log(result);//false
//只要有一个item结果返回true,结果就是true
let result=ids.some((item, index, array)=>item>2);
console.log(result);//true
//筛选出大于2的
let result=ids.filter((item, index, array)=>{
return item>2;
})
console.log(result);//筛选出大于2的, [3, 4, 5]
//有返回值
let result=ids.map((item,index, array)=>{
//index, array 可以省略
console.log(item);
return item;
})
console.log(result);//[1, 2, 3, 4, 5]
//没有返回值
ids.forEach((item, index, array)=>{
//index, array 可以省略
console.log("value=" item " index=" index);
//console.log(array);
})
归并方法
es为数组提供2个归并方法:reduce(), reduceRight(),两个方法仅仅是遍历顺序不一样
代码语言:javascript复制let ids=[1,2,3,4];
//从第一项开始遍历至最后一项
let result=ids.reduce((prev, cur, index, array)=>prev cur);
console.log(result);
//从最后一项开始遍历至第一项
let result=ids.reduceRight((prev, cur, index, array)=>prev cur);
console.log(result);