拉勾大前端高薪训练营

(1). 类(class)对熟悉Java、C、C++等语言的开发者来说,class一点都不陌生。ES6引入了class(类),让JS的面向对象编程变得更加简单和易于理解。

(2).模块化(Module)ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由export和import组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。

导出(export) ES6运行在一个模块中使用export来导出多个变量或函数

// 导出变量
export let name = ‘gg’

// 导出常量
export const name = ‘gg’

// 导出多个变量
let a = 2
let b = 4
export {a, b}

// 导出函数
export function myModule(someArg) {
return someArg
}
复制代码
导入(import) 定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from ‘myModule’
import {a,b} from ‘test’
复制代码
(3).箭头(Arrow)函数这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能很好的解决this的指向问题。

(4).函数参数默认值ES6支持在定义函数的时候为其设置默认值,当函数的参数为布尔值false时,可以规避一些问题

// 使用默认值
function foo(height = 50, color = ‘red’) {
//
}

// 不使用默认值
function foo(height, color) {
let height = height || 50
let color = color || ‘red’
}
复制代码
(5).模板字符串

// 不使用模板字符串
let name = 'Your name is ’ + first + ’ ’ + last + ‘.’

// 使用模板字符串
let name = Your name is ${first} ${last}.
复制代码
(6).解构赋值通过解构赋值可以方便的交换两个变量的值:

let a = 1
let b = 3

[a, b] = [b, a];
console.log(a) // 3
console.log(b) // 1
复制代码
获取对象中的值:

const student = {
name:‘Ming’,
age:‘18’,
city:‘Shanghai’
}

const {name,age,city} = student
console.log(name) // “Ming”
console.log(age) // “18”
console.log(city) // “Shanghai”
复制代码
(7).延展操作符(Spread operator)和剩余运算符(rest operator)当三个点(…)在等号右边,或者放在实参上,是 spread运算符

myFunction(…arr)

let arr1 = [1, 2, 3, 4]
let arr2 = […arr1, 4, 5, 6]
console.log(arr2) // [1, 2, 3, 4, 4, 5, 6]
复制代码
当三个点(…)在等号左边,或者放在形参上,是 rest 运算符

function myFunction(…arr) {

}

let [a,…temp]=[1, 2, 4]
console.log(a) // 1
console.log(temp) // [2, 4]
复制代码
(8).对象属性简写在ES6中允许我们在设置一个对象的属性的时候不指定属性名

不使用ES6:

const name=‘Ming’,age=‘18’,city=‘Shanghai’;

const student = {
name:name,
age:age,
city:city
};
console.log(student)//{name: “Ming”, age: “18”, city: “Shanghai”}
复制代码
使用ES6:

const name=‘Ming’,age=‘18’,city=‘Shanghai’

const student = {
name,
age,
city
};
console.log(student)//{name: “Ming”, age: “18”, city: “Shanghai”}
复制代码
(9).PromisePromise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

不使用ES6

setTimeout(function()
{
console.log(‘Hello’) // 1秒后输出"Hello"
setTimeout(function()
{
console.log(‘Hi’) // 2秒后输出"Hi"
}, 1000)
}, 1000)
复制代码
使用ES6

let waitSecond = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000)
});

waitSecond
.then(function()
{
console.log(“Hello”) // 1秒后输出"Hello"
return waitSecond
})
.then(function()
{
console.log(“Hi”) // 2秒后输出"Hi"
})
复制代码
(10).支持let与const在之前JS是没有块级作用域的,const与let填补了这方便的空白,const与let都是块级作用域。

let和var的区别: ● let没有变量提升,存在暂时性死区,必须等let声明完以后,变量才能使用 ● let变量不能重复声明 ● let声明的变量只在let代码块有效

ES7的特性

(1).Array.prototype.includes()includes() 函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false

let arr = [‘react’, ‘angular’, ‘vue’]
if (arr.includes(‘react’)) {
console.log(‘react存在’)
}
复制代码
(2).指数操作符在ES7中引入了指数运算符,具有与Math.pow(…)等效的计算结果。

console.log(Math.pow(2, 10)) // 输出1024

console.log(2**10) // 输出1024
复制代码
ES8的特性
(1).async/await在ES8中加入了对async/await的支持,也就我们所说的异步函数,这是一个很实用的功能。 async/await相当于一个语法糖,解决了回调地狱的问题

(2).Object.values()Object.values()是一个与Object.keys()类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。

