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;
字符串扩展函数
数组函数扩展
形参默认值
声明函数时给形参默认值
rest参数
es6之前,调用函数时可以传入不定数量的参数(可变参数),函数体内使用arguments获取多个参数
箭头函数
箭头函数的用法和普通方法几乎一致,去掉 function 关键字,() 和 {} 之间增加 =>
箭头函数特点
- 箭头函数不能作为构造函数
// 错误示范
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));
定义对象的简洁方式
声明对象时,值的 变量名 和 属性名 相同时,可以只写属性而不写值