解构赋值
解构赋值
变量的赋值可以按照一定的模式批量赋值
数组模式
根据下标一一对应赋值
var [a,b,c] = [1,2.3]
等同于
var a =1;
var b =2;
var c=3
- 多维数组同理
- 解构失败时赋值为undefined
var [a,b] = [1];
//a =1;
//b=undefined; - 设默认值
var [a,b=2] = [1];
//a=1;
//b=2;
对象模型
根据key值一一对应赋值，注意此时value应该是变量而非字符串。
var {a:a,b:b}={a:1,b=2};
//ES6对象key省略时，key value同名，也可以写成这样
var {a,b} = {a:1,b:2};
- 解构失败为undefined
var {c} = {a:1,b:2};
//c=undefined; - json形式时，也是一一对应，位置相同即可
- 默认值
var {a,b=2}={a:1};
//b=2; - 对于已定义的变量，使用对象模式需要注意（），否则等号两边被认为是两个代码块。
let a ;
{a}={a:1};
//SyntaxError
let b ;
{{b}={b:2}};
//b=2;
其他情况
- 当右边表达式是字符串，类似数组，也是根据下标计算。
const [a,b,c]='123''
//a='1';b='2';c='3'' - 当右边是其他类型时会被转为对象，在进行解构赋值。
注：null和undefined无法转为对象，会报错。
其他应用
- 函数参数
//形参写成数组
function fn([a,b]){
...
};
fn([1,2]);
//形参写成对象，不必考虑传入顺序
function fn (a,b){
..
};
fn({b:2,a:1});
- 形参默认值的2种写法，一种是解构赋值写法，一种是ES6中形参设置默认值的方式
funtion fn({a,b}={1,2}){
...
};
- 函数返回多个值，一次性接收
function fn(){
return [1,2,3]
};
let [a,b,c]=fn();
- 交换值
[y,x]=[x,y]
数组（一）
ES6数组新增的方法（部分为ES5方法）
1.concat（）
合并数组，该方法会改变原数组
2.reverse（）
反转数组
3.Array.isArray()
判断是否是数组，等效于Object.prototype,toString.call(xx)==="[objectArray]"
4.forEach(fn(val,index,arr))
ES5的方法，低版本浏览器不兼容，此方法用来遍历数组，参数中arr指数组本身，arr.forEach(function(val,index,arr){...})
5.map（fn(val,index,arr))
遍历，返回一个新数组，此函数参数为数组中的单个值（react中用较多）
var numbers = [1,2,3];
numbers.map(function(n){
return n+1;
});
//[2,3,4]
6.filter(fn(val,index,arr))
过滤，返回一个新数组，它由fn函数返回true时的val组成
let arr= [3,4,5.6.7]
arr.filter(function(val){
return val>4;
})
//[[5,6,7]
7.some(fn(val,index,arr))
查找，其中一个值经过函数处理返回了true，则返回true，认为数组中包含符合条件的值
let arr=[2,3,4,5,6];
arr.some(function(elem,index,arr){
return elem>=3
});
//true
8.every((val,index,arr))
类似some,fn都返回true，则返回true
9.reduce（fn(val,index,arr),ex)
合并，返回ex，默认是数组中的第一个val，也可以用第二参数指定
let arr=[1,2,3,4,5];
arr.reduce(function(ex,val){
return ex+val;
},10);
//25
let json=['aaa','bb','c'];
json.reduce(function(logest,entry){
return.entry.length>longest.length?entry:longest;
},");
9.find(fn(val,index,arr))
查找第一个符合fn的值，fn应该返回t/f，差不到返回undefinde
let arr= [1,2,3]
arr.find(function(val){
return val>1;
})
//2
比indexof强大，且可查找NaN
- findindex（fn（val,index,arr))
类似find，返回符合fn的下标，查不到返回-1。
11.keys（）返回数组所有key组成的遍历器对象
遍历器对象在后面详解，它可以使用for.....of遍历
let arr=[1,2,3]
for （let i of arr.keys()){
console.log(i)
}
//1,2,3
12.valus()类似keys（），返回所有value
13.entries（）返回所有key value
var arr = [1,2,3]
for(let i of arr.entries()){
console.log(i)
}
//[0,1] [下标，值] //[1,2] //[2,3]
14.Array.from(arrlike,[fn(value)])
将数组转化为数组，替代Arrar.prototype.slice,call,fn用来返回新值。
常见的类数组
- DOM操作返回的是节点集合
let p = document.getElementsByTagName("p");
Array.from(p).forEach(fn...);
//正常情况下页可使用for循环，长度为类数组的length
- 函数内部的anguments也是累数组
注：具有lterator接口的都可使用Array.from()
除了上述方法以外，还有其他诸如数组填充fill（）等不怎么用到的方法，这里就不再列出。
网友评论