javaScript 常用数组方法汇总

congcong • 2023-04-25 17:47 • 杂文

0. 数组判断

const arr= [1,2,3,4,5]
Array.isArray(arr) // 结果：true

1. 常见的数组方法

1.　array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。
2.　array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。
3.　array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。
4.　array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。
5.　array.concat(arr1,arr2...)，合并两个或多个数组，生成一个新的数组。原数组不变。
6.　array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号（数组转字符串）。
7.　array.reverse()，将数组倒序。原数组改变。
8.　array.sort()，对数组元素进行排序。按照字符串UniCode码排序，原数组改变。（特殊写法）。
9.  array.map(function)，原数组的每一项执行函数后，返回一个新的数组。原数组不变。（注意该方法和forEach的区别）。
10. array.splice(删除位置,删除个数,添加内容) ，删除元素并添加元素，从index位置开始删除howmany个元素，
11. array.slice(startIndex, endIndex)，截取指定位置的数组，并且返回截取的数组，不会改变原数组
12. array.forEach(function)，用于调用数组的每个元素，并将元素传递给回调函数。原数组不变。
13. array.filter(function)，过滤数组中，符合条件的元素并返回一个新的数组。
14. array.every(function)，对数组中的每一项进行判断，必须全符合返回true，相等于 并
15. array.some(function)，对数组中的每一项进行判断，有一个符合的返回true。相当于 或
16. array.reduce(function)，reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
17. Array.isArray(array) 判断一个对象是不是数组，返回的是布尔值
18. array.toString() 此方法将数组转化为字符串：
19. array.valueOf() ，返回数组的原始值（一般情况下其实就是数组自身），一般由js在后台调用
20. array.indexOf(value, start-此参数：开始查询的位置) ，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引
21. array.lastIndexOf()，返回一个指定的字符串值最后出现的位置 
22. array.reduceRight()，数组的最后一项开始，向前逐个遍历到第一位
23. array.find(function)，返回数组中满足条件的第一项
24. array.includes(值, 起始位置), 数组中是否包含此值，包含则返回 true

2. 常见的改变原数组的方法

array.push()
array.unshift()
array.pop()
array.shift()
array.splice()
array.reverse()
array.sort()
array.fill()

3. 数组元素的增、删、改

增加

array.push(...数组)，如果将一个数组里的值push到原数组，需要在数组前加上 ... 拓展符
array.unshift(...数组)，如果将一个数组里的值unshift到原数组，需要在数组前加上 ... 拓展符
array.splice(index,0,...arr)，三个参数：删除的位置，删除0个，替换的值（数组用拓展符 ...）

删除

array.pop() 移除最后一个元素, 并返回该元素值
array.shift() 移除最前一个元素, 并返回该元素值，数组中元素自动前移
array.splice(index，num)，两个参数：删除的位置，删除的个数（返回删除的值）

修改

array.splice(index，num，...arr)，三个参数：删除的位置，删除num个，替换的值（数组用拓展符 ...）

array.splice(删除位置，删除个数，替换的值) 方法可以通过控制参数的变化来完成数组任意位置的增、删、改

增：第二个参数，删除的个数为 0

删：第三个参数，替换的元素去掉

改：三个参数全生效（以数组的方式返回删除的元素）

4. 数组合并

array.concat(第二数组，第三数组)，返回合并后的新数组,不改变原数组
[ ].push/unshift(...arr1，...arr2)，创建空数组，巧妙利用 push/unshift 方法

5. 数组深拷贝（不是改变指向，而是新数组）

array.slice(0), 返回截取的新数组，为0，就是从第一位开始到最后一位
array.map() 写法一：array.map(function(currentValue,index,arr){ return currentValue}),
array.map() 写法二：array.map(item => item)，原理就是：映射返回本身新数组
array.filter() 写法一：array.filter(function(currentValue,index,arr){ return currentValue}),
array.filter() 写法二：array.filter(item => item)，原理就是：过滤不设置条件返回本身新数组

6.数组元素的过滤

array.filter() 过滤，返回满足条件的数组元素（返回新数组）

array.filter((currentValue,index,arr) => { return currentValue < 100})

array.find() 过滤，返回满足条件的数组元素的第一项

array.find((currentValue,index,arr) => { return currentValue < 100})

