ES6学习

ES6学习笔记（二）

该学习笔记源于B站视频https://www.bilibili.com/video/av47304735?from=search&seid=16810589178466991647

一、对象解构
1、const{name ,age}=Tom;
name和age是Tom中的属性。注意，前面不能声明name和age。如果提示已经声明过了，可以进行如下修改：

const{father:f,mother,brother}=Tom.family;    //将father重命名为f

如果属性过多，可以用…others代替其他的。
数据交换：[a,b]=[b,a]。

二、for of 循环
1、forEach不能中止循环和跳过循环；for in循环得到的是属性名而不是属性值，应该用index索引。
2、for of循环改善了for in循环，每次返回的是属性值，同时它也不会遍历数组上的非数字属性，并且支持中止和跳过。
eg:

for(let index in fruits){
console.log(fruits[index]);
}
for(let fruit of fruits){
console.log(fruit);
}

3、使用for of循环遍历数组.entries（）可以同时取到索引值和元素值。
ps:arguments用来保存实参，更多实际请参考https://blog.csdn.net/zjy_android_blog/article/details/80934042
for of循环可以用于遍历字符串中每个字符和应用于NodeList中。

三、Array.from()和Array.of()
1、这两个都不是数组原型上的方法,Array.form（）用于将类数组转化成数组。
eg：const names=Array.form(todos,todo=>todo.textContent);后面的参数相当于map方法。同时，Array.form（）可以将字符串转化为数组。
2、Array.of()保证返回结果的一致性。
eg：

new Array(1)  =>[undefined*1]
Array.of(1) =>[1]

四、更多的Array方法使用
1、.find():语法简单而且找到后就中止循环。
2、.findIndex()查找元素索引值。
3、.some()：判断是否存在，查找到有存在就结束
4、.every()：判断是不是所有元素都满足，有一个不满足就结束

五、剩余参数
1、把所有参数表述为…numbers（numbers可自定义），并且形成numbers数组
应用场景：对函数参数的处理

六、扩展运算符
eg:

const youngers=['john','thomas','lucy'];
const olders=['james','marys','bob'];
let members=[...youngers,...olders];

这时候members是两个数组的集合，同时可以插入其他参数。同时可以防止数组改变。在上面代码加入

const currentMembers=[...members];

修改currentMembers的值就不会改变members数组。

ps:1、如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
2、第23个视频中用slice()实现todo删除，其实也可以采用splice().
splice()作用和用法：https://www.w3school.com.cn/jsref/jsref_splice.asp
slice()作用和用法：https://www.w3school.com.cn/jsref/jsref_slice_array.asp
3、concat和apply区别：https://blog.csdn.net/hzzou/article/details/79674485

下面是我跟着视频做的一个小demo：
https://codepen.io/lu3424/pen/bGGqqXN