ES6练习题三

ES6练习题（三）

• 出题人：杨标
• 时间：2021年1月28日
• 内容：ECMAScript6
• 适用班级：H2003

---

一、简答题

1. let、const、var定义变量的区别是什么？
2. promise分为几种状态？什么时候会进入catch方法？
3. 箭头函数和普通函数的区别是什么？
4. == 和=== 有什么区别?
5. Set和数组有什么区别？set中如何增加、删除元素？
6. Map中如何设置元素，如何获取元素？
7. 如何在多个Promise执行完成之后做一些操作？多个Promise同时执行有一个执行完了就进行一些操作?
8. 如何获取对象的所有key值？
9. ES6中如何实现类的继承？
10. 类中static关键字有什么作用？
11. 类中的静态方法和普通方法有什么区别？如何定义静态方法？

二、看程序写结果

1. 下图代码执行完成后打印的结果是？

   const obj = {
       id:123,
       age:20,
       name:"cyrus",
       school:"河北科技大学"
   }
   let obj1 = {
       age:18,
       ...obj,
       name:"李四"
   }
   console.log(obj1.age);
   console.log(obj1.id);
   console.log(obj1.name);
   

2. 下图代码打印的内容分别是什么？

   const promise = new Promise((resolve, reject) => {
       console.log(1);
       resolve(3);
       console.log(2);
       reject(4)
   })
   promise.then((res) => {
       console.log(res);
   }).catch(err=>{
       console.log(err);
   })
   console.log(5);
   

3. 下图打印的结果是什么？

   let name = Symbol('name')
   let name1 = Symbol.for('name')
   console.log(name == name1);
   

4. 下图打印的内容分别是什么？

   function * gen(){
       let params = yield 2
       let params1 = yield 3
       let params2 = yield params1 + 6
       let params3 = yield 7
       return params2 * params + params3
   }
   let lt = gen();
   console.log(lt.next());
   console.log(lt.next(3));
   console.log(lt.next(lt.next(1).value);
   console.log(lt.next(4));
   

5. 下图代码的打印结果分别是什么

   let obj = {name:"张三",age:16}
   let proxy = new Proxy(obj,{
       get(target,property){
           if(target.age < 18){
               return "未成年人"
           } 
           return target[property]
       },
       set(target,property,value){
           if(property == 'name'&&target.age< 18){
               console.log("未成年人不允许改名字");
           }
           target[property] = value
       }
   })
   console.log(proxy.name);
   proxy.name = "李四"
   console.log(proxy.name);
   proxy.age = 20
   console.log(proxy.name);
   

三、编程题

1. 使用解构赋值，实现两个变量的值的交换。

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

3. 使用set实现数组去重

4. 说一下ES6的导入和导出模块(ESModule),在浏览器端去实现

5. 编程实现找到所有姓杨的人；找到所有包含天这个字的人；找到周芷若的id

   const list = [
       {id:3,name:"张三丰"},
       {id:5,name:"张无忌"},
       {id:13,name:"杨逍"},
       {id:33,name:"殷天正"},
       {id:12,name:"赵敏"},
       {id:97,name:"周芷若"},
   ]
   

6. 还是上面的那个数组，要求获取一个新的数组，数组中每一项的id*2，并且增加updateTime属性，值为当前时间。

   const list = [
       {id:3,name:"张三丰"},
       {id:5,name:"张无忌"},
       {id:13,name:"杨逍"},
       {id:33,name:"殷天正"},
       {id:12,name:"赵敏"},
       {id:97,name:"周芷若"},
   ]
   

四、上机题

1. 现在有用户的角色有数组，如：[{id:1,name:’经理’},{id:2,name:’员工’}]，用户已选择的数组[{id:2,name:’经理’}], 要求获取用户未选中的角色列表，和用户已选择的角色的id数组。（使用es6语法实现）map、filter、some

   const roleList = [{
       id: 1,
       name: '老板'
   }, {
       id: 2,
       name: '经理'
   }, {
       id: 3,
       name: '运营总监'
   }, {
       id: 4,
       name: 'CEO'
   }, {
       id: 5,
       name: '销售'
   }, {
       id: 6,
       name: '实施'
   }, {
       id: 7,
       name: '程序员'
   }, {
       id: 8,
       name: 'UI工程师'
   }, {
       id: 9,
       name: '产品经理'
   }];
   // 用户已选择的数组
   const selectedRoleList = [{
       id: 2,
       name: '经理'
   }, {
       id: 3,
       name: '运营总监'
   }, {
       id: 6,
       name: '实施'
   }, {
       id: 7,
       name: '程序员'
   }, {
       id: 9,
       name: '产品经理'
   }];
   

2. 通过分别通过回调函数、Promise和async/await解决下属异步问题，要求最后打印课程详情中的课程介绍。

// 获取专题列表
function getSubject(){
    setTimeout(() => {
        let subjectList = [{subjectId:3,name:"专题"}]
    }, 1000);
}
// 获取课程列表，依赖专题id
function getCourseBySubjectId(subjectId){
    setTimeout(() => {
        console.log(subjectId);
        let courseList = [{courseId:4,name:"web前端课程"}]
    }, 1000);
}
// 获取课程详情，依赖课程id
function getCourseDetailById(courseId){
    setTimeout(() => {
        console.log(courseId);
        let courseDetail = {courseId:4,name:"web前端课程",intro:"这是一门很不错的课程"}
    }, 1000);
}