首页 > > 网页制作 > Javascript >

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

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

数组——方法

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

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);