一、JS数据类型
- 基本数据类型：number string boolean null undefined
- Object func…
- Symbol ( es6 )
二、操作数组
数组的变异
- 能改变原数组的：pop push unshift shift splice reverse sort
- 不能改变原数组的：indexOf lastIndexof concat slice
常用方法：
- es5：forEach filter(过滤) map(映射) some every reduce
- es6：includes find
操作数组的方法中，实际中最常使用的是filter和map
let arr = [1, 2, 3, 4, 5];
arr.b = '100'; // 数组的私有属性
for(let i=0;i<arr.length;i++){ // 编程式
console.log(arr[i]);
}
1）forEach、for in、for of
面试题：forEach, for in, for of的区别
forEach是声明式不关心如何让实现，不支持return；for in中的key会变成字符串类型, 包括数组的私有属性也可以打印出来；for of支持return, 并且是值of数组(不能遍历对象)
arr.forEach(function (item) { // 声明式：不关心如何实现
console.log(item);
});
for(let key in arr){ // key会变成字符串类型, 包括数组的私有属性也可以打印出来
console.log(key)
}
for(let value of arr){ // 支持return, 并且是值of数组(不能遍历对象)
console.log(value);
}
let obj = {school: 'zfpx', age: 8}; // Object.keys将对象的key作为新的数组
// ['school', 'age']
for(let value of Object.keys(obj)){
console.log(obj[val]);
}
2）filter（删除）
过滤，过滤掉数组中不符合条件的元素，常用于删除操作中
let newAry = [1, 2, 3, 4, 5].filter(function (item) {
return item>2&&item<5;
})
3) map（更新）
映射，将原有的数组映射成一个新数组[1, 2, 3]，常用于更新操作中
实现<li>1</li><li>2</li><li>3</li>
let arr1 = [1, 2, 3].map(function (item) {
return `<li>${item}</li>` // ``是es6中的模板字符串，遇到变量用${}取值
});
console.log(arr1.join(''));
4) includes
包含，判断数组中是否包含该元素
let arr = [1, 2, 3, 4, 55, 555];
console.log(arr.includes(5)); // 返回的是boolean
5) find
找到具体的某一项，返回找到的那一项
let result = arr3.find(function (item, index) {
return item.toString().indexOf(5)>-1
});
console.log(result);
6) some（使用的少）
some 找true 找到true后停止，返回true, 找不到返回false
let result = arr3.some(function (item, index) {
return item.toString().indexOf(5)>-1
});
7) every（使用的少）
every 找false 找到false后停止，返回false
let result = arr3.every(function (item, index) {
return item.toString().indexOf(5)>-1
});
8) reduce（重点）
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
- 收敛，回调函数中有4个参数, 返回的是叠加后的结果
- 回调函数后有一个参数initialValue，是作为第一次调用回调函数时的第一个参数的值；如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
返回值 - prev代表的数组的第一项，next是数组的第二项
- 第二次prev是undefined，next是数组的第三项
求和：
let sum = [1, 2, 3, 4, 5].reduce(function (prev, next, index, item) {
console.log(arguments);
return prev+next; // 本次的返回值会作为下一次的prev
});
console.log(sum);
商品总价计算：
let sum2 = [{price: 30, count: 2},{price: 30, count: 2}, {price: 30, count: 2}]
(function (prev, next) {
// 0 + 60
// 60 + 90
// 150 + 120
console.log(prev, next);
return prev + next.price * next.count
}, 0); // 默认指定第一次的prev
console.log(sum2);
reduce可以用于扁平化数组，数组降维度
let flat = [[1, 2, 3], [4, 5, 6], [7, 8, 9]].reduce(function (prev, next) {
return prev.concat(next);
});
console.log(flat);
数组对象去重（根据具体字段）：
let obj = {}
let list = newArr.reduce((item, next) => {
obj[next.id] ? '' : obj[next.id] = true && item.push(next); // 根据id去重
return item
}, [])
| 方法 | 是否操作原数组 | 返回结果 | 回调函数的返回结果 |
|---|---|---|---|
| filter | 不 | 过滤后的新数组 | 如果返回true表示这一项放到新数组中 |
| map | 不 | 返回新数组 | 回调函数中返回什么这一项就是什么 |
| includes | |||
| find | 不 | true或者undefined | 回调函数中返回true表示找到了，找到后停止循环, 找不到返回的是undefined |
| reduce | 不 | 回调函数返回的结果 |
二、箭头函数（在vue中很多时候不能用箭头函数）
- 箭头函数 arrow fn，不具备this, arguments
- 自己家没有this就找上一级的this
面试题：如何更改this指向
- call apply bind
- var that = this;
- 箭头函数 =>
如何确定this是谁，看谁调用的，.(点)前面是谁this就是谁
function a(b) {
return b + 1;
}
普通函数改写为箭头函数方法：
去掉function关键字，参数有一个可以省略，小括号和大括号之间有一个箭头，如果没有大括号则直接是返回值，有大括号必须写return
let a = b => b + 1;
例：高阶函数(>=俩箭头的)改写为箭头函数
function a(b) {
return function (c) {
return b + c;
}
}
a(1)(2);
改写为箭头函数：
let a = b => c => b + c; // 高阶函数(>=俩箭头的)
函数闭包：
函数执行的一瞬间叫闭包，(不销毁的作用域)，当执行后返回的结果必须是引用数据类型，被外界变量接收，此时这个函数不会销毁(模块化)
let a = function (b) {
return function (c) {
return b + c;
}
}();
[1, 2, 3].forEach(item => console.log(item));
在vue中很多时候不能用箭头函数
