关于javascript:面试题之ES6的新特性详细

ES6新增的内容比拟多,而且开发当中也是经常会用到,有了各种babel的转换,市面上大在少数公司都在用ES6语法来开发。

JavaScript传说中是由网景公司的Brendan Eich 大神在10天内设计实现的。抛开短时间设计一门编程语言这个话题不说,任何一门语言都不是100%完满的(php….)。

JS当然也有它的不足之处,比如说顶层对象的属性与全局变量的关系,而ES6办法当中的const let modules等都是试图在肯定水平上扭转JS历史遗留的问题,从而使其更加合理化。

因而,在学习一门语言的同时,咱们多点注意这门语言的历史及其设计的目标,能够帮忙咱们更加粗浅的了解这门语言,而不是一味的死记API。

ES6的学习当然是首推阮一峰老师的《ES6规范入门》一书。上面也是对这本书的集体浏览总结。

先来一张搬砖图:

1. const 和 let

let: 申明在代码块内无效的变量。

特点:

  1. 在存在变理晋升(不能在变量申明之前应用)
  2. let的暂时性死区: 其实与1差不多,只有在块作用域有申明,就不能在本作用域申明前用主个变量。
  3. 不容许反复申明。

const: 申明一个只读的常量

特点:

  1. 一但申明,这个值不能被扭转(对于援用类型,是援用的地址不能被扭转)
  2. 申明时必须赋值

面试中常会问到var let const 三都的区别,答复的时候重视各自的特点,其实const let就是补救var 的各种毛病,两都的特点就是var 的毛病。

工作中申明变量多用const 和 let

其中当申明的变量为援用类型如Array,如果没有间接更改援用的地址,能够应用const

2. 解构赋值

什么是解构赋值?

依照肯定模式从数组或对象中提取值,而后对变量进行赋值(先提取,再赋值)

数组:

let [a, b] = [1, 2]
// 以下的后果为左边数剩下的值所组成的数组
let [c, d ,...e] = [1, 2, 3, 4]
// 有默认值的写法
let [f = 100] = [] // f = 100
// 其中String也被视为类数组
let [a, b] = 'abcd' // a = a; b = b

对象:

变理名要与对象的属性名一样才能够:

let { foo } = { foo: 1, bar: 2 } // foo = 1
// 重新命名(前面那个才是新变量)
let { foo: newFoo } = { foo: 1, bar: 2 } // newFoo = 1

理论应用:

  1. 替换两个变量的值
[x, y] = [y, x]
  1. 函数的封装
function fn({ x, y } = {}) {
console.log(x, y)
}

其中,函数参数为一个对象,不会像(x, y)的模式这样固定参数的程序,而{} = {}前面又赋一个空的对象就是为了在调用fn时不传参数而不会抛出错误导至程序停止

  1. 函数返回值的解构

函数返回多个值

// 有秩序的
function foo() {
return [a, b, c]
}
const [a, b, c] = foo()
// 无次序的
function foo() {
return { a, b, c}
}
const { b, a, c} = foo()

3. 模板字符串

const h = 'hello'
`${ h } word`

特点:

​ 能够换行,然而所有的空格和换行会被保留。

${}中能够应用任意的javaScript表白试、运算、援用对象属性、函数调用等。后果是其返回值。

4. 函数的扩大

  1. 函数的默认值
function m(x = 1) {}
  1. rest参数(用于获取函数的多余参数)
function a(...values) {
// value 是一个数组,第个元素是传入的各个参数
}
  1. 函头函数

特点:

  1. 函数体内的this = 定义时所在的对像
  2. 不能够当作构造函数(不能用new)
  3. 不能够用arguments对像,能够用rest
  4. 不能够用yield命令(不能用作Generator函数)

阮老师的书中这一章讲到了无关尾调用,尾递归的内容,值得一看。

5. 数组的扩大

  1. 扩大运算符。
  2. 用于代替数组的apply

call apply bind的区别:
用于扭转this的指向, 第一个参数为this指向的对像,前面的参数是作为函数的参数。
区加在于:call apply 会即调用,而bind是生成一个等调用的函数。call bind参数是一个个用逗号列举,而apply 是传入一个数组。

