目录
1、重构解构
1、数组解构
2、对象解构
3、...展开
2、箭头函数
1、简写
2、this指向
3、没有arguments
4、普通函数this的指向
3、数组实用方法
1、map和filter
2、find
3、reduce
1、重构解构
1、数组解构
const arr = ["唐僧", "孙悟空", "猪八戒", "沙和尚"] const [a, b] = arr
console.log(a, b)
//打印 唐僧 孙悟空 const [a, b, c] = arr
console.log(a, b, c)
//打印 唐僧 孙悟空 猪八戒 const [a, b, , d] = arr //跳过元素
console.log(a, b, c, d)
//打印 唐僧 孙悟空 沙和尚 const [a, b, ...c] = arr
console.log(c)
//打印 [猪八戒,沙和尚]2、对象解构
const obj = {
name: "Jack",
age: 18,
like: "jogging"
}
let a, b, c ({name: a, age: b, like: c} = obj) //可读性差，不建议这样写
console.log(a, b, c)
//打印 Jack 18 jogging const {name, age, like} = obj
console.log(name, age, like)
//打印 Jack 18 jogging3、...展开
//只要是可以遍历的对象，就可以通过...展开
function fn(a, b, c) {
return a + b + c
}
const arr = [1, 2, 3]
let res = fn(...arr)
console.log(res)
//打印 6数组拼接：
//数组拼接
const arr = [1, 2, 3]
let arr2 = [...arr, 4, 5]
console.log(arr2)
//打印 [1, 2, 3, 4, 5]将obj里的值在新对象中展开，相当于浅拷贝
const obj = {
name: "Jack",
age: 18,
like: "jogging"
}
const obj2={...obj} //将obj里的值在新对象中展开，相当于浅拷贝
console.log(obj2)
//打印 {name: 'Jack', age: 18, like: 'jogging'}拼接对象：
const obj2 = {...obj, sex: "male"}
console.log(obj2)
//打印 {name: 'Jack', age: 18, like: 'jogging', sex: 'male'}若有重复的属性，后面的会直接覆盖前面的属性，这里的name属性被后面的覆盖了：
const obj2 = {...obj, sex: "male", name: "Mark"}
console.log(obj2)
//打印 {name: 'Mark', age: 18, like: 'jogging', sex: 'male'}2、箭头函数
特点：传统函数的简写
（1）箭头函数没有自己的this，箭头函数里的this用的是父级作用域里的this
（2）箭头函数中没有实参arguments
（3）不能作为构造函数调用
（4）箭头函数的this，一旦确定后是无法更改的，无法使用call、bind、apply来修改this指向
1、简写
//非0结尾的函数是对应简写
//返回值必须是一个表达式才能简写
//若返回值是对象必须加()
const getObj0 = () => {
return {name: "Jack"}
}
const getObj = () => ({name: "Jack"})
const sum0 = (a, b, c) => {
return a + b + c
}
const sum = (a, b, c) => a + b + c
const logTxt0 = a => {
console.log(a)
}
const logTxt = a => console.log(a)
const getData0 = () => {
return "abc"
}
const getData = () => "abc"
2、this指向
测试箭头函数的this指向：
const go = () => {
console.log(this)
}
function Man() {
const go = () => {
console.log(this)
}
return {go}
}
let man = new Man()
man.go()
go()打印：可以得出：箭头函数没有自己的this，箭头函数里的this用的是父级作用域里的this。
3、没有arguments
测试arguments实参：
const go = (a, b, ...arg) => {
try {
console.log(arguments)
} catch (error) {
console.log("go没有arguments")
}
}
function drive(a, b, ...arg) {
console.log("function:", arguments)
}
go("a", "b", "c", "d", "e")
drive("a", "b", "c", "d", "e")打印：可以得出箭头函数并没有arguments实参，直接写肯定报错。
4、普通函数this的指向
首先在严格模式下测试：
<script>
"use strict"
function drive(a, b, ...arg) {
console.log(this)
}
drive("a", "b")
</script>打印：在严格模式下普通函数在全局中的this为undefined
非严格模式下：
<script>
function drive(a, b, ...arg) {
console.log(this)
}
drive("a", "b")
</script>打印：在全局下为Window对象
其他情况下，不论是严格函数非严格模式，普通函数的this指向都是依调用者来定，即谁调用就指向谁：
"use strict"
function User() {
function go() {
console.log(this)
}
return {go}
}
const user = new User()
user.go()打印：
3、数组实用方法
1、map和filter
const arr = [1, 2, 3, 4, 5, 6, 7]
/**
* @param value 每项元素
* @param index 元素的索引
* @param array 原数组
*/
const newArr = arr.map((value, index, array) => value + array[index])
console.log("map会生成一个遍历后的新数组", newArr)
/**
* @param value 每项元素
* @param index 元素的索引
* @param array 原数组
* 选项返回true则留，返回false则剔除，会生成一个由留下元素生成的数组
*/
const newFilterArr = arr.filter((value, index, array) => value % 2 === 0)
console.log("会生成一个由留下元素生成的数组，偶数的数组：", newFilterArr)打印：
2、find
与filter类似，选项返回true则留，返回false则剔除；不同在于，find查找到一个选项后，就立即返回停止执行了。
const arr = [1, 2, 3, 4, 5, 6, 7]
/**
* @param value 每项元素
* @param index 元素的索引
* @param array 原数组
* 与filter类似，选项返回true则留，返回false则剔除
* 不同在于，find查找到一个就立即返回停止执行了
*/
const item = arr.find((value, index, array) => value % 2 === 0)
console.log(item)打印：
3、reduce
这个方法可以用来整合数组，他可以对数组中的值进行计算，最终数组中的所有元素合并为一个值。使用场景，累加、累乘等。
prev: 上一次运算结果
curr: 当前项
index: 当前索引
array: 原数组
const arr = [1, 2, 3, 4, 5, 6, 7]
/**
* @param prev 上一次运算结果
* @param curr 当前元素
*/
const result = arr.reduce((prev, curr) => {
console.log(prev, curr)
return prev + curr
})
console.log("result",result)
</script>打印：
也可以给它指定一个prev的初始值：
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.reduce((prev, curr, index) => {
console.log(index, prev, curr)
return prev + curr
}, 9)
console.log("result", result)打印：
后续再添加。
