ES6 应用进阶题（含答案）

Question

1. 说出至少5个ES6的新特性，并简述它们的作用。

1. let关键字，用于声明只在块级作用域起作用的变量。
2. const关键字，用于声明一个常量。
3. 结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值。
4. Symbol数据类型，定义一个独一无二的值。
5. Proxy代理，用于编写处理函数，来拦截目标对象的操作。
6. for...of遍历，可遍历具有iterator 接口的数据结构。
7. Set结构，存储不重复的成员值的集合。
8. Map结构，键名可以是任何类型的键值对集合。
9. Promise对象，更合理、规范地处理异步操作。
10. Class类定义类和更简便地实现类的继承。

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<arr.length;i++){
    sum += arr[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);

这样的得到的变量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(){
    //....
};
export {name,age,say}

//---module-B.js文件---
import { name as nickname, say } from "模块A的相对路径";