fn.apply(null, [1, 2, 3])
fn.call(null, 1, 2, 3)
fn.bind(null, 1, 2, 3)()
// 指最大值
Math.max(...[3,4,5,62,8])
  1. 合并数组
// ES5
[1, 2].concat(3)
// ES6
[1, 2, ...[3]]
  1. 新增的办法
  2. Array.from()将类数组转为数组
  • 可遍历的对象(iterable)(Set, Map)
  • 相似数组的对
{ '0': 'a', '1': 'b' }
  1. 实例的办法
  • find() findIndex()找出第一个符合条件的成页/下标(地位)
  • entries() keys() values() 用于遍历数组。(配合for…of)
  • includes() 是否存在指定无素(返回布尔值)

5. 对象的扩大

  1. 属性的简写:
let a = 100
{ a }
// 等同于
{ a: 100 }

办法名同样能够简写,vue中就经常用这种写法:

export default {
name: 'VueComp',
data() {},
create() {},
}
// 等同于
export default {
name: 'VueComp',
data: function() {},
create: function() {},
}
  1. 属性名可心应用表达式:
let foo = 'foo'
let obj = {
[foo]: 'fooValue'
}
  1. 新增一些办法:
  • Object.is()
  • Object.assign()
  • 对像的一些遍历:

Object.keys(), Object.values(), Object.entries()

for(let key of Object.keys(obj)) {}
for(let value of Object.values(obj)) {}
for(let [key,value] of Object.entries(obj)){}
  • 扩大运算符(罕用)(es2017新增,在webpack中要另外的babel转换)

6. Symbol

javascript又新增的一种数据类型(第七种,另外6种为:UndefinedNullBooleanStringNumberObject)

注:symbol作为对象的属性名时不会被for...in,for...of,Object.keys()辨认;能够改用Reflect.ownkeys办法.

7. Set、Map

Set和map是ES6新增的数据结构。

  • Set

特点: 1. 相似数组,但其成员是惟一的。

  1. 是一个构造函数。

用法:

​ 数组去重:

[...new Set([1,1,1,2,3,4,3])]
Array.from(new Set([1,1,1,2,3,4,3]))
  • Map

特点:

  1. 为了解决javascript的对象只能用了符串作为键的问题。

用法: (应用实例的set,get,delete办法增,查,删)

const m = new Map()
const obj = {a: 'aa'}
m.set(obj, 'obj as key')
m.get(obj) // 'obj as key'
m.delete(obj)

也能够在new 时承受一个数组

const obj = { a: 'aa'}
const m = new Map([
['name': 'ym'],
[obj, { b: 'bbbb' }]
])

这段时间有一个很火的文章讲如何应用map组构来优化长长的if..else的

8. Promise

是异步编程的一种解决方案。

特点:

  1. 状态不受外界影响(有三种状态:padding, fulfilled,redected)
  2. 一旦状态扭转就不会再变。

用法:

const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
}).then(res => {})
.catch(err => {})

注: then办法有两个参数,第一个是胜利的回调,第二个为失败的回调,即:

.then(res =>{}, err => {})

然而最好用catch办法, 因为catch办法会捕捉then里的谬误,then里有谬误程序不会停止。

Promise.all()

将一组promise再包装成一个promise

var pa = Promise.all([p1, p2, p3])

特点:

  1. 当所有都fulfilledj时,promise.all才fulfilled
  2. 当只有一个rejected时,promise.all就会rejected

Iterator和for…of

Iterator的3个作用:

  1. 为各种数据提供对立的,简便的拜访接口
  2. 使数据结构的成员能按某种秩序排列
  3. 次要供for…of用

原生有iterator的数据结构:

Array, Map, Set, String, TypeArray, argumentsNodeList

(object是没有的)

for…of与其余循环的比拟

  1. for循环写法比拟麻烦
  2. 数组的forEach: 无奈用break;return跳出循环。
  3. For…in
  • 数组的键名是数字,而for…in以字符串作为键名(也就是用for…in循环数组,其键名是字符串,笔者被坑过)
  • 不仅能够遍历键名,还能够遍历手动增加的其余键,包含原型链上的
  • 某些状况下,会心任意秩序遍历
  • ( for…in次要为对象而设计的)

9. Generator与async await

generator是ES6提供的一种异步编程解决方案。使异步写法更像同步。

