简单的ES6新特性

简单的ES6新特性

1. 简介

ES6,全称ECMAScript 6.0,是javaScript的下一个版本标准，发布时间为2015年6月。其出现主要解决了javascript中不足的部分，比如javaScript中没有类这个概念，还有变量的常量的定义不清楚等问题。现如今大部分的浏览器都支持ES6的部分特性。如果你作为一个前端开发者，学习和使用ES6是必要的。

发展历史

javaScript的创造者：网景公司（Netscape）

1997年，js被提交给ECMA标准化组织，称为国际化标准，并命名为ECMAScript。

• 1997 年 ECMAScript 1.0 诞生。
• 1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
• 1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
• 2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
• 2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
• 2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

2. let和const

在es5中，我们我们对常量和变量的声明都是用var关键字

在es6中

• 变量声明关键字：let
• 常量声明关键字：const

let，const和var的区别：

let：

• 用于声明变量，声明的变量只在代码块内有效

  {
    let a = 0;
  }
  a   // 报错 ReferenceError: a is not defined
  

• 在for，当计数器是变量只在for中有效。(适合声明计数器)

• 不能重复声明变量

  let a = 1;
  let a = 2;
  a  // Identifier 'a' has already been declared
  

• 不存在变量提升

  console.log(a);  //ReferenceError: a is not defined
  let a = "apple";
  

const：

• 用于声明变量，声明变量之后变量的值不能改变

var：

• 声明的变量全局有效

  {
    var b = 1;
  }
  b  // 1
  

• 能够重复声明变量

  var b = 3;
  var b = 4;
  b  // 4
  

• 存在变量提升

  console.log(b);  //undefined
  var b = "banana";
  

3. 模板字符串

let name = "ariverh";
let age = 22
let info = `my name is ${name}, I am ${age} years old`
//my name is ariverh,I am 22 years old

4. 函数的默认参数

• 使用函数的默认参数时，参数名不能重名

• 当未传递参数或者参数未undefined，会使用默认参数

  function sum(a=1,b=2){
   	return a+b;
  }
  
  sum() //3
  sum(2,2)//4
  sum(4) //6
  

5. 箭头函数

在javascript中的箭头函数和java中的Lamda表达式有相似之处。

- 正常函数
function sum(a,b){
	return a+b;
}
var sum = function(a,b){
	return a+b;
}

- 箭头函数 多参数多循环体
var sum1 = (a,b) =>{
	var c = a+b;
	console.log(c);
	return c;
};

- 箭头函数 单参数多循环体
var sum2 = a =>{
	a = a+1;
	console.log(a);
	return a;
};

- 箭头函数 单参数单循环体
var sum3 = a => a+1;

- 箭头函数 多参数单循环体
var sum4 = (a,b)=>a+b;
java
- 箭头函数 无参数 单循环体
var sum5 = ()=>1+2;

6. 对象的简写

- 传统对象
var name = "ariverh"
var age = 22
var person = {
    age: age,
    name: name,
    say: ()=> console.log(`my name is ${name},I am ${age} years old`) //学以致用
}

- es6 对象简写    在对象简写中不能使用箭头函数 
var name = "ariverh"
var age = 22
var person1 = {
    age,
    name,
    say(){
        console.log(`my name is ${name},I am ${age} years old`) 
    }
}

传统对象：

es6对象：

7. 对象解构

let person1 = {
    age: 22,
    name: "ariverh",
    say(){
        console.log(`my name is ${name},I am ${age} years old`)
    }  //学以致用
};
let {age,name,say} = person1;
console.log(age);
say();

9. 对象传播操作符

let person1 = {
    age: 22,
    name: "ariverh",
    say(){
        console.log(`my name is ${name},I am ${this.age} years old`)
    }  //学以致用
};
let {age,...person2} = person1;
console.log(age);
console.log(person2);

10. 数组map

let persons =[{age:22,name:"tom"},{age:21,name:"jeny"},{age:10,name:"jack"}];
let persons1 = persons.map(function(ele){
    ele.age = ele.age +1;
    return ele;
});

console.log(persons1);
//[
//  { age: 23, name: 'tom' }, 
//  { age: 22, name: 'jeny' },
//  { age: 11, name: 'jack' } 
//]

11. 数组reduce

let arr = [1,2,3,4,5,6,7,8,9,10]
let result = arr.reduce(function(a,b){
	return a+b;
});
console.log(result);
//55

-过程：
a = 1, b = 2 ,[3,3,4,5,6,7,8,9,10]
a = 3, b = 3 ,[6,4,5,6,7,8,9,10]
....
result = 55