欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

剑指前端(前端入门笔记系列)——数组(方法)

程序员文章站 2022-05-15 13:32:56
数组——方法 数组——方法 之前简单介绍了数组的基本语法,因为其操作局限性,所以掌握好数组的各方法是很重要的。 push()——原数组改变 参数:新增元素1,新增元素2。。。。。。 功能:在数组的末尾添加一个或更多元素 返回:新数组的长度 var arr = ["AI-fisher",true]; ......
数组——方法
 
之前简单介绍了数组的基本语法,因为其操作局限性,所以掌握好数组的各方法是很重要的。
 
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);
剑指前端(前端入门笔记系列)——数组(方法)