数组常用的方法 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


数组常用的方法

2019-10-15 释然 前端及开发文章及欣赏


数组常见方法
数组的方法
一、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 具有删除,插入,替换的功能

1. 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
2. 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
3. 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
4. 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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: 数组常用的方法 « 以人为中心的设计指南(一) | 目录页该如何设计?-8个常用的排版方式»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 帝皇彩票官网2019年8月(63)
  4. 帝皇彩票官网2019年7月(59)
  5. 帝皇彩票官网2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 帝皇彩票官网2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 帝皇彩票官网2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 帝皇彩票官网2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 帝皇彩票官网2015年1月(33)
  51. 2014年12月(21)
  52. 2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 帝皇彩票官网2013年11月(112)
  65. 2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 帝皇彩票官网2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 帝皇彩票官网2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
帝皇彩票 迪士尼彩乐园投注 福建11选5 大象彩票APP 桔子彩票平台 秒速时时彩 帝皇彩票平台 大象彩票登入 桔子彩票网址 状元彩票计划