es6学习笔记--变量、解构赋值、扩展运算符 、字符串模板

let、 const 与var的区别

1.let const 块级作用域，var 是全局的；

2.let const无变量提升,故可能会有暂时性死区，

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError: bar is not defined
let bar = 2;

3.let const 不允许重复声明,不能在函数内部重新声明函数

function f() {
  let a=1;
  let a=2;
}

f();// Uncaught SyntaxError: Identifier 'a' has already been declared

function f(b) {
  let b=1;
}

f();// Uncaught SyntaxError: Identifier 'b' has already been declared

4.块级作用域

只在块级里有效

{
    {let str = ' hello'}
     console.log(str); //报错
}

优点，可以代替 立即执行函数表达式(IIFE)
如

// IIFE 写法
(function(){ var hh = '123'; ...}());

// 块级作用域写法
{let hh = '123'; ...}

5.let 与const的 区别

const声明一个只读的常量。一旦声明，常量的值就不能改变
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

真的想将对象冻结，应该使用Object.freeze方法

解构赋值

定义：允许按照一定的模式，从数组、对象中取值，对变量赋值。

• 本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
• 如果解构不成功，变量的值就等于undefined
• 如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见《Iterator》一章），那么将会报错。

一、数组的解构赋值

含义：按照一定模式，从数组和对象中提取值，对变量进行赋值
数组的元素是按次序排列的，变量的取值由它的位置决定；无对应位置或解构失败，则为undefined;
允许指定默认值,只有当一个数组成员严格等于undefined，默认值才会生效。
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

let [a,b,c]=[1,[2,4],3]; 
// a 1
// b [2,4]
// c 3

let [a,[b],c]=[1,[2,4],3]; 
// a 1
// b 2
// c 3

注意

等号右边必须是可遍历的结构（数组、对象、Iterator接口）
结构赋值，允许默认值。只有当一个数组成员严格等于undefined，默认值才会生效。
注意：null不严格等于undefined

let [x,y='b']=['a', undefined];
// x 'a'
// y 'b'

let [x2, y2='b']=['a',null];
// x2 'a'
// y2 null

let [x = 1, y = x] = [2];    // x=2; y=2

二、对象的解构赋值

• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

• 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // Uncaught ReferenceError: foo is not defined

• 与数组一样，解构也可以用于嵌套结构的对象

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // Uncaught ReferenceError: foo is not defined

• 对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。
• 如果解构失败，变量的值等于undefined。
• 将一个已经声明的变量用于解构赋值，必须非常小心；（因为大括号写在行首，JavaScript 会将其解释为代码块；可用圆括号包一下）
• 数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

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 {x = 3} = {x: null};
x // null

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
let x;
({x} = {x: 1});

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

问题： 对象的解构和数组的结构有什么不同？

• 数组的元素是按次序排列的，变量的取值由它的位置决定；等号右边无对应位置，则变量等于undefined;
• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。等号右边无对应属性，则变量等于undefined;

三、字符串的解构赋值

• 字符串也可以解构赋值。字符串被转换成了一个类似数组的对象,类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

四、数值和布尔值的解构赋值

只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错

五、函数参数的解构赋值

六、解构赋值的用途

1. 交换变量的值 -- 不仅简洁，而且易读，语义非常清晰
2. 从函数返回多个值 --函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
3. 函数参数的定义 --解构赋值可以方便地将一组参数与变量名对应起来。
4. 提取 JSON 数据--快速提取 JSON 数据的值
5. 函数参数的默认值 --指定参数的默认值
6. 遍历 Map 结构 --配合变量的解构赋值，获取键名和键值就非常方便
7. 输入模块的指定方法---加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰

let x = 1;
let y = 2;
[x, y] = [y, x];

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();


// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});


let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

const { SourceMapConsumer, SourceNode } = require("source-map");

扩展运算符...

定义：将一个数组转为逗号分隔的参数序列 即数组可直接当做函数参数使用了。

用途1：该运算符主要用于函数调用。
function add(x, y) {
return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

用途2：扩展运算符取代apply方法
// 应用Math.max方法，简化求出一个数组最大元素的写法。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);

用途3：通过push函数，将一个数组添加到另一个数组的尾部
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

用途4：合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
　

用途5：扩展运算符将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]