前端面试题(ES6)

1.反引号（`）标识

　　模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

2.Object.keys()方法

传入对象，返回属性名，keys()是对键名的遍历
传入字符串，返回索引
传入数组返回索引

　　Object.values(),Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值　

var obj = {
    a:"小白",
    b:"小黑",
    c:"大黄"
};
console.log(Object.entries(obj)); 
//得到以下数据
[
    ["a", "小白"],
    ["b", "小黑"],
    ["c", "大黄"]
]

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组

3.Object.assign ()原对象的属性和方法都合并到了目标对象

浅拷贝：复制的只是引用，原对象属性的改变会引起拷贝对象对应引用属性的变化。

let a = {
    name:'tom',
    age:20,
    friends:{
        student:['jack']
    }
}
let b = Object.assign({},a);
a.friends.student = ['tony'];
console.log(a);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({c: 4, d: 5}, object1);

console.log(object2.c, object2.d);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }

4.for...of 循环

　　数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for...of循环本质上就是调用这个接口产生的遍历器

const arr = ['red', 'green', 'blue'];
 
for(let v of arr) {
  console.log(v); // red green blue
}
 
const obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
 
for(let v of obj) {
  console.log(v); // red green blue
}

数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等
for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键
某些情况下，for...in循环会以任意顺序遍历键名
不同于forEach方法，它可以与break、continue和return配合使用

5.Promise对象

Promise接受一个回调函数，回调函数接收两个参数，resolve（将Promise的状态从pending变为fulfilled，在异步操作成功时调用，并将异步操作的结果传递出去）、reject（将Promise的状态从pending变为rejected，在异步操作失败时调用，将异步操作的错误作为参数传递出去）这两个都是函数，表示成功和失败的处理函数。then中接受的是上一次回调返回的结果，所以这样的链式调用就可以完全清晰的实现多层调用。

Promise对象有两个特点：
①，对象的状态不受外界的影响，Promise有三种状态：Pending（进行中）、fulfilled（已成功）、rejected（失败），只用异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个操作。
②.一旦状态改变之后就不会再改变。任何时候都可以得到这个结果。状态变化只有两种可能：从pending到fulfilled和从pending到rejected。只要改变就已经定型了。

Promise的缺点：
① 一旦创建就无法取消，一旦新建就会立即执行
② 如果不设置回调函数，它的内部错误就不会反映到外部。
③ 当处于pending状态时，无法判断进展到哪一阶段（刚开始还是快完成）。

let promise = new Promise(function(resolve,reject){
        console.log("promise");
        resolve();
});
setTimeout(function(){
    console.log("setTimeout");
},0)
promise.then(function(){
        console.log("resolved");
})
console.log("hi");

// promise   hi   resolved  setTimeout

promise是创建之后立即执行，then方法指定的脚本在当前的所有同步任务完成之后再执行,setTimeout是在下一轮“时间循环”开始时执行，then在本轮事件循环结束时执行

6.set数据结构

可用于快速去重

7.字符串新增方法

codePointAt()，String.fromCharCode()方法类似
includes(): 返回布尔值。表示参数字符串是否在原字符串里面。
startsWith(): 返回布尔值。表示参数字符串是否在原字符串头部
endsWith(): 返回布尔值。表示参数字符串是否在原字符串尾部
repeat()，返回一个新字符串，表示将原字符串重复n次

8.require和require区别

require 是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间 require是运行时调用，所以require理论上可以运用在代码的任何地方；import是编译时调用，所以必须放在文件开头

本质 require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量 import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

9.数据类型判断

typeof，可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括number,boolean,string,function,object,undefined）；Typeof 运算符的问题是无论引用的对象是什么类型它都返回object
instanceof，A instanceof B 可以判断A是不是B的实例，返回一个布尔值

console.log(arr instanceof Array ); // true console.log(date instanceof Date ); // true console.log(fn instanceof Function ); // true //注意： instanceof 后面一定要是对象类型，大小写不能写错，该方法试用一些条件选择或分支

　　3.Object下的toString.call()方法来判断

Object.prototype.toString.call();
console.log(toString.call(123)); //[object Number]
console.log(toString.call('123')); //[object String]
console.log(toString.call(undefined)); //[object Undefined]
console.log(toString.call(true)); //[object Boolean]
console.log(toString.call({})); //[object Object]
console.log(toString.call([])); //[object Array]
console.log(toString.call(function(){})); //[object Function]

　　4.根据对象的contructor判断

console.log('数据类型判断' -  constructor);
console.log(arr.constructor === Array); //true
console.log(date.constructor === Date); //true
console.log(fn.constructor === Function); //true

posted @ 2021-04-07 20:01 dropInInt 阅读(193) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端面试题(ES6)

公告