关于面试:前端常见面试题总结ES6部分三

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 对象在胜利或失败时。



1.  var promise = new Promise((resolve, reject) => {
    
2.      var success = true;
    
3.      if (success) {
    
4.          resolve('胜利');
    
5.      } else {
    
6.          reject('失败');
    
7.      }
    
8.  }).then(
    
9.      (data) => { console.log(data)},
    
10.      (data) => { console.log(data)}
    
11.  )

promise的执行过程



1.  setTimeout(function() {
    
2.      console.log(0);
    
3.  }, 0);
    
4.  var promise = new Promise((resolve, reject) => {
    
5.      console.log(1);
    
6.      setTimeout(function () {
    
7.          var success = true;
    
8.          if (success) {
    
9.              resolve('胜利');
    
10.          } else {
    
11.              reject('失败');
    
12.          }
    
13.      },2000);
    
14.  }).then(
    
15.      (data) => { console.log(data)},
    
16.      (data) => { console.log(data)}
    
17.  );
    
18.  console.log(promise);    //<pending> 进行中
    
19.  setTimeout(function () {
    
20.      console.log(promise);    //<resolved> 已实现
    
21.  },2500);
    
22.  console.log(2);
    

24.  //1
    
25.  //Promise {<pending>}
    
26.  //2
    
27.  //0
    
28.  //胜利
    
29.  //Promise {<resolved>: undefined}

（8）解构赋值

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

数组的解构赋值

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



1.  var [name, pwd, sex]=["小周", "123456", "男"];
    
2.  console.log(name) //小周
    
3.  console.log(pwd)//123456
    
4.  console.log(sex)//男

对象的解构赋值

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



1.  var obj={name:"小周", pwd:"123456", sex:"男"}
    
2.  var {name, pwd, sex}=obj;
    
3.  console.log(name) //小周
    
4.  console.log(pwd)//123456
    
5.  console.log(sex)//男
    

7.  //如果想要变量名和属性名不同，要写成这样
    
8.  let { foo: foz, bar: baz } = { foo: "aaa", bar: "bbb" };
    
9.  console.log(foz) // "aaa"
    
10.  console.log(foo) // error: foo is not defined

（9）set数据结构

Set数据结构，相似数组。所有的数据都是惟一的，没有反复的值。它自身是一个构造函数。

属性和办法：

size 数据的长度
add() 增加某个值，返回 Set 构造自身。
delete() 删除某个值，返回一个布尔值，示意删除是否胜利。
has() 查找某条数据，返回一个布尔值。
clear() 革除所有成员，没有返回值。

利用：数组去重。



1.  var arr = [1,1,2,2,3];
    
2.  var s = new Set(arr);
    
3.  console.log(s);    //{1, 2, 3}
    

5.  console.log(s.size);    //3
    
6.  console.log(s.add(4));    //{1, 2, 3, 4}
    
7.  console.log(s.delete(4));    //true
    
8.  console.log(s.has(4));    //false
    
9.  s.clear();

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

将字符串转成数组



1.  var str="abcd";
    
2.  console.log([...str]) // ["a", "b", "c", "d"]

将汇合转成数组



1.  var sets=new Set([1,2,3,4,5])
    
2.  console.log([...sets]) // [1, 2, 3, 4, 5]

两个数组的合并



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

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

rest参数 …变量名称

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



1.  function func(...args){
    
2.      console.log(args);//[1, 2, 3, 4]
    
3.  }
    
4.  func(1, 2, 3, 4);
    

6.  function f(x, ...y) {
    
7.      console.log(x);
    
8.      console.log(y);
    
9.  }
    
10.  f('a', 'b', 'c');     //a 和 ["b","c"]
    
11.  f('a')                //a 和 []
    
12.  f()                   //undefined 和 []

关于面试:前端常见面试题总结ES6部分三

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于面试:前端常见面试题总结ES6部分三

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复