• 《ECMAScript6入门》读书笔记(一)


    《ECMAScript6入门》读书笔记

    《JavaScript高级程序设计》中学习了前八章,后面是一些 DOM 相关的知识,现在开始学习 ES6 语法。

    《ECMAScript6入门》 作者:阮一峰。

    第1章 ECMAScript6 简介

    ES6 既是一个历史名词,也是一个泛指,含义是5.1版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017等等。

    Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码。
    ESLint 用于静态检查代码的语法和风格;Mocha 则是一个测试框架。

    第2章 let 和 const 命令

    let 命令

    let 命令只在其所在的代码块内有效。

    {
      let a = 10;
      var b = 1;
    }
    

    console.log(a); // ReferenceError: a is not defined.
    console.log(b); // 1

    前面闭包中有说:闭包只能取得函数中任何变量的最后一个值。

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10

    使用 let 声明的变量仅在块级作用域内有效。

    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6

    其实 i 仅在当前循环有效。每循环一次就是一个新的变量。

    1.不存在变量提升:var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为 undefined;let 变量声明前使用会报错。

    console.log(c); // ReferenceError: a is not defined.
    console.log(d); // undefined
    

    let c;
    var d;

    2.暂时性死区:在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。

    var tmp = 123;
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;
    }

    暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

    3.不允许重复声明:let 不允许在相同作用域内,重复声明同一个变量。也不能在函数内部重新声明参数。

    块级作用域

    ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
    第一种场景,内层变量可能会覆盖外层变量;第二种场景,用来计数的循环变量泄露为全局变量。

    let 实际上为 JavaScript 新增了块级作用域。

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }

    内部代码块可以定义外层作用域的同名变量;外层作用域无法读取内层作用域的变量,也不受内层代码块的影响。

    块级作用域与函数声明:ES6 允许在块级作用域之中声明函数,但函数在块级作用域之外不可引用。
    考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

    const 命令

    const声明一个只读的常量。一旦声明,就必须立即初始化,常量的值不能改变。

    const PI = 3.1415;
    console.log(PI); // 3.1415
    PI = 3; // TypeError: Assignment to constant variable.
    const foo; // SyntaxError: Missing initializer in const declaration

    const 的作用域与 let 命令相同:只在声明所在的块级作用域内有效。
    const 命令声明的常量也是不提升;同样存在暂时性死区,只能在声明的位置后面使用;并且不可重复声明。

    本质:const 其实是变量指向的内存地址不得改动。
    对于简单类型的数据(数值、字符串、布尔值),等同于常量。但对于复合类型的数据(主要是对象和数组),变量保存的只是一个指针,const 只能保证这个指针是固定的。

    const foo = {};
    // 为 foo 添加一个属性,可以成功
    foo.prop = 123;
    foo.prop // 123
    // 将 foo 指向另一个对象,就会报错
    foo = {}; // TypeError: "foo" is read-only

    如果真的想将对象冻结,应该使用 Object.freeze 方法。

    const foo = Object.freeze({});
    // 常规模式时,下面一行不起作用;
    // 严格模式时,该行会报错
    foo.prop = 123;

    顶层对象的属性

    顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 中,顶层对象的属性与全局变量是等价的。

    window.a = 1;
    console.log(a); // 1
    b = 2;
    console.log(window.b); // 2

    ES6 规定 let、const、class 命令声明的全局变量,不属于顶层对象的属性。

    var a = 1;
    // 如果在 Node 的 REPL 环境,可以写成 global.a
    // 或者采用通用方法,写成 this.a
    console.log(window.a) // 1
    let b = 1;
    console.log(window.b) // undefined

    第3章 变量的解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对 变量 进行赋值,这被称为解构。

    数组的解构赋值

    let [a, b, c] = [1, 2, 3];

    上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

    // 右边比左边少,解构不成功,值为 undefined
    let [bar, foo] = [1]; // undefined,undefined
    // 右边比左边多,不完全解构
    let [x, y] = [1, 2, 3]; //1,2

    默认值:解构赋值允许指定默认值。

    let [x, y = 'b'] = ['a']; // 'a','b'
    let [x, y = 'b'] = ['a', undefined]; // 'a','b'
    // 只有数组成员 严格等于 undefined 时,默认值才会生效
    let [x = 1] = [null]; // null

    对象的解构赋值

    解构不仅可以用于数组,还可以用于对象。

    let { bar, foo } = { foo: "aaa", bar: "bbb" }; //"aaa","bbb"
    let { baz } = { foo: "aaa", bar: "bbb" }; // undefined

    对象的属性没有次序;变量必须与属性同名,才能取到正确的值。

    变量名与属性名不一致:真正被赋值的是后者,而不是前者。

    let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
    console.log(baz); // "aaa"

    对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。

    实际上,对象的解构时下面形式的简写:

    let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; // 完整形式
    let { foo     , bar      } = { foo: "aaa", bar: "bbb" }; // 简写形式

    嵌套赋值:

    let obj = {};
    let arr = [];
    ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
    console.log(obj); // {prop:123}
    console.log(arr); // [true]

    对象的解构也可以指定默认值。同样严格等于 undefined 才生效。

    let {x = 3} = {};
    console.log(x); // 3
    let {x: y = 3} = {};
    console.log(y); // 3

    如果要将一个已经声明的变量用于解构赋值,必须用括号包裹,不能让花括号处于行首。

    let x;
     = {x: 1}; // 错误的写法
    ( = {x: 1}); // 正确的写法

    字符串的解构赋值

    字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

    // 字符串可以看做数组进行结构
    const [a, b, c, d, e] = 'hello';    // a:"h", b:"e", c:"l", d:"l", e:"o",
    // 字符串作为类数组对象,拥有length属性。
    let {length : len} = 'hello';       // len:5

    数值和布尔值的解构赋值

    数值和布尔值也能进行解构,两者会先转为对象,剩下的就是匹配对象中的方法

    let {toString: s} = 123;
    s === Number.prototype.toString  // true
    

    let {toString: s} = true;
    s === Boolean.prototype.toString // true

    // undefined和null不能转为对象,没有属性
    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError

    函数参数的解构赋值

    函数的参数也可以使用解构赋值。

    function add([x, y]){
      return x + y;
    }
    add([1, 2]); // 3

    函数 add() 的参数不是数组,而是[x,y] = [1,2]的解构,在函数内部,x和y可以直接访问,不需要索引。

    函数参数的解构也可以使用默认值。

    function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3});       // [3, 0]
    move({});           // [0, 0]
    move();             // [0, 0]

    下面代码是为函数 move() 的参数指定默认值。

    function move({x, y} = { x: 0, y: 0 }) {
      return [x, y];
    }
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3});       // [3, undefined]
    move({});           // [undefined, undefined]
    move();             // [0, 0] - 无参数,默认值生效

    圆括号问题

    ES6 规定,但凡有可能产生歧义,就不能使用圆括号。以下3种情况下不能用圆括号:

    1.变量声明语句

    let [(a)] = [1];
    let {x: (c)} = {};
    let { o: ({ p: p }) } = { o: { p: 2 } };

    2.函数参数

    function f([(z)]) { return z; }
    function f([z,(x)]) { return x; }

    3.赋值语句的模式

    [(b)] = [3]; // 正确,数组的解构赋值根据索引来,与括号无关
    ({ p: (d) } = {}); // 正确,p 是模式,但 d 不是模式。

    用途

    1.交换变量的值

    let x = 1;
    let y = 2;
    [x, y] = [y, x];

    2.从函数返回多个值

    // 返回一个数组
    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    // 返回一个对象
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example();

    3.函数参数的定义

    // 参数是一组有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3]);
    // 参数是一组无次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1});

    4.提取JSON数据

    let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    let { id, status, data: number } = jsonData;
    console.log(id, status, number);
    // 42, "OK", [867, 5309]

    5.函数参数的默认值

    jQuery.ajax = function (url, {
      async = true,
      beforeSend = function () {},
      cache = true,
      complete = function () {},
      crossDomain = false,
      global = true,
      // ... more config
    }) {
      // ... do stuff
    };

    指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

    6.遍历 Map 结构

    任何部署了Iterator接口的对象,都可以用for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。

    const map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    

    for (let [key, value] of map) {
    console.log(key + " is " + value);
    }
    // first is hello
    // second is world

    // 如果只想获取键名或键值,可以写成下面这样。
    for (let [key] of map) { ... }// 获取键名
    for (let [,value] of map) { ...}// 获取键值

    7.输入模块的指定方法

    加载模块时,往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

    const { SourceMapConsumer, SourceNode } = require("source-map");
  • 相关阅读:
    AtCoder Grand Contest 029C
    AtCoder Grand Contest 034D
    JZOJ 4418. 【HNOI2016模拟4.1】Prime的把妹计划(单调栈+线段树)
    COCI 2015/2016 PROKLETNIK(单调栈+线段树)
    常用数论定理(费马小定理&欧拉定理&扩展欧拉定理)
    JZOJ 3252. 【GDOI三校联考】炸弹(树形DP)
    prufer序列入门
    NOI2020全国统一省选-GDOI游记(爆炸记)
    Manacher算法操作详解
    JZOJ 6493. 【GDOI2020模拟03.04】迷宫(状压DP)
  • 原文地址:https://www.cnblogs.com/hustshu/p/14629948.html
Copyright © 2020-2023  润新知