es6常用方法

Posted 2021-09-07 老张在线敲代码

let

（1）基本用法–块级作用域

原本JS只有函数作用域，没有块级作用域。ES6 新增了let变量声明命令，声明的变量仅在块级作用域内有效
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc

（2）不存在变量提升

之前由于JS的预处理机制，var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。
let命令所声明的变量一定要在声明后使用，否则报错，因为预处理机制只找var和function

（3）会有暂时性死区、不允许重复声明

let 和 const 声明的变量不存在变量提升，其作用域都是块级作用域，凡是在声明变量之前使用变量就会报错
所以，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

（4）块级作用域与函数声明

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句

const

（1）基本用法

const声明一个只读的常量。一旦声明，常量的值就不能改变，且只在声明所在的块级作用域内有效。
这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

（2）其他同let

不存在变量提升、会有暂时性死区、不允许重复声明

展开运算符

合并数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
结果返回1，2，3，4，5，6

合并对象
const obj1 = {1, 2, 3};
const obj2 = [...obj1, 4, 5，6];
结果返回1，2，3，4，5，6

最后补充一下：

数组另一种合并方法：context（）
对象另一种合并方法：assign（）

箭头函数

箭头函数
var fn = (a1, b2) => { return a1 + b2; }
普通函数
var fn = function(a1, b2) {
  return a1+ b2;
};

参数：

如果箭头函数没有参数，直接写一个空括号即可。

如果箭头函数的参数只有一个，也可以省去包裹参数的括号。

如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可。

函数体：

一句代码直接写不用包对象
多句代码行用对象包着

箭头函数的缺点：

箭头函数中无原型，this、arguments
在原型上使用箭头函数：箭头函数中的this不是指向当前，而是根据变量查找规则找去全局作用域

注意事项：

不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数，这样箭头函数就会继承外层函数的this，从而将this制在可见的范围内；

数组新增方法

forEach()会遍历数组, 循环体内没有返回值

forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引,
第三个参数是当前元素所属的数组.

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
　　console.log(item);
});

map()的主要作用, 其实是创建一个新的数组, map()的参数和forEach()是一样的

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
    return item + 1;
});
console.log(temp);
console.log(array);

filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.参数也跟foreach一样

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
    return item > 3;    
});
console.log(temp);
console.log(array);

every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false，参数同上

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
    return item > 2;
});
console.log(bo);

reduce()跟其他几个方法不一样, 它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
    return a + b;
});
console.log(total);     // 15

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

字符串新增方法

repeat（）方法复制指定次数字符串。

var str = "Runoob";
str.repeat(2);
RunoobRunoob

模板字符串

用用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
模板字符串中嵌入变量，需要将变量名写在${}之中

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(3, 3);  // false

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");
 输出结果:true

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello");
 输出结果:false

matchAll()返回一个正则表达式在当前字符串的所有匹配

新增对象方法

Object.is（）它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

Object.assign()方法用于对象的合并

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)

Object.keys（）方法，返回一个数组，每一项是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

Object.values（）方法返回一个数组，每一项是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

Object.fromEntries([
  ['foo', 'bar'],
  ['baz', 42]
])
// { foo: "bar", baz: 42 }

async是Generator 函数的语法糖让异步操作更加方便

基本用法：

// 函数声明
async function foo() {}

// 函数表达式
const foo = async function () {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jake').then(…);

// 箭头函数
const foo = async () => {};

Promise 对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise有三个状态:

pending(等待)、resolve(完成)、 reject(拒绝)
两种状态改变方式:
pending => resolve,
pending => reject

Promise对象有以下两个特点：

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为
resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

优点：

（1）可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

（2）提供统一的接口，使得控制异步操作更加容易。

缺点：

（1）无法取消Promise，一旦新建它就会立即执行，无法中途取消。
（2）如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
（3）当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。 所以处理异步可以选择Generator

解决的问题：

原始方法

//以往回调方式
函数1(function(){
    //代码执行...(ajax1)
    
    函数2(function(){
        //代码执行...(ajax2)
        
        函数3(function(data3){
              //代码执行...(ajax3)
        });
        ...
    });
});

```bash
//Promise回调方式:链式调用,可构建多个回调函数。
//例如请求一个ajax之后,需要这个拿到这个ajax的数据去请求下一个ajax
promise().then().then()...catch()

promise方法（解决回调地狱）

//首先要创建Promise实例
let promise = new Promise( (resolve, reject) => {
    //执行相应代码并根据情况调用resolve或reject
    ...
})

//在promise的then方法中执行回调
promise.then(function(){
        //第一个参数是返回resolve时,回调执行的函数
    },function(){
        //第二个是回调返回reject时,回调执行的函数
    }
}
resolve: then方法的第一个参数,通常作为事件成功的回调函数
reject: then方法的第二个参数,通常作为事件失败的回调函数,也可以作为catch的参数出现