es6新整理

迷南。 2023-07-25 08:44 4阅读 0赞

个人笔记：学习记录

### 一、数组： ###

##### 1. 求数组最大数： #####

// ES5写法
    Math.math.apply(null, [14, 3, 77]);
    // ES6写法
    Math.max(...[14, 3, 77]);
    // 等同于
    Math.max(14, 3, 77);

##### 2. 将一个数组添加到另一个数组的尾部 #####

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

##### 3. 扩展运算符的应用 #####

###### （1）复制数组 ######

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。例：

const a1 = [1, 2];
    const a2 = a1;
    
    a2[0] = 2;
    a1 // [2, 2]

ES5方法：

const a1 = [1, 2];
    const a2 = a1.concat();
    
    a2[0] = 2;
    a1 // [1, 2]

ES6使用拓展运算符：

const a1 = [1, 2];
    // 写法一
    const a2 = [...a1];
    // 写法二
    const [...a2] = a1;

###### (2)合并数组 ######

不过这两种方法都是浅拷贝，使用的时候需要注意。

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

const a1 = [{ foo: 1}];
    const a2 = [{ bar: 2}];
    
    const a3 = a1.concat(a2);
    const a4 = [...a1, ...a2];
    
    a3[0] === a1[0]; // true
    a4[0] === a1[0]; // true

###### (3) 与解构赋值结合 ######

扩展运算符可以与解构赋值结合起来，用于生成数组。

// ES5 
    a = list[0], rest = list,splice(1);
    
    // ES6 
    [a, ...rest] = list

###### (4) 字符串 ######

扩展运算符还可以将字符串转为真正的数组

[...'hello']
    // ['h', 'e', 'l', 'l', 'o']

(5) 实现了 Iterator 接口的对象

任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

### 二、对象 ###

### Set ###

es6提供了新的数据结构set。类似于数组，但是成员的值都是唯一的，没有重复值。

Set本身是一个构造函数，用来生成Set数据结构

const s = new Set();
    [2, 3, 4, 5, 4, 2, 3].forEach(x => s.add(x));
    
    for(let i of s) { 
        console.log(i);
        // 2 3 4 5
    }

##### 用途： #####

// 去除数组的重复成员
    [...new Set(array)]
    
    // 去除字符串里面的重复字符
    [...new Set('ababbc')].join('')

##### Set实例的属性和方法 #####

###### Set结构的实例有以下属性： ######

*  `Set.prototype.constructor` ：构造函数，默认就是 Set 函数。
 *  `Set.prototype.size` ：返回 Set 实例的成员总数。

###### Set 实例的方法分为两大类：操作方法和遍历方法 ######

（1）操作方法（4个）

*  `set.prototype.add(value)` ：添加某个值，返回Set结构本身；
 *  `set.prototype.delete(value)` ：删除某个值，返回一个布尔值，表示删除是否成功；
 *  `set.prototype.has(value)` ：返回一个布尔值，表示该值是否为Set的成员；
 *  `set.prototype.clear()`：清除所有成员，没有返回值。

（2）遍历操作（4个）

*  `Set.prototype.keys()`：返回键名的遍历器；
 *  `Set.prototype.values()`：返回键值得遍历器；
 *  `Set.prototype.entries()`：返回键值对的遍历器；
 *  `Set.prototype.foreach()`：使用回调函数遍历每个成员。

### Promise 对象 ###

##### 含义：Promise是异步编程的一种解决方案。 #####

###### 两个特点： ######

*  对象的状态不收外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
 *  一旦状态改变，就不会再变，任何时候都可以得到这个结果。

###### 缺点： ######

*  无法取消 Promise，一旦新建就会立即执行，无法中途取消。
 *  如果不设置回调函数， Promise 内部抛出的错误，不会反映到外部。
 *  当处于 pending 状态时，无法得知目前进展到哪一阶段（刚刚开始还是即将完成）。

##### 基本用法 #####

const promise = new Promise(function(resolve, reject){ 
        // some code
        
        if(/* 异步操作成功 */){ 
           resolve(value);
    	} else { 
           reject(error);                     
        }
    })

Promise 实例生成以后，可以用then方法分别制定 resolved状态和rejected状态的回调函数。

promise.then(function(value){ 
        // success
    }, function(error) { 
        // failure
    });

### js 闭包 ###

特性：

*  函数嵌套函数
 *  函数内部可以引用函数外部的参数和变量
 *  参数和变量不会被垃圾回收机制回收

优点：

*  保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突
 *  在内存中维持一个变量，可以做缓存（多了会消耗内存）
 *  匿名自执行函数可以减少内存消耗

缺点：

*  被引用的私有变量不能被销毁，增大了内存消耗，解决办法是可以在使用完变量后为他复赋值为null
 *  由于闭包涉及到跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。