a: 1,
b: 2,
c: 3,

}
// 不使用Object.values()
const vals = Object.keys(obj).map(e => obj[e])
console.log(vals) // [ 1, 2, 3 ]

// 使用Object.values()
console.log(Object.values(obj)) // [ 1, 2, 3 ]
复制代码
(3).Object.entriesObject.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

const obj = {
a: 1,
b: 2,
c: 3,
}
// 不使用Object.entries()
Object.keys(obj).forEach(key=>{
console.log(‘key:’+key+’ value:’+obj[key])
})
//key:a value:1
//key:b value:2
//key:c value:3

// 使用Object.entries()
for(let [key,value] of Object.entries(obj1)){
console.log(key: ${key} value:${value})
}
//key:a value:1
//key:b value:2
//key:c value:3
复制代码
(4).String padding在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾

String.padStart(targetLength,[padString])
复制代码
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。 padString:(可选)填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " "。

console.log(‘0.0’.padStart(4,‘10’)) //10.0
console.log(‘0.0’.padStart(20))// 0.00
复制代码
String.padEnd(targetLength,padString])
复制代码
targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。 padString:(可选) 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " ";

console.log(‘0.0’.padEnd(4,‘0’)) //0.00
console.log(‘0.0’.padEnd(10,‘0’))//0.00000000
复制代码
(5).函数参数列表结尾允许逗号

// 不使用ES8
//程序员A
let f = function(a,
b
) {

}

//程序员B
let f = function(a,
b, //变更行
c //变更行
) {

}

//程序员C
let f = function(a,
b,
c, //变更行
d //变更行
) {

}

// 使用ES8
//程序员A
let f = function(a,
b,
) {

}

//程序员B
let f = function(a,
b,
c, //变更行
) {

}

//程序员C
let f = function(a,
b,
c,
d, //变更行
) {

}
复制代码
(6).Object.getOwnPropertyDescriptors()Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

const obj2 = {
name: ‘Jine’,
get age() { return ‘18’ }
};
Object.getOwnPropertyDescriptors(obj2)
// {
// age: {
// configurable: true,
// enumerable: true,
// get: function age(){}, //the getter function
// set: undefined
// },
// name: {
// configurable: true,
// enumerable: true,
// value:“Jine”,
// writable:true
// }
// }
复制代码
17.性能监控平台是如何捕获错误的
全局捕获通过全局的接口,将捕获代码集中写在一个地方,可以利用的接口有: (1).window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等 (2).框架级别的全局监听,例如aixos中使用interceptor进行拦截,vue、react都有自己的错误采集接口 (3).通过对全局函数进行封装包裹,实现在在调用该函数时自动捕获异常 (4).对实例方法重写(Patch),在原有功能基础上包裹一层,例如对console.error进行重写,在使用方法不变的情况下也可以异常捕获

单点捕获在业务代码中对单个代码块进行包裹,或在逻辑流程中打点,实现有针对性的异常捕获: (1).try…catch中throw err (2).专门写一个函数来收集异常信息,在异常发生时,调用该函数 (3).专门写一个函数来包裹其他函数,得到一个新函数,该新函数运行结果和原函数一模一样,只是在发生异常时可以捕获异常

18.函数柯里化
在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术

示例:

function add(a, b) {
return a + b;
}

// 执行 add 函数,一次传入两个参数即可
add(1, 2) // 3

// 假设有一个 curry 函数可以做到柯里化
var addCurry = curry(add);
addCurry(1)(2) // 3

addCurry(1)(2) = add(1, 2)
复制代码
实现: (1).最简单的方式,使用lodash库的_.curry

function sum(a, b) {
return a + b
}

// 使用来自 lodash 库的 _.curry
let curriedSum = _.curry(sum)

alert( curriedSum(1, 2) ) // 3
alert( curriedSum(1)(2) ) // 3
复制代码
(2).自定义函数实现

function curry(func) {
return function curried(…args) {
if (args.length >= func.length) {
return func.apply(this, args)
} else {
return function(…args2) {
return curried.apply(this, args.concat(args2))
}
}
}
}

let currfn = curry(add)
console.log(currfn(1)(3)) // 4
复制代码
19.new关键字做了什么?

使用new操作符调用构造函数实际上会经历以下4个步骤: (1).创建一个新对象 (2).将构造函数的作用域赋给新对象(因此this就指向了这个新对象) (3).执行构造函数中的代码(为这个新对象添加属性、方法) (4).返回新对象

猜你喜欢

转载自blog.csdn.net/lsttwo/article/details/111828063