ES6 必知必会

时间  2019-11-08
标签 es6 必会 栏目 JavaScript 繁體版
原文   原文链接

ES6

ES6 语法基础

let 命令

  • 基本语法html

    ES6 新增了 let 命令，用来声明变量。它的用法相似于 var，区别在于 let 命令声明的变量只在 let 命令所在的代码块内有效。node

  • 不存在变量提高ajax

    let 不像 var 那样，会发生“变量提高”现象。json

  • 暂时性死区数组

    只要块级做用域内存在 let 命令，它所声明的变量就 ”绑定（binding）” 这个区域，再也不受外部的影响。浏览器

  • 不容许重复声明数据结构

    let 不容许在相同做用域内，重复声明同一个变量。async

块级做用域

  • 为何须要块级做用域？函数

    ES5 只有全局做用域和函数做用域，没有块级做用域，这带来不少不合理的场景。jsonp

    第一种场景：内层变量可能会覆盖外层变量。

    第二种场景：用来计数的循环变量泄露为全局变量。

  • ES6 的块级做用域

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

当即执行函数

(function () {}());
复制代码

const 命令

const 也用来声明变量，可是声明的是常量。一旦声明，常量的值就不能改变。const 声明的常量只在当前代码块有效。

声明冻结对象（也就是说对象的成员变量的值也不能够改变）

const person = Object.freeze({
  name: "zhangsan",
  age: 20
});
复制代码

完全冻结对象的函数

freeze.js

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach((key, value) => {
    if(typeof obj[key] === 'object') {
      constantize(obj[key]);
    }
  })
};
复制代码

跨模块常量

moduleA.js

export const HOST = "http://www.xxx.com";
export const PORT = 8080;
export const NAME = "Lark";

在 moduleB.js 中要如何使用 moduleA.js 中的 HOST 常量呢？

moduleB.js

// * 表示所有引入
import * as ma from "./moduleA";
// 这样使用moduleA中的变量
console.log(ma.HOST);

// 部分引入
import { HOST, PORT } as ma from "./moduleA";

console.log(ma.HOST, ma.PORT);

// 只引入一个
import NAME as ma from "./moduleA";

console.log(ma.NAME);
复制代码

全局对象的属性

全局对象是最顶层的对象，在浏览器环境指的是 window 对象，在 node.js 中指的是 global 对象，在 JavaScript 语言中，全部全局变量都是全局对象的属性。（node 的状况比较特殊，这一条只对 REPL 环境适用，模块环境必须显式声明成 global 的属性）

ES6 规定，var 和 function 命令声明的全局变量，属于全局对象的属性；let 、const 、class 命令声明的全局变量，不属于全局对象的属性。

例如：

var varName = "varValue";

// 浏览器环境下
console.log(window.varName);
// node.js环境下
console.log(global.varName);
// 通用环境下
console.log(this.varName);
复制代码

结构赋值

数组的结构赋值

  • Destructuring

    ES6 容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

  • 不彻底解构

    等号左边的模式，只匹配一部分的等号右边的数组。

  • 指定默认值

    注意：ES6内部使用严格相等运算符（===）判断一个位置是否有值。因此，若是一个数组成员不严格等于undefined，默认值是不会生效的。

  • let 和 const 命令

    只要某种数据结构具备 iterator 接口，均可以采用数组形式的解构赋值。

// Destructuring
// ES6
var [a, b, c] = [1, 2, 3];
console.log(a, b, c);// 1 2 3

//不彻底解构
var [first, second] = [1];
console.log(first); //1
console.log(second); //undifined

//指定默认值
var [one = "One", two] = [];
console.log(one); // One
console.log(two); // undefined

var [x = "abc", y] = [undefined, "xyz"];
console.log(x); //abc 由于undefined表示没有值，因此并不会覆盖abc
console.log(y); //xyz

// iterator 接口
let [a, b, c] = new Set(["a", "b", "c"]);
console.log(a); //a
console.log(b); //b
console.log(c); //c

function* fibs() {
    let a = 0;
    let b = 1;
    while(true) {
        yield a;
        [a, b] = [b, a + b];
    };
    var [first, second, third, fourth, fifth, sixth] = fibs();
    console.log(sixth); //5
}
复制代码

对象的解构赋值

  • 解构不只能够用于数组，还能够用于对象

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

  • 指定默认值

    默认值生效的条件是：对象的属性值严格等于undefined（也就是说若是有值的话，默认值就不会生效）。

  • 现有对象的方法

    对象的解构赋值，能够很方便地将现有对象的方法赋值到某个变量。

var {name, age} = {name: "Lark", age: 30};
console.log(name, age); // Lark 30
复制代码

