美文网首页
JS数组常用操作

JS数组常用操作

作者: kugua666 | 来源:发表于2020-07-06 15:34 被阅读0次

    JS数组常用操作

    添加一个元素到数组的最后位置:

    ```

    方式一:numbers[numbers.length] = 10

    方式二:numbers.push(11) 

    ```

     在数组首位插入一个元素:

    ```

    for (var i = numbers.length; i > 0; i--) {

         numbers[i] = numbers[i-1]

     }

     numbers[0] = -1      

    ```

    删除最后的元素

    ```

     numbers.pop()

    ```

    删除首位的元素

    ```

    numbers.shift()

    ```

    splice:是做(1)删除 、(2)插入、(3)修改用的。在原数组上进行操作。

    (1)删除指定位置的几个元素,第一个参数表示从索引为5(其实是第6个元素)开始删除3个元素.,返回的是删除的元素所组成的数组。

    ```

     numbers.splice(5, 3)

    ```

    (2)在指定位置插入元素, numbers.splice(5, 0, 3, 2, 1)中,第一个参数依然是索引值为5(第六个位置),第二个参数为0时表示不是删除数据, 而是插入数据,后面紧跟的是在这个位置要插入的数据, 可以是其他类型的数据。无返回值。

    ```

    numbers.splice(5, 0, 3, 2, 1)

    ```

    (3)在指定位置修改元素,第一个参数表示从索引为5的位置开始修改,第二个参数是要将数组中多少个元素给替换掉。无返回值。

    ```

    numbers.splice(5, 1, "a", "b", "c")

    ```

    slice:是截取字符串用的,在原数组的副本上进行操作。返回的截取的数组。

    第一个参数:开始位置的索引。第二个参数:结束位置的索引(但不包含该索引位置的元素), 如果没有最后一个参数,则截取到最后。

    ```

    var newArr = numbers.slice(1)

    ```

    数组合并

    ```

    var nums1 = [1, 2, 3]

    var nums2 = [100, 200, 300]

    var newNums = nums1.concat(nums2)

    console.log(newNums) // 1,2,3,100,200,300

    newNums = nums1 + nums2

    console.log(newNums) // 1,2,3,100,200,300

    ```

    迭代方法:(1)every()方法,(2)some()方法,(3)forEach()方法(4)filter()方法 (5)map()方法

     (1)every()方法是将数组中每一个元素传入到一个函数中, 该函数返回的是布尔类型true/false。如果函数中每一个元素都返回true, 那么结果为true, 有一个为false, 那么结果为false

    // 判断数组的元素是否都包含a字符

    ```

    var flag = names.every(function (t) {

        return t.indexOf('a') != -1

    })

    console.log(flag)//false

    ```

    (2)some()方法是将数组中每一个元素传入到一个函数中, 该函数返回布尔类型true/false。但是和every不同的是, 一旦有一次函数返回了true, 那么迭代就会结束. 并且结果为true

    // 判断数组中是否包含有a字符的字符

    ```

    var flag = names.some(function (t) {

        return t.indexOf("a") != -1

    })

    console.log(flag)//true

    ```

    (3)forEach()方法仅仅是一种快速迭代数组的方式而已,该方法不需要返回值,返回值为undefined

    ```

    names.forEach(function (t) {

        console.log(t)

    })

    ```

    (4)filter()方法是一种过滤的函数。首先会遍历数组中每一个元素传入到回调函数中。函数的结果返回true, 那么这个元素会被添加到最新的数组中, 返回false, 则忽略该元素。最终会形成一个新的数组, 该数组就是filter()方法的返回值。

    ```

    // 获取names中所有包含'a'字符的元素组成的新数组

    var newNames = names.filter(function (t) {

        return t.indexOf("a") != -1

    })

    console.log(newNames)

    ```

    (5)map()方法提供的是一种映射函数。首先会遍历数组,将其中每一个元素传入到回调函数中,元素会经过回调函数中进行各种变换, 生成新的元素, 并且将新的元素返回。 最终会将返回的所有元素形成一个新的数组, 该数组就是map()方法的返回值。

    ```

    var newNames = names.map(function (t) {

        return t + "-abc"

    })

    console.log(newNames)

    ```

    (6)reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上次回调函数的返回值),当前元素值,当前索引,调用reduce的数组。

    ```

    arr.reduce(callback, [initialValue])

    ```

    callback (执行数组中每个值的函数,包含四个参数)

    - previousValue  (上一次调用回调返回的值,或者是提供的初始值(initialValue))

    - currentValue  (数组中当前被处理的元素)

    - index (当前元素在数组中的索引)

    - array (调用 reduce 的数组)

    initialValue (作为第一次调用 callback 的第一个参数)

    例一:

    ```

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

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

    var sum = arr.reduce((pre, cur, index, arr) => {

        console.log(pre, cur, index);

        return pre + cur;

    })

    console.log(arr, sum);

    打印结果:

    1 2 1

    3 3 2

    6 4 3

    [1, 2, 3, 4] 10

    ```

    这里可以看出,上面的例子index是从1开始的,第一次prev的值是数组的第一个值,数组的长度是4,但是reduce函数循环3次。

    例二:

    ```

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

    var sum = arr.reduce((pre, cur, index, arr) => {

        console.log(pre, cur, index);

        return pre + cur;

    }, 0)//指定cur的类型为Number并且初始值为0

    console.log(arr, sum);

    0 1 0

    1 2 1

    3 3 2

    6 4 3

    [1, 2, 3, 4] 10

    ```

    这个例子index是从0开始的,第一次的perv的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

    相关文章

      网友评论

          本文标题:JS数组常用操作

          本文链接:https://www.haomeiwen.com/subject/qjsvqktx.html