字面量的增强

ES6中对对象字面量进行了增强，称之为 Enhanced object literals（增强对象字面量）。

字面量的增强主要包括下面几部分：

属性的简写：Property Shorthand(属性的简写）

方法的简写：Method Shorthand

计算属性名：Computed Property Names

解构Destructuring

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。

我们可以划分为：数组的解构和对象的解构。

数组的解构：

基本解构过程
顺序解构
解构出数组
默认值

对象的解构：

基本解构过程
任意顺序
重命名
默认值

解构的应用场景

解构目前在开发中使用是非常多的：

比如在开发中拿到一个变量时，自动对其进行解构使用；
比如对函数的参数进行解构；

let/const基本使用

var: variable

const: constant(常量/恒量）

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
但是let、const确确实实给JavaScript带来一些不一样的东西；

let关键字：

从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量const关键字;
const关键字是constant的单词的缩写，表示常量、衡量的意思；
它表示保存的数据一旦被赋值，就不能被修改；
但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

注意：另外let、const不允许重复声明变量；

let/const作用域提升

let、const和var的另一个重要区别是作用域提升：

我们知道var声明的变量是会进行作用域提升的；
但是如果我们使用let声明的变量，在声明之前访问会报错；

那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？

事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

已经被创建出来了，但是不能被访问

let/const有没有作用域提升呢？

从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。

那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？

事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；

作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；

所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。

Window对象添加属性

我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：

但是let、const是不会给window上添加任何属性的。

那么我们可能会想这个变量是保存在哪里呢？

我们先回顾一下最新的ECMA标准中对执行上下文的描述

window在之前和vo可能是一样的，但是在最新的规范中，它们已经不一样了

变量被保存到VariableMap中

也就是说我们声明的变量和环境记录是被添加到变量环境中的：

是标准有没有规定这个对象是window对象或者其他对象呢？
其实并没有，那么JS引擎在解析的时候，其实会有自己的实现；
比如v8中其实是通过VariableMap的一个hashmap来实现它们的存储的。
那么window对象呢？而window对象是早期的GO对象，在最新的实现中其实是浏览器添加的全局对象，并且一直保持了window和var之间值的相等性；

var的块级作用域

在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。

ES5中放到一个代码中定义的变量，外面是可以访问的：

let/const的块级作用域

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：

这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

块级作用域的应用

我来看一个实际的案例：获取多个按钮监听点击

使用let或者const来实现：

那么能不能用const来定义i呢

部分情况下可以用const

暂时性死区

在ES6中，我们还有一个概念称之为暂时性死区：

它表达的意思是在一个代码中，使用let、const声明的变量，在声明之前，变量都是不可以访问的；
我们将这种现象称之为 temporal dead zone（暂时性死区，TDZ）；

在代码块当中如果没有声明，但是先访问了，这种现象被称为暂时性死区

var、let、const的选择

那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？

对于var的使用：

我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
其实是JavaScript在设计之初的一种语言缺陷；
当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

对于let、const：

对于let和const来说，是目前开发中推荐使用的；
我们会有限推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

字符串模板基本使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；

标签模板字符串使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的JavaScript的函数：

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：

模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；

React的styled-components库

内部原理就是标签模板字符串

函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；
而在ES6中，我们允许给函数一个默认值：

函数默认值的补充

默认值也可以和解构一起来使用：

另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：

但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。

函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

那么剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；
剩余参数必须放到最后一个位置，否则会报错。

函数箭头函数的补充

在前面我们已经学习了箭头函数的用法，这里进行一些补充：

箭头函数是没有显式原型的，所以不能作为构造函数，使用new来创建对象；
箭头函数没有this
箭头函数没有aurguments

展开语法

展开语法(Spread syntax)：

可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

展开语法的场景：

在函数调用时使用；
在数组构造时使用；
在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

注意：展开运算符其实是一种浅拷贝；

const names = ['abc', 'cba', 'nba']
const name = 'why';

function foo(x, y, z) {
    console.log(x, y, z)
}

// 第一种方式, 通过apply， 因为apply本身就接受一个数组
foo.apply(null, names)
// 展开运算符，将数组展开，然后对每一个参数赋值
foo(...names)

// 字符串也可以展开
foo(...name)

// 构造数组时
const newNames = [...names, ...name]

ES2018(ES9)
const info = {name: 'wts', age: 18};
const obj = {...info.  address: '广州市'}
console.log(obj);
如果把数组放到对象里面展开，索引就是key, 索引对应的值就是对象的值

这种拷贝被称为浅拷贝

数值的表示

在ES6中规范了二进制和八进制的写法：

另外在ES2021新增特性：数字过长时，可以使用_作为连接符

Symbol的基本使用

Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。

那么为什么需要Symbol呢？

在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；

Symbol就是为了解决上面的问题，用来生成一个独一无二的值。

Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；
Symbol是一个函数，虽然S是大写，但它不是一个构造函数
也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；

Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；

Symbol作为属性名

Symbole可以添加一个描述
const s3 = Symbol('aaa');
console.log(s3.description)   // aaa

我们通常会使用Symbol在对象中表示唯一的属性名：

获取值

console.log(info[s1], info[s2])
注意： 不能通过.语法获取

使用Symbol作为key的属性名，在遍历 Object.keys等中是获取不到这些Symbol值的
console.log(Object.keys(info))    //[]
console.log(Object.getOwnpropertyNames(info))    //[]

如果想获取，需要通过Object.getOwnPropertySymboles(info)

如果要遍历，需要通过这种方式来遍历，通过key拿到所有的值

相同值的Symbol

前面我们讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？

我们可以使用Symbol.for方法来做到这一点；
并且我们可以通过Symbol.keyFor方法来获取对应的key；

Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。

在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。

在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

Set的常见方法

Set常见的属性：

size：返回Set中元素的个数；

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型，必须传的是元素，不支持传索引；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [, thisArg])：通过forEach遍历set；

另外Set是支持for of的遍历的。

Set的使用场景

对数组去重

const arr = [33, 10, 26, 30, 33, 26];
const newArr = [];
for(const item of arr) {
    if(newArr.indexOf(item) !== -1) {
        newArr.push(item);
    }
}

const arrSet = new Set(arr);
const newArr = Arr.form(arrSet);     转换成数组
const newArr = [...arrSet];    转换成数组


let set = new Set();
set.add(10);
set.add(20);
set.add(30);
set.add(40);

// 通过forEach来遍历set结构
set.forEach(item => {
    console.log(item)
    }
)

// 通过value来遍历set结构
for(let value of set) {
    console.log(value)
}

WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；

区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

什么叫弱引用

强引用

强引用有指向的时候GC，是不能对引用指向的内容进行回收的

弱引用的概念是，虽然有一个引用指向某个对象，但是这个引用是弱引用，GC在判断垃圾回收的时候是不看弱引用的，就算某一个对象只有一条弱引用指向，GC依然会回收掉它

WeakSet常见的方法：

add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
weakSet没有clear，没有forEach，没有for...of
所以weakSet在开发中没什么用的

WeakSet的应用

注意：WeakSet不能遍历

因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
所以存储到WeakSet中的对象是没办法获取的；

那么这个东西有什么用呢？

事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

class Person{
    running() {
        console.log('running~', this)
    }
}
const p = new Person();
p.running();
p.running.call({name: 'why'});
p.running.call({name: 'why'});
//如果我只希望，你是通过p.runing()来调这个方法，但是我不希望，你是通过p.running.call这种方式来调用我的方法怎么办

const personSet = new weakSet();
class Person{
    constructor(){
        personSet.add(this);
    }
    running() {
        if(!personSet.has(this)) {
            throw new Error('不能通过费构造方法创建出来的对象调用running方法')
        }
        console.log('running~', this)
    }
}
const p = new Person();
p.running();
p.running.call({name: 'why'});
p.running.call({name: 'why'});

用weakSet来保证当前的调用时通过实例来调用的，那么为什么不用set呢
因为set是一个强引用，如果有一天把p = null，那么在weackset中，因为它是弱引用，所以它里面的对象不会使用，那么this会被销毁，但是set中是不会销毁的，因为它是强引用
personSet.delete(p)   除非这样进行销毁，这样不就麻烦了嘛

Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
那么能不能用对象作为key呢, 你可能会想到计算属性名

const obj1 = {name: 'wht';
const obj2 = {name: 'kobe';
const info = {
    [obj1]: 'aaa',
        [obj2]: 'bbb'
}
console.log(info)

它的key被转成了字符串，因为两个key都是一样，都被转成了'[object object]'，所以后面的把前面覆盖了map允许对象类型或者其他类型作为key

const obj1 = {name: 'wht'}
const obj2 = {name: 'kobe'};
const map = new Map();
map.set(obj1, 'aaa');
map.set(obj2, 'bbb');
map.set(1, 'ccc');    // 基本数据类型也是可以的
console.log(map)

某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；那么我们就可以使用Map：

也可以通过数组的创建来创建map，它是有固定格式的

const obj1 = {name: 'wht'}
const obj2 = {name: 'kobe'};
const map = new Map([[obj1, 'aaa'], [obj2, 'bbb'], [1, 'ccc']])
console.log(map)

Map的常用方法

Map常见的属性：

size：返回Map中元素的个数；

Map常见的方法：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；

const obj1 = {name: 'wht'}
const obj2 = {name: 'kobe'};
const map = new Map([[obj1, 'aaa'], [obj2, 'bbb'], [1, 'ccc']])


map.set({age: 19}, 'ddd')
console.log(map)

get(key)：根据key获取Map中的value；

has(key)：判断是否包括某一个key，返回Boolean类型；

delete(key)：根据key删除一个键值对，返回Boolean类型；

clear()：清空所有的元素；

forEach(callback, [, thisArg])：通过forEach遍历Map；

Map也可以通过for of进行遍历。

WeakMap的使用

和Map类型相似的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。那么和Map有什么区别呢？

区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；

区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

反之，如果是weakmap那么是一个弱引用，如果没有其他引用指向它，只有weakmap指向它的话，GC是会把他回收掉的

WeakMap常见的方法有四个：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；

为什么weakMap打印出来以后会是 WeakMap { }

首先他会打印出来类型 WeakMap ,然后因为WeakMap不能进行遍历，所以会把数据转成字符串，打印出后面的结果

WeakMap的应用

注意：WeakMap也是不能遍历的

因为没有forEach方法，也不支持通过for of的方式进行遍历；

那么我们的WeakMap有什么作用呢？

let obj1 = {
  name: 'wts',
  age: 18
}


let obj2 = {
  name: 'kobe',
  age: 19
}


// 假设，我现在想要监听obj1中的name，并且，执行一些函数，然后执行obj2中的name，然后执行一些函数
function obj1NameFn1() {
  console.log('obj1NameFn1');
}
function obj2NameFn2() {
  console.log('obj2NameFn2');
}
function Obj2NameFn1() {
  console.log('obj2NameFn1');
}
function obj2NameFn2() {
  console.log('obj2NameFn2')
}


// 首先要建立映射关系，要通过某种数据结构把他们关联到一起
// 所以，这里我们可以通过weakMap把他们关联到一起，为什么不能用map呢，因为name是一个基本数据类型，weakMap不能使用基本数据类型作为key, 必须用对象

先把所有要执行的函数放到map中

再把obj1和关联的map加到weakmap中

let obj1 = {
  name: 'wts',
  age: 18
}


let obj2 = {
  name: 'kobe',
  age: 19
}


// 假设，我现在想要监听obj1中的name，并且，执行一些函数，然后执行obj2中的name，然后执行一些函数
function obj1NameFn1() {
  console.log('obj1NameFn1');
}
function obj1NameFn2() {
  console.log('obj2NameFn2');
}
function obj1AgeFn1() {
  console.log('obj1AgeFn1');
}
function obj1AgeFn2() {
  console.log('obj1AgeFn2');
}
function obj2NameFn1() {
  console.log('obj2NameFn1');
}
function obj2NameFn2() {
  console.log('obj2NameFn2')
}
function obj2AgeFn1() {
  console.log('obj2AgeFn1');
}
function obj2AgeFn2() {
  console.log('obj2AgeFn2');
}


// 首先要建立映射关系，要通过某种数据结构把他们关联到一起
// 所以，这里我们可以通过weakMap把他们关联到一起，为什么不能用map呢，因为name是一个基本数据类型，weakMap不能使用基本数据类型作为key, 必须用对象




// 1.创建weakMap
const weakMap = new WeakMap();


// 2. 手机依赖结构
// 2.1. 对obj1手机的数据结构
const obj1Map = new Map();
obj1Map .set("name", [obj1NameFn1, obj1NameFn2]);
obj1Map.set('age', [obj1AgeFn1, obj1AgeFn2])
weakMap.set(obj1, obj1Map);


// 2.2. 对obj2手机的数据结构
const obj2Map = new Map();
obj2Map.set('name', [obj2NameFn1, obj2NameFn2]);
weakMap.set(obj2, obj2Map);


// 3. 如果obj1.name发生了改变
// proxy、Object.definedProperty
obj1.name = 'james';
const targetMap = weakMap.get(obj1);
const fns = targetMap.get('name');
fns.forEach(item => item());

为什么要用weakMap呢，还是弱引用的原因，如果有一天里面的obj不在用了，那么GC就会把他销毁掉，而且，还有就是，如果有一天obj不在用了，那么它保存的所有的函数就都会销毁掉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

10_ES6.md

10_ES6.md

字面量的增强

解构Destructuring

解构的应用场景

let/const基本使用

let/const作用域提升

let/const有没有作用域提升呢？

Window对象添加属性

变量被保存到VariableMap中

var的块级作用域

let/const的块级作用域

块级作用域的应用

暂时性死区

var、let、const的选择

字符串模板基本使用

标签模板字符串使用

React的styled-components库

函数的默认参数

函数默认值的补充

函数的剩余参数

函数箭头函数的补充

展开语法

数值的表示

Symbol的基本使用

Symbol作为属性名

相同值的Symbol

Set的基本使用

Set的基本使用

Set的常见方法

Set的使用场景

WeakSet使用

WeakSet的应用

Map的基本使用

Map的常用方法

WeakMap的使用

WeakMap的应用

Files

10_ES6.md

Latest commit

History

10_ES6.md

File metadata and controls

字面量的增强

解构Destructuring

解构的应用场景

let/const基本使用

let/const作用域提升

let/const有没有作用域提升呢？

Window对象添加属性

变量被保存到VariableMap中

var的块级作用域

let/const的块级作用域

块级作用域的应用

暂时性死区

var、let、const的选择

字符串模板基本使用

标签模板字符串使用

React的styled-components库

函数的默认参数

函数默认值的补充

函数的剩余参数

函数箭头函数的补充

展开语法

数值的表示

Symbol的基本使用

Symbol作为属性名

相同值的Symbol

Set的基本使用

Set的基本使用

Set的常见方法

Set的使用场景

WeakSet使用

WeakSet的应用

Map的基本使用

Map的常用方法

WeakMap的使用

WeakMap的应用