对象和数组
vue中经常操作的数据结构就是对象和数组。
数组的变异(下列括号中方法:能改变原数组)
- 操作数组的一般方法:(pop push unshift shift splice reverse sort) slice indexOf lastIndexof concat
常用的操作数组的方法:forEach filter map some every reduce (find includes)es6
1、for
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) { //编程式,可以看到如何实现
console.log(arr[i])
}
复制代码
2、forEach
- forEach 不支持return,及时添加return也不会阻止循环执行
arr.forEach(function (item) {//声明式,不关心如何实现,item怎样拿到的不知道
console.log(item);
})
复制代码
3、for in
如果用for in循环数组会出现以下情况,一般不使用
- key会变成字符串类型
- 会将数组的私有属性也遍历出来(下面b为数组的私有属性,使用for in也会遍历出来)
let arr = [1, 2, 3, 4, 5];
arr.b='100'
for(let key in arr){
console.log(typeof key);
console.log(key);//0,1,2,3,4,b
}
复制代码
4、for of
- 支持return
- 是值 of 数组 格式(不能遍历对象),不会将私有属性遍历出来
let arr = [1, 2, 3, 4, 5];
arr.b='100'
for (let val of arr){
console.log(val);
}
复制代码
使用for of 遍历对象:Object.keys
let obj={name:'zhang',age:12}//Object.keys将对象的key作为新的数组
for (let val of Object.keys(obj)){
console.log(obj[val]);
}
复制代码
5、filter
- 回调函数返回true则将这一项放入新数组中
- 一般用于删除数组中某些内容
let newAry = [1, 2, 3, 4, 5].filter(function (item) {
return item > 2 && item < 5
})
console.log(newAry);
复制代码
6、map
- 回调函数中返回什么这一项就是什么
- 更新数组中的内容
let arr1 = [1, 2, 3].map(function (item) {
return `<li>${item}</li>`
})
console.log(arr1.join(''));
复制代码
7、includes
let arr3=[1,2,3,4,55]
console.log(arr3.includes(5))//false
复制代码
这个方法很有局限性,不经常使用
8、find
- 返回找到的那一项
- 回调函数中返回true表示找到了,找到后停止循环。找不到返回undefined
- 找到具体的某一项使用find
let arr3 = [1, 2, 3, 4, 55]
let result = arr3.find(function (item, index) {
return item.toString().indexOf(5)>-1
})
console.log(result);//55
复制代码
9、some
- 返回true
- 回调函数中找到后停止循环,返回true
- 找不到返回false
let arr3 = [1, 2, 3, 4, 5]
let result = arr3.some(function (item, index) {
return item.toString().indexOf(5)>-1
})
console.log(result);//true
复制代码
10、every
- 返回false
- 回调函数找false,找到false后停止,
let arr3 = [1, 2, 3, 4, 5]
let result = arr3.every(function (item, index) {
return item.toString().indexOf(5)>-1
})
console.log(result);
复制代码
第一项1就不符合条件,返回false
11、reduce (4个参数)
- 返回的是叠加后的结果
let sum = [1, 2, 3, 4, 5].reduce(function (prev, next, index, item) {
return prev + next
})
console.log(sum);
复制代码
给定第一项的默认值
let sum = [{price: 30, count: 2}, {price: 30, count: 3}, {price: 30, count: 4}].reduce(function (prev, next) {
return prev + next.price * next.count
}, 0)
console.log(sum);//270
复制代码
二维数组变为一维数组
let arr=[[1, 2, 3], [4, 5, 6], [7, 8, 9]].reduce(function (prev, next) {
return prev.concat(next)
})
console.log(arr);
复制代码
箭头函数
- 箭头函数不具备this,arguments。自己没有this就找上一级的this
改变this指向的常用方法
- call apply bind
- var that=this
- 箭头函数 如何确定this是谁:看谁调用的,.前面是谁this就是谁
function a(b) {
return function (c) {
return b+c
}
}
复制代码
改为箭头函数
let a = b => c => b + c;//高阶函数(两个以上箭头的函数)
复制代码