剑指前端（前端入门笔记系列）——数组（方法）

数组——方法

 

之前简单介绍了数组的基本语法，因为其操作局限性，所以掌握好数组的各方法是很重要的。

 

push()——原数组改变

参数：新增元素1，新增元素2。。。。。。

功能：在数组的末尾添加一个或更多元素

返回：新数组的长度

var arr = ["ai-fisher",true];
console.log("原数组：" , arr);
result = arr.push(1,"2",nan);
console.log("操作后的原数组:" , arr);
console.log("操作的返回值:" , result);

 

unshift()——原数组改变

参数：新增元素1，新增元素2。。。

功能：在数组的开头添加一个或更多元素

返回：新数组的长度

var arr = ["ai-fisher",true];
console.log("原数组：" , arr);
result = arr.unshift(1,"2",nan);
console.log("操作后的原数组：" , arr);
console.log("操作的返回值：" , result);

 

pop()——原数组改变

参数：无

功能：删除最后一个元素

返回：被删除的元素

var arr = ["ai-fisher",true,1,undefined,{},nan,null,2];
console.log("原数组：" , arr);
result = arr.pop();
console.log("操作后的原数组：" , arr);
console.log("操作的返回值：", result);

 

shift()——原数组改变

参数：无

功能：删除第一个元素

返回：被删除的元素

var arr = ["ai-fisher",true,1,undefined,{},nan,null,2];
console.log("原数组：" , arr);
result = arr.shift();
console.log("操作后的原数组：" , arr);
console.log("操作的返回值：" , result);

 

splice()——原数组改变

参数：所有参数可选

功能：

（1）不传参数：无操作

var arr = ["ai-fisher",true,1,undefined,{},nan,null];
console.log("原数组：" , arr);
result = arr.splice();
console.log("操作后的原数组：" , arr);
console.log("操作的返回值" , result);

（2）传一个参数：表示从索引为这个参数的数据开始删除，直到数组结束

var arr = ["ai-fisher",true,1,undefined,{},nan,null];
console.log("原数组：" , arr);
result = arr.splice(2);
console.log("操作后的原数组：" , arr);
console.log("操作的返回值" , result);

（3）传两个参数：以第一个参数为索引开始删，往后总共删除第二个参数个

var arr = ["ai-fisher",true,1,undefined,{},nan,null];
console.log("原数组：" , arr);
result = arr.splice(2,4);           
console.log("操作后的原数组：" , arr);
console.log("操作的返回值" , result);

（4）三个及以上：在两个参数的操作基础上，将第三个参数或第三个及之后的所有参数新增到开始删除的位置处，相当于选取一些元素用指定元素来替换。特别地，当第二个参数为0时，相当于在开始删除的位置新增元素

var arr = ["ai-fisher",true,1,undefined,{},nan,null];
console.log("原数组：" , arr);
console.log("第一次操作的返回值：" , arr.splice(2,4,"abc"));     //替换
console.log("第一次操作后的原数组：" , arr);
console.log("第二次操作的返回值：" , arr.splice(2,0,"1111",2222,nan));  //新增
console.log("第二次操作后的原数组：" , arr);

返回：删除的元素组成的数组

 

sort()——原数组改变

参数：所有参数可选

功能：

（1）不传参数：按字符的排序规则（逐位比较），从小到大排列

var arr = [5,207,23,4,1970,6,9,7];
console.log("原数组：" ,arr);
result = arr.sort();
console.log("操作的返回值：" , result);
console.log("操作后的原数组" , arr);

（2）传一个参数：参数为回调函数function(a,b){函数体}，a 代表每一次执行匿名函数时，找到的数组中的当前项；b 代表当前项的后一项；

　　①函数体为return a-b;时，表示升序

var arr = [5,207,23,4,1970,6,9,7];
console.log("原数组：" ,arr);
result = arr.sort(function(a,b){
    return a-b;
});
console.log("操作的返回值：" , result);
console.log("操作后的原数组" , arr);

　　②函数体为return b-a;时，表示降序

var arr = [5,207,23,4,1970,6,9,7];
console.log("原数组：" ,arr);
result = arr.sort(function(a,b){
    return b-a;
});
console.log("操作的返回值：" , result);
console.log("操作后的原数组" , arr);