解构赋值
- ES6 允许我们按照一定模式，从数组和对象中提取值，对变量进行赋值，这就叫做解构赋值
对象的解构赋值
//创建一个对象
let obj = {
name:"洋葱",
age:22,
skill:function(){
console.log("咏春拳😊");
}
}
/*一般我们会用这种方法来获取对象的属性*/
//let name = obj.name;
//let age = obj.age;
//let eat = obj.eat;
//下面是Es6教我们的方法（是不是看到这个感觉多年的老鼻炎好了😁）
let {name,age,skill} = obj;
console.log(obj);//打印的结果是一个对象
console.log(obj.skill)//打印的结果是这个对象的skill
var person = {
name: "洋葱",
age: 38,
//洋葱的徒弟prentice
prentice: {
height: 168,
long: {
weight：150;
}
}
}
let {
name,
age,
prentice: {
height,
long: {
weight
}
}
} = person;
//height和weight是洋葱徒弟的属性我们也获取到了，搞定他了。
console.log(name,age,height,weight);
数组的解构赋值
- Es6的在这个方法也可以对数组进行解构赋值，需要遵从一定的注意事项，如果不遵从，很可能达到的结果不是我们想要的✔格式是：
let [变量1，变量2] = 数组； - 注意
- 我们需要按照数组元素的排列顺序进行
解构赋值 - 数组也可以被单做对象来解构赋值
let {0:XXX，1:XXX,........[arr.length]:XXX}=arr
//造一个数组
let arr = ["大黄蜂","暴风雪","雷诺","大Q吧","空天猎霸"];
//用Es6方法对第一个元素和最后一个元素“解构赋值”；这里的first可以更改为任意的，0和arr.length是数组元素的下标。
let {0:first,[arr.length-1]:last} = arr;//结果是：大黄蜂 空天猎霸
//同样是上边的例子如果我们这样解构
let [a,b,c,d,e,f] = arr;//注意这里的数组中元素个数和原数组元素个数是不对称的
//我们打印一下元素f
console.log(f);//结果：undefined 这里带的f相当于声明了并没有赋值
小tips
//交换两个变量的值(以前我们可能会新定义一个变量来做中介，进而让两个变量交换值，现在呢？)
let x = 10;//这里也可以是字符串
let y = 20;
[y,x] = [x,y]
console.log(x,y);//结果：20 10
字符串也可以解构赋值（这里不过多赘述）
let str = "小酒窝长睫毛，迷人的无可救药";
let {0:abc,6:mid,8:abo} = str;
console.log(abc,mid,abo);//结果： 小 ， 人
新增数组的方法
我们先来创建一个数组arr下面的方法都是基于这个数组的
let arr=[9,7,8,6,5,4]
filter
- 遍历数组过滤出一个符合条件的新数组
let newArr = arr.filter((item,index)=>{return item>4})//筛选出原数组中值大于4的元素
console.log(newArr);//结果: (2)[5,7]
find
- 按序查找到数组中第一个符合条件的元素，返回的是符合条件的第一个元素（注意和
filter区分）
let res = arr.find(item=>item>4);
console.log(res);//结果：9
every
- 遍历数组看所有的元素是否都满足条件。如果都满足，返回
true，但凡有一个没有满足则返回false
let res = arr.every((item)=>item>0);//数组中元素的值是否都大于0
console.log(res);//结果： true
some
- 遍历数组，判断所有的元素是否有一个满足条件。如果有一个满足，返回
true；只有都不满足，返回false
let res = arr.some((item)=>item>8);//有没有大于8的元素值
console.log(res);//结果： true
includes
- 判断数组中是否包含某个元素，返回的是布尔值
true或fslase
/*第一个例子*/
let res = arr.includes(item=>item=4);
console.log(res);//结果： true
/*第二个例子*/
if (arr.includes(4)) {
console.log("包含");//这一行会打印出来
}else{
console.log("不包含");
}
Arry.form
- 可以将伪数组变为数组
这么多方法肯定不只是让我们选数字吧😂。来，我们上个“栗子”↓：优化之前发过的一个案例↓↓
/*JS部分*/
// 第一步，实现点击全选框，选中所有；再次点击全选框，所有不被选中
/*获取全选卡*/
var shopcar = document.getElementById("shopcar")
/*获取所有复选卡*/
var shopnames = document.querySelectorAll("#shopnames input")
/*遍历所有的复选卡，让他们的状态和全选框一致----实现全选和取消全选效果*/
shopcar.onclick = function () {
for (var i = 0; i < shopnames.length; i++) {
// this.checked当前复选框选中状态，如果选中则返回true，否则为false
shopnames[i].checked = this.checked;
}
}
// 第二步，复选框中只要有一个没被选中，全选框就要是未选中
for (var j = 0; j < shopnames.length; j++) {
//外层 for循环为每一个复选框添加点击事件
shopnames[j].onclick = function () {
// flag来表示全选框状态，默认为true
var flag = true;
// 点击一次复选框就检查一次所有的复选框是否都被选中
for (var i = 0; i < shopnames.length; i++) {
//非全选状态： 有一个复选框没有被选中，执行if语句
if (!shopnames[i].checked) {
flag = false;
}
}
//全选状态：复选框全选中了就不执行上边if语句，直接拿来flag定义对的true值
shopcar.checked = flag;
}
}
优化后
var shopcar = document.getElementById("shopcar")
var shopnames = document.querySelectorAll("#shopnames input")
shopcar.onclick = function(){
for (var i = 0; i < shopnames.length; i++) {
shopnames[i].checked = this.checked;
}
}
for (var i = 0; i < shopnames.length; i++) {
shopnames[i].onclick = function(){
//将伪数组shopnames转化为数组arr
var arr = Array.from (shopnames);
//判断arr中所有元素是否都满足，都满足返回true
var flag = arr.every(item=>item.checked);
checkAll.checked = flag;
}
}
写在最后
- 学习新的方法是为了提高效率，新方法是基于传统方法演进过来的。javascript版本在优化迭代，也象征着这行业需要我们不断学习新内容！
