【React系列】ES6学习笔记（一）let与const、解构赋值、函数参数默认值rest参数箭头函数、数组和对象的扩展、Set和Map等_网站优化分享

您的位置：上海毫米网络优化公司 > 网站优化分享 >

let 和 const 命令

1. let 命令

尽量使用 let 声明变量，而不是 var。
let 声明的变量是块级作用域， var 声明的变量是全局作用域。
使用 let 变量必须先声明再使用，否则报错，不存在变量提升。相对的 var 声明的变量如果提前使用，不会报错，只会提示为undefined。
let不允许在相同作用域内，重复声明同一个变量。
ES6的块级作用域允许使用多层 {} 无限嵌套，只有位于同一层的 let 变量相互影响，跨层之间的 let 变量即便是同名也无影响，只要在同一层内使用自己层的变量即可。
ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。（if语句后面最好必须跟上大括号）
2. const 命令
- const声明一个只读的常量。一旦声明，常量的值就不能改变。
- 必须在声明时指定初始值。
- const的作用域与let命令相同：只在声明所在的块级作用域内有效。同样不存在变量提升，必须先声明后使用，不可重复声明。
  ES6 声明变量的六种方法
  
  ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。
  
  变量的解构赋值
  
  1. 数组的解构赋值
```
let [a, b, c] = [1, 2, 3];
```
  上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
  
  本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
```
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
```
  如果解构不成功，变量的值就等于undefined。
```
let [foo] = [];
let [bar, foo] = [1];
```
  以上两种情况都属于解构不成功，foo的值都会等于undefined。
  
  另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
```
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
```
  上面两个例子，都属于不完全解构，但是可以成功。
  
  如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。
```
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
```
  上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。
  
  对于 Set 结构，也可以使用数组的解构赋值。
```
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"
```
  默认值
  
  解构赋值允许指定默认值。
```
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
```
  注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
```
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
```
  上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
  
  如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
```
function f() {
  console.log('aaa');
}
let [x = f()] = [1];
```
  上面代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。
```
let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}
```
  默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
```
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
```
  上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。
  
  2. 对象的解构赋值
  
  解构不仅可以用于数组，还可以用于对象。
```
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
```
  对象的解构与数组有一个重要的不同：
  - 数组的元素是按次序排列的，变量的取值由它的位置决定；
  - 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
```
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
```
    上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。
    
    如果解构失败，变量的值等于undefined。
```
let {foo} = {bar: 'baz'};
foo // undefined
```
    上面代码中，等号右边的对象没有foo属性，所以变量foo取不到值，所以等于undefined。
    
    对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
```
// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello
```
    上面代码的例一将Math对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。例二将console.log赋值到log变量。
    
    如果变量名与属性名不一致，必须写成下面这样。
```
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
```
    这实际上说明，对象的解构赋值是下面形式的简写（参见《对象的扩展》一章）。
```
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
```
    也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
```
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
```
    上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
    
    默认值
    
    对象的解构也可以指定默认值。
```
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x: y = 3} = {};
y // 3
var {x: y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
```
    默认值生效的条件是，对象的属性值严格等于undefined。
```
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
```
    上面代码中，属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。
    
    3. 字符串的解构赋值
    
    字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
```
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
```
    类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
```
let {length : len} = 'hello';
len // 5
```
    4. 数值和布尔值的解构赋值
    
    解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
```
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
```
    上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
    
    解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
```
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
```
    5. 函数参数的解构赋值
    
    函数的参数也可以使用解构赋值。
```
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3
```
    上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。
    
    下面是另一个例子。
```
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
```
    函数参数的解构也可以使用默认值。
```
function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
```
    上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
    
    注意，下面的写法会得到不一样的结果。
```
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
```
    上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
    
    undefined就会触发函数参数的默认值。
```
[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]
```
    6. 圆括号问题
    
    原则：尽量不要在模式中使用圆括号。
    
    可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号。
```
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确
```
    上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。
    
    7. 用途
    
    变量的解构赋值用途很多。
    
    （1）交换变量的值
```
let x = 1;
let y = 2;
[x, y] = [y, x];
```
    上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
    
    （2）从函数返回多个值
    
    函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
```
// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
```
    （3）函数参数的定义
    
    解构赋值可以方便地将一组参数与变量名对应起来。
```
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
```
    （4）提取 JSON 数据
    
    解构赋值对提取 JSON 对象中的数据，尤其有用。
```
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
```
    上面代码可以快速提取 JSON 数据的值。
    
    （5）函数参数的默认值
```
jQuery.ajax = function(url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};
```
    指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
    
    （6）遍历 Map 结构
    
    任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
```
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
```
    如果只想获取键名，或者只想获取键值，可以写成下面这样。
```
// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}
```
    （7）输入模块的指定方法
    
    加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
```
const { SourceMapConsumer, SourceNode } = require("source-map");
```
    字符串
    
    模板字符串
    
    ES6 引入了模板字符串，使用反引号 `` 括起来的字符串，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
```
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
 not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
```
    上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
```
let greeting = `\`Yo\` World!`;
```
    如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
```
$('#list').html(`

  first
  second

`);
```
    上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

上一篇：利用新媒体平台，彩妆化妆工具市场如何挖掘潜在客户

下一篇：微服务分布式vue+springcloud社区家政服务系统 Eureka

let 和 const 命令

1. let 命令

2. const 命令

变量的解构赋值

1. 数组的解构赋值

2. 对象的解构赋值

3. 字符串的解构赋值

4. 数值和布尔值的解构赋值

5. 函数参数的解构赋值

6. 圆括号问题

7. 用途

字符串

模板字符串

字符串的遍历

标签模板

字符串的新增方法

数值的扩展

函数的扩展

1. 函数参数的默认值

2. rest 参数

3. 严格模式

4. name 属性

5. 箭头函数

其他

数组的扩展

1. 扩展运算符

2. Array.from()

3. Array.of()

4. 实例方法：copyWithin()

5. 实例方法：find()，findIndex()，findLast()，findLastIndex()

6. 实例方法：fill()

7. 实例方法：entries()，keys() 和 values()

8. 实例方法：includes()

9. 实例方法：flat()，flatMap()

10. 实例方法：at()

其他

对象的扩展

1. 属性的简洁表示法

2. 属性名表达式

3. 方法的 name 属性

其他

对象的新增方法

1. Object.is()

2. Object.assign()

其他

运算符的扩展

Symbol

Set 和 Map 数据结构

1. Set

2. Map

其他

Iterator 和 for…of 循环

1. Iterator（遍历器）的概念

2. 默认 Iterator 接口

3. 调用 Iterator 接口的场合

4. 字符串的 Iterator 接口

5. Iterator 接口与 Generator 函数

6. 遍历器对象的 return()，throw()

7. for…of 循环