js数组篇汇总

前言

---

本文针对于自己的一个 js数组篇 课程总结

方法

---

1. 数组创建

1. var a = [3,5,7]  // [3,5,7]
2. var a = new Array(3) // [ , , ]
3. var a = Array.of(3) // [3]
复制代码

Array.of()是es6的方式，为了解决上述构造器因参数个数不同，导致的行为有差异的问题

2. 判断数组中是否含有指定的元素

2.1 indexOf() 一维

let arr = [1, 2, 4, 34, 34]
arr.indexOf(34) //3
复制代码

2.2 [].includes('') 一维

let arr = [1, 2, 4, 34, 34]
arr.includes(34) //true
复制代码

2.3 find() findIndex()

let arr = [1, 2, 4, 34, 34]
arr.find(function(item,$index){
    return item === 34
})  // 34
arr.findIndex(function(item,$index){
    return item === 34
})  // 3
复制代码

2.4 JQ $.inArray('',[])

let arr = [1,2,2,2,22]
let aa = $.inArray(2, arr)  // 1
复制代码

3. 数组的常见操作(删除 添加 转成字符串)

3.1 删除

3.1.1 pop() 从末尾删除

let arr2 = [1, 2, 4]
arr2.pop() // 4
复制代码

3.1.2 shift() 从开始删除

arr2.shift() // 1
复制代码

3.1.3 splice(startIndex,deleteCount)

let aa = [1,1,33,1,1,1,1,1]
aa.splice(2,3) // [33, 1, 1]
复制代码

3.2 添加

3.2.1 push() 从末尾添加

let arr2 = [1, 2, 4]
arr2.push(1,3) // [1, 2, 4,1,3]
复制代码

3.2.2 unshift() 从开始添加

let arr2 = [1, 2, 4]
arr2.unshift(1,3)  // 返回删除元素 arr2:[1,3,1,2,4]
复制代码

3.2.3 splice(startIndex,0,item1...)

let arr2 = [1, 2, 4]
arr2.splice(0,0,1,3)  // [1,3,1,2,4]
复制代码

3.4 转成字符串(适用于一维数组)

let arr2 = [1, 2, 4]
arr2.join('-')  //1-2-4
arr2.toString()  //1,2,4  默认是,分隔
复制代码

4. 数组拷贝

4.1 slice() 浅度

let arr31 = [1, 2, [3, 45, [56, 77]]]
arr31.slice()
复制代码

4.2 concat()浅度

arr31.concat()
复制代码

4.3 Object.assign()浅度

Object.assign([], arr31)
复制代码

4.4 扩展运算符浅度

let [...arr] = arr31
复制代码

4.5 JSON.parse(JSON.stringify()) 深度

let arr = JSON.parse(JSON.stringify(arr31))
复制代码

4.6 JQ $.extent(true,target,obj1,obj2) 深度 将两个或更多对象的内容合并到第一个对象

$.extend(true,[],arr31)
复制代码

5. 数组合并

5.1 concat()

let arr1 = [1, 2, [3, 45, [56, 77]]]
let arr2 = [1, 2, 4]
let arr3 = arr1.concat(arr2)  // arr1+arr2
复制代码

修改的是多维数组内时，原数组也会发生改变。多维数组只是对于里面的的一个引用。

5.2 扩展运算符

let arr4 = [...arr1, ...arr2] //arr1+arr2
复制代码

6. 数组去重

let arr = [1,21,21,21,34,34,34]
1. let arr1 = Array.from(new Set(arr))
2. let arr2 = [...(new Set(arr))]
复制代码

7. 数组排序

8. 数组遍历

结语

---

参考链接

ECMAScript 6 入门

转载于:https://juejin.im/post/5c4058696fb9a049a5712f82