JavaScript中的数组操作

118 阅读3分钟

JS中经常要使用到数组,离不开一些常见的操作,增删改查等……
以下为一些常用的数组操作


添加数据
push()  方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。原数组发生改变

    let arr = [1, 3, 5, 7];
    arr.push(9, 10);
    console.log(arr); //1, 3, 5, 7, 9, 10

unshift()  方法将一个或多个元素添加到数组的开头,并返回该数组的新长度原数组发生改变

    const array1 = [1, 2, 3];

    console.log(array1.unshift(4, 5));
    // expected output: 5

    console.log(array1);
    // expected output: Array [4, 5, 1, 2, 3]

删除数据
pop()  方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。原数组发生改变

    let arr = [1, 3, 5, 7];
    console.log(arr.pop());// 7
    console.log(arr);// 1, 3, 5

shift()  方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。原数组发生改变

    let arr = [1, 3, 5, 7, 9];
    console.log(arr.shift());// 1
    console.log(arr);// [3, 5, 7, 9]

splice()  方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]

    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]

截取数据
slice()  方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end,顾前不顾后)。原始数组不会被改变

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]

    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]

    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]

    console.log(animals.slice(-2));
    // expected output: Array ["duck", "elephant"]

    console.log(animals.slice(2, -1));
    // expected output: Array ["camel", "duck"]

    console.log(animals.slice());
    // expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

反转数组
reverse()  方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组

    let arr = [1, 3, 5, 7, 9];
    console.log(arr.reverse());// 9, 7, 5, 3, 1

排序
sort()  方法用原地算法对数组的元素进行排序,并返回数组。

    const numbers = [4, 2, 5, 1, 3];
    numbers.sort(function (a, b) {
      return a - b;
    });
    console.log(numbers);
    // [1, 2, 3, 4, 5]

    // 或者

    const numbers2 = [4, 2, 5, 1, 3];
    numbers2.sort((a, b) => a - b);
    console.log(numbers2);
    // [1, 2, 3, 4, 5]

将数组转换为字符串
join()  方法将一个数组的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。

    const a = ['Wind', 'Water', 'Fire'];
    a.join();      // 'Wind,Water,Fire'
    a.join(', ');  // 'Wind, Water, Fire'
    a.join(' + '); // 'Wind + Water + Fire'
    a.join('');    // 'WindWaterFire'

拼接
concat()  方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

    const letters = ['a', 'b', 'c'];
    const numbers = [1, 2, 3];

    const alphaNumeric = letters.concat(numbers);
    console.log(alphaNumeric);
    // results in ['a', 'b', 'c', 1, 2, 3]

查找元素
indexOf()  方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。

    const array = [2, 9, 9];
    array.indexOf(2);     // 0
    array.indexOf(7);     // -1
    array.indexOf(9, 2);  // 2
    array.indexOf(2, -1); // -1
    array.indexOf(2, -3); // 0

find()  方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

    const array1 = [5, 12, 8, 130, 44];

    const found = array1.find(element => element > 10);

    console.log(found);
    // expected output: 12

遍历数组
forEach()  方法对数组的每个元素执行一次给定的函数。

    const array1 = ['a', 'b', 'c'];

    array1.forEach(element => console.log(element));

    // expected output: "a"
    // expected output: "b"
    // expected output: "c"