ecmascript6
一. let 和 const
1 let
基本用法
ES6新增let
命令,与var
用法类似,但所声明的变量只在声明的代码块中使用1
2
3
4
5
6
7{
let a=10;
var b=1;
}
a//a is not defined
b//1
var 声明的变量像是 static 的
1 | var a = []; |
1 | var a = []; |
不存在变量提升
let 声明的变量一定要在声明后使用,否则报错1
2
3
4
5console.log(foo); // 输出undefined,foo 在此时已经存在
console.log(bar); // 报错ReferenceError
var foo = 2;
let bar = 2;
temporal dead zone
只要块级作用于存在let
和const
命令, 凡是在声明之前使用这些变量就会报错
1 | var tmp = 123; |
不允许重复声明
1 | //let不允许在相同作用域内,重复声明同一个变量。 |
2 块级作用域
为什么需要块级作用域?
第一种场景,内层变量可能会覆盖外层变量。1
2
3
4
5
6
7
8
9
10var tmp = new Date();
function f(){
console.log(tmp);
if (false){
var tmp = "hello world";
}
}
f() // undefined 内层的tmp变量覆盖了外层的tmp变量。
第二种场景,用来计数的循环变量泄露为全局变量。1
2
3
4
5
6
7var s = 'hello';
for (var i = 0; i < s.length; i++){
console.log(s[i]);
}
console.log(i); // 5
ES6的块级作用域
let实际上为JavaScript新增了块级作用域。
1 | function f1() { |
3 const 命令
const 声明常量,类似于 java 中的 final,声明后无法修改其值
1 | ; |
const 声明的变量不得改变值, const 一旦声明变量则需要给其赋值,不能在后面赋值,这点与 java 不同.
1 | ; |
const的作用域与let命令相同:只在声明所在的块级作用域内有效。1
2
3
4
5if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
不可重复声明
1 | var message = "Hello!"; |
将对象声明为常量,特性与 java 一样
1 | const foo = {}; |
如果想将对象冻结,使用Object.freeze
方法
1 | const foo = Object.freeze({}); |
4 跨模块常量
1 | // constants.js 模块 |
5 全局对象属性
全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。ES5之中,全局对象的属性与全局变量是等价的。
二. 变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
1 数组的解构赋值
1 | //以前,为变量赋值,只能直接指定值。 |
只要等号两边的模式相同,左边的变量就会被赋予对应的值
1 | let [foo, [[bar], baz]] = [1, [[2], 3]]; |
不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组
1 | let [x, y] = [1, 2, 3]; |
对于Set
结构,也可以使用数组的解构赋值。1
2let [x, y, z] = new Set(["a", "b", "c"])
x // "a"
结构赋值允许指定默认值
1 | var [foo = true] = []; |
惰性赋值,在用到的时候才会求值
1 | function f(){ |
默认值可以引用解构赋值的其他变量,但该变量必须已经声明。1
2
3
4let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError
2. 对象的解构赋值(重要!!)
与数组不同的是,对象属性没有次序,变量必须与属性同名才能取到正确值
1 |
|
变量可以重命名1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
////
var _foo$bar = { foo: "aaa", bar: "bbb" };
var baz = _foo$bar.foo;
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//////////
var obj = { first: 'hello', last: 'world' };
var f = obj.first;
var l = obj.last;
3. 函数参数的解构赋值
1 |
|
另一种写法
1 | function move({x, y} = { x: 0, y: 0 }) { |
6.其他解构
字符串解构
1 | const [a, b, c, d, e] = 'hello'; |
数值解构1
2
3
4
5let {toString: s} = 123;
//////
var _ = 123;
var s = _.toString;
7 用途
交换变量值
1 | [x, y] = [y, x]; |
函数返回多个值
1 | // 返回一个数组 |
函数参数定义
1 |
|
提取Json数据
1 | var jsonData = { |
遍历MAP结构1
2
3
4
5
6
7
8
9
10
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
模块导入
1 | const { SourceMapConsumer, SourceNode } = require("source-map"); |
三. 类型
ECMAScript 有 5 种原始类型,即 Undefined、Null、Boolean、Number 和 String。
1. Undefined
如前所述,Undefined 类型只有一个值,即 undefined
。当声明的变量未初始化时,该变量的默认值是undefined
。
2. Null
Null 类型只有一个值null
,值 undefined 实际上是从值 null 派生来的
1 | null == undefined;//true |
3. Number
八进制数和十六进制数,ES5 之后八进制用0o
表示1
2var iNum = 0o70; //070 等于十进制的 56
var iNum = 0x1f; //0x1f 等于十进制的 31
如果要将0b和0x前缀的字符串数值转为十进制,要使用Number方法。1
2Number('0b111') // 7
Number('0o10') // 8
4. String
5. 类型转换
转换成字符串 toString()
方法1
2
3
4
5arrayObject.toString()
booleanObject.toString()
dateObject.toString()
NumberObject.toString()
stringObject.toString()
转换成数字parseInt() 、 parseFloat()
1 |
|
6.强制类型转换
ECMAScript 中可用的 3 种强制类型转换如下:
- Boolean(value) - 把给定的值转换成 Boolean 型;
- Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
- String(value) - 把给定的值转换成字符串;
四. 数组
1. Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)所谓类似数组的对象,本质特征只有一点,即必须有length属性,因此,任何有length属性的对象,都可以通过Array.from方法转为数组。
1 | Array.from('hello') |
...
运算符也可以将某些结构转换成数组
1 | function foo() { |
Array.from还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组。
1 | Array.from(arrayLike, x => x * x); |
2. Array.of()
Array.of方法用于将一组值,转换为数组。
1 |
|
3. find() findIndex()
find方法用于找出第一个符合条件的数组成员,参数是一个回调函数
1 | [1, 4, -5, 10].find((n) => n < 0)//-5 |
findIndex方法用于返回符合条件值的位置,如果没有符合的返回-1
1 |
|
5. fill()
填充数组
1 | ['a', 'b', 'c'].fill(7) |
6. includes()
用来检测数组里是否包含某个值
1 | [1, 2, 3].includes(2); // true |
7. 数组推导
使用现有数组生成新数组
1 |
|
五. 函数
1. 参数默认值
ES6可以为函数参数设置默认值
1 | function log(x, y = 'World') { |
可以结合解构赋值使用
1 |
|
1 | function fetch(url, { body = '', method = 'GET', headers = {} }){ |
上面这种写法不能省略第二个参数,如果给第二个参数默认值则可以省略
1 | function fetch(url, { method = 'GET' } = {}){ |
需注意的情况
1 | // 写法一 |