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

2019-08-14 09:57:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

数组——方法
 
之前简单介绍了数组的基本语法,因为其操作局限性,所以掌握好数组的各方法是很重要的。
ES5-
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);

reverse()——原数组改变
参数:
功能:颠倒数组中元素的顺序。
返回:新数组
var arr = [1,3,4,undefined,null,[3,1,5]];
console.log("原数组为:" , arr);
console.log("返回值为:" , arr.reverse());
console.log("操作后的原数组为:" , arr);
----------------------------------------------------------------------------------------------------------------------------
concat()——原数组不变
参数:concat(data1,data2,...)所有参数可选
功能:
(1)不传参数:返回一个新数组,其中的元素不变
var arr1 = [3,4,5];
console.log("原数组为:" , arr1);
var arr2 = arr1.concat();
console.log("操作后的原数组为:" , arr1);
console.log("操作的返回值:" , arr2);
console.log("arr1和arr2是否相等?" , arr1==arr2);
(2)传一个或多个参数:当参数为非数组时,直接添加到数组中;当参数为数组时,直接将数组内的元素添加到数组中。
var arr1 = [3,4,5];
console.log("原数组为:" , arr1);
var arr2 = arr1.concat("1",undefined,NaN,null,1,{a:"admin"},["a","b","c"]);
console.log("操作后的原数组为:" , arr1);
console.log("操作返回的新数组为:" , arr2);
返回:操作后的新数组
 
join()——原数组不变
参数:join(str)所有参数可选
功能:根据指定的分隔符将数组中的所有元素放入一个字符串
(1)不传入参数:参数默认为“,”
var arr = [4,5,6];
console.log("原数组为:" , arr);
str = arr.join();
console.log("操作后的原数组:" ,arr);
console.log("操作的返回值:" , str);
console.log("操作的返回值的类型:" + typeof str);
(2)传入一个参数:用这个参数作为分隔符
var arr = [4,5,6];
console.log("原数组为:" , arr);
str = arr.join(1);
console.log("第一次操作后的原数组:" ,arr);
console.log("第一次操作的返回值:" , str);
console.log("第二次操作的返回值:" , arr.join("-"));
console.log("第三次操作的返回值:" , arr.join("~"));
console.log("第一次操作的返回值的类型:" + typeof str);
返回:被删除的元素
 
toString()——原数组不变
参数:
功能:转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。
返回:字符串
var arr = [1,2,3,4];
console.log("原类型为:" , typeof arr);
result = arr.toString();
console.log("操作后的返回值为:" , result);
console.log("操作后的原数组" , arr);
console.log("操作后的类型为:" , typeof result);
 
slice()——原数组不变
参数:slice(startIndex, endIndex)(不传参无操作)
功能:正数代表从前往后数的索引值(从0开始),负数代表从后往前数的索引值(从-1开始)
(1)传入一个参数:将这个参数作为开始的索引值,从这一位开始向后截取剩下所有的元素
var arr = [1,3,4,undefined,null,[3,1,5]];
console.log("原数组为:" , arr);
console.log("返回值为:" , arr.slice(1));
console.log("返回值为:" , arr.slice(-1));
console.log("操作后的原数组为:" , arr);
(2)传入两个参数:和传一个参数的区别就是,指定了截取到的范围,是第二个索引值对应的元素的前一个。
var arr = [1,3,4,undefined,null,[3,1,5]];
console.log("原数组为:" , arr);
console.log("返回值为:" , arr.slice(1,3));
console.log("返回值为:" , arr.slice(-3,-1));
console.log("操作后的原数组为:" , arr);
返回:截取到的元素组成的数组
 
valueOf()——原数组不变
参数:
功能:转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,如果手动调用,就是直接转为字符串。
返回:原数组
var arr = [1,2,3,4];
var result = arr.valueOf();
console.log("操作后的返回值为:" , result);
console.log("操作后的原数组" , arr);
console.log("返回值是否和原数组是同一个数组:" , result === arr);
 
