ES6練習題

本文轉載自查看原文 2020-09-04 21:01 582 es6

考試題

一、簡答題

1、let、const、var定義變量的區別是什么？

塊作用域
沒有變量提升
不能重復聲明
屬於頂層對象

const

聲明常量，不能修改
必須初始化
塊作用域
沒有變量提升
不能重復聲明
屬於頂層對象

沒有塊的概念
可以誇塊訪問，但是不能跨函數訪問
會進行變量提升

2、promise分為幾種狀態？什么時候會進入catch方法？

三種狀態

pending 等待　　
fulfulled resloved 成功
rejected 失敗

狀態變為rejected的時候會進入catch方法

3、箭頭函數和普通函數的區別是什么？

聲明方式不同

普通函數通過function聲明
箭頭函數通過=>聲明

箭頭函數不能用於構造函數
this指向不同

普通函數this指向調用這個函數的地方
箭頭函數this指向聲明這個函數的地方

4、== 和=== 有什么區別?

==比較值是否相同
===全等比較，除了比較值之外還會比較類型

5、Set和數組有什么區別？set中如何增加、刪除元素？

set中的數據都不會重復
增加元素

刪除元素

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);