js数组相关操作

一、创建一个新的数组有两种方法：

1. 字面量表示法

const array = ['red', 'green', 'blue'];

2. 构造函数创建

const array = new Array();

二、向数组中插入/删除元素

删除数组中的第一个/最后一个元素 

// shift删除数组的第一个元素，并返回第一个元素的值
const first = ['red', 'green', 'blue'].shift();

// pop删除数组的最后一个元素，并返回最后一个元素的值
const last = ['red', 'green', 'blue'].pop();

向数组中插入第一个/最后一个元素

// 将元素插入到数组最后，并返回数组长度
const length = ['red', 'green', 'blue'].push('white');

// 将元素出入到数组最前，并返回数组长度
const length = ['red', 'green', 'blue'].unshift('white');

三、判断某一个对象是否为数组

const isArray = Array.isArray(array);

四、将非数组的list转换为数组

const array = Array.from(nodeList);

五、获取数组中的部分元素

// slice方法接受两个参数，第一个参数表示起点的位置，第二个参数表示终点的位置
// 当只有一个参数的时候表示从起点到数组的最后
// slice返回包含起点但不包含终点的一个新数组，不会改变原数组
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const colors2 = slice(1);    // green, blue, yellow, purple
const colors3 = slice(1, 4); // green, blue, yellow


// splice方法始终返回一个数组，包含从原始数组中删除的项
// splice可以删除从数组指定位置开始的若干项
// 接受两个参数，要删除的第一项的位置和删除的项数
const colors = ['red', 'green', 'blue'];
let removed = colors.splice(0, 1);   // red

// splice可以向指定位置插入任意数量的项
// 接受三个参数，起始位置，要删除的项数（0），要插入的项
removed = colors.splice(1, 0, 'yellow', 'orange');  // []
console.log(colors);       // green, yellow, orange, blue

// splice可以向指定的位置插入任意数量的项，同时删除任意数量的项
// 接受三个参数，起始位置，要删除的项数，要插入的项
removed = colors.splice(1, 1, 'red', 'purple');     // yellow
console.log(colors);       // green, red, purple, orange, blue

六、查找数组中某一项的位置

// indexOf表示从数组的开头向后查找
// lastIndexOf表示从数组的末尾开始向前查找
// 他们都接受两个参数：要查找的项，查找起点位置的索引(可选)
const numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

console.log(numbers.indexOf(4));         // 3
console.log(numbers.lastIndexOf(4));     // 5

console.log(numbers.indexOf(4, 4));      // 5
console.log(numbers.lastIndexOf(4，4));  // 3

七、迭代方法

数组有五个迭代函数，每个迭代函数接受两个参数，要在每一项上运行的函数和运行该函数的作用域对象(可选) 。

传入的函数接受三个参数，数组中项的值，该项在数组中的位置，数组对象本身。

这些迭代函数都不会修改数组中包含的值。

const numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// every对数组的每一项运行给定函数，如果所有项的返回值都是true，那么every函数的返回值才是true
// every可以用来判断数组中所有项是否满足某些条件
numbers.every((item, index, array) => item > 2);   // false

// some对数组的每一项运行给定函数，如果有一项的返回值是true，那么some函数的返回值就是true
// some可以用来判断数组中是否有满足条件的项
numbers.some((item, index, array) => item > 2);   // true

// filter对数组的每一项运行给定函数，该函数返回运行结果为true的项组成的数组
// filter可以用来筛选数组中满足条件的项
numbers.filter((item, index, array) => item > 2);   // [3, 4, 5, 4, 3]

// forEach对数组的每一项运行给定函数，该函数没有返回值
// forEach可以用来遍历数组
numbers.forEach((item, index, array) => {});

// map对数组的每一项运行给定函数，该函数返回每次函数调用的结果组成的数组
// map可以用来遍历数组，对数组每一项进行某些操作
numbers.map((item, index, array) => item * 2 );

八、归并方法

数组有两个归并数组的方法：reduce 和 reduceRight。这两个方法会迭代数组的所有项，然后构建一个最终的返回值。

reduce方法从数组的第一项开始，向后遍历，reduceRight从数组的最后一项开始，向前遍历。

// 两个方法都接受两个参数：在每一项上调用的函数，作为归并基础的初始值（可选）
// 传入的函数接受四个参数：前一个值，当前值，项的索引，数组对象
// 这个函数的返回值都会作为第一个参数自动传给下一项
const value = [1, 2, 3, 4, 5];
const sum = value.reduce((prev, cur, index, array) => prev + cur);  // 15
const sumRight = value.reduceRight((prev, cur, index, array) => prev + cur);  // 15

// reduce和reduceRight可以用来计算数组中元素出现次数
const colors = ['red', 'green', 'blue', 'yellow', 'red', 'blue'];
const colorNum = colors.reduce((prev, cur) => {
    if (cur in prev) {
        prev[cur] += 1;        
    } else {
        prev[cur] = 1;
    }
    return prev;
}, {});               // {'red': 2, 'green': 1, 'blue': 2, 'yellow': 1}

// reduce和reduceRight可以用来去除数组中重复元素
const value = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const newValue = value.reduce((prev, cur) => {
    if (!prev.includes(cur)) {
        return prev.concat(cur);
    } else {
        return prev;
    }
}, []);               // [1, 2, 3, 4, 5]