ES6常见面试题 2019-06-14

1.es6熟悉吗，说几个es6的新增方法

（1）新增声明命令let和const

在es6中通常用 let 和 const 来声明，let 表示变量、const 表示常量。

特点：

let 和 const 都是块级作用域。以{}代码块作为作用域范围只能在代码块里面使用。

不存在变量提升，只能先声明再使用，否则会报错。在代码块内，在声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

在同一个代码块内，不允许重复声明。

const声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。）

（2）模板字符串（Template String）

用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在${ }中。

var str = `abc

def

gh`;

console.log(str);

let name = "小明";

function a() {

return "ming";

}

console.log(`我的名字叫做${name}，年龄${17+2}岁，性别${'男'}，游戏ID：${a()}`);

（3）函数的扩展

函数的默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function A(a,b=1){

console.log(a+b);

}

A(1); //2

A(2+3); //5

箭头函数

在es6中，提供了一种简洁的函数写法，我们称作“箭头函数”。

写法：函数名=(形参)=>{……} 当函数体中只有一个表达式时，{}和return可以省略，当函数体中形参只有一个时，()可以省略。

特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。

//省略写法

var people = name => 'hello' + name;

var getFullName = (firstName, lastName) => {

var fullName = firstName + lastName;

return fullName;

}

（4）对象的扩展

属性的简写。ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

var foo = 'bar';

var baz = {foo}; //等同于 var baz = {foo: foo};

方法的简写。省略冒号与function关键字。

var o = {

method() {

return "Hello!";

}

};

// 等同于

var o = {

method: function() {

return "Hello!";

}

};

Object.keys()方法，获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};

console.log(Object.keys(obj)); // ["name", "age", "getName"]

console.log(Object.keys(obj).length); //3

console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]

console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]

Object.assign ()，assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象。

var target = {}; //目标对象

var source1 = {name : 'ming', age: '19'}; //源对象1

var source2 = {sex : '女'}; //源对象2

var source3 = {sex : '男'}; //源对象3，和source2中的对象有同名属性sex

Object.assign(target,source1,source2,source3);

console.log(target); //{name : 'ming', age: '19', sex: '男'}

（5）for...of 循环

是遍历所有数据结构的统一的方法。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。

var arr=["小林","小吴","小佳"];

for(var v of arr){

console.log(v);

}

//小林

//小吴

//小佳

（6）import和export

ES6标准中，JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。

import用于在一个模块中加载另一个含有export接口的模块。

import和export命令只能在模块的顶部，不能在代码块之中。

//导入部分

//全部导入

import Person from './example'

//将整个模块所有导出内容当做单一对象，用as起别名

import * as example from "./example.js"

console.log(example.name)

console.log(example.getName())

//导入部分

import { name } from './example'

//导出部分

// 导出默认

export default App

// 部分导出

export class User extend Component {};

（7）Promise对象

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。

var promise = new Promise((resolve, reject) => {

var success = true;

if (success) {

resolve('成功');

} else {

reject('失败');

}

}).then(

(data) => { console.log(data)},

(data) => { console.log(data)}

)

promise的执行过程

setTimeout(function() {

console.log(0);

}, 0);

var promise = new Promise((resolve, reject) => {

console.log(1);

setTimeout(function () {

var success = true;

if (success) {

resolve('成功');

} else {

reject('失败');

}

},2000);

}).then(

(data) => { console.log(data)},

(data) => { console.log(data)}

);

console.log(promise); //<pending> 进行中

setTimeout(function () {

console.log(promise); //<resolved> 已完成

},2500);

console.log(2);

//1

//Promise {<pending>}

//2

//0

//成功

//Promise {<resolved>: undefined}

（8）解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组的解构赋值

数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应如果有对应不上的就是undefined

var [name, pwd, sex]=["小周", "123456", "男"];

console.log(name) //小周

console.log(pwd)//123456

console.log(sex)//男

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var obj={name:"小周", pwd:"123456", sex:"男"}

var {name, pwd, sex}=obj;

console.log(name) //小周

console.log(pwd)//123456

console.log(sex)//男

