美文网首页
ES6常见面试题 2019-06-14

ES6常见面试题 2019-06-14

作者: 南台观芸秀 | 来源:发表于2019-06-14 16:36 被阅读0次

    1.es6熟悉吗,说几个es6的新增方法

    (1)新增声明命令let和const

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

    特点:

        let 和 const 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用。

        不存在变量提升,只能先声明再使用,否则会报错。在代码块内,在声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

        在同一个代码块内,不允许重复声明。

        const声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。)

    (2)模板字符串(Template String)

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

    var str = `abc

    def

    gh`;

    console.log(str);

    let name = "小明";

    function a() {

        return "ming";

    }

    console.log(`我的名字叫做${name},年龄${17+2}岁,性别${'男'},游戏ID:${a()}`);

    (3)函数的扩展

        函数的默认参数

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

    function A(a,b=1){

        console.log(a+b);

    }

    A(1);    //2

    A(2+3);  //5

        箭头函数

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

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

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

    //省略写法

    var people = name => 'hello' + name;

    var getFullName = (firstName, lastName) => {

        var fullName = firstName + lastName;

        return fullName;

    }

    (4)对象的扩展

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

    var foo = 'bar';

    var baz = {foo};  //等同于  var baz = {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方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数,第一个参数是目标对象,后面的都是源对象。

    var target  = {}; //目标对象

    var source1 = {name : 'ming', age: '19'}; //源对象1

    var source2 = {sex : '女'}; //源对象2

    var source3 = {sex : '男'}; //源对象3,和source2中的对象有同名属性sex

    Object.assign(target,source1,source2,source3);

    console.log(target);    //{name : 'ming', age: '19', sex: '男'}

    (5)for...of  循环

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

    var arr=["小林","小吴","小佳"];

    for(var v of arr){

        console.log(v);

    }

    //小林

    //小吴

    //小佳

    (6)import和export

    ES6标准中,JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用。

    export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口。

    import用于在一个模块中加载另一个含有export接口的模块。

    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 {};

    (7)Promise对象

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

    它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败。

    Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。then()方法接收两个参数:onResolve和onReject,分别代表当前 promise 对象在成功或失败时。

    var promise = new Promise((resolve, reject) => {

        var success = true;

        if (success) {

            resolve('成功');

        } else {

            reject('失败');

        }

    }).then(

        (data) => { console.log(data)},

        (data) => { console.log(data)}

    )

    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}

    (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数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。

    属性和方法:

        size 数据的长度

        add() 添加某个值,返回 Set 结构本身。

        delete() 删除某个值,返回一个布尔值,表示删除是否成功。

        has() 查找某条数据,返回一个布尔值。

        clear() 清除所有成员,没有返回值。

    应用:数组去重。

    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 展开运算符(...)

        将字符串转成数组

    var str="abcd";

    console.log([...str]) // ["a", "b", "c", "d"]

        将集合转成数组

    var sets=new Set([1,2,3,4,5])

    console.log([...sets]) // [1, 2, 3, 4, 5]

        两个数组的合并

    var a1=[1,2,3];

    var a2=[4,5,6];

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

        在函数中,用来代替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 和 []


    1.es6新特性,哪些在项目中使用举例说明

    let const 解构 箭头函数 Set去重 新增数据类型Symbol 模板字符串`` 类怎么实现继承 模块化

    promise async / await

    2. var let const 区别

    3.Set 怎么去重

    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如:

    let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];

    let set = new Set(array);

    console.log(set); // 此时打印的是set 结构 Set(5) {1, 2, 3, 4, 5}

        1

        2

        3

    ES6中Array新增了一个静态方法Array.from,可以把类似数组的对象转换为数组,如通过querySelectAll方法得到HTML DOM Node List,以及ES6中新增的Set和Map等可遍历对象,如:

    let set = new Set();

    set.add(1).add(2).add(3);

    let array = Array.from(set);

    console.log(array);

    // => [1, 2, 3]

        1

        2

        3

        4

        5

    4.模板字符串怎么使用*

    主要是针对变量

    **5.promise 实现原理? promise的三种状态 **

    promise实际上解决jquery的ajax回调地域(解决层层嵌套),只是异步编程的一种解决方案

    代码实现:

    new promise(function(resolve,reject) {

    // 111111111

    resolve('...')

    } ).then(function(value) {

    console.log(value)

    }).catch(function(error){

    console.log(error)

    })

        1

        2

        3

        4

        5

        6

        7

        8

    const p1 = new Promise(function (resolve, reject) {

      setTimeout(() => reject(new Error('fail')), 3000)

    })

    const p2 = new Promise(function (resolve, reject) {

      setTimeout(() => resolve(p1), 1000)

    })

    p2

      .then(result => console.log(result))

      .catch(error => console.log(error))

        1

        2

        3

        4

        5

        6

        7

        8

        9

        10

        11

    三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

    promise两个特点:

    (1)对象的状态不受外界影响

    (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。

    promise 缺点: 无法取消promise,如果不设置回调函数,promise内部抛出错误

    第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

    6.es6继承和es5继承的区别

    7.箭头函数 this指向

    指向包裹她的父函数

    8.对async 和 await的认识

    项目中应用可以讲异步改成同步执行

    9.新增数据类型是谁, 有什么作用

    10.es6中对数组遍历的几种方式和不同之处

    11.es6解构

    数组解构 和 对象解构 , 项目中返回的response.data 可以解构成自己需要的数据

    12.对es6的了解

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    **13.正确区分数组map方法 和 es6的Map结构 **

    ---------------------

    作者:脑瓜疼儿

    来源:CSDN

    原文:https://blog.csdn.net/meikaied/article/details/85250327

    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:ES6常见面试题 2019-06-14

          本文链接:https://www.haomeiwen.com/subject/qzupfctx.html