持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

ES6

全称ECMAScript6 优点：语法简洁、可运用于框架开发

let、const指令

let和const指令都是用来声明变量

let a;
const b;

const声明一个只读的常量。一旦声明，常量的值就不能改变。这就说明了const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a;
a = 100 // SyntaxError: Missing initializer in const declaration

ES5中有三种作用域：全局作用域、函数作用域、eval(在严格模式下才有)。ES6中还引入了一个块级作用域

面试

请你谈谈var、let、const的区别？

var 全局作用域、变量能重复声明、存在变量提升

const 块级作用域、不能重复声明、不存在变量提升

let 块级作用域、变量不能重复声明、不存在变量提升、不影响作用域链

块级作用域

可以理解为一个{}包裹起来的算一个作用域，块级作用域会将代码分成内层代码和外层代码，

// var let const 作用域范围
{
  let a = 10;
  const b = 20;
  var c = 30;
}
a // ReferenceError: a is not defined.
b // ReferenceError: b is not defined
c // 30
// 很明显 var是全局作用域，而const和let是块级作用域

变量提升

变量提升的意思是变量可以在声明之前使用，var声明的变量和函数都存在变量提升。

var变量提升相当于先定义了一个变量但未赋值，所以是undefined。

console.log(a) // ReferenceError: a is not defined
let a = 10;

console.log(b) // ReferenceError: a is not defined
const b = 20;

console.log(c) // undefined
var c = 30;

重复声明是指：变量名可以重复

// 重复声明
let a = 10;
let a = 1; // SyntaxError: Identifier 'a' has already been declared

const b = 20;
const b = 2; // SyntaxError: Identifier 'b' has already been declared

var c = 30;
var c =3;
c; // 3

ES6有6种声明变量的方法：var、function、let、const、import、class

顶层对象

浏览器里面，顶层对象是window。
浏览器和 Web Worker 里面，self指向顶层对象。
Node 里面，顶层对象是global。
JavaScript 语言存在一个顶层对象globalThis，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行

解构赋值

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

变量的解构赋值

对象的解构赋值

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。const { 匹配模式 : 赋值的变量 } = {}。

const { data : res } = { data:'pig', code: 200 }
console.log(res) // pig

注意点：同名属性如果没有找到，解构赋值就会变成undefined。

// 找不到同名属性
let { a: x, b: y, c: z } = { a: 'GLOBAL', b: 'PEOPLE'}
x; // 'GLOBAL'
y; // 'PEOPLE'
z; // undefined

解构赋值可以嵌套

const obj = {
    p: [
        'global',
        { y: 'people' }
    ]
}
let { p: [x,{y}] } = obj
x; // 'global'
y; // 'people'

再次学习了ES6感觉对于一些算法解题、代码优雅有了进一步的认识

交换变量的值：[x, y] = [y, x];

提取JSON值

函数参数的默认值

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

ES6学习之路

ES6