如何用 Javascript 数组做所有事情

Posted on by

使用数组，您通常想要实现一定数量的特定目标。下面是您想要对数组执行的几乎所有操作的列表，以及如何在 Javascript 中执行此操作。

1. 按值查找元素的索引#

使用indexOf：

    let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
    
    // Returns 1
    console.log(arr1.indexOf('banana'));

    // Returns -1 since not found
    console.log(arr1.indexOf('beetroot'));

2. 在索引处删除#

使用splice()：

    let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
    
    // Returns [ 'banana', 'ravioli', 'carrot' ], since potato has index 0.
    arr1.splice(0, 1);
    console.log(arr1);

3. 按值在索引处删除#

使用splice()和indexOf：

    let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
    let itemIndex = arr1.indexOf('ravioli');

    // Returns [ 'potato', 'banana', 'carrot' ], since ravioli has an index of 2
    arr1.splice(itemIndex, 1);
    console.log(arr1);

4. 获取数组的最后一个元素#

使用arr.length() - 1：

    let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
    
    // Returns carrot
    console.log(arr1[arr1.length - 1]);

5. 在索引处插入#

使用splice()：

    let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];

    // Inserts broccoli at position 2, after deleting 0 items
    arr1.splice(2, 0, 'broccoli');
    
    // Returns [ 'potato', 'banana', 'ravioli', 'brccoli', 'carrot' ]
    console.log(arr1);

6.删除数组的最后一个元素#

使用pop()：

    let arr1 = [ 1, 2, 3, 4, 5, 6 ];
    
    // Returns 6
    console.log(arr1.pop()); 
    
    // Returns [ 1, 2, 3, 4, 5 ] - last element is removed
    console.log(arr1);

7. 以相同的方式更改数组的所有值#

使用map()：

    let arr1 = [ 1, 2, 3, 4, 5, 6 ];
    
    let newArr = arr1.map(function(arrElement) {
        return arrElement + 3;
    })

    // ES6 version for modern browsers and NodeJS
    let anotherVersion = arr1.map( el => el + 3);
    
    // Returns [ 4, 5, 6, 7, 8, 9 ] for both
    console.log(newArr);
    console.log(anotherVersion);

8. 将字符串、映射或集合转为数组#

使用Array.from()：

    let newSet = new Set([ 'orange', 'apple', 'potato', 'spinach' ]);
    let newMap = new Map([ 'orange', 'apple', 'potato', 'spinach' ]);
    let newString = 'apple';
    
    console.log(Array.from(newSet)); // Returns [ 'orange', 'apple', 'potato', 'spinach' ]
    console.log(Array.from(newMap)); // Returns [ 'orange', 'apple', 'potato', 'spinach' ]
    console.log(Array.from(newString)); // Returns [ 'a', 'p', 'p', 'l', 'e' ]

9.检查是否为数组#

使用Array.isArray()：

    let arr1 = [ 'orange', 'apple', 'potato', 'spinach' ];
    let obj1 = { myKey: "myValue" }
    
    console.log(Array.isArray(arr1)); // Returns true
    console.log(Array.isArray(obj1)); // Returns false

10.检查数组中的每个元素#

使用forEach：

    let arr1 = [ 'orange', 'apple', 'potato', 'spinach' ];

    arr1.forEach(function(item) {
        console.log(item); // Returns each array item individually
    });

11.合并两个数组#

使用...或concat：

    let arr1 = [ 'orange', 'apple' ];
    let arr2 = [ 'potato', 'spinach' ];

    // For legacy browsers (ES5);
    // Returns [ 'orange', 'apple', 'potato', 'spinach' ]; 
    let someArray = arr1.concat(object);
    
    // For modern Javascript (ES6/NodeJS)
    // Returns [ 'orange', 'apple', 'potato', 'spinach' ]; 
    let someOtherArray = [ ...arr1, ...arr2 ];

12.将对象名称转换为数组#

使用Object.keys：

    let object = { 
        name1: "value",
        name2: "value",
        name3: "value"
    };

    // Returns [ 'name1', 'name2', 'name3' ]; 
    let array = Object.keys(object);

13.将对象值转换为数组#

使用Object.values：

    let object = { 
        name1: "value",
        name2: "value",
        name3: "value"
    };

    // Returns [ 'value', 'value', 'value' ]; 
    let array = Object.values(object);

14. 反转数组#

使用reverse()：

    let arr1 = [ 'potato', 'banana', 'carrot' ];

    arr1.reverse();
    
    // Returns [ 'carrot', 'banana', 'potato' ]
    console.log(arr1);

15. 对数组中的所有元素求和#

使用reduce()：

    let arr1 = [ 1, 2, 3, 4, 5 ];

    // For legacy browsers
    let getTotal = arr1.reduce(function (accumulator, currentNumber) {
        return accumulator + currentNumber
    });

    // ES6 for modern browsers and NodeJS
    let theTotal = arr1.reduce((accumulator, currentNumber) => accumulator + currentNumber);
    
    // Returns 15
    console.log(getTotal);

16. 在数组末尾添加一个元素#

使用push()：

    let arr1 = [ 'banana', 'potato' ];

    arr1.push('broccoli');

    // Returns [ 'banana', 'potato', 'broccoli' ]
    console.log(arr1);

17.检查数组的每个元素是否通过测试#

使用every()：

    let arr1 = [ 1, 2, 3, 4, 5, 6, 7 ];

    // Will return true and console log 'great'
    if(arr1.every(value => value < 10)) {
        console.log('great!')
    }

推荐阅读：