创建数组
便捷创建
var arr = [];
var arr = [1,2,3];
new Array()
var arr = new Array();
var arr = Array();
var arr = Array(3);//[empty × 3];仅写一个数字num,相当于创建length===num的空数组
var arr = Array(1,2,3);//等同于var arr = [1,2,3]
Array.of()
var arr = Array.of(1,2,3);//[1,2,3]
var arr = Array.of(3);//[3]
//等同于arr=[]这种方式
Array.from
var arr = Array.from('hello');//['h','e','l','l','o'];
var arr = Array.from( [1,2,3] , (x) = > x * x );//[1,4,9]
//定义:用于将伪数组转换为真正的数组(不改变原对象,返回新的数组)
//Array.from(input,map,context); input伪数组,map类似map()方法,对每个元素进行处理后放入生成的新数组,context: 绑定map中用到的this
改变原数组的九个方法
arr.pop()删除并返回数组的最后一个元素
arr.push()向数组末尾添加元素,并返回数组的长度
arr.shift()删除并返回数组的第一个元素
arr.unshift()向数组头部添加元素,并返回数组的长度
arr.reverse()颠倒数组元素顺序
arr.splice()添加、删除/替换数组元素
语法:
arr.splice(index,length,item);
参数 | 描述 | 详解 |
---|---|---|
index | 开始操作的下标(位置),操作时这个位置是在arr[index]前,arr[index-1]后的 | 负数从数组结尾处往前数,’-1’和’arr.length-1’的指向位置是一样的 |
length | 操作的长度,用于删除或者替换 | 如果是0,则不会删除或替换,只会在index位置添加item |
item | 用于替换或添加的元素(可以是多个) | length===0时是添加,!==0时是替换 |
添加
var arr = [1,2,3];//[1,2,3]
var ArrRemove = arr.splice(1,0,'a');//向数组arr的下标1前(arr[1]===2),往后数0个元素,替换成'a'
console.log(ArrRemove);//[],因为没有元素被替换,也就是没有元素没删除,所以返回[]
console.log(arr);//[1,'a',2,3];原数组被改变
//上述操作为什么在1和2之间添加了'a'解释
//此时index===1,length===0,item==='a'
//开始操作的位置,在arr[index]前,arr[index-1]后,也就是1和2之间
//在这个位置往后数0个元素,替换成item(也就是'a')
//就做到了再数组元素1和2之间添加了元素'a'
//添加多个元素
var arr=[1,2,3];
arr.splice(2,0,'a','b','c');
console.log(arr);//[1, 2, "a", "b", "c", 3]
删除
var arr = [1,2,3,4,5,6];
var ArrRemove = arr.splice(2,2);//向数组arr的下标2前(arr[2]===3),往后数2个元素,替换成空(因为item不存在),此处视为删除
console.log(ArrRemove);//[3, 4]
console.log(arr);//[1, 2, 5, 6]
替换
var arr = [1,2,3,4,5,6];
var ArrRemove = arr.splice(2,2,'a')//向数组arr的下标2前,往后数两个元素,替换成'a'
console.log(ArrRemove);//[3, 4]
console.log(arr);//[1, 2, "a", 5, 6];此处3,4被替换成了'a'
总结:
- arr[index]前的位置,往后数length个元素,替换成item
- 往后数0个元素,替换成item视为添加
- 往后数length个元素,替换成空视为删除
- 往后数length个元素,替换成item视为替换
arr.sort()排序
没有比较函数时,默认按字母升序,不是字符串则将元素转为字符串的万国码Unicode进行比较排序
比较函数的两个参数:
- sort的比较函数有两个默认参数,要在函数中接收这两个参数,这两个参数是数组中两个要比较的元素,通常我们用 a 和 b 接收两个将要比较的元素;
- 若比较函数返回值<0,那么a将排到b的前面;
- 若比较函数返回值=0,那么a 和 b 相对位置不变;
- 若比较函数返回值>0,那么b 排在a 将的前面;
升序降序
//升序
var arr = [1,3,2];
arr.sort(function (a,b) {
return a-b
})
console.log(arr);//[1, 2, 3]
//降序
var arr = [1,3,2];
arr.sort(function (a,b) {
return b-a
})
console.log(arr);//[3, 2, 1]
//注解,参数a,b理解成相邻的前后两个元素,如果返回值小于0则将a放在b前,大于0则将b放在a前
//默认返回值小于0,a在前的情况下
//升序时,为使返回值a-b<0,需要a<b,达到小的在前面的目的
//降序时,为使返回值b-a<0,需要a>b,达到大的在前面的目的
//默认返回值大于0,b在前的情况下
//升序时,为使返回值a-b>0,需要b<a,达到小的在前面的目的
//降序时,为使返回值b-a>0,需要b>a,达到大的在前面的目的
多条件排序
//假使有这么一组数据,需要安装id的数值升序,id数值相等时,需age的数值降序
var arr = [ {id:10,age:2} , {id:5,age:4} , {id:6,age:10} , {id:9,age:6} , {id:2,age:8} , {id:10,age:9} ];
arr.sort(function(a,b){
if(a.id === b.id){// 如果id的值相等,按照age的值降序
return b.age - a.age
}else{ // 如果id的值不相等,按照id的值升序
return a.id - b.id
}
})
console.log(arr);
//0: {id: 2, age: 8}
//1: {id: 5, age: 4}
//2: {id: 6, age: 10}
//3: {id: 9, age: 6}
//4: {id: 10, age: 9}
//5: {id: 10, age: 2}
自定排序规则
//假使有这么一组数据,需要name是'Koro1'的排在前面
var arr = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
arr.sort(function(a,b){
if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ,-1<0 a排在b的前面
return -1
}else{ // 如果不是的话,a排在b的后面
return 1
}
})
console.log(arr);
// [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}]
arr.copyWithin() 复制数组本身元素替换数组本身元素
语法:
copyWithin( index , CopyStart , CopyEnd );
参数 | 描述 | 详解 |
---|---|---|
index | 开始操作的位置(类同splice的index) | |
CopyStart-CopyEnd | 从arr[CopyStart]到arr[CopyEnd]复制替换内容(复制得到内容类同于spliece用于替换的item) | 注意两个都是下标,没有长度 |
- 复制本身的一些元素作为item,然后替换数组指定位置后的一些元素
- 替换的长度视拷贝的长度而定
- 均可负值
- 操作后数组长度是不变的
var arr = [1,2,3,'a','b','c','刘','关','张'];
arr.copyWithin(0,3,6);
console.log(arr);//["a", "b", "c", "a", "b", "c", "刘", "关", "张"]
//从arr[3]前复制到arr[6]前,复制了这个三个元素'a','b','c'
//在arr[0]前往后数进行替换,复制了三个,就替换三个,123被替换成了abc
arr.fill()替换数组的元素
语法:
fill(item,StartIndex,EndIndex);
理解成和上面splice和copyWithin一样的替换行为就行了
参数 | 描述 | 详解 |
---|---|---|
item | 填充元素 | |
StartIndex-EndIndex | 填充位置 | 此处是下标 |
//案例1
var arr = [1,2,3,4,5,6]
arr.fill('a');
console.log(arr);//["a", "a", "a", "a", "a", "a"]
//案例2
var arr = [1,2,3,4,5,6]
arr.fill('a',2,4);
console.log(arr);//[1, 2, "a", "a", 5, 6]
//案例3
var arr = new Array(4);
arr.fill('yes')
console.log(arr);//["yes", "yes", "yes", "yes"]
//案例4
var arr = new Array(4);
arr.fill(null)
console.log(arr);//[null, null, null, null]
明天再写后面的