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)

形参默认值

声明函数时给形参默认值

6191fb4b09ab24d005070403

rest参数

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

61925f3709f420e007850402

箭头函数

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

image-20220627211928947
image-20220627211953001

箭头函数特点

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

定义对象的简洁方式

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

image-20220627222320541
ES6-HuaのJava之旅
ES6
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片