玖叶教程网

前端编程开发入门

2024年07月30日

数组常用方法都有哪些（数组常用的操作方法）

1.数组常用方法之 push（）（==改变原数组，产生新数组==）

  • push 是用来在数组的末尾追加一个元素,返回添加以后的长度
  • var arr = [1, 2, 3]

    // 使用 push 方法追加一个元素在末尾
    arr.push(4)

    console.log(arr) // [1, 2, 3, 4]

    var res = arr.push(1,2,3,34);

    res//8

2.数组常用方法之 pop（）（==改变原数组，产生新数组==）

  • pop 是用来删除数组末尾的一个元素,返回删除的元素
  • var arr = [1, 2, 3]

    // 使用 pop 方法删除末尾的一个元素
    var res = arr.pop()

    console.log(arr) // [1, 2]

3.数组常用方法之 unshift（）（==改变原数组，产生新数组==）

  • unshift 是在数组的最前面添加一个元素
  • var arr = [1, 2, 3]

    // 使用 unshift 方法想数组的最前面添加一个元素
    arr.unshift(4)

    console.log(arr) // [4, 1, 2, 3]

4.数组常用方法之 shift（）（==改变原数组，产生新数组==）

  • shift 是删除数组最前面的一个元素
  • var arr = [1, 2, 3]

    // 使用 shift 方法删除数组最前面的一个元素
    arr.shift()

    console.log(arr) // [2, 3]

