目录
声明变量
ES6 一共有 6 种声明变量的方法,此处暂时只记录let、var
Let
ES6 新增了let命令,用来声明变量。用法类似于var,但是只在
代码块内有效
。
{
let a = 10;
var b = 1;
}
a // undefined.
b // 1
适用场景for
理解:该i只在for循环体内有效,在循环体外引用就会报错。
优点:可在外面重复申明该变量用于标记
for (let i = 0; i < 10; i++) {
// ...
}
以上还可以优化写成严格模式,具体优化原因可参考ESLint问题记录 Click Here>>
for (let i = 0; i < 10; i += 1) {
// ...
}
不存在变量提升
var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。let命令改变了语法行为,它所声明的变量一定要在声明后使用
,否则报错。
暂时性死区
只要块级作用域内存在let命令,它所声明的变量“绑定”在这个区域
,不再受外部的影响。
var tmp = 123;
if (true) {
tmp = 'abc'; // 但由于let声明在赋值后,导致绑定的这块区域里的该变量赋值报错ReferenceError!
let tmp;
}
较隐秘的暂时死区
// 不报错
var x = x;
// 报错
let x = x;
同一代码块不允许重复声明
块级作用域下注意点
let,外层代码块不受内层代码块的影响。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
如果确实需块级作用域内声明函数。也应该写成函数表达式,而不是函数声明语句。
// 函数声明语句
{
let a = 'secret';
function f() {
return a;
}
}
// 函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
var
var命令声明的,在全局范围
内都有效。(可理解为函数提升,变量提升到文件最上方)
优缺点与let互补。
声明常量
const
一旦声明,常量的值就不能改变。注意:一旦声明变量,就必须立即初始化。
有效区域、特性
只在声明所在的块级作用域有效,与Let一样没有常量提升
。同样存在暂时性死区
。块内不可重复声明
。
不可改也可改的理解
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。因此,简单类型的数据(数值、字符串、布尔值)不可改
。复合类型的数据(主要是对象和数组)部分可改
,变量指向的内存地址,保存的只是一个指向实际数据的指针,只要声明中含有即可控这部分。
举例子:
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError
综上,不建议改常量。
变量的解构赋值
解构
ES6 允许按照一定模式,从数组和对象中提取值
,对变量进行赋值,这被称为解构
数组解构
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
或者
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
或者
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
对象解构
const userList= this.props.userList;
const unitList = this.props.unitList ;
const UnitKeys = this.state.UnitKeys ;
ES6 允许写成下面这样。
const { userList, unitList } = this.props;
const { UnitKeys } = this.state;
还有嵌套形的对象解构
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
函数的解构
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
数值和布尔值解构(感觉不常用)
等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
字符串解构(感觉不常用)
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
还有
let {length : len} = 'hello';
len // 5
解构反例
严格地说,不是相同结构
这个是不完全解构:默认b取索引为0的值
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
报错,不解构。因为两边解构完全不符合
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
解构赋值允许指定默认值
let [x, y = 'b'] = ['a']; // x='a', y='b'
// 默认值特殊例子!!!!理解为:不存在则允许使用默认值!
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
解构常见用途
1.交换变量的值
2.从函数返回多个值
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
3.函数参数的定义
4.提取 JSON 数据
(常用!!!)
const { userList, unitList } = this.props;
5.函数参数的默认值
6.遍历 Map 结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
7.输入模块的指定方法
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~