数组常见方法

数组的方法

一、join() 方法 ----->不会改变原数组

二、concat() 方法 ----->不会改变原数组

三、splice(index, num, item) ----->会改变原数组

1. splice(index, num) 删除功能
   
2. splice(index, 0, ...item)
   
3. splice(index, num, item)
   
4. splice(index)
   
   四、slice() -----> 不会改变原数组
   
   五、push() 和 pop() ----->会改变原数组
   
   六、shift() 和 unshift() -----> 会改变原数组
   
   七、sort() -----> 会改变原数组
   
   八、reverse() ----->会改变原数组
   
   九、indexOf() 和 lastIndexOf()
   
   十、includes()
   
   十一、forEach()
   
   十二、map() -----> 不会改变原数组
   
   十三、filter() -----> 不会改变原数组
   
   十四、every()
   
   十五、some()
   
   十六、reduce() 和 reduceRight()
   
   十七、Array.from() 将类数组转化为数组
   
   十八、Array.of() 方法用于将一组值转化为数组
   
   十九、数组实例的 find() 和 findIndex()
   
   二十、扁平化数组 flat() 方法 -----> 不会改变原数组
   
   数组的方法
   
   一、join() 方法 ----->不会改变原数组
   
   该方法可以将数组里面的元素，通过指定的分隔符以字符串的形式连接起来
   
   返回值：返回新的字符串
   
   
   
   // join() 将数组转化为字符串
   
   let arr = [1, 2, 3, 4, 5]
   
   let str1 = arr.join('|')
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   console.log(str1) // 1|2|3|4|5
   
   // 当传空字符串时
   
   let str2 = arr.join('') // 12345
   
   // 当不传时
   
   let str3 = arr.join() // 1,2,3,4,5
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   二、concat() 方法 ----->不会改变原数组
   
   该方法可以把两个数组里的元素拼接成一个新的数组
   
   返回值：返回拼接后的新数组
   
   
   
   let arr1 = [0, 1, 2]
   
   let arr2 = [2, 3, 4]
   
   let arr = arr1.concat(arr2)
   
   // 传入二维数组
   
   let arrCopy = arr1.concat([12, [17, 26]])
   
   console.log(arrCopy) // [0, 1, 2, 12, [17, 26]]
   
   console.log(arr) // [0, 1, 2, 2, 3, 4]
   
   console.log(arr1) // [0, 1, 2]
   
   console.log(arr2) // [2, 3, 4]
   
   
   
   // ES6 扩展运算符
   
   let a = [1, 2]
   
   let b = [2, 3]
   
   let ab = [...a, ...b] // [1, 2, 2, 3]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   三、splice(index, num, item) ----->会改变原数组
   
   index 参数：必传，整数，规定添加或者删除的位置，使用负数时，从数组尾部规定位置
   
   num 参数：必传，要删除的数量，如果为 0，则不删除项目
   
   item 参数：可选参数，可以是多个，想数组添加的新项目
   
   splice 具有删除，插入，替换的功能
   
   
   
5. splice(index, num) 删除功能
   
   index 参数：开始位置的索引
   
   
   
   num 参数：要删除元素的个数
   
   
   
   返回值：返回的是包含被删除元素的数组对象
   
   
   
   // 删除功能
   
   let array = [1, 2, 3, 4, 5]
   
   let newArr = array.splice(2, 2)
   
   console.log(newArr) // [1, 2, 5]
   
   console.log(array) // [3, 4]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
6. splice(index, 0, …item)
   
   index 参数：插入元素的索引值
   
   0 参数：不删除
   
   // 插入功能
   
   let arr = ['a', 'b', 'c', 'd', 'e']
   
   let newArr = arr.splice(1, 0, ['插入', 1217])
   
   console.log(newArr) // []
   
   console.log(arr) // ['a', ['插入', 1217], 'b', 'c', 'd', 'e']
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
7. splice(index, num, item)
   
   index 参数：开始的索引位置
   
   num 参数：删除的项个数
   
   item 参数：替换项
   
   返回值：返回包含被删除的元素的数组对象
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.splice(2, 2, '替换', '1226')
   
   console.log(newArr) // [3, 4]
   
   console.log(arr) // [1, 2, '替换', '1226', 5]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
8. splice(index)
   
   当只传一个值时，表示从传入的 index 索引值开始截取到最后
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.splice(3)
   
   console.log(newArr) // [4, 5]
   
   console.log(arr) // [1, 2, 3]
   
   1
   
   2
   
   3
   
   4
   
   四、slice() -----> 不会改变原数组
   
   返回从原数组中指定开始下标到结束下标之间的项组成的新数组
   
   slice() 方法可以接受一或两个参数，即要返回项的起始位置和结束位置
   
   array.slice(2) 若只设置一个参数，起始位置为2（包含下标2）开始到数组最后
   
   array.slice(2, 5) 若设置两个参数，起始下标为2（包含下标2）到结束下标5（不包含下标5）的数组
   
   当 slice() 参数中有负数时，将负数加上数组的长度值来替换该位置的数
   
   let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   
   let copyArr1 = arr.slice(2) // [3, 4, 5, 6, 7, 8, 9]
   
   let copyArr2 = arr.slice(2, 5) // [3, 4, 5] 
   
   let copyArr3 = arr.slice(-2) // [8, 9]
   
   let copyArr4 = arr.slice(2, -2) // [3, 4, 5, 6, 7]
   
   let copyArr5 = arr.slice(-2, -5) // []
   
   let copyArr6 = arr.slice(-5, -2) // [5, 6, 7]
   
   console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   五、push() 和 pop() ----->会改变原数组
   
   push() 可以接受任意数量的参数，将其逐个添加到数组的末尾，并返回修改后数组的长度（改变了原数组）
   
   pop() 删掉数组末尾最后一项，改变了数组的 length 值，并返回删除的项
   
   let arr = [1, 2, 3, 4, 5]
   
   let count = arr.push(0, 1217)
   
   console.log(count) // 7
   
   console.loh(arr) // [1, 2, 3, 4, 5, 0, 1217]
   
   
   
   let item = arr.pop()
   
   console.log(item) // 1217
   
   console.log(arr) // [1, 2, 3, 4, 5, 0]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   六、shift() 和 unshift() -----> 会改变原数组
   
   shift() 删除原数组的第一项，并返回删除元素的值，如果数组为空折返回 undefined
   
   unshift() 将参数添加到原数组的开头，并返回数组的长度
   
   let arr = [1, 2, 3, 4, 5]
   
   let item = arr.shift()
   
   console.log(item) // 1
   
   console.log(arr) // [2, 3, 4, 5]
   
   
   
   let count = arr.unshift(0, 'Jack')
   
   console.log(count) // 6
   
   console.log(arr) // [0, 'Jack', 2, 3, 4, 5]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   七、sort() -----> 会改变原数组
   
   在排序时，sort() 方法会调用每个数组项的 toString() 转型方法，然后比较得到的字符串，已确定如何排序，其本质是比较字符串的 ASCII 编码
   
   即使数组中的每一项都是数值，sort() 方法比较的也是字符串，因此会出现以下情况：
   
   let arr1 = ['a', 'd', 'e', 'b', 'c']
   
   console.log(arr1.sort()) // ['a', 'b', 'c', 'd', 'e']
   
   
   
   let arr2 = [12, 26, 3, 99, 52]
   
   console.log(arr2.sort()) // [12, 26, 3, 52, 99]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   解决办法
   
   
   
   let arr3 = [12, 26, 3, 99, 52]
   
   arr3.sort((a, b) => {
   
   return a -b
   
   })
   
   console.log(arr3) // [3, 12, 26, 52, 99]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   冒泡排序（优化版）
   
   
   
   function mySort (arr) {
   
   let count = 0 // 记录循环次数
   
   // 外层循环  控制循环的次数，每次找到最大值
   
   for (let i = 0; i < arr.length - 1; i++) {
   
   count++
   
   // 判断是否排序好了
   
   let isSort = true // 初始值默认已经排序好了
   
   for (let j = 0; j < arr.length - 1 - i; j++) {
   
   count++
   
   if (arr[j] > arr[j + 1]) {
   
   isSort = false
   
   // 交换位置
   
   let tmp = arr[j]
   
   arr[j] = arr[j + 1]
   
   arr[j + 1] = tmp
   
   }
   
   }
   
   // 某一趟结束，判断一下是否结束
   
   // 如何判断是否排序好，根据是否发生了位置交换，如果发生了位置交换就说明没有排序好
   
   if (isSort) {
   
   break
   
   }
   
   }
   
   console.log(count)
   
   return arr
   
   }
   
   mySort([12, 26, 17, 520, 99])
   
   
   
   // 打印结果：count 9
   
   // arr [12, 17, 26, 99, 520]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   八、reverse() ----->会改变原数组
   
   反转数组项的顺序
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.reverse()
   
   console.log(arr) // [5, 4, 3, 2, 1]
   
   
   
   1
   
   2
   
   3
   
   4
   
   九、indexOf() 和 lastIndexOf()
   
   indexOf() 接受两个参数：要查找的项和查找起点位置的索引（可选项），其中从数组的开头开始向后查找
   
   lastIndexOf() 接受两个参数：要查找的项和查找起点位置的索引（可选项），其中是从数组的末尾开始向前查找
   
   返回值：当存在时，返回要查找的项在数组中首次出现的索引值；当不存在时，返回 -1
   
   可以用来判断一个值是否存在数组中
   
   
   
   let arr = [1, 2, 3, 5, 7, 7, 8, 5, 12, 17]
   
   console.log(arr.indexOf(5)) // 3
   
   console.log(arr.lastIndexOf(5)) // 7
   
   
   
   console.log(arr.indexOf(5, 2)) // 3
   
   console.log(arr.lastIndexOf(5, 4)) // 3
   
   
   
   console.log(arr.indexOf('5')) // -1
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   十、includes()
   
   Array.prototype.includes() 数组实例的方法
   
   返回一个布尔值，表示某个数组是否包含给定的值
   
   推荐使用：可以用来判断一个值是否存在数组中
   
   
   
   let arr = [1, 2, 3, 4, 5]
   
   console.log(arr.includes(3)) // true
   
   console.log(arr.includes(0)) // false
   
   1
   
   2
   
   3
   
   十一、forEach()
   
   对数组进行遍历，对数组中的每一项运行给定函数，没有返回值
   
   
   
   forEarch(function (item, index, array) {})
   
   
   
   参数 item：表示数组中的每一项
   
   参数 index：表示数组中每一项对应的索引值
   
   参数 array：表示数组本身
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.forEach((item, index, array) => {
   
   console.log(item + '---' + index + '---' + (arr === array))
   
   })
   
   1
   
   2
   
   3
   
   4
   
   十二、map() -----> 不会改变原数组
   
   map() 方法是将数组中的每一项调用提供的函数，结果返回一个新数组，并没有改变原来的数组
   
   映射
   
   
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.map(item => item * item)
   
   
   
   console.log(newArr) // [1, 4, 9, 16, 25]
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   十三、filter() -----> 不会改变原数组
   
   filter() 方法是将数组中所有的元素进行判断，将满足条件的元素作为一个新数组返回
   
   过滤
   
   
   
   let arr = [12, 17, 26, 520, 1314]
   
   let newArr = arr.filter((item, index) => {
   
   return item > 20
   
   })
   
   console.log(newArr) // [26, 520, 1314]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   十四、every()
   
   every() 判断数组中每一项都是否满足条件，只有所有项都满足条件才返回 true，否则返回 false
   
   let arr = [1, 2, 3, 4, 5]
   
   let boolean1 = arr.every(item => item > 0)
   
   let boolean2 = arr.every(item => item > 3)
   
   
   
   console.log(boolean1) // true
   
   console.log(boolean2) // false
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   十五、some()
   
   some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true，否则返回 false
   
   let arr = [1, 2, 3, 4, 5]
   
   let boolean3 = arr.some(item => item > 3)
   
   let boolean4 = arr.some(item => item < 0)
   
   
   
   console.log(boolean3) // true
   
   console.log(boolean4) // false
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   十六、reduce() 和 reduceRight()
   
   reduce() 方法是所有元素调用返回函数，返回值为最后结果，传入的值必须是函数类型
   
   接受两个参数：每一项调用的函数和作为归并基础的初始值（可选项）
   
   这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
   
   
   
   // 利用 reduce() 方法实现数组求和，给数组一开始家里一个初始值 3
   
   let arr = [1, 2, 3, 4, 5]
   
   let sum = arr.reduce((prev, cur, index, array) => {
   
   // 函数接受 4 个参数：
   
   // 前一个值、当前值、项的索引值、原数组对象
   
   console.log(prev, '---', cur, '---', index, '---', array)
   
   return prev + cur
   
   }, 3)
   
   console.log(sum) // 18 = 15 + 3
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的
   
   
   
   十七、Array.from() 将类数组转化为数组
   
   let arrayLike = {
   
   '0': 'a',
   
   '1': 'b',
   
   '2': 'c',
   
   '3': 'd',
   
   length: 4
   
   }
   
   // ES5 写法
   
   let arr1 = [].slice.call(arrayLike) // ['a', 'b', 'c', 'd']
   
   
   
   // ES6
   
   let arr2 = Array.from(arrayLike) // ['a', 'b', 'c', 'd']
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   十八、Array.of() 方法用于将一组值转化为数组
   
   Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
   
   
   
   Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
   
   Array.of('abcd') // ['abcd']
   
   Array.of('abcd').length // 1
   
   Array.of() // []
   
   
   
   // Array.of 方法的实现
   
   function ArrayOf () {
   
   return [].slice.call(arguments)
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   十九、数组实例的 find() 和 findIndex()
   
   数组实例的 find() 方法，用于找出第一个符合条件的数组成员
   
   它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为 true 的成员，然后就返回该成员，如果没有符合条件的成员，则返回 undefined
   
   let arr = [1, 2, 3, 4, 5]
   
   let value= arr.find((item, index, array) => {
   
   // item 表示循环遍历数组的每一项
   
   // index 每一项对应的索引值
   
   // array 原数组对象
   
   return item > 3
   
   })
   
   console.log(value) // 4
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   数组实例的 findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1
   
   let arr = [1, 2, 3, 4, 5]
   
   let index = arr.findIndex((item, index, array) => {
   
   return item > 3
   
   })
   
   
   
   console.log(index) // 3
   
   
   
   [NaN].indexOf(NaN) // -1
   
   [NaN].findIndex(value => Object.is(NaN, value)) // 0
   
   [NaN].includes(NaN) // true
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   由此可见：一般用来判断数组中是否存在某个值，推荐使用 includes
   
   
   
   二十、扁平化数组 flat() 方法 -----> 不会改变原数组
   
   let arr = [1, [2, 3, [4, 5, [6]]]]
   
   let arrFlat = arr.flat(Infinity)
   
   console.log(arrFlat) // [1, 2, 3, 4, 5, 6]
   
   console.log(arr) // [1, [2, 3, [4, 5, [6]]]]
   
   1
   
   2
   
   3
   
   4
   
   利用递归实现数组扁平化
   
   
   
   let arrayFlat = []
   
   let myFlat = (arr) => {
   
   for (let i = 0; i < arr.length; i++) {
   
   let item= arr[i]
   
   // 判断 arr[i] 是否是数组
   
   if (Array.isArray(item)) {
   
   // 如果是数组，继续调用函数 myFlat
   
   myFlat(item)
   
   } else {
   
   arrayFlat.push(item)
   
   }
   
   }
   
   return arrayFlat
   
   }
   

   
   

   
   

   蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。