若是变量名和属性名不一致，该如何调用？

var {name: pName, age: pAge} = {name: "Lark", age: 30};
console.log(pName, pAge); // Lark 30
复制代码

指定默认值

var { x = 3 } = {};

console.log(x); // 3

var { y = 4 } = { y = undefined };
console.log(y); // 4

var { z = 5 } = { z = null };
console.log(z); // null
复制代码

对已声明变量的解构赋值

var x;
{ x } = { x: 1 };
console.log(x); // 报错 语法错误，编译不经过

var y;
({ y } = { y: 1 });
console.log(y); // 1
复制代码

现有对象的方法（使用现有对象的方法，就不用每次对象.方法方式调用了）

let { sin, cos, tan, PI } = Math;
console.log(sin(PI / 6)); // 0.49999999
复制代码

字符串的解构赋值

  • 字符串也能够解构赋值

    字符串被转换成了一个相似于数组的对象

  • 属性解构赋值

    相似数组的对象都有一个 length 属性，所以还能够对这个属性解构赋值。

var { a, b, c, d, e } = "hello";
console.log(a, b, c, d, e); // h e l l o
复制代码

字符串的属性解构

const { length: len } = "hello";
console.log(len); // 5
复制代码

函数参数的解构赋值

  • 函数的参数也能够使用解构
  • 函数参数的解构也能够使用默认值

函数参数的解构赋值

function sum([x, y]) {
    return x + y;
}
console.log(sum([1, 3])); // 4
复制代码

函数参数解构赋值的默认值

function sum({x = 0, y = 0} = {}) {
    return [x, y];
}
console.log(sum({x: 100, y: 200})); // [100, 200]
console.log(sum({x: 100})); // [100, 0]
console.log(sum({})); // [0, 0]
console.log(sum()); //[0, 0]
复制代码
function sum({x, y} = {x: 0, y: 0}) {
    return [x, y];
}
console.log(sum({x: 100, y: 200})); // [100, 200]
console.log(sum({x: 100})); // [100, undefined]
console.log(sum({})); // [undefined, undefined]
console.log(sum()); //[0, 0] 没有传参数，它作的不是函数参数解构赋值，而是对象解构赋值，{x, y} = {x: 0, y: 0} 会在函数运行。
复制代码

解构赋值的用途

  • 交换变量的值
  • 从函数返回多个值
  • 函数参数的定义
  • 提取json数据
  • 函数参数的默认值
  • 遍历map解构
  • 输入模块的指定方法

交换变量的值

var x = 100;
var y = 200;
[x, y] = [y, x];
console.log(x, y); // 200 100
复制代码

从函数返回多个值

function fun() {
    return [1, 2, 3];
}
var [x, y, z] = fun();
console.log(x, y, z); // 1 2 3
复制代码
function fun() {
    return {
        id: "001",
        name: "Lark",
        age: 30
    };
}
var { id, name, age } = fun();
console.log(id, name, age); // 001 Lark 30
复制代码

函数参数的定义

// 参数是一组有次序的值
function fun([x, y, z]) {
    // x=100 y=200 z=300
}
fun([100, 200, 300]);

// 参数是一组无次序的值
function fun2({id, name, age}) {
    // id="001" name="Lark" age=30
}
fun2({id: "001", name: "Lark", age: 30});
复制代码

提取json数据

var jsonData = {
    id: "001",
    name: "Lark",
    age: 30,
    score: {
        Chinese: 100,
        English: 90
    }
};

let { id, name, age, score } = jsonData;
console.log(id, name, age, score);// 001 Lark 30 
复制代码

函数参数的默认值

jQuery.ajax({
    url: '/path/to/file',
    type: 'POST',
    dataType: 'xml/html/script/json/jsonp',
    data: {param1: 'value1'},
    complete: function(xhr, textStatus) {
        
    },
    success: function(data, textStatus, xhr) {
        
    },
    error: function(xhr, textStatus, errorThrown) {
        
    }
});

jQuery.ajax = function(url, { async = true, beforeSend = function() {},
    cache = true,
    complete = function() {},
    crossDomain = false,
    global = true
}){
    // do something
};
复制代码

遍历map解构

var map = new Map();
map.set("id", "001");
map.set("name", "Lark");
map.set("age", 30);

// 获取键名和键值
for(let [key, value] of map) {
    console.log(key, value);
}
// id 001
// name Lark
// age 30

// 获取键名
for(let [key] of map) {
    console.log(key);
}
// id
// name
// age

// 获取键值
for(let [, value] of map) {
    console.log(value);
}
// 001
// Lark
// 30
复制代码

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
复制代码


后面会持续更新请继续关注，再会......

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程