javaScript之ES6（二）

解构赋值

解构赋值

变量的赋值可以按照一定的模式批量赋值

数组模式

根据下标一一对应赋值
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（）等不怎么用到的方法，这里就不再列出。

javaScript之ES6（二）

解构赋值

数组（一）

推荐阅读更多精彩内容