中国著名的个人网站,哪个网站可以做字体大小,有域名怎么建立网站,摄影网页设计模板目录
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] arrconsole.log(a, b)//打印 唐僧 孙悟空 const [a, b, c] arrconsole.log(a, b, c)//打印 唐僧 孙悟空 猪八戒 const [a, b, , d] arr //跳过元素console.log(a, b, c, d)//打印 唐僧 孙悟空 沙和尚 const [a, b, ...c] arrconsole.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} objconsole.log(name, age, like)//打印 Jack 18 jogging
3、...展开 //只要是可以遍历的对象就可以通过...展开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 cconst logTxt0 a {console.log(a)}const logTxt a console.log(a)const getData0 () {return abc}const getData () abc2、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的指向
首先在严格模式下测试
scriptuse strictfunction drive(a, b, ...arg) {console.log(this)}drive(a, b)
/script
打印在严格模式下普通函数在全局中的this为undefined 非严格模式下
scriptfunction drive(a, b, ...arg) {console.log(this)}drive(a, b)
/script
打印在全局下为Window对象 其他情况下不论是严格函数非严格模式普通函数的this指向都是依调用者来定即谁调用就指向谁 use strictfunction 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)
打印 后续再添加。
