es6 转载
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除了添加let
和const
命令,后面章节还会提到,另外两种声明变量的方法: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]; a // 1 b // 2 d // 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; f // 'hello' l // '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; x // "Hello" y // "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' ; a // "h" b // "e" c // "l" d // "l" e // "o" let {length : len} = 'hello' ; len // 5 |
4.数值和布尔值的解构赋值
解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。
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 转载的更多相关文章
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- ES6实战:新数字方法
本文翻译自:https://www.sitepoint.com/es6... 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文介绍了ES6中全新的数字方 ...
- ES6 Promise 用法转载
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- ES6新特性:使用export和import实现模块化(转载)
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- ES5和ES6对象导出和导入(转载,待整理)
1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...
- (转载) 深入理解ES6箭头函数的this以及各类this面试题总结
声明:本文转载自 https://blog.csdn.net/yangbingbinga/article/details/61424363 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取 ...
- 基于webpack使用ES6新特性(转载)
本文转载自: http://www.tuicool.com/articles/vye2ea6
- 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 【Todo】【转载】ES6的学习记录
粗略看了一遍React的内容,然后看了 ES6 的入门文章: http://es6.ruanyifeng.com/#docs/intro 通过这个链接可以查看浏览器对 ES6 的支持程度: http: ...
随机推荐
- SSM到Spring Boot-校园商铺平台:第01章 开发准备
第01章 开发准备 环境准备 创建一个Maven项目作为开始 添加一个 Server Runtime 添加maven的java编译插件 <build> <finalName>$ ...
- PAT Basic 1013 数素数 (20) [数学问题-素数]
题目 令Pi表示第i个素数.现任给两个正整数M <= N <= 10^4,请输出PM到PN的所有素数. 输⼊格式: 输⼊在⼀⾏中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的 ...
- CertUtil: -hashfile 失败: 0xd00000bb (-805306181)
使用CertUtil验证Python安装文件的时候出现了这个错误. CertUtil: -hashfile 失败: 0xd00000bb (-805306181) 代码是这样 certutil -ha ...
- 零相关|回归|相关|相关系数|回归解释相关|r判断相关性|相关系数的区间估计|数据类型|非线性回归
零相关是什么? 零相关亦称“不相关”.相关的一种.两个变量的相关系数r=0时的相关.零相关表示两个变量非线性相关,这时两个变量可能相互独立,也可能曲线相关.对于正态变量,两个变量零相关与两个变量相互独 ...
- Tensorflow学习教程------tfrecords数据格式生成与读取
首先是生成tfrecords格式的数据,具体代码如下: #coding:utf-8 import os import tensorflow as tf from PIL import Image cw ...
- JVM--走进Java
1.1 概述 1) Java 能获得如此广泛的认可,除了他拥有一门结构严谨,面向对象的编程语言之外,还有许多不可忽视的有点:Java 摆脱了硬件平台的束缚,实现了“一次编写,到处运行”的理想:他提供了 ...
- 小白学习之pytorch框架(4)-softmax回归(torch.gather()、torch.argmax()、torch.nn.CrossEntropyLoss())
学习pytorch路程之动手学深度学习-3.4-3.7 置信度.置信区间参考:https://cloud.tencent.com/developer/news/452418 本人感觉还是挺好理解的 交 ...
- 你知道你对 JSON Web Token 的认识存在误解吗
1.前言 JSON Web Token (JWT) 其实目前已经广为软件开发者所熟知了,但是 JOSE (Javascript Object Signing and Encryption) 却鲜有人知 ...
- 1)PHP基础介绍
1.php基础介绍: Perssonal Home Page ====>PHP 2.应用范围 · web服务器脚本语言 命令行脚本语言 应用程序图形界面 3.PHP运行环境 PHP解释 ...
- Java BigInteger详解
BigInteger概述 可用于无限大的整数计算 所在的包 java.math.BigInteger; 构造函数 public BigInteger(String val) 成员函数 比较大小函数 p ...