解构赋值
解构赋值
变量的赋值可以按照一定的模式批量赋值
数组模式
根据下标一一对应赋值
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()等不怎么用到的方法,这里就不再列出。