ECMAScript6——数组操作方法_总结篇

ES6 -> 数组的方法 (加粗为ES6新增的方法)

1. pop -删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值;

let arr1 = [1,2,3];

arr1.pop();
console.log(arr1); //[1,2]

let arr1Item_1=arr1.pop();
console.log(arr1Item_1)//2
console.log(arr1); //[1]

let arr1Item_2=arr1.pop();
console.log(arr1Item_2)//1
console.log(arr1); //[]

let arr1Item_3=arr1.pop();
console.log(arr1Item_3)//undefined
console.log(arr1); //[]

复制代码

2. push -方法是向数组末尾添加一个或者多个元素，并返回新的长度;

let arr2=[1,2];
arr2.push(3);
console.log(arr2); //[1,2,3]

复制代码

3. shift -把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值;

let arr3=[1,2,3];
arr3.shift();
console.log(arr3); //[2,3]

复制代码

4. unshift -向数组的开头添加一个或多个元素，并且返回新的长度;

let arr4=[1,2];
arr4.unshift(3);
console.log(arr4); //[3, 1, 2]

复制代码

5. indexof - 查找某个元素的位置，存在则返回元素的位置，否则返回-1;

let arr5 = ['a', NaN]
console.log(arr5.indexOf('a')) //0
console.log(arr5.indexOf('b')) //-1
console.log(arr5.indexOf(NaN)) //-1

缺点：
1. 第一个是它会返回-1和元素的位置来表示是否包含，在定位方面是没问题，就是不够语义化
2.不能判断是否有NaN的元素

复制代码

6. slice -返回选定元素的新数组

let arr6=[1,2,3];
console.log(arr6.slice(1)); //[2,3]

复制代码

7. lastIndexOf -从右向左查某个指定的字符串在字符串中最后一次出现的位置

let arr7=[1,2,3];
console.log(arr7.lastIndexOf('2')); //1

注意：
lastIndexOf()方法虽然是从后往前搜索，但返回的位置是从前开始数数和计算的，所以结果和indexOf()方法返回的相同

复制代码

8. reverse -颠倒数组中元素的顺序

let arr8=[1,2,3];
console.log(arr8.reverse()); //[3,2,1]

复制代码

9. sort -对数组的元素进行排序

let arr9=[3,1,2,11,23,111];
console.log(arr9.sort()); //[1, 11, 111, 2, 23, 3]
console.log(arr9.sort(
    function(a,b){
        return a-b;
    }
)); // [1, 2, 3, 11, 23, 111]
console.log(arr9.sort(
    function(a,b){
        return b-a;
    }
)); // [111, 23, 11, 3, 2, 1]

复制代码

10. join -把数组中的所有元素放入一个字符串

let arr10=[1,2,3];
console.log(arr10.join("_")); //1_2_3

复制代码

11. map -遍历数组，返回一个新数组，不改变原数组

let arr11=[1, 2, 3, 4, 5, 6]
let newArr11 = arr11.map(function (item, index) {
    return item*2
});
console.log(newArr11) //[2, 4, 6, 8, 10, 12]

复制代码

12. forEach -会遍历数组, 循环体内没有返回值,循环不会改变原来数组的内容

let arr12 = [1, 2, 3, 4];
arr12.forEach((item, index, arr) => { // 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组
    console.log(item); //[1, 2, 3, 4]
});

复制代码

13. filter -返回新数组，数组内是所有满足条件的元素;如果条件不满足，filter()返回的是一个空数组;

let arr13 = [1,2,3,4,5,6]
let newArr13 = arr13.filter(function (item, index) {
    return item>2;
});
console.log(newArr13); //[3, 4, 5, 6]

复制代码

14. for of -循环迭代可迭代的对象(Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等)

//Arrays（数组）
const arr14_1 = ['1', '2', '3'];
for (const value of arr14_1) {
  console.log(value); //1,2,3
}

//Maps(映射)
const arr14_2 = new Map([['one', 1], ['two', 2]]);
for (const [key, value] of iterable) {
    console.log(`Key: ${key} and Value: ${value}`);
    // Key: one and Value: 1
    // Key: two and Value: 2
}

//Set(集合)
const arr14_3 = new Set([1, 1, 2, 2, 1]);
for (const value of arr14_3) {
    console.log(value); 
    // 1
    // 2
}

//String(字符串)
const arr14_4 = 'javascript';
for (const value of arr14_4) {
    console.log(value);
    // "j"
    // "a"
    // "v"
    // "a"
    // "s"
    // "c"
    // "r"
    // "i"
    // "p"
    // "t"
}

复制代码

15. splice -向从数组中添加/删除项目，然后返回被添加/删除的项目(在原数组上操作)

let arr15_1=[1,2,3,4,5];
console.log(arr15_1.splice(2,0,6)); //[1, 2, 6, 3, 4, 5]
console.log(arr15_1.splice(2,1,7)); //[1, 2, 7, 3, 4, 5]
console.log(arr15_1.splice(2,2,8)); //[1, 2, 8, 4, 5]
复制代码

16. includes (包含) -判断是否包含某一元素,返回的是boolean类型

let arr16 = [1, 2, 33, NaN]
console.log(arr16.includes(1)) //true
console.log(arr16.includes(NaN)) //true
console.log(arr16.includes(3)) //false

参数：
includes()函数的第二个参数表示判断的起始位置。如果第二个参数是负数，表示从右数过来第几个，但是不改变判断搜索的方向，搜索方向还是从左到右。

console.log(arr16.includes(1),1) //false
console.log(arr16.includes(2),-1) //false

优点：
1.解决了indexOf的上述的两个问题：它直接返回true或者false表示是否包含元素；对NaN一样能有有效。

缺点：
1.不能定位

复制代码

17. concat -连接两个或多个数组

let arr17_1 = [1, 2, 3, 4, 5]
let arr17_2 = [6, 7, 8, 9, 10]
console.log(arr17_1.concat(arr17_2)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

复制代码

18. some -只要其中一个为true 就会返回true(一真即真)

let arr18 = [1, 2, 3];
let flag18 = arr18.some(function (item,index) {
        return item>1;
    });
console.log(flag18)// true

复制代码

19. every -必须所有都返回true才会返回true(一假即假)

let arr19 = [1, 2, 3];
let flag19 = arr19.every(function (item,index) {
        return item>1;
    });
console.log(flag19) //false

复制代码

20. reduce -让数组的前后两项进行某种计算,然后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历。

let arr20 = [{price:20,count:1},{price:39,count:2},{price:56,count:5},{price:56,count:5}];
let r20 = arr20.reduce(function (prev,next,index) {
    return prev+next.price*next.count;
},0); //在第二个参数上指定第一次的prev
console.log(r20);//658

参数：arr.reduce(callback[, initialValue])

第一个参数：callback (回调函数其包含四个参数)
1).代表的是数组的第一项 prev, 后面返回的就是每次迭代后返回的结果
2).当前项 next
3).当前项的索引
4).原数组

第二个参数：[, initialValue] ：数组当前处理的值(指定第一次的prev)

复制代码

21. find -查找第一个符合条件的数组元素,如果找不到则返回undefined

let arr21 = [1, 2, 3];
let obj21 = arr21.find(function (item, index) {
    return item > 1;
});
console.log(obj21); // 2

复制代码