ES6核心语法

鹅纷斐，

已于 2023-09-02 16:35:05 修改

阅读量429

点赞数

文章标签： es6 javascript 前端

于 2023-08-30 22:24:15 首次发布

本文链接：https://blog.csdn.net/weixin_42181264/article/details/132570439

版权

主要记录学习ES6的语法

1、let和const

同es5中的var来声明变量。三者的区别分别是：

var声明的变量存在变量提升，先声明未赋值，值为undefined。且变量声明可在函数块内使用。变量声明之后可以重复声明
let声明的变量无变量提升。作用域是块级（例如if或者for等等）。不能被重复声明。声明的变量可以被修改，但是变量的类型不能被改变。
const声明的变量无变量提升。作用域是块级。不能被重复声明。并且声明之后的常量不可以被修改。const还可以声明对象，并且可以修改对象内部的常量。
let和const声明的变量不会污染全局变量。这也是两者相对于var的一个优点。建议在默认情况下用const。在知道变量值要修改时用let。

2、模板字符串

模板字符串是一种字符串字面量。可以在tab键上的反引号 ` 之间插值，变量、函数或其他有效的表达式用${}括起来。

3、函数默认值、剩余参数

①带参数的默认值

function add(a=10, b=20){
    return a+b;
}
// 默认a=30
console.log(add(30)) // 50

②默认的表达式也可以是一个函数
③剩余参数由…和一个紧跟的具名参数指定，例如…keys。解决了arguments的问题。剩余参数会将函数的所有参数收集到一个数组中，这个数组是一个真正的数组，具有数组的所有特性和方法，此外剩余参数还可以提供更加可靠的类型处理，避免类型错误
arguments的问题包括：arguments是一个类数组对象，不能直接使用数组相关的方法和操作。arguments没有明确的参数类型声明，需要手动进行类型检查。arguments是一个未规范的对象，不同的JavaScript引擎可能会有不同的实现行为。

4、扩展运算符、箭头函数

1、扩展运算符用…表示。

它可以将一个数组或者对象展开，使其成为各自独立的值。在函数调用时，可以使用扩展运算符传递任意数量的参数。
①合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

②复制数组

const arr = [1, 2, 3];
const newArr = [...arr];
console.log(newArr); // [1, 2, 3]

③获得数组的最大最小值

const arr = [1, 2, 3, 4, 5];
const maxVal = Math.max(...arr);
const minVal = Math.min(...arr);
console.log(maxVal); // 5
console.log(minVal); // 1

④将字符串转为数组

const str = "hello";
const arr = [...str];
console.log(arr); // ["h", "e", "l", "l", "o"]

⑤将类数组转换为数组

const args = function() { return arguments } (1, 2, 3);
const arr = [...args];
console.log(arr); // [1, 2, 3]

⑥合并对象

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }

⑦将对象转为数组

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }

2、箭头函数（=>）

是一种简洁的函数定义方式，可以用来替代传统的function定义方式。有以下特点：

使用=>来定义函数，相比于function更简洁；
箭头函数可以省略函数体中的花括号和return关键字；
如果箭头函数只有一个参数，可以省略参数周围的括号；
箭头函数的this转向是定义时所在的作用域，而不是调用时所在的作用域。

// 传统的函数定义方式
function add(a, b) {
  return a + b;
}
// 箭头函数定义方式
const add = (a, b) => a + b;

5、箭头函数this指向和注意事项

箭头函数没有this指向，内部this值只能通过查找作用域来确定，一旦使用箭头函数，不存在作用域链。
注意事项：
①()=>内部没有arguments
②()=>不能使用new关键字实例化对象。function函数也是一个对象，但是()=> 不是一个对象，其实就是一个语法糖

6、解构赋值

解构赋值是对赋值运算符的扩展，针对数组和对象操作

// 数组的解构赋值
const [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 以上都属于不完全解构,不完全解构可以忽略某些属性
// 完全解构
console.log(a,b,c); //1,2,3

// 对象的解构赋值
const {a, b, c} = {a: 1, b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

还可以使用默认值避免无法结构的情况：

const [a = 1, b, c] = [undefined, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const {a = 1, b, c} = {b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

解构赋值可以使用剩余用算符，也可以嵌套使用，例如：

let [a,[b],c] = [1,[2],3]

7、扩展的对象的功能

es6允许直接写入变量和函数，作为对象的属性和方法。其中有两个重要的方法
①is()比较两个值是否严格相等

console.log(Object.is(NaN, NaN))//true
console.log(Object.is(undefined, null))//false
console.log(Object.is(0, null))//false

②assign()浅拷贝，用于对象的合并

Object.assign(target, ...sources)//target:目标对象；source:一个或者多个源对象
//例如：
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }

8、Symbol类型

用Symbol声明的值是独一无二存在的，一般用于定义对象的私有属性，取值时用[]取值。例如：

let s = Symbol('s')
let obj = {}
obj[s] = "hollow"
console.log(obj[s])// hollow

Symbol定义的对象没有key。可以用Reflect.ownkey和Object.getOwnPropertySymbols()方法获取Symbol声明的属性名（作为对象的key）

9、Set数据集合类型

Set表示无重复的有序列表。Set可以通过扩展运算符转化成数组。例如：

let set1 = new Set([1,2,3,4,5])
let arr = [...set1]

①一般其他对象释放方法是置null。set中的对象的引用无法被释放，需要在创建时用WeakSet创建。该类型只允许存储对象的弱引用，而不能存储基本类型的值。对象的弱引用在它自己成为该对象的唯一引用时，不会阻止垃圾回收。WeakSet有几个特点：

不能传入非对象类型的参数
不可迭代
没有forEach
没有size属性

10、Map数据类型

是键值对的有序列表，键和值是任意类型。其中键不会重复。Map常用于存储和查找数据。类比于Set，Map也有WeakMap创建的数据类

11、数组的扩展方法

数组的方法：
①from() :将数组转换为真正的数组，利用扩展运算符也可以。from可以接受第二个参数，用来对每个元素进行处理。
②of():将一组值转换成数组（可以是任意数据类型）
③conpywithin()、find()、findIndex()
④entries()返回一个键值对，keys()返回键，values()返回值
返回一个遍历器，可以用for…of遍历
⑤include()返回一个布尔值，表示某个数组最后是否包含给定的值

12、迭代器Intertor的用法

例：

const item = ["one", "two"]
const it = item[Symbol.iterator]()
it.next()
// 返回value为当前值，done为false表示没有遍历完成，会继续遍历。为true表示遍历完成

①迭代器是一个接口，能快捷访问数据，通过Symbol.iterator来创建迭代器，通过迭代器的next()获取迭代之后的结果
②迭代器是用于遍历数据结构的指针（数据库指标）

13、生成器Generator的用法

可以通过yield关键字将函数挂起，为了改变执行流提供了可能。
与普通函数区别：①function后函数名前有*
②只能在函数内部使用yield表达式将函数挂起，返回一个遍历器对象，可以调用next()
generator函数是分段执行的，yield语句是暂停执行，而next()恢复执行。
使用场景：为不具备Interator接口的对象提供了遍历操作

14、Generator的应用

回调地狱，可以使异步代码同步化

// *表示函数为Generator函数，
        function* func(a) {
            console.log('one');
            yield a;
            console.log('two');
            yield '2';
            console.log('three');
            return 3;
        }
        //   每次执行函数都会返回一个遍历器对象
        let fn = func(1);
        // console.log(fn);
        //   必须调用遍历器对象的next方法,使得指针移向下一个状态
          console.log(fn.next());
          // one
          // {value: 1, done:false}
          console.log(fn.next());
          // two
          // {value: '2', done:false}
          console.log(fn.next());
          // three
          // {value: 3, done:true}
//  总结: Generator函数是分段执行的,yield语句是暂停执行,而next方法可以恢复执行

15、Promise的基本使用

解决异步编程的方法，相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果，各种异步操作都可以用同样的方法进行处理。
特点：①对象的状态不受外界影响，处理异步操作三个状态：Pending（进行中）Resolved（成功） Rejected（失败）
②一旦状态改变就不会再变。任何时候都可以得到这个结果。状态改变只有两种情况Pending->Resolved和Pending->Rejected
常用方法：①then()方法第一个参数是relove回调函数，第二个参数是可选的，是rejected状态回调的函数。
then()返回一个新的promise实例。可以采用链式编程。
②resolve()方法能将现有任何对象转换为promise对象

let p = Promise.resolve('foo');
        // 等价于 new Promise(resolve=>resolve('foo'));

        /* console.log(p);
        p.then((val)=>{
            console.log(val);
        }) */

③rejected()方法也会返回一个新的promise对象

// let p2 = Promise.reject(new Error('出错了'));

        // p2.catch(err => {
        //     console.log(err);
        // })

        // Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调
        // let Promise1 = new Promise(function (resolve, reject) {})
        // let Promise2 = new Promise(function (resolve, reject) {})
        // let Promise3 = new Promise(function (resolve, reject) {})

        // let p3 = Promise.all([Promise1, Promise2, Promise3])
        // p3.then(() => {
        //     // 三个都成功 则成功
        // }).catch(err => {
        //     // 只要有失败,都失败
        // })

④all()方法异步执行，应用在一些游戏类素材图片多，都加载完成才渲染页面

⑤race()某个异步请求设置超时时间，并在超时后执行相应的操作。例如：

//请求某个图片资源
        /*    function requestImg(imgSrc) {
               var p = new Promise((resolve, reject) => {
                   var img = new Image();
                   img.onload = function () {
                       resolve(img);
                   }
                   img.src = imgSrc;
               });
               return p;
           }
           //延时函数，用于给请求计时
           function timeout() {
               var p = new Promise((resolve, reject) => {
                   setTimeout(() => {
                       reject('图片请求超时');
                   }, 5000);
               });
               return p;
           }
           Promise.race([requestImg('images/2.png'), timeout()]).then((data) => {
               console.log(data);
           }).catch((err) => {
               console.log(err);
           }); */

⑤done() 处于回调函数的末端,保证抛出任何可能出现的错误
⑥finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

server.listen(0)
.then(function () {
	// run test
})
.finally(server.stop);

16、async的用法

使异步操作更方便。基本操作async会返回一个promise对象，可以调用then、catch…
async是Generator的一个语法糖
如果async函数中有多个await，那么then函数会等所有的await命令都运行完成，只要有一个await的promis状态失败了那么之后的await不会运行。

async function f() {
            await Promise.reject('出错了');
            await Promise.resolve('hello world'); // 不会执行
        }

有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。
这时可以将第一个await放在try…catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。

async function f() {
            try {
                await Promise.reject('出错了');
            } catch (e) {}
            return await Promise.resolve('hello world');
        }

        f()
            .then(v => console.log(v))

或者

async function f() {
        await Promise.reject('出错了')
        .catch(e => console.log(e));
        return await Promise.resolve('hello world');
        }

        f()
        .then(v => console.log(v))

async函数返回一个 Promise 对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。

async function f() {
            return 'hello world';
        }

        f().then(v => console.log(v))
        // "hello world"

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。
抛出的错误对象会被catch方法回调函数接收到。

async function f() {
            throw new Error('出错了');
        }

        f().then(
            v => console.log(v),
            e => console.log(e)
        )
        // Error: 出错了

正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象

async function f() {
            return await 123;
        }

        f().then(v => console.log(v))

async function load() {
            loadUI();
            await showData();
            hideUI();
        }

        load();
        // console.log(itLoad);
        // 第一次调用会显示加载UI界面,并且异步的加载数据
        function loadUI() {
            console.log('加载loading界面.....');
        }

        function showData() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log('数据加载完成.....');
                    // 第二调用,会调用hideUI(),隐藏Loading
                    resolve();
                }, 1000);
            })

        }

        function hideUI() {
            console.log('隐藏loading....');
        }