帝皇彩票官网

数组常用的方法

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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: 数组常用的方法

日历

链接

blogger

蓝蓝 http://www.bjhbys.com

存档

吉利彩票登陆 状元彩票计划 吉利彩票开奖 帝皇彩票登陆 吉利彩票计划 吉利彩票投注 帝皇彩票开奖 博发彩票APP下载 帝皇彩票官网 江苏快3平台