文章目录
-
- ES6新增两个 JavaScript 关键字: let和 const
- 一、let
-
-
- ①let用法
- ②用let不能重复声明
- ③for循环计数器非常适合使用let
- ④没有变量增加
-
- 二、const
-
-
- ①const基本用法
-
- 三、临时死区
-
-
- 案例1
- 案例2
- 案例3
-
- 四、Symbol基本数据
-
- (1)包装对象
- (2)、Symbol
- (3)、案例
- 五、解构赋值
-
- (1)、概述
- (2)解构模型
- (3)解构赋值用法
-
- ①对象模型的结构(Object)
- ②数组模型的结构(Array)
- ③
-
-
- 案例1
- 案例2
-
ES6新增两个 JavaScript 关键字: let和 const
et声明的变量只有 let 命令所在代码块内有效(块级作用域、局部作用),ES6 函数中推荐使用 let 定义变量,而不是 var。 const声明只读的常量,一旦声明,常量值就不能改变。
一、let
①let用法
{
}括起代码块 {
let a = 0;//对于let,具有作用域的代码块 console.log(a);//0 //对于var,代码块没有作用域 var b = 1; } console.log(b); // 1 console.log(a);// 报错 ReferenceError: a is not defined
②用let不能重复声明
var a = 1; var a = 2; console.log(a); // 2 let b = 3; let b = 4; console.log(b); // Identifier 'a' has already been declared
③for循环计数器非常适合使用let
for (var i = 0; i < 10; i++) {
setTimeout(function(){
console.log(i);
})
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
setTimeout(function(){
console.log(j);
})
}
// 输出 0~9
变量 i 是用 var 声明的,在全局范围内有效,所以全局中只有一个变量 i, 每次循
环时,setTimeout 定时器里面的 i 指的是全局变量 i ,而循环里的十个
setTimeout 是在循环结束后才执行,所以此时的 i 都是 10。
变量 j 是用 let 声明的,当前的 j 只在本轮循环中有效,每次循环的 j 其实都是
一个新的变量,所以 setTimeout 定时器里面的 j 其实是不同的变量,即最后输出
0~9。(若每次循环的变量 j 都是重新声明的,如何知道前一个循环的值?这是因为
JavaScript 引擎内部会记住前一个循环的值)
④不存在变量提升
console.log(a); //undefined
var a = "banana";
console.log(b); //ReferenceError: b is not defined
let b = "apple";
变量 a 用 var 声明存在变量提升,所以当脚本开始运行的时候,a 已经存在了,但
是还没有赋值,所以会输出 undefined。
变量 b 用 let 声明不存在变量提升,在声明变量 b 之前,b 不存在,所以会报
错。
二、const
const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。
①const基本用法
const ha11d = "srgg"
console.log(ha11d);
ha11d = "fsef"
console.log(ha11d);
结果:
三、暂时性死区
案例1
let a = 100
var b = 99
if (true) {
let a = 10
var b = 88
}
console.log(a, b);//100 88
//对于let 代码块具有作用域 所以打印100
//对于var,代码块没有作用域
案例2
对于var,代码块没有作用域,a相对于全局变量,不能用let重复声明,所以报错
案例3
if (false) {
var a = 1
let b = 2
}
console.log(a); //undefined
console.log(b); //报错
if (true) {
var a = 1
let b = 2
}
console.log(a); //1
console.log(b); //报错
四、Symbol基本数据
(1)、包装对象
var a = new Number(200)
var b = 100
b.age = 20 //new Number(100)
//这个b.age和下一行的b.age不一样,下一行重新包装对象的
console.log(b.age) //new Number(100)
(2)、Symbol
var re = Symbol("hello") //独一无二
// 它是一个内置全局函,生成一个独一无二的数据
var re2 = Symbol("hello")
console.log(re, re2, re == re2, typeof re) //false
结果:
(3)、案例
var obj = {
age: 20
}
obj.age = 100
function tool(obj) {
let age = Symbol("年龄")
// obj.age=100
obj[age] = 20
}
五、解构赋值
(1)、概述
-
解构赋值是对赋值运算符的扩展。
-
是一种针对进行模式匹配,然后对其中的变量进行赋值。
-
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
(2)、解构模型
在解构中,有下面两部分参与:
-
,解构赋值表达式的部分。
-
,解构赋值表达式的部分。
(3)、解构赋值用法
①对象模型的结构(Object)
let obj={
a:100,b:"hello",c:[10,203,0]}
let {
a,b,c}=obj
// 隐式操作: let a=obj.a; let b=obj.b; let c=obj.c
②数组模型的结构(Array)
let arr = [35, 47, 535]
var [a,b,c]=arr
//隐式操作: var a=arr[0]; var b=arr[1]; var c=arr[2]
③
案例1
var arr=["fsg",{
age:345}]
var [name,{
age}]=arr;
//隐式操作: var name=arr[0],var age=arr[1].age
案例2
let arr = [{
age: 20
}, {
name1: "karen"
}]
let [{
age,
name1 = "jack"
}] = arr
//var name1=arr[0].name1
console.log(age, name1)
结果: