面试之ES6你都知道哪些呢(详细实例展示）

秒速五厘米 2022-01-16 11:57 480阅读 0赞

**1、export和import**  
**1）、导入的时候有没有大括号的区别是什么**

*  当用export default people导出时，就用 import people 导入（不带大括号）
 *  一个文件里，有且只能有一个export default。但可以有多个export。
 *  当用export name 时，就用import \{ name \}导入（记得带上大括号）
 *  当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, \{ name, age \}
 *  当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import \* as example

**2 )使用**  
import和export命令只能在模块的顶部，不能在代码块之中。

//导入部分
    //全部导入
    import Person from './example'
     
    //将整个模块所有导出内容当做单一对象，用as起别名
    import * as example from "./example.js"
    console.log(example.name)
    console.log(example.getName())
     
    //导入部分
    import { name } from './example'
     
    //导出部分
    // 导出默认
    export default App
     
    // 部分导出
    export class User extend Component {};

**2、Promise**  
1）、Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。**改变状态的方式只有一种即异步的结果**：如果成功状态由padding——>fulfilled；否则状态由padding——>rejected。无法提供其他方式改变状态。  
2）、Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。  
**理解:** 异步的结果如果是resolved就会执行promise实例.then()方法第一个回调函数参数；如果是rejected就会执行.then方法的第二个回调函数参数，并分别把前面resolve和reject回调函数的参数传递给它们。  
3）、**Promise.catch()方法**用于指定发生错误时的回调函数，最好是在.then()的链式调用最后调用一下此方法来捕获异常。它的返回值仍然是个Promise对象。如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。  
4)、**Promise.finally()方法**用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。finally本质上是then方法的特例  
5）**Promise.all()方法**用于将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.all([p1, p2, p3])

*  p1、p2、p3都为Promise实例，如果不是调用Promise.resolve将它们转成Promise实例。
 *  p的状态由p1，p2，p3共同决定如果它们的状态全都为fulfilled则p的状态变成fulfilled，此时p1，p2，p3的返回值组成一个数组传递给p的回调
 *  若p1，p2，p3中只要有一个为rejected，则p的状态变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise执行过程：

setTimeout(function() {
        console.log(0);
    }, 0);
    var promise = new Promise((resolve, reject) => {
        console.log(1);
        setTimeout(function () {
            var success = true;
            if (success) {
                resolve('成功');
            } else {
                reject('失败');
            }
        },2000);
    }).then(
        (data) => { console.log(data)},
        (data) => { console.log(data)}
    );
    console.log(promise);	//<pending> 进行中
    setTimeout(function () {
        console.log(promise);	//<resolved> 已完成
    },2500);
    console.log(2);
     
    //1
    //Promise {<pending>}
    //2
    //0
    //成功
    //Promise {<resolved>: undefined}

3、**新增声明命令let和const**

在es6中通常用 let 和 const 来声明，let 表示变量、const 表示常量。

特点：

*  let 和 const 都是块级作用域。以\{\}代码块作为作用域范围 只能在代码块里面使用。  
    不存在变量提升，只能先声明再使用，否则会报错。在代码块内，在声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal  
    dead zone，简称 TDZ）。
 *  在同一个代码块内，不允许重复声明。
 *  const声明的是一个只读常量，在声明时就需要赋值。（如果 const  
    的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。）

**4、模板字符串（Template String）**

用一对反引号(\`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在$\{ \}中。即完成拼接。

**5、函数的扩展**

*  **函数的默认参数**

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function fun(a,b=1){
        console.log(a+b);
    }
    fun(1);    //2

*  **箭头函数**

在es6中，提供了一种简洁的函数写法，我们称作“箭头函数”。

写法：函数名=(形参)=>\{……\} 当函数体中只有一个表达式时，\{\}和return可以省略，当函数体中形参只有一个时，()可以省略。

特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。

//省略写法
    var people = name => 'hello' + name;
     //完整写法
    var getFullName = (firstName, lastName) => {
        var fullName = firstName + lastName;
        return fullName;
    }

**6、对象的扩展**

*  **属性的简写**。ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

var foo = 'bar';
    var obj = {foo};  //等同于  var obj = {foo: foo};

**方法的简写**。省略冒号与function关键字。

var o = {
      method() {
        return "Hello!";
      }
    };
     
    // 等同于
    var o = {
      method: function() {
        return "Hello!";
      }
    };

*  **Object.keys()方法**，获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};
    console.log(Object.keys(obj));    // ["name", "age", "getName"]
    console.log(Object.keys(obj).length);    //3
     
    console.log(Object.keys(["aa", "bb", "cc"]));    //["0", "1", "2"]
    console.log(Object.keys("abcdef"));    //["0", "1", "2", "3", "4", "5"]

*  **Object.assign()**，assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象。

**7、for…of 循环**

是遍历所有数据结构的统一的方法。for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。

var arr=["猫","猪","鸡"];
    for(var val of arr){
        console.log(val);	
    }
    //猫
    //小猪
    //鸡

**8、解构赋值**

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

*  **数组的解构赋值**

数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应 如果有对应不上的就是undefined

var [name, pwd, sex]=["小周", "123456", "男"];
    console.log(name) //小周
    console.log(pwd)//123456
    console.log(sex)//男

*  **对象的解构赋值**

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var obj={name:"小周", pwd:"123456", sex:"男"}
    var {name, pwd, sex}=obj;
    console.log(name) //小周
    console.log(pwd)//123456
    console.log(sex)//男
     
    //如果想要变量名和属性名不同，要写成这样
    let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };
    console.log(foz) // "aaa"
    console.log(foo) // error: foo is not defined

**9、set数据结构**

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。

**1）属性和方法：**

*  **size** 数据的长度
 *  **add()** 添加某个值，返回 Set 结构本身。
 *  **delete()** 删除某个值，返回一个布尔值，表示删除是否成功。
 *  **has()** 查找某条数据，返回一个布尔值。
 *  **clear()** 清除所有成员，没有返回值。

**2）应用**

对数组进行去重操作

var arr = [1,1,2,2,3];
    var s = new Set(arr);
    console.log(s);	//{1, 2, 3}
     
    console.log(s.size);	//3
    console.log(s.add(4));	//{1, 2, 3, 4}
    console.log(s.delete(4));	//true
    console.log(s.has(4));	//false
    s.clear();

**10、Spread Operator 展开运算符(…)**

**1）将字符串转成数组**

var str="abcd";
    console.log([...str]) // ["a", "b", "c", "d"]

**2）将集合转成数组**

var sets=new Set([1,2,3,4,5])
    console.log([...sets]) // [1, 2, 3, 4, 5]

**3)两个数组的合并**

var a1=[1,2,3];
    var a2=[4,5,6];
    console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]

**4）在函数中，用来代替arguments参数**  
rest参数 …变量名称

rest 参数是一个数组 ，它的后面不能再有参数，不然会报错

function func(...args){
        console.log(args);//[1, 2, 3, 4]
    }
    func(1, 2, 3, 4);
     
    function f(x, ...y) {
        console.log(x);
        console.log(y);
    }
    f('a', 'b', 'c');     //a 和 ["b","c"]
    f('a')                //a 和 []
    f()                   //undefined 和 []