ES6 基础篇三之面试题
ES6
模块化
模块化是指将一个大的文件,拆分成几个小文件。然后将小的文件组合起来。
优点:
- 防止命名冲突。两个文件声明的变量名相同,但是不会产生影响。
- 代码复用。把功能代码封装成一个文件,对外暴露接口,在许多项目中就都可以使用。
- 高维护性。对某一个文件升级,或者开发人员在修改文件过程中不会产生过多的冲突。
export命名用来规范模块的对外接口
import命名用来输入其他模块提供的内容
//export.js
export let name = 'lyz'
//import.js
import {name} from './export.js';
console.log(name);
//index.html
<script src="export.js" type="module"></script>
<script src="import.js" type="module"></script>
includes()
includes方法用来检测数组是否包含某个元素。与indexOf方法类似,但是indexOf返回的是数字,不方便使用。
const arr = ['lyz', 'my', 'lyj'];
console.log(arr.includes('my')); //true
console.log(arr.includes('ly')); //false
async与await
async和await两种语法结合可以让异步代码像同步代码一样执行
async函数
- async函数的返回值是Promise对象
- Promise对象的结果为async函数执行的返回值决定
async function f() {
// return 'lyz';
return new Promise((resolve, reject) => {
resolve('成功数据');
})
}
console.log(f());
await表达式
- await必须写在async函数中中
- await右侧一般为promise对象
- await返回的是promise中的状态对应的值(promise对象中有两个属性,一个表示状态,另一个表示状态对应的值)
- await的promise失败了,就会抛出异常,需要通过try-catch进行捕获处理
function p() {
return new Promise((resolve, reject) => {
// resolve('成功数据.')
reject('fail');
})
}
async function f() {
try {
let data = await p();
console.log(data);
}catch (e) {
console.log(e);
}
}
f();
使用async和await发送请求
function f(url) {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest();
ajax.open('get', url);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 ) {
if (ajax.status == 200) {
resolve(ajax.response);
} else {
reject(ajax.status);
}
}
}
})
}
async function main() {
let joke = await f('https://api.apiopen.top/getJoke');
let weather = await f('http://wthrcdn.etouch.cn/weather_mini?city=太原')
console.log(joke);
console.log(weather);
}
main();
面试题
ES6是什么,为什么要学习。
ea6是新一代的js语言标准,对js语言核心的内容进行了优化,规范了js使用的标准,新增了js原声的方法,是的更加规范、更加优雅、更加适合大型应用的规范。
babel是什么,有什么作用
bable是es6的转换器,可以讲es6转换为es5代码,以便兼容还没有支持es6的平台。
ES6对String字符串类型做了哪些升级优化
升级
- 新增了字符串模版,能保留空格和换行。
优化
- 新增了includes方法。取代了传统的indexOf方法,返回为布尔值,更加明确 ,语义更清晰。
- 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法,可方便的用于查找,补全字符串。
ES6对Array数组类型做了哪些升级优化
升级
- 数组解析赋值。可以直接进行变量赋值,在声明较多变量时,不用写很多var/let/const
let [a,b,c] = [1,2,3]
- 扩展运算符。可以轻松的实现数组和松散序列对相互转换。
//合并
var arr2 = [‘lyf’, ‘glnz’];
var newArr = […arr, …arr2];
优化
- 新增了find方法。取代了传统的indexOf方法,修复了indexOf找不到NaN的bug。
console.log([NaN].indexOf(NaN)); //false
- 此外还新增了copyWithin(), includes(), fill(),flat()**等方法,可方便的用于字符串的查找,补全,转换等。
ES6对Number数字类型做了哪些升级优化
升级
- ES6在Number原型上新增了isFinite(), isNaN()方法,用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。
Number.EPSILON 是js表示最小精度
Number.isFinite() 检查一个数值是否为有限数
Number.isNaN() 检测一个数值是为NaN
优化
- ES6在Math对象上新增了Math.cbrt(),trunc(),hypot()等等较多的科学计数法运算方法,可以更加全面的进行立方根、求和立方根等等科学计算。
ES6对Object类型的升级优化
升级
- ES6在Object原型上新增了is()方法,做两个目标对象的相等比较。
- ES6在Object原型上新增了assign()方法,用于对象新增属性或者多个对象合并。
- ES6在Object原型上新增了getOwnPropertyDescriptors()方法,此方法增强了ES5中getOwnPropertyDescriptor()方法,可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法,可以完美复制对象,包括复制get和set属性。
- ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法,用来获取或设置当前对象的prototype对象 。
- ES6在Object原型上还新增了Object.keys(),Object.values(),Object.entries()方法,用来获取对象的所有键、所有值和所有键值对数组。
优化
- 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法。
let [apple, orange] = [‘red appe’, ‘yellow orange’]; let myFruits =
{apple, orange}; // let myFruits = {apple: ‘red appe’, orange: ‘yellow
orange’};
- 对象解构赋值。
let {apple, orange} = {apple: ‘red appe’, orange: ‘yellow orange’};
-
对象的扩展运算符。可以轻松的取出一个目标对象内部全部或者部分的可遍历属性,从而进行对象的合并和分解
-
super关键字。ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同,super关键字总是指向当前函数所在对象的原型对象。
ES6对function函数类型常用升级优化
升级
- ES6新增了双冒号运算符,用来取代以往的bind,call,和apply。
foo::bar; // 等同于bar.bind(foo); foo::bar(…arguments); //等同于bar.apply(foo, arguments);
优化
- 箭头函数
- 1)箭头函数内的this指向的是函数定义时所在的对象,而不是函数执行时所在的对象
- 2)箭头函数不能用作构造函数,因为它没有自己的this,无法实例化
- 3)也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。
- 函数默认赋值
function es6Fuc (x, y = ‘default’) { console.log(x, y);}
es6Fuc(4) // 4, default
日常前端代码开发中,有哪些值得用ES6去改进的编程优化或者规范?
- 常用let取代var命令。
- 常用箭头函数来取代var _this = this;的做法。
- 常用数组/对象的解析赋值来命名变量,结构更清晰,语义更明确,可读性更好。
- 在长字符串多变量组合场合,用模板字符串来取代字符串累加,能取得更好地效果和阅读体验。
- 用Class类取代传统的构造函数,来生成实例化对象。
- 在大型应用开发中,要保持module模块化开发思维,分清模块之间的关系,常用import、export方法。