ES6入门

ES6 中文教程_w3cschool

ES6变量和常量

关键词 let 声明变量、const 声明常量。

let

声明变量，代替 var 关键字

特点：有块级作用域；不存在变量提升；暂时性死区

2-2 let应用-慕课网体系课 (imooc.com)

作用域

let 关键字声明的变量只在大括号内生效

{
    let num = 10;
}
console.log(num); //num is not defined

for (let i = 0; i < 5; i++) {}
console.log(i); //i is not defined

变量提升

var 声明的变量存在变量提升，let 声明的变量不存在变量提升

// 用let关键字，不存在变量提升
console.log(num);  //Cannot access 'num' before initialization
// var num = 10;
let num = 10;

暂时性死区

let 声明的变量会被绑定在块级作用域内，不受外部的影响

var num =1;
{
    console.log(num);  //Cannot access 'num' before initialization
    let num = 10;
}

const

声明常量

特点:有块级作用域；声明常量时必须赋值，且赋值后不能修改

2-3 const关键词-慕课网体系课 (imooc.com)

解构赋值

解构赋值就是将 数组 或者 对象 中的单元分别取出并保存在单独的变量中

对象解构

const { name, age, gender } = { id: 1, name: "王小明", age: 8 };
console.log(name);    //王小明
console.log(age);     //8
console.log(gender);  //undefined

注意：变量(常量)名必须和对象的属性名一致

const { name:username, age } = { id: 1, name: "王小明", age: 8 };
console.log(username);    //王小明
console.log(age);     //8

用了别名以后，原名就不能用了

数组解构

变量名可以随意设置

let [,a,b,c] = [1,"王小明",8,"男"];
console.log(a);
console.log(b);
console.log(c);

… ：扩展运算符

const [n1,n2,...n] = ['a','b','c','d','e'];
console.log(n1);    //a
console.log(n2);    //b
console.log(n);     // c,d,e

字符串扩展

使用反引号声明的字符串就是模板字符串

优点：字符串可以换行(方便声明标签解构)、${} ：方便解析变量或者函数

const {name, age} = {name:"小白", age:8};
function sayHi () {
return "大家好";
}

// let str = '<ul><li>' + name + '</li></ul>';
let str = `
<ul>
<li>姓名：${name}</li>
<li>年龄：${age}</li>
<li>${sayHi()}</li>
</ul>`;

document.querySelector('div').innerHTML = str;

字符串扩展函数

4-2 图文节-慕课网体系课 (imooc.com)

数组函数扩展

5-1 图文节-慕课网体系课 (imooc.com)

形参默认值

声明函数时给形参默认值

rest参数

es6之前，调用函数时可以传入不定数量的参数（可变参数)，函数体内使用arguments获取多个参数

箭头函数

箭头函数的用法和普通方法几乎一致，去掉 function 关键字，() 和 {} 之间增加 =>

箭头函数特点

6-2 箭头函数特点-慕课网体系课 (imooc.com)

• 箭头函数不能作为构造函数

// 错误示范
let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
new Person('1', 2);
// 正确示范
function Person (name, age) {
    this.name = name;
    this.age = age;
}
let p = new Person('王小明', 8);
console.log(p.name);
console.log(p.age);

• 箭头函数没有arguments，要使用可变参数可以使用rest方式

// 错误示范
let show = () => {
    console.log(arguments);
}
show(11,22,33);
// 正确示范
let show = (...abc) => {
    console.log(abc);
}
show(11,22,33);

• 箭头函数没有this对象，在箭头函数中的this指的函数外层的对象

console.log(this === window);
document.querySelector("button").onclick = () => {
    console.log(this === window);
}

document.querySelector("button").onclick = function () {
    console.log(this);
    let l = () => {
        console.log(this);
    }
    l();
}

• 如果函数体只有一句并且设置了返回值，则不需要使用大括号，不需要return

let add = (a, b) => a+b;
console.log(add(10, 20));

• 如果函数中只有一个参数，则不需要写小括号。

let add = a => a + 10;
console.log(add(5));

定义对象的简洁方式

声明对象时，值的 变量名 和 属性名 相同时,可以只写属性而不写值