5.数组常用方法之 splice（==改变原数组==）

  • splice 是截取数组中的某些内容，按照数组的索引来截取
  • 语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）
  • var arr = [1, 2, 3, 4, 5]

    // 使用 splice 方法截取数组
    var res = arr.splice(1, 2)

    console.log(arr) // [1, 4, 5]
    console.log(res)//[2,3]
    - `arr.splice(1, 2)` 表示从索引 1 开始截取 2 个内容
    - 第三个参数没有写，就是没有新内容替换掉截取位置

    ```javascript
    var arr = [1, 2, 3, 4, 5]

    // 使用 splice 方法截取数组
    arr.splice(1, 2, '我是新内容')

    console.log(arr) // [1, '我是新内容', 4, 5]
  
  1）、删除元素,并返回删除的元素

可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

var arr = [1,3,5,7,9,11];

var arrRemoved = arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrRemoved); //[1, 3]

2）、向指定索引处添加元素

可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入 4 和 6。

var array1 = [22, 3, 31, 12];

array1.splice(1, 0, 12, 35); //[]

console.log(array1); // [22, 12, 35, 3, 31, 12]

3）、替换指定索引位置的元素

可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入 4 和 6。

const array1 = [22, 3, 31, 12];

array1.splice(1, 1, 8); //[3]

console.log(array1); // [22, 8, 31, 12] 作者：物理达人Physics侯老师 https://www.bilibili.com/read/cv9715493/ 出处：bilibili
  • arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
  • 然后用第三个参数把截取完空出来的位置填充

6.数组常用方法之 reverse（==改变原数组，产生新数组==）

  • reverse 是用来反转数组使用的
  • var arr = [1, 2, 3]

    // 使用 reverse 方法来反转数组
    arr.reverse()

    console.log(arr) // [3, 2, 1]

7.数组常用方法之 sort（==改变原数组，产生新数组==）

  • sort 是用来给数组排序的（默认按照字典排序 先按==照第一位排序-==如果第一位相等就按照第二位）
  • var arr = [2, 3, 1]

    // 使用 sort 方法给数组排序
    arr.sort()

    console.log(arr) // [1, 2, 3]
    • 这个只是一个基本的简单用法
  • // 升序
    arr4.sort(function (a, b) {
    return a - b
    })
    // 降序
    arr4.sort(function (a, b) {
    return b - a
    }) let arr5 = [{
    username: 'zhangsan',
    age: 19
    },
    {
    username: 'lisi',
    age: 10
    },
    ]
    // 按照对象的年龄 降序
    // a ，b 数组的元素
    arr5.sort(function (a, b) {
    return b.age - a.age
    })

8.数组常用方法之 concat（==不====改变原数组==）

  • concat 是把多个数组进行拼接
  • 和之前的方法有一些不一样的地方，就是 concat ==不会改变原始数组，而是返回一个新的数组==
  • var arr = [1, 2, 3]

    // 使用 concat 方法拼接数组
    var newArr = arr.concat([4, 5, 6])

    console.log(arr) // [1, 2, 3]
    console.log(newArr) // [1, 2, 3, 4, 5, 6]
    • 注意： ==concat 方法不会改变原始数组==

9.数组常用方法之 join==（不会改变原始数组，而是把链接好的字符串返回）==

  • join 是把数组里面的每一项内容链接起来，变成一个字符串
  • 可以自己定义每一项之间链接的内容 join(要以什么内容链接)默认使用逗号作为分隔符
  • 不会改变原始数组，而是把链接好的字符串返回
  • var arr = [1, 2, 3]

    // 使用 join 链接数组
    var str = arr.join('-')

    console.log(arr) // [1, 2, 3]
    console.log(str) // 1-2-3
    • 注意： join 方法不会改变原始数组，而是返回链接好的字符串

10.slice 复制数组的一部分 ==（不改变原始数组，返回一个新的数组）==

       
            var arr9 = [9,8,7,6,5,4,3,2];
            // 参数 两个  开始位置  结束位置,不包含结束位置,不改变原数组
            var res9 = arr9.slice(1,3)
            console.log(res9)//[8, 7]
            
            // 第二个参数不传入,复制到最后
            console.log(arr9.slice(1))//[8, 7, 6, 5, 4, 3, 2]
            
            // 如果传入负数,倒着数位置,最后一个是 -1
            console.log(arr9.slice(1,-2))// [8, 7, 6, 5, 4]

注：

如果之只传入一个大于数组长度的参数，则返回一个空数组
无论是如何提取数组元素，原数组始终保持不变

ES5 中常见的数组常用方法

11.indexOf

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

indexOf()：从数组的开头（位置 0）开始向后查找。

lastIndexOf：从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

  • indexOf 用来找到数组中某一项的索引
  • 语法： indexOf(你要找的数组中的项)
  • var arr = [1, 2, 3, 4, 5]

    // 使用 indexOf 超找数组中的某一项
    var index = arr.indexOf(3)

    console.log(index) // 2
    • 我们要找的是数组中值为 3 的那一项
    • 返回的就是值为 3 的那一项在该数组中的索引
  • 如果你要找的内容在数组中没有，那么就会返回 -1
  • var arr = [1, 2, 3, 4, 5]

    // 使用 indexOf 超找数组中的某一项
    var index = arr.indexOf(10)

    console.log(index) // -1
    • 你要找的值在数组中不存在，那么就会返回 -1

12.forEach

  • 和 for 循环一个作用，就是用来遍历数组的
  • 这个方法没有返回值。参数都是 function 类型，默认有传
  • 语法：arr.forEach(function (item, index, arr) {})
  • var arr = [1, 2, 3]

    // 使用 forEach 遍历数组
    arr.forEach(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
    })
    • forEach() 的时候传递的那个函数，会根据数组的长度执行
    • 数组的长度是多少，这个函数就会执行多少回

13.map ==（不改变原数组，返回新数组）==

  • 和 forEach 类似，只不过可以对数组中的每一项进行操作，==返回一个新的数组==
  • var arr = [1, 2, 3]

    // 使用 map 遍历数组
    var newArr = arr.map(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item + 10
    })

    console.log(newArr) // [11, 12, 13]

14.filter==（不改变原数组，返回新增数组）==

  • 和 map 的使用方式类似，按照我们的条件来筛选数组
  • 把原始数组中满足条件的筛选出来，组成一个新的数组返回
  • var arr = [1, 2, 3]

    // 使用 filter 过滤数组
    var newArr = arr.filter(function (item, nindex, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item > 1
    })

    console.log(newArr) // [2, 3]
    • 我们设置的条件就是 > 1
    • 返回的新数组就会是原始数组中所有 > 1 的项
  • 15.every 返回布尔值
  • 判断 是否数组所有的元素都满足条件
  • let flag = arr.every(function(item,index,arr){
    return 条件
    })


    let res4 = arr4.every(function (v) {
    return v >= 18
    })
    console.log(res4);

16.some 返回布尔值

判断是否数组有一些元素满足条件

let flag =  arr.some(function(item,index,arr){
        return 条件
 })
 
 let res5 = arr4.some(function (v) {
            return v >= 18
        })
        console.log(res5);//true

17.find

查找数组中第一个满足条件的元素

        var arr6 = [10, 19, 17, 20];
        let res6 = arr6.find(function (v, i) {
            return v === 19
        })
        console.log(res6);

        var arr7 = [{ id: 1, name: 'zs' }, { id: 2, name: 'lisi' }];

        var obj = arr7.find(function (v) {
            return v.id == 2
        })
        console.log(obj);
        console.log(obj.name);

18.findIndex

查找数组中第一个满足条件的元素的下标

var res7 = arr7.findIndex(function (v) {
            return v.id == 2
 })
 console.log(res7);

19.reduce

let res8 = arr8.reduce(function (a, b) {
            console.log(a, b);
            //a 第一次是 数组中第一个元素 
            //10+19 =29 

            // 然后几次 就是前面 数字的和

            //a = 29  
            // b 17  
            return a + b;
        })
        console.log(res8);

        let res9 = arr8.reduce(function (a, b) {
            console.log(a, b);
            //a 是累积变量  ，1000就是累积变量的初始值
            // b 是数组的元素
            return a + b;
        }, 1000)
        console.log(res9);

20.fill() es6 新增 ==（会改变原数组）==

fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组。

let arr = [1, 2, 3,  cc , 5];

arr.fill(1);

console.log(arr);//[1,1,1,1,1];

如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）

3 个参数： 填充数值，起始位置参数，结束位置参数（不包括结束位置的那个元素）

let arr = [1, 2, 3,  arr , 5];

arr.fill(1, 2);

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

arr.fill(0, 1, 3);

console.log(arr);//[1,0,0,1,1];

21.includes() es7 新增，返回布尔值

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。

参数有两个，其中第一个是（必填）需要查找的元素值，第二个是（可选）开始查找元素的位置

const array1 = [22, 3, 31, 12,  arr ];

const includes = array1.includes(31);

console.log(includes); // true

const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在

console.log(includes1); // false

需要注意的是：includes使用===运算符来进行值比较，仅有一个例外：NaN 被认为与自身相等。

let values = [1, NaN, 2];

console.log(values.indexOf(NaN));//-1

console.log(values.includes(NaN));//true

22.toLocaleString() 和 toString()

将数组转换为字符串

const array1 = [22, 3, 31, 12];

const str = array1.toLocaleString();

const str1 = array1.toString();

console.log(str); // 22,3,31,12

console.log(str1); // 22,3,31,12

23.copyWithin() [es6 新增]==（该方法会改变现有数组）==

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

//将数组的前两个元素复制到数组的最后两个位置

let arr = [1, 2, 3,  arr , 5];
arr.copyWithin(3, 0);

console.log(arr);//[1,2,3,1,2]

默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）。

let arr = [1, 2, 3,  arr , 5, 9, 17];

//从索引3的位置开始粘贴

//从索引0的位置开始复制

//遇到索引3时停止复制

arr.copyWithin(3, 0, 3);

console.log(arr);//[1,2,3,1,2,3,17]

24.flat() 和 flatMap() es6 新增（==该方法返回一个新数组，不改变原数组。）==

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

该方法返回一个新数组，对原数据没有影响。

参数： 指定要提取嵌套数组的结构深度，默认值为 1。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());

// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));

// expected output: [0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];

arr4.flat(Infinity);

// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位

var arr4 = [1, 2, , 4, 5];

arr4.flat();

// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。

该方法返回一个新数组，不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

[2, 3, 4].flatMap((x) => [x, x * 2])

// [2, 4, 3, 6, 4, 8]

25、 entries(),keys() 和 values() 【ES6】

entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

for (let index of [ a ,  b ].keys()) {

console.log(index);  

}  

// 0  

// 1  

for (let elem of [ a ,  b ].values()) {  

console.log(elem);

 }  

//  a  

//  b   

for (let [index, elem] of [ a ,  b ].entries()) {  

console.log(index, elem);

 }

 // 0 "a"

 // 1 "b"

如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。

let letter = [ a ,  b ,  c ];  

let entries = letter.entries();

console.log(entries.next().value); // [0,  a ]  

console.log(entries.next().value); // [1,  b ]  

console.log(entries.next().value); // [2,  c ]

JS 如何终止 forEach 循环 break 报错，return 跳不出循环

  • 终止 forEach 可以使用 try catch 内部抛出错误，catch 捕获错误。
  • let arr = [1, 2, 3]
    try {
    arr.forEach(item => {
    if (item === 2) {
    throw('循环终止')
    }
    console.log(item)
    })
    }     catch(e) {
    console.log('e: ', e)
    }
    复制代码

当然我们大可以用其他方法代替

  • Array.prototype.some
  • 当 return true 的时候，会终止遍历
  • Array.prototype.every
  • 当 return false 的时候，会终止遍历



标签：arr.splice 

作者:gojiuye , 分类:技术精选 , 浏览:8 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言