ES6练习题

考试题

⼀、 简答题

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); //20console.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:\"张三\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前端课程\这是⼀门很不错的课程\ }, 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()