ES6练习题

技术文章 1年前 (2020) 完美者
976 0

标签:bdd   turn   练习题   asc   介绍   test   程序员   lin   构造   

考试题

一、 简答题

1、let、const、var定义变量的区别是什么?

  • let
    • 块作用域
    • 没有变量提升
    • 不能重复声明
    • 属于顶层对象
  • const
    • 声明常量,不能修改
    • 必须初始化
    • 块作用域
    • 没有变量提升
    • 不能重复声明
    • 属于顶层对象
  • var
    • 没有块的概念
    • 可以夸块访问,但是不能跨函数访问
    • 会进行变量提升

2、promise分为几种状态?什么时候会进入catch方法?

  • 三种状态
    • pending    等待  
    • fulfulled      resloved  成功
    • rejected      失败
  • 状态变为rejected的时候会进入catch方法

3、箭头函数和普通函数的区别是什么?

  • 声明方式不同
    • 普通函数通过function声明
    • 箭头函数通过=>声明
  • 箭头函数不能用于构造函数
  • this指向不同
    • 普通函数this指向调用这个函数的地方
    • 箭头函数this指向声明这个函数的地方

4、== 和=== 有什么区别?

  • ==比较值是否相同
  • ===全等比较,除了比较值之外还会比较类型

5、Set和数组有什么区别?set中如何增加、删除元素?

  • set中的数据都不会重复
  • 增加元素
    • add
  • 删除元素
    • delete

6、Map中如何设置元素,如何获取元素?

  • set(key,value)
  • get(key)

7、如何在多个Promise执行完成之后做一些操作?多个Promise同时执行有一个执行完了就进行一些操作?

  • Promise.all([多个Promise]).then(res=>{})
  • Promise.race([多个Promise]).then(res=>{})

8、如何获取对象的所有key值?

  • 包含Symbol
    • Reflect.ownKeys()
  • 不包含Symbol
    • Object.keys()
  • 只有Symbol
    • Object.getOwnPropertySymbols()

9、ES6中如何实现类的继承?

通过extends关键字实现

10、类中static关键字有什么作用?

  • 声明静态的方法和属性。静态的方法和属性

11.  类中的静态方法和普通方法有什么区别?如何定义静态方法?

  • 静态方法归属于类
  • 普通方法归属于实例
  • 通过static关键字

 

二、 看程序写答案

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

const obj = {  id:123,  age:20,  name:"cyrus",  school:"河北科技大学" }  let obj1 = {  age:18,  ...obj,  name:"李四" }  console.log(obj1.age); //20 console.log(obj1.id); //123 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);  // 1 2 5 3

3、下图打印的结果是什么?

let name = Symbol(‘name‘) let name1 = Symbol.for(‘name‘) console.log(name == name1);// false

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());// { value: 2, done: false } console.log(lt.next(3)); // { value: 3, done: false } console.log(lt.next(lt.next(1).value))// { value: 7, done: false } console.log(lt.next(4));// { value: 25, done: true } 

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、使用解构赋值,实现两个变量的值的交换。

let a=5; let b=3; [a,b]=[b,a]  console.log(a); console.log(b);

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

let name = Symbol()  let obj = {  name:"李白",  [name]:"杜甫" }  Reflect.ownKeys(obj).forEach(key=>{  console.log(key);  console.log(obj[key]) })

3、使用set实现数组去重

let list = [1,3,4,6,2,2,2,3,1,2,3,4] let set = new Set(list) let newList = Array.from(set)

4、说一下ES6的导入和导出模块

// a.js 默认导出 const test = "测试" export default {  name:"李白",  age:18,  test }  普通导出 export function getName(){  console.log(123) }  export const cat = "皮皮"

 

// b.js  默认导入 import aObj from ‘./a.js‘ console.log(aObj.name) //李白   普通导入 import {getName,cat} from ‘./a.js‘ console.log(cat) getName()

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

const list = [  {id:3,name:"张三丰"},  {id:5,name:"张无忌"},  {id:13,name:"杨逍"},  {id:33,name:"殷天正"},  {id:12,name:"赵敏"},  {id:97,name:"周芷若"}, ]  console.log(list.filter(item => item.name.startsWith("杨"))) console.log(list.filter(item => item.name.includes("天"))) console.log(list.find(item => item.name == ‘周芷若‘).id)

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

const list = [  {id:3,name:"张三丰"},  {id:5,name:"张无忌"},  {id:13,name:"杨逍"},  {id:33,name:"殷天正"},  {id:12,name:"赵敏"},  {id:97,name:"周芷若"}, ]  console.log(list.map(item=>({...item,id:item.id*2,updateTime:new Date()})));

 

 

四、 上机题

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: ‘产品经理‘ }];   const unSelectedRoles = roleList.filter(item => !selectedRoleList.some(selectedItem => selectedItem.id == item.id)) console.log(unSelectedRoles); const selectedIds = selectedRoleList.map(item=>item.id) console.log(selectedIds);

 

2、 实现对象的深度拷贝?(至少三种方式)

2.1. 使用JSON暴力转换

通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。

var obj = {name:‘123‘};  var obj2 = JSON.parse(JSON.stringify(obj))

 

这种简单粗暴的方式有局限性,当值为undefined、function、symbol会在转换过程中被忽略。

 

2.2. 使用解构赋值
var obj = {name:‘123‘,age:13}; var obj2 = {...obj}

只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

2.3. 使用对象的合并

利用Object.assign(), 第一个参数必须是空对象

 

var obj = {name:‘123‘,age:13}; var obj2 = Object.assign({},obj1);

只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

2.4. 利用循环和递归的方式

 

function deepClone(obj, newObj) {  var newObj = newObj || {};  for (let key in obj) {  if (typeof obj[key] == ‘object‘) {  newObj[key] = (obj[key].constructor === Array) ? [] : {}  deepClone(obj[key], newObj[key]);  } else {  newObj[key] = obj[key]  }  }  return newObj; }

3、编码实现通过for of 遍历对象。

 let obj = {  name: "张三",  age: 19  }  // 给对象添加迭代器  obj[Symbol.iterator] = function () {  let index = 0;  let keys = Object.keys(this)  return {  next:()=> {  let value = {  key: keys[index],  value: this[keys[index]]  }  let done = index === keys.length;  index++  return {  value,  done  }  }  }  }   for (let item of obj) {  console.log(item);  }

4、通过分别通过回调函数、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); }

5、编写一个动物类,该类包含name的属性,和say的方法。 通过say方法可以打印动物说话了。编写一个Dog类继承动物类,要求该类中包含颜色的属性,该类重写say方法,要求打印父类的say方法里的内容,并且打印 动物颜色+动物名字+“叫了”。

class Animal {  constructor(name){  this.name = name;  }  say(){  console.log("动物说话了")  } }  class Dog extends Animal {  constructor (name,color){  super(name)  this.color = color  }   say(){  super.say()  console.log(this.color+this.name+"叫了")  } }  const dog = new Dog("毛毛","金色") dog.say()

ES6练习题

标签:bdd   turn   练习题   asc   介绍   test   程序员   lin   构造   

原文地址:https://www.cnblogs.com/guirong/p/13616175.html

版权声明:完美者 发表于 2020-09-17 13:37:24。
转载请注明:ES6练习题 | 完美导航

暂无评论

暂无评论...