ES6
ES6 就是ECMAScript 6是新版本JavaScript言语的规范。
1. let 和 const
ES6 新增了 let 和 const 来声明变量和常量,它们的用法相似var, 但只在代码块中有用。
1.1 let 的基础运用
{
var a = 'hello';
let b = 'world';
}
a // hello
b // Uncaught ReferenceError: a is not defined
上述代码表明,let只在他地点的代码块中有用。
1.2 不能反复定义
let不许可在雷同作用域内,反复声明同一个变量。
let a = 'hello';
let a = 'world'; // Uncaught SyntaxError: Identifier 'a' has already been declared
function s1(arg){
let arg; // Uncaught SyntaxError: Identifier 'arg' has already been declared
}
1.3 不存在变量提拔
var 敕令会存在变量提拔的题目,在定义之前运用,值为 undefined。
let 敕令转变了这个行动,必须要在声明后运用,不然报错。
console.log(a); // Uncaught ReferenceError: a is not defined
let a = 'hello world';
console.log(b); // 值为 undefined
var b = 'hello kitty'
1.4 暂时锁区(Temporal Distonrtion Zone)
保证了let 敕令不会遭到外部影响。
var a = 123;
function s1(){
a = 'hello world'; // Uncaught ReferenceError: a is not defined
let a = 'hello kitty';
}
1.5 const 基础运用
const声明一个只读的常量。一旦声明,常量的值就不能转变。
const a = 'hello world!';
console.log(a) // hello world!
a = 'hello kitty'; // Uncaught SyntaxError: Identifier 'a' has already been declared
const实际上并非保证变量的值不能变,而是变量指向的谁人内存地点不得修改。
const arr = [];
arr[0] = 'hello';
arr[1] = 'world';
console.log(arr); // ["hello", "world"]
arr = []; // Uncaught SyntaxError: Identifier 'arr' has already been declared
const json = {};
json.name = 'LiMing';
console.log(json.name) // LiMing
json = {} Uncaught SyntaxError: Identifier 'json' has already been declared
常量 arr, json 贮存的是一个地点,只是保证了地点不可变,但数组和对象自身是可变的,所以依旧可认为其增加新属性。
2 解构
2.1 数组解构赋值
var name = 'LiMing';
var age = 12;
// ES5 变量赋值
let [name, age] = ['LiMing', 12];
// 解构赋值
以前为变量赋值,只能直接指定值。ES6中能够根据肯定形式,从数组和对象中提取值,对变量举行赋值,这被称为解构。
let a = ['LiMing', 12];
let [name, age] = a;
console.log(name, age) // LiMing 12
let [,,b] = ['hello', 'world', 'hello kitty'];
console.log(b) // hello kitty
let [one, , two] = [1, 2, 3];
console.log(one, two) // 1 3
let [s1, ...s2] = [1, 2, 3, 4, 5];
console.log(s1, s2) // 1 [2, 3, 4, 5]
let b = [];
console.log(b) // undefined
let [a1, a2 ,a3] = [1];
console.log(a1, a2) // 1 undefined
假如解构不成功,变量的值就即是undefined。
假如右侧的数据不是数组将会报错。
let [a] = true; // TypeError: true is not iterable
let [a] = NaN; // TypeError: NaN is not iterable
let [a] = 1; // TypeError: 1 is not iterable
let [a] = null; // TypeError: null is not iterable
let [a] = undefined; // TypeError: undefined is not iterable
let [a] = {}; // TypeError: {} is not iterable
2.2 默认值
解构许可指定默认值
let [a = 'hello'] = [];
console.log(a) // hello
ES6内部严厉运用 === 来推断是不是有值,所以只有当一个数组成员严厉即是undefined,默认值才会见效。
let [a = 'hello world'] = [undefined];
console.log(a) // hello world
let [a = 'hello world'] = [null];
let [b = 'hello kitty'] = [''];
console.log(a, b) // null ''
2.3 对象解构
解构固然也能够用于对象
let {name, age} = {name: 'LiMing', age: 12}
console.log(name, age) // LiMing 12
对象解构与数组解构差别。 数组是有递次的,变量值有位置决议,而对象是无序的,所以变量名必需为对象的属性名
let json = {name: 'zero'}
let {name} = json
let {a} = json
console.log(name, a) // zero undefined
假如变量名与属性名不一致,则须要:
let {a: name} = {name: 'zero'}
console.log(a) // zero
2.4 函数参数解构
函数的参数固然也能够解构
function s1([a, b]){
return a + b
}
console.log(s1([1, 5])) // 6
function add({a = 0, b = 0} = {}) {
return a + b;
}
add({a: 3, b: 8}); // 11
add({a: 3}); // 3
add({}); // 0
add(); // 0