ES6常用

ES 6 :

     1 .块级作用域 :新增let ,作用域在块级 ,就是在{}中有效 ,建议代替var

            (1) .var i= 0时i在for外面依然有值 ,这是问题

     2 .赋值的变化 :默认值可放在函数的申请里(在function传参进来时就能写默认值)

     3 .模板对象 :用 `代替 ''和 "" ,他里面的空格 ,换行都原样输入

     4 .模板对象 :可以使用新的语法 ${NAME} ，并把它放在反引号里(这样能改变字符串而不用拼)

     5 .模块

        (1)使用import取代require

             //以前的写法

            const moduleA = require('moduleA') ;

            const func1 = moduleA .func 1 ;

            const func2 = moduleA .func 2 ;

             //ES 6写法

            import { func1, func2 } from 'moduleA' ;

        (2)使用export取代module .exports

             // commonJS的写法

            var React = require('react') ;

            var Breadcrumbs = React .createClass ({

                render() {

                    return <nav /> ;

                 }

             }) ;

             module.exports = Breadcrumbs ;

             // ES 6的写法

            import React from 'react' ;

            class Breadcrumbs extends Component {

                render() {

                    return <nav /> ;

                 }

             } //这里不要加逗号

            export default Breadcrumbs

     6 .箭头函数 :箭头函数不绑定作用域 ,意思是箭头函数里可用外面的this

        (1)立即执行函数可以写成箭头函数的形式 。

            (() => {

                console .log('Welcome to the Internet.') ;

             })() ;

        (2)success : function() {

                var num = [1,2,3] ;

                num .forEach(function(v) {}

             }

        换成 :success : () => {

                 //可换成success : res => {} ,参数只有一个

                var num = [1,2,3] ;

                num .forEach((v) => {}

                 //num .forEach (v=> {}只有一个参数时还可以把括号省略

             }

             //function绑定作用域

             //=>不绑定作用域

        (3)箭头函数不知道传多少个参可用 ...

            test : () => {

                function root(...num) {

                    let sum = 0 ;

                    for(let n of num) {       //for of 是ES 6的

                        sum += n ;

                     }

                    console .log(sum) ;

                 }

                root() ;

                root(8) ;

                root(10,11) ;

             }

        

     7 .对象名可用字符串拼接

        test : function() {

            var tool = {

                ['str'+'name'+'you','OK']

             }

            console .log(tool)

         }

     8 .解构赋值 :ES 6允许按照一定的模式 ,从数组和对象中提取值 ,对变量进行赋值 ,这被称为解构

         1 )数组的解构赋值 :

            test : function() {

                var num = [1,2,3] ;

                var [a,b] =num ;

                console .log(a,b)     //输出 1 , 2 , 3

             }

         2 )对象的解构赋值 :

            test : function() {

                var tool = {

                    name : "loop"

                    age : 12 ,

                    sex : "男"

                 }

                var {name,sex} = tool ;

                console .log(name,sex) ;  //输出loop,男

             }

         3 )字符串的解构赋值 ,字符串被转换成了一个类似数组的对象 :

            test : function() {

                var [a,b,c,d] = "java" ;

                console .log(a,b,c,d)     //输出j ,a ,v ,a

             }

         4 )函数参数的解构赋值 :

            test : function() {

                function tt([x,y]) {

                    console .log(x,y)     //输出 1 , 2

                 }

                tt([1,2])

             }

     9 .Class是ES 6引入的最重要特性之一 .

        (1)在没有Class之前 ,我们只能通过原型链来模拟类 .

             //以前写法

            function Queue(contents = []) {

                 this._queue = [...contents] ;

                 }

                 Queue.prototype.pop = function() {

                const value = this ._queue[0] ;

                this ._queue .splice(0, 1) ;

                return value ;

             }

             //ES 6写法

            class Queue {

                constructor(contents = []) {

                     this._queue = [...contents] ;

                 }

                pop() {

                    const value = this ._queue[0] ;

                    this ._queue .splice(0, 1) ;

                    return value ;

                 }

             }

            test : function() {

                 //以前写法

                var Root = function() {

                 } ;

                 Root.prototype.eat = function() {

                    console .log("es5 Eat") ;

                 }

                 Root.doing = function() {

                    console .log("es5 Doing") ;

                 }

                let a = new Root() ;

                a .eat() ;

                Root .doing() ;

                

                 //ES 6写法

                class Roots {

                    constructor() {

                     }

                    eat() {

                        console .log("ES6 eat") ;

                     }

                    static doing() {

                        consile .log("ES6 doing") ;

                     }

                 }

                let b = new Roots() ;

                b .eat() ;

                Roots .doing() ;

             }

        (2)使用extends实现继承 ，因为这比ES 5的通过修改原型链实现继承 ，要清晰和方便很多 。

             //以前写法

            const inherits = require('inherits') ;

            function PeekableQueue(contents) {

                Queue .apply(this, contents) ;

             }

            inherits(PeekableQueue, Queue) ;

             PeekableQueue.prototype.peek = function() {

                return this ._queue[0] ;

             }

             //ES 6写法

            class PeekableQueue extends Queue {

                peek() {

                    return this ._queue[0] ;

                 }

             }

     10 .Map结构 :注意区分Object和Map ，只有模拟现实世界的实体对象时 ，才使用Object 。如果只是需要key : value的数据结构 ，使用Map结构 。因为Map有内建的遍历机制 。

        例子 :

            let map = new Map(arr) ;

            for (let key of map.keys() ) {

                console .log(key) ;

             }

            for (let value of map.values() ) {

                console .log(value) ;

             }

            for (let item of map.entries() ) {

                console .log(item[0], item[1]) ;

             }

作者：牧云云 
出处：http://www.cnblogs.com/MuYunyun/" 
本文版权归作者和博客园所有，欢迎转载，转载请标明出处。 
如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！