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. 第4章 ZK基本特性与基于Linux的ZK客户端命令行学习

    第4章 ZK基本特性与基于Linux的ZK客户端命令行学习 4-1 zookeeper常用命令行操作 4-2 session的基本原理与create命令的使用

  2. Asp.Net MVC主项目访问不到分离项目控制器的解决方案

    我在portal主项目外新建一个分离项目,控制器和Model都写在分离项目中,视图层写在portal中. 我更改了命名空间,引用了Dll,还是不能访问到控制器. 找到问题: 最后我发现是主项目port ...

  3. 帝国CMS7.5后台美化模板 后台风格修改 帝国CMS后台模板

    都知道帝国CMS功能强悍,生成静态html也非常好用.可是有时候他的后台样式,丑的让你不想用,dede呢,漏洞太多,PHPCMS好看,可是门槛要求高,你会写PHP才行. 帝国CMS后台美化模板:全面美 ...

  4. HDU - 4578 线段树+三重操作

    这道题自己写了很久,还是没写出来,也看了很多题解,感觉多数还是看的迷迷糊糊,最后面看到一篇大佬的才感觉恍然大悟. 先上一篇大佬的题解:https://blog.csdn.net/aqa20372995 ...

  5. 常用STL的常见用法

    //#pragma comment(linker, "/STACK:1024000000,1024000000") //#pragma GCC optimize(2) //#inc ...

  6. 哈夫曼编码的理解(Huffman Coding)

    哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造异字头的平均长度最 ...

  7. Linux设置环境变量PATH路径的两种方法

    echo 'export dataPath=$HOME/data/pre' >> ~/.bash_profile 路径即刻生效: . .bash_profile 或 source .bas ...

  8. 图遍历算法的应用(包括输出长度为l的路径最短最长路径)

    判断从顶点u到v是否有路径 void ExistPath(AdjGraph* G, int u, int v, bool& has) { int w; ArcNode* p; visit[u] ...

  9. Git-GitHub-GitLab三者之间的联系及区别

    在讲区别以及联系之前先简要的介绍一下,这三者都是什么(本篇文章适合刚入门的新手,大佬请出门左转) 1.什么是 Git? Git 是一个版本控制系统. 版本控制是一种用于记录一个或多个文件内容变化,方便 ...

  10. 106)PHP,缩略图代码和结果展示

    首先是 代码展示: <?php class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 *@param $src ...