Web前端面试题及答案——ES6

1、let、const和var的区别

let用于声明变量，const声明常量。const声明常量时，必须在声明的同时赋值；对普通常量声明后不能再修改；对引用类型的常量，指向对象存储地址的指针，可以修改其中的内容。

let和const不存在变量提升、重复声明变量、使用未经声明的变量（ES6强制开启严格模式）都会报错。var有变量提升、可以重复声明变量。

console.log(i); // undefined
var i=1;
console.log(j); // Uncaught ReferenceError: j is not defined
let j=2;

function func(){
  let b=100;
  var b=10;
}
func(); // Uncaught SyntaxError: Identifier 'b' has already been declared

function add(num){
  let num;
}
add(); // Uncaught SyntaxError: Identifier 'num' has already been declared

 let和const只在块作用域中有效。 

// ES5
var a=[];
for(var i=0;i<10;i++){
    a[i]=function(){
      console.log(i);
    };
}
a[6](); // 10

var a=[];
for(var i=0;i<10;i++){
    a[i]=(function(i){
      return function(){
        console.log(i);
      }
    })(i);
}
a[6](); // 6

// ES6
var a=[];
for(let i=0;i<10;i++){
    a[i]=function(){
      console.log(i);
    };
}
a[6](); // 6

2、声明变量的方式

ES5：var a;     var b=1;    function add(a){}

ES6：let a;    let b=1;    const b=1;    class Point{}    import { foo } from 'my_module';

2、Object.assign()函数的作用及用法，举例说明

Object.assign方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。第一个参数是目标对象，后面的参数都是源对象。如果目标对象与源对象或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

如果只有一个参数，Object.assign会直接返回该参数。如果该参数不是对象，则会先转成对象，然后返回。由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

如果非对象参数非首参数，那么处理规则有所不同。这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。数值、字符串和布尔值，除了字符串会以数组形式，拷贝入目标对象，其它值都不会产生效果。

只拷贝源对象的自身属性，不拷贝继承属性，也不拷贝不可枚举的属性。

浅拷贝，而不是深拷贝，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。
 

深拷贝和浅拷贝

3、函数声明

const add=(a,b)=>{return a+b} // ES6
const add=(a,b)=>a+b // ES6
function add(a,b){return a+b;}
const add=function(a,b){return a+b};

箭头函数

Promise

2.使用解构赋值，实现两个变量的值的交换（编程题）。

答：

let a = 1;
let b = 2;
[a,b] = [b,a];

3.使用解构赋值，完成函数的参数默认值（编程题）。

function demo({name="王德发"}){
     console.log(name);
}

4.利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。（编程题）

var arr1 = [1, 2, 3, 4];
var arr2 = [for (i of arr1) i * i];
console.log(arr2);

5.使用模板字符串改写下面的代码。（ES5 to ES6改写题）

let iam  = "我是";
let name = "王德发";
let str  = "大家好，"+iam+name+",多指教。";

改:

let iam  = `我是`;
let name = `王德发`;
let str  = `大家好，${iam+name},多指教。`;

6.用对象的简洁表示法改写下面的代码。（ES5 to ES6改写题）

let name = "王德发";
let obj = {
    "name":name,
    "say":function(){
        alert('hello world');
    }
};

改：

let name = "王德发";
let obj = {
    name,
    say(){
        alert('hello world');
    }
};

7.用箭头函数的形式改写下面的代码。（ES5 to ES6改写题）

arr.forEach(function (v,i) {
    console.log(i);
    console.log(v);
});

改：

arr.forEach((v,i) => {
    console.log(i);
    console.log(v);
});

8.设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key。（编程题）

答：

let name = Symbol('name');
let product = {
    [name]:"洗衣机",
    "price":799
};
Reflect.ownKeys(product);

9.有一本书的属性为：{“name”:“《ES6基础系列》”, ”price”：56 }；要求使用Proxy对象对其进行拦截处理，name属性对外为“《ES6入门到懵逼》”,price属性为只读。（练习题）

答：

let book  = {"name":"《ES6基础系列》","price":56 };
let proxy = new Proxy(book,{
    get:function(target,property){
        if(property === "name"){
            return "《入门到懵逼》";
        }else{
            return target[property];
        }
    },
    set:function(target,property,value){
        if(property === 'price'){
            target[property] = 56;
        }
    }
});

10.阅读下面的代码，并用for...of改成它。（ES5 to ES6改写题）

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i

改：

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
    sum += value;
}

11.关于Set结构，阅读下面的代码，回答问题。（代码阅读题）。

let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);

问：打印出来的size的值是多少？
答：2。如果回答为1的，多必是记得Set结构是不会存储相同的值。其实在这个案例中，两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值。所以都能存储到Set结构中，size为2。

12.关于Map结构，阅读下面的代码，回答问题。（代码阅读题）

let map = new Map();
map.set([1],"ES6系列");

let con = map.get([1]);
console.log(con);

问：打印出来的变量con的值是多少，为什么？
答：undefined。因为set的时候用的数组[1]和get的时候用的数组[1]是分别两个不同的数组，只不过它们元素都是1。它们是分别定义的两个数组，并不是同一个值。新手避免在这里犯错。如果想达到预期的效果，你要保证get的时候和set的时候用同一个数组。比如：

let map = new Map();
let arr = [1];
map.set(arr,"ES6系列");
let con = map.get(arr);
console.log(con); //ES6系列

13.定义一个类Animal，通过传参初始化它的类型，如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义。

答案：

class Animal {
    constructor(type){
        this.type = type;
    }

    run(){
        alert('I can run');
    }
}

14.基于第12题的Animal类，定义一个子类Cat并继承Animal类。初始化Cat类的昵称name和年龄age。并拥有实例方法eat，eat函数体内容可自行定义。

答：

class Cat extends Animal{
    constructor(type,name,age){
        super(type);
        this.name = name;
        this.age = age;
    }
   
    eat(){
        alert('I am eating');
    }
}

15.利用module模块，实现两个模块A和B，A模块导出变量name，age和say方法。B模块只导入变量name和say方法，并且重命名name为nickname。

//-----模块A-------//
var name = "kitty";
var age = 15;
var say = function(){
    //....

作者：a小磊_
链接：https://www.jianshu.com/p/12f3da95b9f2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。