zoukankan      html  css  js  c++  java
  • es6学习笔记(一)

    1、 es6是什么?

    es6全称ECMAScript 6。ECMAScript 和 JavaScript 之间的关系,前者是后者的规格,后者是前者的一种实现。 ES6一般是指 ES2015 标准。

    2、 let和const声明变量

    之前使用var关键字声明变量,无论声明在何处,都会被视为声明在{}大括号内的代码的最顶部(不在大括号内{}即在全局作用域的最顶部)。这就是函数变量提升。

    function fun () {
    
        if (bool) {
    
            var test = 'hello man';
    
        } else {
    
            console.log(test)
    
        }
    
    }

    上面的代码实际上是:

    function fun() {
    
        var test;
    
        if (bool) {
    
            test = 'hello man';
    
        } else {
    
            //此处访问test,值为undefined
    
            console.log(test);
    
        }
    
        //此处访问test,值为undefined
    
    }

    无论bool的值是true还是falsetest变量都会被声明。

    1) let声明变量

    let命令实际上为JavaScript新增了块级作用域。let命令声明的变量只在它所在的代码块内有效。

    先看下面这一段代码:很显然只能输出十次10。

    var funcs = [];
    
    for (var i = 0; i < 10; i++) {
    
        funcs.push(function () {
    
            console.log(i)
    
        });
    
    }

         那么如何依次输出0-9呢?

         ·闭包

    for (var i = 0; i < 10; i++) {
    
        func.push((function (value) {
    
            return function () {
    
                console.log(value)
    
            }
    
        }(i)));
    
    }

    ·let声明变量

    for (let i = 0; i < 10; i++) {
    
        func.push(function () {
    
            console.log(i)
    
        })
    
    }

    变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,因此能够依次输出0-9。

    使用let声明变量的话,不存在变量提升的情况,必须在声明以后才使用,否则会报错,这在语法上称为“暂时性死区”。并且let不允许在相同作用域内重复声明变量。

    2) const声明变量

    const声明的变量是一个只读变量,一旦声明就必须马上初始化并且不能改变值,因此如果用const只声明而不赋值也会报错。

    const的作用域与let相同,只在当前的块级作用域内有效。同样的,也不能变量提升,存在暂时性死区,不能重复声明。

    本质:

    const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

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

    3、 变量的解构赋值

    1) 数组的解构赋值

    [基本用法]

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

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

    本质上,这种写法属于“模式匹配”,只要等号两边模式相同,左边的变量就会被赋予对应的值。

    如果解构不成功,变量的值就等于undefined。

    let [foo] = [];
    foo //undefined
    
    let [bar, foo] = [1];
    foo //undefined

    另一种情况是不完全解构,即等号左边的模式只匹配一部分等号右边的数组,这种情况下,解构依然成功

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

    [默认值]

    解构赋值允许制定默认值。

    let [foo = true] = [];
    foo // true

    es6内部使用严格相等运算符(===),判断一个位置是否有值。只有数组成员严格等于undefined,默认值才会生效。

    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
    let [x = 'a'] = [null];
    x // null

    null不严格等于undefined,因此默认值不生效

    2) 对象的解构赋值

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

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

     等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。

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

    变量没有对应的同名属性,导致取不到值,最后等于undefined

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

    let { foo: baz } = { foo: "aaa", bar: "bbb" };
    
    baz // "aaa"
    
    foo // error: foo is not defined

    foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo

    3)字符串的解构赋值

    const [a, b, c, d, e] = 'hello';
    
    a // "h"
    
    b // "e"
    
    c // "l"
    
    d // "l"
    
    e // "o"

    还可以对字符串的length属性解构赋值

    let { length: len } = 'hello';
    
    len // 5

    4) 数值和布尔值的解构赋值

    解构赋值是,登等号右边是数值或布尔值,则会先转为对象。

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

    5) 函数参数的解构赋值

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

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

    6) 用途

    变量的解构赋值的用途:

    ·交换变量的值

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

    ·从函数返回多个值

    函数只能返回一个值,如果要返回多个值,只能把他们放在数组或对象里返回。有了解构赋值,取出这些值非常方便。

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

    // 返回一个对象

    function example() {
    
        return {
    
            foo: 1,
    
            bar: 2
    
        };
    
    }
    
    let { foo, bar } = example();

    ·函数参数的定义

    解构赋值可以方便地将一组参数与变量名对应。

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

    ·提取数据

    解构赋值对提取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]

    ·函数参数的默认值

    指定参数的默认值,就避免了在函数内部再写var foo = config.foo || ‘default foo’。

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

    ·遍历Map解构

    任何部署iterator接口对象,都可以for.. ig循环遍历。Map结构原生Iterstor接口配合变量法人结构和赋值,获取键名和键值就非常方便。

    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

    ·输入模块的指定方法

    const { SourceMapConsumer, SourceNode } = require("source-map");
  • 相关阅读:
    [转载]java日志框架log4j详细配置及与slf4j联合使用教程
    log4j的正确使用姿势
    eclipse 安装properties编辑器,显示中文
    tips:解决bootstrap-switch 在jqgrid中动态加载不显示的问题
    jqgrid 设置为每行单选
    MySQL 批量修改某一列的值为另外一个字段的值
    MySQL 使用左连接替换not in
    分析一个react项目
    React不同版本之间需要注意的地方
    一个出色的表格(React实现__ES5语法)
  • 原文地址:https://www.cnblogs.com/zichil/p/8334283.html
Copyright © 2011-2022 走看看