首页 > 其他分享> > 数组的方法总结

数组的方法总结

2020-12-18 09:04:50 作者：互联网

数组方法总结

一、es6新增数组方法

forEach

forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
　　console.log(item);
});

foreach 会不会改变原数组？

var arr1 = [1,2,3,4];

var arr2 = [{a:1},{a:2},{a:3}];

arr1.forEach(item =>{

    item = item * item;

});
arr2.forEach(item =>{

    item.a = item.a * item.a;

});

console.log(arr1); // [1,2,3,4] 简单数据类型不会 不会改变地址

console.log(arr2); // [{a:1},{a:4},{a:9}]  引用类型的会 （复杂数据类型）

map

map()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的, 这里就不在多说了, 直接上例子.

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
    return item + 1;
});
console.log(temp);
console.log(array);

猜猜输出的temp和arr的值都是什么
temp: [2, 3 ,4, 5, 6]
arr: [1, 2, 3, 4, 5]
各位, 到这里应该明白map()和forEach()有什么区别了吧, 使用map()遍历数组, 可以返回一个新数组, 并且不会改变原数组里的内容.
当然了, map()也可以这么用, 直接把数组里的元素都转成字符串.

let temp = array.map(String);

filter

接下来再说说filter(), filter()参数和forEach()也是一样的, filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.
怎么用呢, 直接上代码.

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
    return item > 3;    
});
console.log(temp);
console.log(array);

会输出什么呢, temp是4, 5, array没有变化, 清晰明了吧, 是不是比用for循环硬写方便多了.

every

every() 我就不解释入参了, 都一样的, 主要说说every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false, 下面看看实例代码.

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
    return item > 2;
});
console.log(bo);

这个输出不用我说了吧, 肯定是false啊, 不用再解释了吧.

some

some()又是做什么的呐, 同样, 遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
    console.log(item);
    return item > 3;
});

根据输出的item, 我们可以知道一共循环了多少次.

reduce

reduce(), 官方说明: 接收一个函数作为累加器, 数组中每个值(从左到右)开始缩减, 最终为一个值. 看完这句话, 心里莫名的想说一句卧槽, ‘这什么玩意’. 其实说白了, reduce()接收的那个函数就是回调函数, 回调函数调用数组里的每一个元素, 直到循环结束.
reduce()跟其他几个方法不一样, 它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组. 参数介绍完毕, 直接看例子.
假如, 有一个数组, 里面的元素都是数字, 现在要计算数字的和, 正常情况就直接循环数组, 然后弄个中间变量挨个加了吧, 但是用了reduce()就省事儿多了

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
    return a + b;
});
console.log(total);     // 15

二、基本用法

(1) 不会改变原数组

toString()

把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); //Banana,Orange,Apple,Mango
console.log(fruits)  //["Banana", "Orange", "Apple", "Mango"]

join()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" * "));//Banana * Orange * Apple * Mango
console.log(fruits)  //["Banana", "Orange", "Apple", "Mango"]

concat()

concat() 方法通过合并（连接）现有数组来创建一个新数组：

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys
console.log(myChildren)  // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]
console.log( myGirls) // ["Cecilie", "Lone"]

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 
console.log(myChildren)  // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

*slice()

可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。[1,3)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
console.log(citrus) //["Orange", "Lemon"]
console.log( fruits) // ["Banana", "Orange", "Lemon", "Apple", "Mango"]

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); 
console.log(citrus) //["Lemon", "Apple", "Mango"]
console.log( fruits) //["Banana", "Orange", "Lemon", "Apple", "Mango"]

(2) 改变原数组

Pop ()

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop());// Mango
console.log(fruits)// ["Banana", "Orange", "Apple"]

Push()

push() 方法（在数组结尾处）向数组添加一个新的元素, 返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi","haha"));  //6
console.log(fruits) // ["Banana", "Orange", "Apple", "Mango", "Kiwi", "haha"]

shift()

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.shift()); //Banana
console.log(fruits) //["Orange", "Apple", "Mango"]

unshift()

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.unshift("Lemon")); //5
console.log(fruits)  //["Lemon", "Banana", "Orange", "Apple", "Mango"]

delete

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(delete fruits[0]); //true  // 把 fruits 中的首个元素改为 undefined
console.log(fruits) //[empty, "Orange", "Apple", "Mango"]

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

*splice()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2, 0, "Lemon", "Kiwi")); //[]
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.splice(2, 2, "Lemon", "Kiwi")); // ["Apple", "Mango"]
console.log( fruits) // ["Banana", "Orange", "Lemon", "Kiwi"]

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

(3) 属性

length

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

toString

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString());   //Banana,Orange,Apple,Mango
console.log(fruits)  // ["Banana", "Orange", "Apple", "Mango"]