【web开发 ES6新增语法】常用ES2015/ES6新增语法的使用

最近在进行react-redux编程，今天把实践过程中用到的ES6语法总结总结以备忘

let, const

let命令的用法类似于var，用来声明变量。可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

const PI = Math.PI
PI = 23 //Module build failed:  "PI" is read-only

class, extends, super

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法比对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。该语法在组件化编程的react中很常见：

class Form extends React.PureComponent{
    constructor(){
        super()
    }
}

箭头函数

ES6允许使用“箭头”（=>）定义函数

var f = v => v;

上面的箭头函数等同于：

var f = function(v) {
  return v;
};

箭头函数除了能简化代码，还有更大的好处：减少this的使用。箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(function() {
            this.func();
        }, 100);
    }
};

o.test(); // TypeError : this.func is not a function

上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。我们需要使用外部变量事先保存this，修改上面的代码如下：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        var _this = this;
        setTimeout(function() {
            _this.func(); 
        }, 100);
    }
};

o.test();

这段代码如果使用箭头函数，就不需要使用this，因为箭头函数的 this 始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：

var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};

o.test();

字符串模板（反引号 `）

ES6中提供了用反引号｀来创建字符串，里面可包含${…}，即在字符串中可以添加变量

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

在react编程中经常会用到该方法

'bankicon' style=           {{backgroundImage:`url('${this.bankCardInfo.bankIcon}')`}}>

rest, spread

扩展运算符（ spread ）和Rest操作符都是用三个点（…）表示，但作用整好相反。Rest操作符一般用在函数参数的声明中，而扩展运算符用在函数的调用中。

function func(...args){  
    console.log(args);//[1,2,3,4]  
}  
func(1,2,3,4);  

在react中，如果子组件的属性很多或者数量不确定时，可以用扩展运算符传输属性

<Form {...this.formdatas} willSubmitForm={isSubmitForm}/>

for…of ， for…in

for…of 遍历（数组）

let arr = [1,2,3];
for (let itr of arr) {
  console.log(itr); //1 2 3
}

for…in 遍历对象中的属性

let props={...this.props}
let inputs = []
for (let i in props) {               
  inputs.push(
  type='hidden' name={`${i}`} value={props[i]} key={i}/>
  )
}   

Map, Set

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。

四个操作方法：
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值

Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

实例属性和方法：size、set、get、has、delete、clear

list = supportList.map(
    (item,index) => 
        item.a} value={item.b}>
            {item.c}
        
    );

Symbols

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符.

var sym = Symbol( "Symbol" );
console.log(typeof sym); // symbol

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)

Iterators（迭代器）

ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器，直到状态为true退出。

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();

itr.next(); //{ value: 11, done: false }
itr.next(); //{ value: 12, done: false }
itr.next(); //{ value: 13, done: false }
itr.next(); //{ value: undefined, done: true }

解构

解构赋值是ES6中推出的一种高效、简洁的赋值方法

//通常情况下
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

//解构赋值
let [first, second, third] = someArray;