JavaScript集合引用类型 - Array

es数组也是一组有序的数据

创建数组

与对象一样，在使用数组字面量表示法创建的数组不会调用Array构造函数

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

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() 把一组参数转换成数组

console.log(Array.of(1,2,3));
console.log(Array.of(undefined));

数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位（hole），es6规范每个空位的值为undefined

let options=[,,,,,];//包含5个元素的数组
for(const option of options){
    console.log(option===undefined);//true,true,true,true,true
}

数组索引

数组元素的数量保存在length属性中，通过修改length可以从数组末尾删除/添加元素

let colors=["red", "blue", "green"];
colors.length=2;
console.log(colors[2]);//undefined

colors[colors.length]="t";//在数组末尾添加元素

检测数组

console.log(Array.isArray("jj"))//false
console.log(Array.isArray([1,2]))//true

迭代器方法

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

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();

转换方法

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

console.log(colors.join(" || "));//red || blue || green

栈方法

栈：一种限制插入和删除的数据结构，先进后出

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);

队列方法

队列在列表末尾添加数据，从列表开头获取数据

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

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

//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

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()方法使用了断言函数

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

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()，两个方法仅仅是遍历顺序不一样

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);