zoukankan      html  css  js  c++  java

  • ES6练习题

    ES6练习题

    考试题

    一、 简答题

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

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

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

    • 三种状态
      • pending
      • fulfulled
      • 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()
  • 相关阅读:
    集合
    字典
    元组
    列表
    数字类型和字符串类型
    Python 数据类型
    jq的一点点
    常用到jq的ajax
    上传
    下载
  • 原文地址：https://www.cnblogs.com/wenaq/p/13615743.html
Copyright © 2011-2022 走看看