数组操作详解

创建数组

便捷创建

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'

总结：

1. arr[index]前的位置，往后数length个元素，替换成item
2. 往后数0个元素，替换成item视为添加
3. 往后数length个元素，替换成空视为删除
4. 往后数length个元素，替换成item视为替换

arr.sort()排序

没有比较函数时，默认按字母升序，不是字符串则将元素转为字符串的万国码Unicode进行比较排序
比较函数的两个参数：

1. sort的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素；
2. 若比较函数返回值<0，那么a将排到b的前面;
3. 若比较函数返回值=0，那么a 和 b 相对位置不变；
4. 若比较函数返回值>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）	注意两个都是下标，没有长度

1. 复制本身的一些元素作为item，然后替换数组指定位置后的一些元素
2. 替换的长度视拷贝的长度而定
3. 均可负值
4. 操作后数组长度是不变的

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]

---

明天再写后面的

---

不改变原数组的8个方法

遍历的12个方法