块级作用域

1、基本用法

代码块内部，形成一段暂时性死区域，变量绑定这块区域，不受外部影响,值得思考的是，const声明的变量，实际保证的是变量指向的内存地址不变

// 常见使用场景
{
  let a = 10;
  const PI = 3.14; 
}
for (let i = 0; i < 10; i++) {
  // ...
}

2、特性

不存在变量提升，不存在重复声明（同一块级作用域内）

console.log(bar); // 报错ReferenceError
let bar = 2;
// 报错
function func() {
  let a = 10;
  let a = 1;
}

变量的解构赋值

js允许按照从左到右的排列顺序，对值进行从左到右的批量赋值操作

1、数组的解构赋值，常见的使用写法场景

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

2、对象的解构赋值

// 基本的需求，从左到右依次赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

// 赋值失败的，得到的值为undefined
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

// 对象的解构赋值，可以将对象的现有方法赋值给某个变量
const { log } = console;
log('hello') // hello

//设置默认值
var {x = 3} = {};
x // 3

3、字符串解构赋值

const [a, b, c, d, e] = 'hello';
let {length : len} = 'hello';
len // 5

5、函数的解构赋值

//使用方法
function add([x, y]){
  return x + y;
}
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

add([1, 2]); // 3

注意，对于即将要解构赋值声明的变量

// 错误的写法
// js引擎会将{} 识别为代码块
let x;
{x} = {x: 1};
// SyntaxError: syntax error

// 正确的写法
let x;
({x} = {x:1})

解构赋值实际的使用场景

1、交换变量值

let x = 1;
let y = 2;

[x, y] = [y, x];

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数据

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

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

console.log(id, status, number);
// 42, "OK", [867, 5309]

5、函数参数的默认值

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

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、输入模块的指定方法

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

es6基础复习

块级作用域

变量的解构赋值