H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】前端常见面试题总结——ES6部分(三)

前端常见面试题总结——ES6部分(三)

早饭君发布于 今天 08:18

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

(1)新增声明命令letconst

在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";
}
  1. 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数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。

属性和方法:

  1. size 数据的长度
  2. add() 添加某个值,返回 Set 结构本身。
  3. delete() 删除某个值,返回一个布尔值,表示删除是否成功。
  4. has() 查找某条数据,返回一个布尔值。
  5. 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 和 []
面试javascript前端
阅读 33发布于 今天 08:18
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar

早饭君

19年之前本人技术博客传送门

113 声望
2 粉丝

0 条评论
得票时间

avatar

早饭君

19年之前本人技术博客传送门

113 声望
2 粉丝

宣传栏

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

(1)新增声明命令letconst

在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";
}
  1. 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数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。

属性和方法:

  1. size 数据的长度
  2. add() 添加某个值,返回 Set 结构本身。
  3. delete() 删除某个值,返回一个布尔值,表示删除是否成功。
  4. has() 查找某条数据,返回一个布尔值。
  5. 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 和 []

本文地址:H5W3 » 【JS】前端常见面试题总结——ES6部分(三)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址