//如果想要变量名和属性名不同，要写成这样

let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };

console.log(foz) // "aaa"

console.log(foo) // error: foo is not defined

（9）set数据结构

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。

属性和方法：

size 数据的长度

add() 添加某个值，返回 Set 结构本身。

delete() 删除某个值，返回一个布尔值，表示删除是否成功。

has() 查找某条数据，返回一个布尔值。

clear() 清除所有成员，没有返回值。

应用：数组去重。

var arr = [1,1,2,2,3];

var s = new Set(arr);

console.log(s); //{1, 2, 3}

console.log(s.size); //3

console.log(s.add(4)); //{1, 2, 3, 4}

console.log(s.delete(4)); //true

console.log(s.has(4)); //false

s.clear();

（10）Spread Operator 展开运算符(...)

将字符串转成数组

var str="abcd";

console.log([...str]) // ["a", "b", "c", "d"]

将集合转成数组

var sets=new Set([1,2,3,4,5])

console.log([...sets]) // [1, 2, 3, 4, 5]

两个数组的合并

var a1=[1,2,3];

var a2=[4,5,6];

console.log([...a1,...a2]); //[1, 2, 3, 4, 5, 6]

在函数中，用来代替arguments参数

rest参数 …变量名称

rest 参数是一个数组，它的后面不能再有参数，不然会报错

function func(...args){

console.log(args);//[1, 2, 3, 4]

}

func(1, 2, 3, 4);

function f(x, ...y) {

console.log(x);

console.log(y);

}

f('a', 'b', 'c'); //a 和 ["b","c"]

f('a') //a 和 []

f() //undefined 和 []

1.es6新特性,哪些在项目中使用举例说明

let const 解构箭头函数 Set去重新增数据类型Symbol 模板字符串`` 类怎么实现继承模块化

promise async / await

2. var let const 区别

3.Set 怎么去重

ES6中新增了Set数据结构，类似于数组，但是它的成员都是唯一的，其构造函数可以接受一个数组作为参数，如：

let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];

let set = new Set(array);

console.log(set); // 此时打印的是set 结构 Set(5) {1, 2, 3, 4, 5}

ES6中Array新增了一个静态方法Array.from，可以把类似数组的对象转换为数组，如通过querySelectAll方法得到HTML DOM Node List，以及ES6中新增的Set和Map等可遍历对象，如：

let set = new Set();

set.add(1).add(2).add(3);

let array = Array.from(set);

console.log(array);

// => [1, 2, 3]

4.模板字符串怎么使用*

主要是针对变量

**5.promise 实现原理? promise的三种状态 **

promise实际上解决jquery的ajax回调地域(解决层层嵌套),只是异步编程的一种解决方案

代码实现:

new promise(function(resolve,reject) {

// 111111111

resolve('...')

} ).then(function(value) {

console.log(value)

}).catch(function(error){

console.log(error)

})

const p1 = new Promise(function (resolve, reject) {

setTimeout(() => reject(new Error('fail')), 3000)

})

const p2 = new Promise(function (resolve, reject) {

setTimeout(() => resolve(p1), 1000)

})

.then(result => console.log(result))

.catch(error => console.log(error))

三种状态:pending（进行中）、fulfilled（已成功）和rejected（已失败）

promise两个特点:

（1）对象的状态不受外界影响

(2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

promise 缺点: 无法取消promise,如果不设置回调函数,promise内部抛出错误

第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

6.es6继承和es5继承的区别

7.箭头函数 this指向

指向包裹她的父函数

8.对async 和 await的认识

项目中应用可以讲异步改成同步执行

9.新增数据类型是谁, 有什么作用

10.es6中对数组遍历的几种方式和不同之处

11.es6解构

数组解构和对象解构 , 项目中返回的response.data 可以解构成自己需要的数据

12.对es6的了解

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

**13.正确区分数组map方法和 es6的Map结构 **

---------------------

作者：脑瓜疼儿

来源：CSDN

原文：https://blog.csdn.net/meikaied/article/details/85250327

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

ES6常见面试题 2019-06-14

推荐阅读更多精彩内容