array.map()映射，重组，返回数组元素按条件改变后的映射（返回新数组）(数组的重塑)

array.map((currentValue,index,arr) => { return currentValue + 100})

array.every() 过滤判断，返回布尔值，全部满足返回true，否则false，相当于 &&

array.every((currentValue,index,arr) => { return currentValue < 100})

array.some() 过滤判断，返回布尔值，有一个满足返回true，否则false，相当于 ||

array.some((currentValue,index,arr) => { return currentValue < 100})

7. 数组元素的遍历

for循环遍历数组

const array = [1, 2, 3, 4, 5]
  for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
  }

array.forEach()方法遍历数组（return无返回值）

const array = [1, 2, 3, 4, 5]
  array.forEach((item, index, arr) => {
    console.log(item,index,arr);
  })

Array.map()方法遍历数组，另外可获得映射后的新数组

const array = [1, 2, 3, 4, 5]
  const result = array.map((item, index, arr) => {
    console.log(item, index, arr);
    if(item > 3) {
      return item + '元'
    }else{
      return item + '个'
    }
  })
  console.log(result);

array.filter()方法遍历数组，另外可返回满足条件的元素组成的新数组

const array = [1, 2, 3, 4, 5]
  const result = array.filter((item, index, arr) => {
    console.log(item, index, arr);
    return item
   })
  console.log(result);

for in方法，此方法遍历数组效率低，主要是用来循环遍历对象的属性

遍历数组

注意： key 是字符串不是数字，因为key是对象的属性名称

const object = [1, 2, 3, 4, 5]
  for (const key in object) {
    if (Object.hasOwnProperty.call(object, key)) {
      console.log(object,key,object[key]);
    }
  }

遍历对象

const object = {
    username: 'admin',
    password: '2021/11/12'
  }
  for (const key in object) {
    if (Object.hasOwnProperty.call(object, key)) {
      console.log(object,key,object[key]);
    }
  }

for of方法，此方法遍历数组，无法获取索引，但它可以遍历很多东西（es6）

const array = [1,2,3,4,5];
  for (var item of array) {
    console.log(item);
  }

特：中断循环体(break、continue)

break中断整个循环，continue 只跳过不遍历当前元素

return 中断是放在函数体中使用并返回值，放在循环体中报错

只有 array.forEach() 、array.map() 循环体不能被中断，如果使用会报错且阻断程序

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  for (let i = 0; i < array.length; i++) {
    if (array[i] === 2 || array[i] === 4) {
      continue
    }
    if (array[i] === 7) {
      break
    }
    console.log(array[i]); // 结果： 1  3  5  6
  }

8. 数组元素去重

基础类型去重

1. from set 去重 (推荐)（es6）

思想：new Set(array) 将数组里面的元素去重但是会转化成set结构数
Array.from(new Set(array)) 将set结构的数组转化成真正的数组

注意：非数组类型传入会报错，前需要加上类型判断拦截，不改变原数组

function fromSet(array) {
    if (Array.isArray(array) === false) {
      console.log('数据类型不是数组');
      return;
    }
    return Array.from(new Set(array));
  }

2. indexOf 去重

思想：通过数组的indexOf()方法，判断新数组无原数组的值则push，否则继续遍历

function indexOf(array) {
    const newArray = []
    for (let i = 0; i < array.length; i++) {
      if (newArray.indexOf(array[i]) === -1) {
        newArray.push(array[i])
      }
    }
    return newArray
  }

3. 双层for循环去重

思想：此方法就是在原数组的基础上删除重复的元素，将原数组的第i项和原数组的第i项之后的元素做对比，有相同的就删掉，没有就遍历下一个（每遍历删除一次相同的元素，用来遍历的原数组就少一项相同的）

注意：会改变原数组

function twoFor(array) {
    for (var i = 0; i < array.length; i++) {
      for (var j = i + 1; j < array.length; j++) {
        if (array[i] === array[j]) {
          array.splice(j, 1);
          j--;
        }
      }
    }
    return array;
  }

9. 数组的排序

数组元素反转

array.reverse()，返回反转后的新数组,同时也改变原数组

数字数组排序

const arr = [99,2,3,4,33,3,5,1000,555]
arr.sort((a,b) => {
    return a-b     // 从小到大
    // return b-a  // 从大到小
})
console.log(arr);

