ECMAScript6.0新特性介绍第三篇-原创手记-慕课网

在这篇博客中我将介绍ES6中的解构赋值，数组和模板字符串。所谓解构赋值就是将等于号右边的对象或数组进行拆解赋值给等于号左边的变量,ES6在数组上增加了一些非常好用的方法：map,reduce,filter和foreach，在字符串上增加了startWith和endWith等方法以及模板字符串的特性。

解构赋值

let [a,b,c]=[1,2,3];//a=1,b=2,c=3

let {name,age,job}={name:'张三',age:24,job:'software enginer'};//name=张三，age=24 job='software enginer'

let [{brand,price},address]=[{brand:'奥迪',price:200000},'广州'];//brand=奥迪 price=200000  address=广州。

数组新增的四个方法 map ,reduce,filter和foreach。map翻译成中文的意思为映射，即一对一，传入多少参数返回多少参数。reduce 的意思为减少，它的作用是通过对传入参数进行一系列的计算，最终返回一个数，通常用来求最大值，最小值或者平均值，filter是通过计算筛选出想要的数据,foreach一般用来迭代，

//定义 一个包含8个数字的数组
let nums=[1,2,3,4,5,6,7,8];
nums=nums.map(function(item){
    return item*2;
});
console.log(...nums);//输出2 4 6 8 10 12 14 16
//reduce 的三个参数：上次遍历时和，本次遍历的值，本次遍历索引的值。
//以下代码的作用是计算nums所有数值的和
let total=nums.reduce(function(sum,item,index){
    return sum+item;
});
console.log(total);//输出36
//以下代码的作用是计算nums所有数值的平均值
let average=nums.reduce(function(sum,item,index){
    if(index!=nums.length-1){
        return sum+item;
    }
    return (sum+item)/nums.length;

});
//以下代码的作用是通过filter过滤出所有的偶数
let leftNum=nums.filter(function(item){
       if(item%2==0){
           return true;
       }else{
           return false;
       }
});
console.log(...leftNum);//输出2 4 6 8
//以下代码的作用是遍历nums数组中所有的值，其中第一个值是遍历的当前数组中的值，第二个表示该数值在数组中的索引。
nums.forEach(function(item,index){
    console.log(item+":"+index);
});
结果输出：
1:0
2:1
3:2
4:3
5:4
6:5
7:6
8:7

以上数组中的四个方法均可以使用箭头函数的形式进行简写。关于箭头函数，我已经在上一章节介绍如何使用，此处不在赘述。

字符串
ES6为字符串提供了两个非常好用的方法，startWith和endWith，当然了ES6为字符串提供了远远不止这两个方法，还有提供的模板字符串也很好用，具体使用请参考如下代码：

/**
let url='http://www.imooc.com/article/publish';
if(url.startsWith('http')){
console.log('该网站是以http开头的');
}
if(url.endsWith('publish')){
console.log('该网站是以publish这个字符串结尾的');
}
let name='peter';
let age='26';
let job='software enginener'
let sttr=`hello! my name is ${name} i am ${age} years old my job is ${job}`
console.log(sttr);
执行以上代码输出如下内容：
该网站是以http开头的
该网站是以publish这个字符串结尾的
hello! my name is peter i am 26 years old my job is software enginener

关于解构赋值，数组的扩展的新方法和模板字符串就介绍到这里。

ECMAScript6.0新特性介绍第三篇原创