ES6学习笔记

作者: RachelCT | 来源:发表于2020-03-29 22:48 被阅读0次

    1.JavaScript包含3个部分,分别是ECMAScript、DOM和BOM。

    ES5是ECMAScript的第5个版本,ES6是第6个版本。

    ECMAScript是核心,它规定了语言的语法、类型、关键字、保留字、操作符、语句、对象;DOM文档对象模型;BOM是浏览器对象模型

    2.ES5在以前的版本上增加了一些Array方法、Object方法、strict模式等;而ES6又在向下兼容的条件下新增了一些属性方法。因此ES6相对于ES5具有一些特性:

    块级作用域,let关键字,const常量,赋值结构,字符串模板生成器等等

    3.ES6教程:https://www.runoob.com/w3cnote/es6-tutorial.html

    教程讲得非常详细,下面这张图做出来概述


    图片来自菜鸟教程

    ES6的详细学习(关于ES6进行具体的学习,笔记记录在下方)

    1.let和const
    let和const是在ES6中新增的两个关键字。let限定了变量只在代码块内使用,不会进行变量提升(而var会有变量提升);const定义静态变量,使用const定义变量必须进行赋值,且静态变量不允许对其进行改变。
    let使用在计数器中效果会很好:这里面使用let的循环,每次输出的j都是不同的变量

    for (var i = 0; i < 10; i++) {
      setTimeout(function(){
        console.log(i);
      })
    }
    // 输出十个 10
    for (let j = 0; j < 10; j++) {
      setTimeout(function(){
        console.log(j);
      })
    }
    // 输出 0123456789
    

    ReferenceError: 参数错误,没有定义该变量
    undefined:没有给变量赋值就使用,但是该变量已经存在
    SyntaxError: 语法错误,如使用const定义变量却不对它赋值
    2.解构赋值
    剩余运算符:

    //数组模型的解构
    let [a, ...b] = [1, 2, 3];
    //a = 1
    //b = [2, 3]
    
    //对象模型的解构
    let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
    // a = 10
    // b = 20
    // rest = {c: 30, d: 40}
    

    3.数据类型Symbol
    在ES6中新增了数据类型Symbol,其用途有如下几点:
    ·作为对象的属性名,可以保证属性名不重复
    ·定义常量,保证常量是独特的
    ·Symbol.for()类似于单例模式
    ·Symbol.keyFor()返回一个已经登记的Symbol类型值得key
    相同参数 Symbol() 返回的值不相等

    let sy = Symbol("KK");
    console.log(sy);   // Symbol(KK)
    typeof(sy);        // "symbol"
     
    // 相同参数 Symbol() 返回的值不相等
    let sy1 = Symbol("kk"); 
    sy === sy1;       // false
    

    4.关于set和Map
    set对象存储的值总是唯一的
    5.Proxy和Reflect
    ES6中定义了Proxy和Reflect对API进行一些操作。基本方法和实例方法有点多,这里不做详细的记录,用到的时候去具体搞清楚。
    6.ES6字符串
    ES6中扩展了对字符串的处理方法,如判断是否包含子串,以前用indexOf(),ES6中有:

    includes()
    startsWith()
    endWith()
    //重复字符串
    repeat()
    //字符串补全
    padStart()
    padEnd()
    //模板字符串,反引号'   可以用来定义多行字符串的
    let string1 =  `Hey,
    can you stop angry now?`;
    console.log(string1);
    // Hey,
    // can you stop angry now?
    
    //字符串插入变量和表达式$(),变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
    //...
    

    7.字符串数值
    ES6在Math对象上新增了17个数学静态方法,这些方法通过Math调用;
    ......
    8.ES6对象
    对象字面量:允许对象属性直接写变量;函数名简写等
    对象拓展运算符:拷贝对象的所有可遍历的属性;合并两个对象。需要注意的是,当拓展对象中和现有的对象有相同属性时,后面的会覆盖前面的

    let person = {name: "Amy", age: 15};
    let someone = { ...person, name: "Mike", age: 17};
    someone;  //{name: "Mike", age: 17}
    

    对象的新方法:

    //复制源对象的所有可枚举对象
    Object.assign(target, source_1, ···)
    //比较两个值是否严格相等
    Object.is(value1, value2)
    

    9.ES6数组
    包含一些数组的操作方法,如数组的创建、遍历、包含、数组缓冲区、定型数组等
    10.ES6函数
    在参数和箭头函数方面做了扩展。例如可以定义不定长度的参数,在回调函数中使用箭头函数可以解决使用this的问题(具体的问题,还有使用的注意点要看一下教程,教程中很清晰)
    11.迭代器
    迭代器是ES6中引入的遍历机制,可以通过Symbol.itertor创建迭代器进行遍历。
    12.class类
    13.ES6模块
    基本的用法:

    /*-----export [test.js]-----*/
    let myName = "Tom";
    export { myName as exportName }
     
    /*-----import [xxx.js]-----*/
    import { exportName } from "./test.js";
    console.log(exportName);// Tom
    

    export defualt命令:

    var a = "My name is Tom!";
    export default a; // 仅有一个
    export default var c = "error"; 
    // error,default 已经是对应的导出变量,不能跟着变量声明语句
     
    import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收
    

    14.ES6 Promise对象
    Promise是一个对象,用来进行异步编程。Promise有三个状态,分别是pending(正在进行),fulfilled(成功),rejected(失败);Promise的状态只能由pending转向fulfilled或者rejected。fulfilled和rejected都是属于resolved状态。
    15.Generator函数
    该函数可以通过关键字yeild将函数执行流挂起,以实现异步操作。
    在函数名前面加上*表示该函数是Generator函数,在函数内部使用yeild关键字来定义函数内部的状态对象。
    通过.next()方法遍历对象,当next()方法不传入参数的时候,yeild表达式的返回值是undefiend,当next()方法有传入参数时,该参数会作为上一步yeild的返回值。具体的例子如下:

    function* sendParameter(){
        console.log("strat");
        var x = yield '2';
        console.log("one:" + x);
        var y = yield '3';
        console.log("two:" + y);
        console.log("total:" + (x + y));
    }
    
    var sendp1 = sendParameter();
    sendp1.next();
    // strat
    // {value: "2", done: false}
    sendp1.next();
    // one:undefined
    // {value: "3", done: false}
    sendp1.next();
    // two:undefined
    // total:NaN
    // {value: undefined, done: true}
    next传参
    var sendp2 = sendParameter();
    sendp2.next(10);
    // strat
    // {value: "2", done: false}
    sendp2.next(20);
    // one:20
    // {value: "3", done: false}
    sendp2.next(30);
    // two:30
    // total:50
    // {value: undefined, done: true}
    

    16.async函数
    async是ES7才有的,与Promise和Generator有很大关联。
    async函数返回一个Promise对象,可以通过then添加回调函数;
    async函数执行时可能会遇到await表达式,这时会将触发的异步操作执行完毕之后再继续执行async函数;
    await关键字在async函数内部有效,外部会报语法错误

    相关文章

      网友评论

        本文标题:ES6学习笔记

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