ES6常见用法--ECMAScript 6.0

一.let和const

块级作用域

JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。

块: 由 { } 构成,if语句和for语句里面的{ }也属于块,对象的大括号内不是一个块级作用域, 因为它里面不能直接声明变量;

if和for没有块级作用域,用var定义的变量可以在外面访问到.

函数有块级作用域,通过var定义的变量不能在外面访问到.

ES5的var没有块级作用域,块里面用var定义的变量可以在外面访问到。

ES6的let有块级作用域,块里面用let定义的变量不能在外面访问到。用于if和for,间接让if和for有了块级作用域.

ES6的const有块级作用域,块里面用const定义的常量不能在外面访问到。

const用于修饰常量,不可以再次赋值.

• 必须要赋值初始化
• 不能二次赋值,但如果常量是一个对象,可以改变对象内部的属性.

二.对象字面量增强写法

不用键值对的方式

1.属性:

const name = 'pll';
const age = 20;
const obj = {
	name,
	age
}

2.函数

const obj = {
	run() {},
	eat() {}
}

三. 遍历

1.遍历对象

for(let book in books)

2.遍历数组

for(let book of books)

四. 语法

• Tab键上面的` 可以包裹字符串,代替引号,作用是可以换行.

五. 定义类

新增语法–构造器constructor

new实例的时候,会自动调用constructor里的方法

class person {
    constructor(name = 'pll') {
        this.name = name;
    }
}

let a = new person();
console.log(a);  //{ name: 'pll' }

let b = new person('张三');
console.log(b); //{ name: '张三' }

继承

class child extends person {}
console.log(new child());  //{ name: 'pll' }

继承传参

重写constructor,修改name,新增age

class child_a extends person {
    constructor(name = 'child', age = 20) {
        super(name);  //必须放在前面
        this.age = age;
    }
}
console.log(new child_a());  //{ name: 'child', age: 20 }  
console.log(new child_a('李四', 60));  //{ name: '李四', age: 60 }

六.函数

默认参数

function fn(age=17){
 console.log(age);
}

fn();     // 17
fn(18);   // 18

使用函数默认参数时，不允许有同名参数。

// 不报错
function fn(name,name){
 console.log(name);
}
fn('pll', 'qq');  //qq
 
// 报错
function fn(name,name,age=17){
 console.log(name+","+age);
}

不定参数

function fn(...values) {
    console.log(values);
    console.log(values.length);
}
fn(1, 4);  

结果为:

[1,4]
2

七.解构赋值

1.数组解构

const nums = [1, 3, 8]
const [a, b, c] = nums
console.log(a); //1
console.log(b); //3
console.log(c); //8

可嵌套

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

可忽略

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

不完全解构

let [a = 1, b] = [];  
// a = 1, b = undefined

剩余运算符

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

字符串

let [a, b, c, d, e] = 'hello'; 
// a = 'h'  b = 'e'  c = 'l'  d = 'l'  e = 'o'

2.对象解构

const obj = {
    name: 'pll',
    age: 20
}
//赋值变量名必须和目标对象的属性名一致
const { name, age } = obj;
console.log(name);  //pll
console.log(age);  //20

let { baz : foo } = { baz : 'ddd' };
console.log(foo);  //ddd

可嵌套可忽略

let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, { y }] } = obj; 
// x = 'hello' // y = 'world' 
let obj = {p: ['hello', {y: 'world'}] }; 
let {p: [x, {  }] } = obj; 
// x = 'hello'

不完全解构

let obj = {p: [{y: 'world'}] }; 
let {p: [{ y }, x ] } = obj; 
// x = undefined // y = 'world'

剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; 
// a = 10 // b = 20 // rest = {c: 30, d: 40}

解构默认值

let {a = 10, b = 5} = {a: 3}; 
// a = 3; b = 5; 
let {a: aa = 10, b: bb = 5} = {a: 3}; 
// aa = 3; bb = 5;