Async await是ES2017的规范,是generator的一个语法糖。

用法:

async function a() {
await ...
console.log(111)
await ...
}

当执行a时,其不会阻塞涵数里面的代码(a内的代码会安程序执行)

console.log('开始')
a()
console.log('a前面')
// 开始 -> a前面 -> 111

10. Class

产生的起因: 原ES5语法的没有成型的类的概念。而面向对象编程又离不开类的概念。

ES5定义一个类:

function Point(x, y) {
this.x = x;
this.y = y;
}
  
var p = new Point(1, 2)

ES6的class:

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}

其中:

  1. constructor办法是类的默认办法,通过new 命令生成对象时会调用该办法,如果申明类时没有定义constructor,会默认定义一个空的。
  2. 生成实例时必须用new ,不必会报错
  3. 不存在变里晋升(选定义类,再new实例)

类的静态方法:

所有在类中定义的办法都会被实例继承,如果不想被继承,能够在定义时加上static。示意为静态方法。

class Foo {
static match() {}
}
Foo.match()
const f = new Foo()
f.match() // 报错

类的动态属性

很遗憾,ES6没有给类设动态属性,然而能够用以下办法定义(有提案,写方同静态方法)

class Foo {}
Foo.porp = 1
// 应用
Foo.porp // 1

类的实例属性

类的办法默认被实例继承,那么属性呢?也是继承的,写法如下:

class Foo {
myProp = 111;
...
}

classr的继承 extends

class Point {}
class PointSon extends Point {
constructor(x, y, z) {
super(x, y)
this.z = z
}
}

其中:

  1. super等同于父类的constructor。
  2. 子类必须在constructor中调用super, 也就是说用extends去继承一个类,就必须调用这个类(父类)的constructor。是因为子类没有本人的this对象,而是继承父类的this,而后对其进行加工
  3. 如果了类没有写constructor,会默认生成一个,并蕴含了super(…args)

11. Module

一种将程序拆分成一个个小模块的反对,或者说是能够将一个个小模块退出到程序中去。

在ES6的module之前,比拟风行的模块加载计划有:CommonJS和AMD,前者用于服务器(node),后者用于浏览器。

区别:

  1. CommondJS和AMD是运行时加载的。
  2. module是编译时加载的。
  3. CommondJS输入的是值的复制,而ES6输入的是值的援用

ES6模块默认应用严格模式

  • 变里必须申明后再应用
  • 函数的参数不能有同名属性
  • 不能应用width
  • 禁止this指向全局对象

应用

命令有: exportimportexport default

文件a.js

export a = 1
export b = 2

相当于

const a = 1;
const b = 2;
export { a, b }

在文件b.js中引入

import { a, b } from './a.js'

引入是重命名

import { a as reA, b as reB } from './a.js' // reA reB是重命名的变量

整体引入:

import * as all from './a.js'
all.a // 1
all.b // 2
// all 相当于{ a, b }

export default默认输入

export default导出的模块在引入时能够自定义命名

export default function() {
...
}

仍然用import 引入,然而不必{},且能够自定义变量名

import name from './a.js'
name()

从一个模块导入,而后再导出

// 写法一:
import { a, b } from './a.js'
export { a, b }
// 写法二:
export { a, b } from './a.js'
// 改名导出
export { a as reA, b } from './a.js'
// 整体导出
export * from './a.js'

在浏览器中应用module

将script标签的type设为module即可

<!-- 办法一 -->
<script type="module" src="./a.js"></script>
<!-- 办法二 -->
<script type="module">
import { a } from './a.js'
</script>

其中:

  • type=”module”的script内写的代码是在以后作用域,不是在全局。
  • 模块内主动采纳严格模式
  • 顶层的this指向undefined
  • 同一个模块如棵加载屡次,只执行一次

以上是ES6新增语法里在日常开发当中肯定会常常用到的货色。ES6的订正对前端开发来说意义重大,其余的还有很多比方二进制数据、Proxy、Reflect、润饰器等,其内容稍深,能够到阮一峰老师博客看看,喜爱看书的能够买他的书《ES6规范入门》超值。

欢送交流学习, 共同进步。
gitHub主页:https://github.com/maYunLaoXi

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理