一、 数组常用函数
1. 创建数组
let arr1 = Array.of(1,2,3)
let arr2 = [1,3,5]
let arr3 = new Array[1,4,5]
2. 可迭代对象
方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
Array.from
let word = 'love'
let arr1 = Array.from(word) // ['l','o','v','e']
let arr2 = [...word] // ['l','o','v','e']
let arr3 = word.split('') // ['l','o','v','e']
let arr4 = Array.from([1, 2, 3], x => x + x)); // [2,4,6]
let circle_area = r => (Math.PI * r**2).toFixed(2)
let arr5 = Array.from([2,3,4], circle_area)
console.log(arr5) // ['12.56','28.27','50.27']
Array.map (返回一个新数组，不会改变原始数组)
注意：map() 不会对空数组进行检测。
var arr = [1,2,3,4];
arr.map((item,index,arr) => {
return item*10 //新数组为10,20,30,40
})
let res = [
{name:'alisj',sex:1,age:22},
{name:'lily',sex:2,age:23},
{name:'lily',sex:3,age:33}
]
let r = res.map(item => {
return {
title: item.name,
sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
age: item.age
}
})
console.log(r)
// [{title: "alisj", sex: "男", age: 22},
{title: "lily", sex: "保密", age: 23},
{title: "lily", sex: "保密", age: 33}]
3. join 函数 (数组中的所有元素连接成一个字符串)
arr.join('xxx')
var b = arr.join(','); // b: '1,2,3'
var b = arr.join('*'); // b: '1*2*3'
4.数组元素的放入与取出
- push
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度console.log([1,2,3,4].push(5))// 5 - unshift
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 - shift
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 改变了原数组
let arr = [1,3,4]
console.log(arr.shift()) // 1
console.log(arr) // [3,4]
- pop
pop() 方法用于删除并返回数组的最后一个元素。，并返回第一个元素的值。 改变了原数组
let arr = [1,3,4]
console.log(arr.pop()) // 4
console.log(arr) // [1,3]
5. splice函数(改变原始数组)
新增或删除数组的多个元素
Array.splice(begin, deleteCount, addItem1, addItem2...)
// a的初始值：[1,2,3,4,5]
var b = arr.splice(1,2)
// a: [1,4,5]
// b: [2,3]
var c = arr.splice(1,2,333,444)
// a: [1,333,444,4,5]
// b: [2,3]
6. slice函数(不改变原数组，创建新数组)
slice() 方法将数组中一部分元素浅复制存入新的数组对象，并且返回这个数组对象。
浅复制
语法：arr.slice([start[, end]])
let array = [1,2,3,4,5]
console.log(array.slice()) // [1,2,3,4,5]
console.log(array.slice(1,3)) // [2,3]
console.log(array) // 原数组[1,2,3,4,5]
浅复制 是指当对象的被复制时，只是复制了对象的引用，指向的依然是同一个对象。 由于slice是浅复制，复制到的对象只是一个引用，改变原数组array的值，array2也随之改变
拿到数组最后一个元素
console.log([1,2,3].slice(-1));//[3]
7. 合并数组 concat 函数 (创建新数组)
concat() 方法将传入的数组或者元素与原数组合并，组成一个新的数组并返回。
let arr = [1,2,3,4,5]
console.log(arr.concat(6,7)) // [1,2,3,4,5,6,7]
console.log(arr) //[1,2,3,4,5]
8. [...]数组合并
9. 寻找符合特定定条件的数组 find() findIndex()
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
return value > 4
})
var ret2 = arr1.find((value, index, arr) => {
return value > 14
})
console.log('%s', ret1) // 5
console.log('%s', ret2) // undefined
var ret3 = arr1.findIndex((value, index, arr) => {
return value > 4
})
var ret4 = arr1.findIndex((value, index, arr) => {
return value > 14
})
console.log('%s', ret3) // 4
console.log('%s', ret4) // -1
10.判断各元素是否符合特定条件 every() , some()
every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
function comparing(value, index ,array){
return value>0 && value < 20
}
let a01 = [1,3,10,-8,-10,77]
console.log(a01.every(comparing)) // false
console.log(a01.some(comparing)) // true
11. 筛选出符合特定条件的数组元素 filter()
var data = [1, 4, 7, 12, 21];
var result = data.filter(function(value) {
return value % 2 === 1;
});
console.log(result); //[1,7,21]
12. 循环访问数组 forEach()
let arr = [1,2,3,4,5,6]
function display(value){
console.log(value)
}
arr.forEach(display)
13. 判断特定元素的存在性 indexOf() 函数
查找元素在数组中第一次出现时的索引，如果没有，则返回-1
arr.indexOf(element, fromIndex=0)
* fromIndex 为开始查找的位置，缺省默认为0。
14. 判断特定元素的存在性 includes()函数
函数判断当前数组是否包含某个指定的值，如果是，则返回 true，否则返回 false。
arr.includes(element, fromIndex=0)
indexOfincludes 和唯一的区别就是includes能够发现NaN，而indexOf不能。
15. 自我复制并覆盖数组的部分元素(修改当前数组)
copyWithin() 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组
Array.prototype.copyWithin(target, start = 0, end = this.length)
target （必需）：从该位置开始替换数据。
start （可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。
end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
let arr = [0,1,2,3,4,5]
let r = arr.copyWithin(2)
console.log(r) // [0,1,0,1,2,3]
let arr = [0,1,2,3,4,5]
let r = arr.copyWithin(2,1)
console.log(r) // [0,1,1,2,3,4]
let arr = [0,1,2,3,4,5]
let r = arr.copyWithin(2,-1)
console.log(r) //[0, 1, 5, 3, 4, 5]
let arr = [0,1,2,3,4,5]
let r = arr.copyWithin(2,1,4) // 从第3位开始 替换 ,替换从第2位开始,到第4位结束
console.log(r) // [0,1,1,2,3,5]
16. 反转数组元素的顺序 reverse()
17. 数组重新排序 sort()
18. 数组元素的匹配
同时设置多个变量的数据
var [a,b,c] = [1,2,3]
[a,c] = [4,5]
19. 访问并渐次处理数组各元素 reduce() reduceRrght()
reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
arr.reduce(function(prev,cur,index,arr){
...
}, init);
回调函数有4个参数，意思分别为
- prev: 第一项的值或上一次叠加的结果值
- cur: 当前会参与叠加的项
- index： 当前值的索引
- arr: 数组本身
const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
return pre + item
}, 0)
console.log(sum) // 15
使用reduce方法可以完成多维度的数据叠加
案例1:计算总成绩，且学科的占比不同
const scores = [
{subject: 'math', score: 88},
{subject: 'chinese',score: 95},
{subject: 'english',score: 80}];
const dis = { math: 0.5,chinese: 0.3,english: 0.2}
const sum = scores.reduce((pre,item) => {
return pre + item.score * dis[item.subject]
},0)
console.log(sum) // 88.5
案例2:处理树形结构数据
var data = [{
id: 1,
name: "办公管理",
pid: 0,
children: [
{
id: 2,
name: "请假申请",
pid: 1,
children: [
{
id: 4,
name: "请假记录",
pid: 2
},
{
id: 5,
name: "请假审批记录",
pid: 2
},
],
},
{
id: 3,
name: "出差申请",
pid: 1
}]
},
{
id: 6,
name: "系统设置",
pid: 0,
children: [
{
id: 7,
name: "权限管理",
pid: 5,
children: [
{ id: 8, name: "用户角色", pid: 6 },
{ id: 9, name: "菜单设置", pid: 6 },
]
}]
},
];
const arr = data.reduce((pre,item) =>{
const callee = arguments.callee //将运行函数赋值给一个变量备用
pre.push(item)
//判断当前参数中是否存在children，有则递归处理
if(item.children && item.children.length > 0) item.children.reduce(callee,pre)
return pre
},[]).map((item) => {
item.children = []
return item
})
console.log(arr)
// [{id: 1, name: "办公管理", pid: 0, children: Array(0)}
{id: 2, name: "请假申请", pid: 1, children: Array(0)}
{id: 4, name: "请假记录", pid: 2, children: Array(0)}
{id: 3, name: "出差申请", pid: 1, children: Array(0)}
{id: 5, name: "系统设置", pid: 0, children: Array(0)}
{id: 6, name: "权限管理", pid: 5, children: Array(0)}
{id: 7, name: "用户角色", pid: 6, children: Array(0)}
{id: 8, name: "菜单设置", pid: 6, children: Array(0)}]
案例3. reduce来计算一个字符串中每个字母出现次数
const str = 'jshdjsihh'
const obj = str.split('').reduce((pre,item) =>{
console.log('pre',pre)
pre[item] ? pre[item] ++ : pre[item] = 1
return pre
},{})
console.log(obj)
pre {}
pre {j: 1}
pre {j: 1, s: 1}
pre {j: 1, s: 1, h: 1}
pre {j: 1, s: 1, h: 1, d: 1}
pre {j: 2, s: 1, h: 1, d: 1}
pre {j: 2, s: 2, h: 1, d: 1}
pre {j: 2, s: 2, h: 1, d: 1, i: 1}
pre {j: 2, s: 2, h: 2, d: 1, i: 1}
{j: 2, s: 2, h: 3, d: 1, i: 1}