ES5
indexof()——原数组不改变
参数:至少传一个参数
功能:根据指定的数据,从左向右,查询在数组中出现的位置。
(1)传一个参数:查询该参数在数组中的位置
let arr = ["h","e","l","l","o"];
console.log("该元素的索引值为:" + arr.indexOf("l"));
(2)传两个参数:从第二个参数的位置开始查询,若第二个参数为正,则从左往右,若第二个参数为负,则从右往左数
let arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l",3));
console.log(arr.indexOf("l",4));
console.log(arr.indexOf("l",-1));
console.log(arr.indexOf("l",-3));
返回:元素存在则返回其索引值(如果查询到多个,则返回第一个检索到的元素的索引),不存在返回-1
 
lastIndexof()——原数组不改变
和indexOf类似,只不过是从右往左查询
 
forEach()——原数组不改变
参数:含有三个参数的回调函数(value,index,self),这三个值分别代表了值,索引,和数组自身
功能:遍历数组的同时获取数组中每个数据和其索引
返回:无返回值
let arr = [1,undefined,null,NaN,"AI-fisher",true,[1,2,3],{name:"AI-fisher"}];
console.log("原数组为:" , arr);
let result = arr.forEach(function(value,index,self){
    console.log(`第一个参数:${value},第二个参数:${index},第三个参数:${self}`);
});
console.log("操作的返回值:" , result);
console.log("操作后的原数组:" , arr);
 
map()——原数组不改变
参数:含有三个参数的回调函数(value,index,self)
功能:
(1)同forEach()
let arr = [1,undefined,null,NaN,"AI-fisher",true,[1,2,3],{name:"AI-fisher"}];
console.log("原数组为:" , arr);
let result = arr.map(function(value,index,self){
    console.log(`第一个参数:${value},第二个参数:${index},第三个参数:${self}`);
});
console.log("操作的返回值:" , result);
console.log("操作后的原数组:" , arr);
(2)每次回调函数的返回值被map组成新数组返回
let arr = [1,undefined,null,NaN,"AI-fisher",true,[1,2,3],{name:"AI-fisher"}];
console.log("原数组为:" , arr);
let result = arr.map(function(value,index,self){
    return `blog${value}`;
});
console.log("操作的返回值:" , result);
console.log("操作后的原数组:" , arr);

 

返回:将回调函数处理的数据,返回到一个新数组中
 
filter()——原数组不改变
参数:含有三个参数的回调函数(value,index,self)
功能:
(1)同forEach()
let arr = [1,undefined,null,NaN,"AI-fisher",true,[1,2,3],{name:"AI-fisher"}];
console.log("原数组为:" , arr);
let result = arr.filter(function(value,index,self){
    console.log(`第一个参数:${value},第二个参数:${index},第三个参数:${self}`);
});
console.log("操作的返回值:" , result);
console.log("操作后的原数组:" , arr);
(2)当回调函数的返回值为true时,本次的数组值返回给filter,被filter组成新数组返回,,比如用长度来过滤(当然要注意其中的值要有长度这个属性,不然的话要么报错要么不会被选择,像undefined和null就会报错,而数值和布尔之类的并没有数值这个属性,所以肯定不会被选择)
var arr = [12345,NaN,"AI-fisher",true,[1,2,3,4],{name:"AI-fisher"}];
console.log("原数组为:" , arr);
let result = arr.filter(function(value,index,self){
    return value.length > 3;
});
console.log("操作的返回值:" , result);
console.log("操作后的原数组:" , arr);
返回:将回调函数返回true时拿到的value放在新数组中查询符合条件的元素(过滤)
 
本篇方法总结参考自博客:https://www.jianshu.com/p/7e160067a06c

原文链接:https://www.cnblogs.com/AI-fisher/p/11101855.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:node、npm、chrome、v8、sandbox是什么?

下一篇:Vue学习之vue-resource小结(五)