对象数字数组排序

const arr = [{
    name: '张三',
    age: 22
},{
    name: '李四',
    age: 8
}]
arr.sort((a,b) => {
    return a.age-b.age     // 从小到大
    // return b.age-a.age  // 从大到小
})
console.log(arr);

对象字符串数组排序，字母和汉字粗略排序

    const arr1 = [{ label: 'c' }, { label: 'a' }, { label: 'b' }, { label: '从' }, { label: '啊' }, { label: '吧' }]
    const arr2 = [{ name: 'z' }, { name: 'x' }, { name: 'y' }, { name: '从' }, { name: '啊' }, { name: '吧' }]

    sortArr(arr1,'label')
    sortArr(arr2,'name')

    function sortArr(arr, label) {
        var re = new RegExp('^[/u4e00-/u9fa5]') // 是否以汉字开头
        const arrA = arr.filter(item => {  // 汉字开头
            if (re.test(item[label])) {
                return item
            }
        })
        const arrB = arr.filter(item => {  // 字母开头
            if (!re.test(item[label])) {
                return item
            }
        })
        if (arrA.length > 0) {
            arrA.sort((a, b) => {
                return a[label].localeCompare(b[label], 'zh-CN');
            })
        }
        if (arrB.length > 0) {
            arrB.sort((s, t) => {
                const a = s[label].toLowerCase()
                const b = t[label].toLowerCase()
                if (a < b) return -1
                if (a > b) return 1
                return 0
            })
        }
        console.log(arrA.concat(arrB));
    }

冒泡排序

for循环嵌套的方式，将当前项和后一项做比较，大于则交换位置

const arr = [77, 35, 1, 10000, 454, 78, 0, -1]
    let temp;
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length; j++) {
            if (arr[j] > arr[j + 1]) {
                temp = arr[j]
                arr[j] = arr[j + 1]; // 后一项等于当前项
                arr[j + 1] = temp; // 当前项等于后一项
            }
        }
    }
    console.log(arr)

10. 数组累加、求最值

累加
arr.reduce() 方法实现

const arr = [100, 200, 300, 400, 500]
const mul = arr.reduce((total, currentValue, index, arr) => {
    console.log(total); // 必传，不断累加的总数。
    console.log(currentValue); // 必传，遍历时的当前值
    console.log(index); // 可不传，遍历时的当前索引
    console.log(arr); // 可不传，当前数组
    return total + currentValue // 最终返回的值，遍历时每次 return 的值，会成为下次遍历的 total
})
console.log('合计：', mul); // 合计：1500

for 循环实现

const arr = [100, 200, 300, 400, 500]
let mul = 0;
for (let i = 0; i < arr.length; i++) {
    mul += arr[i]
}
console.log('合计：', mul); // 合计： 1500

求最值
arr.reduce() 方法实现

const arr = [100, 200, 300, 400, 500]

const max = arr.reduce((total, currentValue, index, arr) => {
    return Math.max(total, currentValue);
})
console.log('最大值：', max); // 最大值： 500

const min = arr.reduce((total, currentValue, index, arr) => {
    return Math.min(total, currentValue);
})
console.log('最小值：', min); // 最小值： 100

拓展运算符实现

const arr = [100, 200, 300, 400, 500]
console.log('最大值', Math.max(...arr)); // 最大值 500
console.log('最小值', Math.min(...arr)); // 最小值 100

版权声明：
作者：congcong
链接：https://www.techfm.club/p/43418.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END

二维码

30、Skywalking的使用-异步链路追踪

< <上一篇

OpenStack单机部署

下一篇>>

搜索内容

javaScript 常用数组方法汇总

0. 数组判断

1. 常见的数组方法

2. 常见的改变原数组的方法

3. 数组元素的增、删、改

4. 数组合并

5. 数组深拷贝（不是改变指向，而是新数组）

6.数组元素的过滤

7. 数组元素的遍历

特：中断循环体(break、continue)

8. 数组元素去重

基础类型去重

1. from set 去重 (推荐)（es6）

2. indexOf 去重

3. 双层for循环去重

9. 数组的排序

10. 数组累加、求最值

取消回复

共有 0 条评论

Ads