1.let命令

1)let和var的区别:let声明的变量只有所在的代码块有效。

2)没有变量的提升,一定要声明后使用。使用let命令声明变量之前,该变量都是不可用的。形成“暂时性死区”。

3)typeof 不再是一个百分之百安全的操作。

2.块级作用域

1)es5和es6比较:es5 只有全局作用域和函数作用域,没有块级作用域。

2)let实际上为javascript新增了块级作用域

3)es6 允许块级作用域的任意嵌套。

4)es5规定函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明,严格模式下会报错。为ES5和es6环境避免报错,应不要在块级作用域里声明函数。

3.const命令

1)const声明一个只读的常量。一旦声明,常量的值就不能改变。const一旦声明变量,就必须立即初始化,不能留到以后赋值。

2)其他特性和let类似

3)对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。

1
2
3
4
5
6
7
8
const foo = {};
foo.prop = 123;
 
foo.prop
// 123
 
foo = {};
//常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

ES5只有两种声明变量的方法:var命令和function命令。ES6除了添加letconst命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6一共有6种声明变量的方法。

4.顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在Node指的是global对象。 ES6规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。

1
2
3
4
5
6
7
var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1
 
let b = 1;
window.b // undefined

5.解构赋值

1.数组得解构赋值

1)“模式匹配”为变量赋值;var [a, b, c] = [1, 2, 3];

2) 不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。

1
2
3
4
let [a, [b], d] = [1, [2, 3], 4];
// 1
// 2
// 4

3)解构赋值不仅适用于var命令,也适用于let和const命令,对于Set结构,也可以使用数组的解构赋值。只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。

2.对象的解构赋值

1)对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

1
2
3
4
5
6
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
 
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

2)变量名与属性名不一致,必须写成下面这样。这实际上说明,对象的解构赋值是下面形式的简写。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

1
2
3
4
5
6
7
8
9
//对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。<br>var { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
 
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
 
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
// 'hello'
// 'world'

3)和数组一样,解构也可以用于嵌套结构的对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
 
var { p: [x, { y }] } = obj;
// "Hello"
// "World"
//这时p是模式,不是变量,因此不会被赋值
var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
 
var { loc: { start: { line }} } = node;
line // 1
loc  // error: loc is undefined
start // error: start is undefined
 
 
let obj = {};
let arr = [];
 
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
 
obj // {prop:123}
arr // [true]

4)数组本质是特殊的对象,因此可以对数组进行对象属性的解构

1
2
3
4
var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

3.字符串的解构赋值

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

2)类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

1
2
3
4
5
6
7
8
9
const [a, b, c, d, e] = 'hello';
// "h"
// "e"
// "l"
// "l"
// "o"
 
let {length : len} = 'hello';
len // 5

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

解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

1
2
3
4
5
6
7
8
let {toString: s} = 123;
s === Number.prototype.toString // true
 
let {toString: s} = true;
s === Boolean.prototype.toString // true
 
let { prop: x } = undefined; // TypeError
let { prop: y } = null// TypeError

5.变量得解构赋值用途

1)交换变量的值。

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

2)从函数返回多个值

3)函数参数的定义,解构赋值可以方便地将一组参数与变量名对应起来。

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

4)提取json数据,解构赋值对提取json对象中的数据,尤其有用。

1
2
3
4
5
6
7
8
9
10
11
12
var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
 
let { id, status, data: number } = jsonData;
 
console.log(id, status, number);
// 42, "OK", [867, 5309]
 
//可以快速提取json中的数据的值。

5)函数参数的默认值

1
2
3
4
5
6
7
8
9
10
11
12
????????????
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

6)遍历map结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var 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)输入模块的指定方法

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

1
const { SourceMapConsumer, SourceNode } = require("source-map");

 

es6 转载的更多相关文章

  1. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

  2. ES6实战:新数字方法

    本文翻译自:https://www.sitepoint.com/es6... 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文介绍了ES6中全新的数字方 ...

  3. ES6 Promise 用法转载

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  4. ES6新特性:使用export和import实现模块化(转载)

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...

  5. ES5和ES6对象导出和导入(转载,待整理)

    1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...

  6. (转载) 深入理解ES6箭头函数的this以及各类this面试题总结

    声明:本文转载自 https://blog.csdn.net/yangbingbinga/article/details/61424363 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取 ...

  7. 基于webpack使用ES6新特性(转载)

    本文转载自: http://www.tuicool.com/articles/vye2ea6

  8. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  9. 【Todo】【转载】ES6的学习记录

    粗略看了一遍React的内容,然后看了 ES6 的入门文章: http://es6.ruanyifeng.com/#docs/intro 通过这个链接可以查看浏览器对 ES6 的支持程度: http: ...

随机推荐

  1. SSM到Spring Boot-校园商铺平台:第01章 开发准备

    第01章 开发准备 环境准备 创建一个Maven项目作为开始 添加一个 Server Runtime 添加maven的java编译插件 <build> <finalName>$ ...

  2. PAT Basic 1013 数素数 (20) [数学问题-素数]

    题目 令Pi表示第i个素数.现任给两个正整数M <= N <= 10^4,请输出PM到PN的所有素数. 输⼊格式: 输⼊在⼀⾏中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的 ...

  3. CertUtil: -hashfile 失败: 0xd00000bb (-805306181)

    使用CertUtil验证Python安装文件的时候出现了这个错误. CertUtil: -hashfile 失败: 0xd00000bb (-805306181) 代码是这样 certutil -ha ...

  4. 零相关|回归|相关|相关系数|回归解释相关|r判断相关性|相关系数的区间估计|数据类型|非线性回归

    零相关是什么? 零相关亦称“不相关”.相关的一种.两个变量的相关系数r=0时的相关.零相关表示两个变量非线性相关,这时两个变量可能相互独立,也可能曲线相关.对于正态变量,两个变量零相关与两个变量相互独 ...

  5. Tensorflow学习教程------tfrecords数据格式生成与读取

    首先是生成tfrecords格式的数据,具体代码如下: #coding:utf-8 import os import tensorflow as tf from PIL import Image cw ...

  6. JVM--走进Java

    1.1 概述 1) Java 能获得如此广泛的认可,除了他拥有一门结构严谨,面向对象的编程语言之外,还有许多不可忽视的有点:Java 摆脱了硬件平台的束缚,实现了“一次编写,到处运行”的理想:他提供了 ...

  7. 小白学习之pytorch框架(4)-softmax回归(torch.gather()、torch.argmax()、torch.nn.CrossEntropyLoss())

    学习pytorch路程之动手学深度学习-3.4-3.7 置信度.置信区间参考:https://cloud.tencent.com/developer/news/452418 本人感觉还是挺好理解的 交 ...

  8. 你知道你对 JSON Web Token 的认识存在误解吗

    1.前言 JSON Web Token (JWT) 其实目前已经广为软件开发者所熟知了,但是 JOSE (Javascript Object Signing and Encryption) 却鲜有人知 ...

  9. 1)PHP基础介绍

    1.php基础介绍: Perssonal Home Page  ====>PHP 2.应用范围 · web服务器脚本语言 命令行脚本语言     应用程序图形界面 3.PHP运行环境 PHP解释 ...

  10. Java BigInteger详解

    BigInteger概述 可用于无限大的整数计算 所在的包 java.math.BigInteger; 构造函数 public BigInteger(String val) 成员函数 比较大小函数 p ...