ES5和6的一些新特性

JavaScript

let和const命令

var

之前，js定义变量只有一个关键字 var

var 有一个问题 就是定义的变量有时候会莫名其妙的变成全局变量

例如这样一段代码：

<script>
			for(var i = 0;i<5;i++){
				console.log(i)
			}
			console.log("循环外："+i++)
		</script>

效果：

let

let所声明的变量，只在let命令所在的代码块内有效

我们把刚才的代码中的var改成let

<script>
			for(let i = 0;i<5;i++){
				console.log(i)
			}
			console.log("循环外："+i++)
		</script>

效果：

const

const声明的是常量，不能被修改

<script>
    for(let i = 0;i<5;i++){
        console.log(i)
    }
    const i = 1;
    console.log(i++)
</script>

效果：

解构表达式

数组解构

比如有一个数组

let attr = [1,2,3]

想获取其中的值，按照以往的方式，我们只能通过角标attr[0]来获取，但是在ES6里我们可以这样

//xyz将对应数组中的位置来对应取值
let [x,y,z] = attr
//打印
console.log(x,y,z)

效果：

那我们不想要全部或者只想要后面几个呢？

//不要最后一个
let [x,y] = attr
//只要最后一个
let [,,z] = attr

也可以直接解构获取全部

let [...obj] = attr

• 对于数组的解构一般用于数值较少的情况

对象解构

let person = {name:"jack",age:20}
let {name,age} = person

效果：

• 需要注意的是 对象解构不像数组解构，因为对象没有角标，所以对象解构根据的是对象的属性名来取值

如果想用其他变量接收，需要额外指定别名

let {name:n,age:a} = person

对象解构也适用于复杂类型的对象，就比如

let person = {name:"jack",age:20,girl:{name:"tom",age:19}}
//先对person解构获取到girl对象，然后再对其解构获取name属性
let {girl:{name:n}} = person

效果：

对象解构也可以直接解构获取全部属性

let {...obj} = person

函数优化

箭头函数

ES6中定义函数的简写方式

var print = function(obj){
    console.log(obj);
}
//简写为
var print2 = obj => console.log(obj);

多个参数

var sum = function(a,b){
    return a + b;
}
//简写为
var sum2 = (a,b) => a+b

代码不止一行，可以使用{}括起来

var sum3 = (a,b) => {
    return a + b;
}

对象的函数属性简写

const person = {
    name:"jack",
    age:21,
    sayHello:function(age){
        console.log(age);
    }
    //箭头函数
    sayHello1 : (name,age)  => console.log(name,age)

    //简写
     sayHello2(age){
        console.log(age)
    }
}

箭头函数结合解构表达式

比如有一个函数

const person = {
    name:"jack",
    age:21
}

function hello(person){
    console.log(person.name,person.age);
}

箭头函数结合解构表达式

const hello = ({name,age}) => console.log(name,age)

map和reduce

数组中新增了map和reduce方法

map

map()接收了一个函数，将原数组中的所有元素用这个函数处理后放入原数组返回

举例：有一个字符串数组，我们希望转为int类型的数组

let attr = ['1','2','3','5'];
console.log(attr);
attr = attr.map(s => parseInt(s));
console.log(attr);

reduce

接收一个函数和一个初始值，这个函数中接收两个参数

• 第一个参数是上次reduce函数运算的结果
• 第二个参数是下次要参与运算的元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

const arr = [1,20,-5,3]

arr.reduce((a,b)=>a+b)   //19

arr.reduce((a,b)=>a*b)     //-300

//可以指定第一个参数的默认值，指定默认值为-1
arr.reduce((a,b)=>a*b,-1)   //300

ES6给Object拓展了许多新的方法，如：

• keys(obj)：获取对象的所有key形成的数组
• values(obj)：获取对象的所有value形成的数组
• entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],...]
• assian(dest, ...src) ：将多个src对象的值 拷贝到 dest中(浅拷贝)。