美文网首页
(ECMAScript 6入门 -阮一峰)--笔记1

(ECMAScript 6入门 -阮一峰)--笔记1

作者: 清汤饺子 | 来源:发表于2018-11-18 23:11 被阅读0次

    2015年6月,es6正式通过,成为国际标准。
    支持度:各浏览器的最新版本,对es6的支持度很高。但是对于旧版本的浏览器,支持度不高,需要转码es5代码运行。

    - Babel转码器

    配置文件.babelrc,用来设置转码规则和插件

    {
      "presets": [],
      "plugins": []
    }
    

    babel-cli命令行转码
    babel-node提供一个REPL环境
    babel-register 可以改写require命令,为他加上一个钩子,require js文件时会先用Babel转码
    babel-core,如果某些代码需要Babel的api进行转码,就需要用这个模块。
    babel-polyfill,Babel默认只转换新的Javascript句法,而不转换新的api,也不会转换定义在全局对象上的方法,比如Array.from()方法

    • let

    块级作用域:let声明的变量在let命令所在的{}内有效。虽然es6运行在块级作用域内声明函数,但是为了考虑兼容老代码,不建议使用,可以用函数表达式代替。
    不存在变量提升:let声明的变量一定要在声明后使用,不然会报错。
    暂时性死区:let声明了某个变量,则在声明的{}内存在暂时性死区,在这个作用域内该变量一直存在,但是必须在声明变量后,变量才可以使用,在声明之前,变量是不可以获取的。
    不允许重复声明

    • const

    声明常量,定义后值不可以修改

    es6声明变量的6种方法
    var.function.let.const.class.import

    • 变量的解构赋值

    let [a,b,c,d='d'] = [1,2,3];
    let {a,b}={a:'a',b:'b'};
    //a:'a'
    let {a:b}={a:'a'}
    //a: error,因为a是匹配模式是未定义的
    //b:'a',b才是变量
    

    提取JSON数据

    let jsonData={
    name:'tang',
    age:22
    }
    let{name,age} = jsonData;
    
    • 字符串的扩展:模板字符串${}

    //多行字符串
    let str1 = `i am
    tang`;
    //在字符串中插入变量
    let str2 = `hello${str1}`;
    //模板html
    let myHtml = `
    <div>
    <ul><li></li></ul>
    </div>`;
    
    
    • 函数的扩展

    //函数参数默认值
    function hello(name,age=20){
      alert(`my name is ${name},i am ${age} years old`);
    };
    hello('tang');//
    

    rest参数,用于获取函数的多余参数,是数组,可以使用数组方法。
    箭头函数,没有自己的this,this永远指向引用该函数的父函数的this.

    var f = val = > val
    var f = () => 5
    var sum = (val1,val2) => val1 + val2;
    [1,2,3].map(x => x*x);
    let result = results.sort((a,b) => a - b);
    
    • 数组的扩展

    扩展运算符
    [...arr],将一个数组转为用逗号分割的参数数列。
    实际运用:

    //复制数组
    let arr1 =  [ 1,2,3];
    let arr2 = [...arr1];
    
    //合并数组
    let arr3 = [...arr1,...arr2];
    
    //解构赋值
    let [arr4,...rest] = [1,2,3,4,5];
    console.log(arr4);//1
    console.log(rest);// [2,3,4,5];
    
    //字符串转数组
    let arr5 = [...'hello'];
    console.log(arr5);//['h','e','l','l','o']
    

    Array.from()
    负责将类似数组的对象和可遍历的对象转为真正的数组

    • 对象的扩展

    属性的简洁表示法

    const str1 = 'test';
    let obj = {str1};//相当于obj = {str1:str1};
    

    相关文章

      网友评论

          本文标题:(ECMAScript 6入门 -阮一峰)--笔记1

          本文链接:https://www.haomeiwen.com/subject/hpngfqtx.html