ES6 中文教程_w3cschool

ES6变量和常量

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

let

声明变量，代替 var 关键字
特点：有块级作用域；不存在变量提升；暂时性死区

作用域

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));

定义对象的简洁方式

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

文章版权归作者所有，未经允许请勿转载。

THE END

JavaWeb