返回顶部
首页 > 资讯 > 精选 >ES6面试题有哪些
  • 455
分享到

ES6面试题有哪些

2023-06-27 11:06:13 455人浏览 独家记忆
摘要

今天小编给大家分享一下es6面试题有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.let 变量声明以及特性声明变量&

今天小编给大家分享一下es6面试题有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

1.let 变量声明以及特性

声明变量

 let a; let b, c, d; let e = 1; let f = 2, g = 3;

特性

  • 不能重复声明

  • 块级作用域  只在块级作用域有效

  • 没有变量提升

  • 不影响作用域链

2.const 常量声明以及特性

特性

  • 必须有初始值

  • 一般常量使用大写

  • 常量的值不能修改

  • 也是块级作用域

  • 对于数组和对象的修改,不算对常量的修改,不会报错(可以对数组和对象进行修改,指向的地址没有改变)

3.变量的解构赋值

数组的解构

const RNG = ['uzi', 'mlxg', 'letme', 'ming']let [a, b, c, d] = RNG;// 每个值就是数组的位置对应的值

对象的解构

const UZI= {  name: '自豪',  age: 22,  love: 'LOL',  lol: function(){    alert('打lol')  }}let {name, age, love} = UZI;// 每个值是对象中对应的值let {lol} = UZI;lol();// 使用

4.模板字符串 ``

内容中可以直接出现换行符,单引号双引号内容不能直接用换行符(需要通过引号加号拼接)

let str = `lol s10      tes 是冠军`;// 可以这样直接使用换行符

直接进行变量的拼接  ${}

let lol = 'lol十周年';let uzi = `${lol} 中国队夺冠`

5.对象的简写

let name = 'zhangning187';let change = function(){  console.log('努力改变');}const supwisdom = {  name,  change}

6.箭头函数及声明特点  =>

let fn = (a, b) => {  return a + b;}fn(1, 2);// 3

特点

  • this是静态的,this始终是指向函数声明时所在作用域下的this值,他没有自己的this

  • 不能作为构造实例化对象

  • 不能使用arguments变量

  • 箭头函数的简写

省略小括号,当形参有且只有一个的时候可以省略

let add = n => {        return n*2;      }

省略花括号,当代码体只有一条语句的时候,return 必须省略,语句的执行结果就是函数的返回值

let add = n => n*2;

7.函数参数的默认值

形参初始值

function add(a, b, c = 10) {// 当不传递c的时候,c的默认值是10,尽量把具有默认值的参数放在后面  return a + b + c;}add (1, 2);// 13

与解构赋值结合

function con({name, age, love, height = '18'}) {// 还可以给默认值  console.log(age);// 24  console.log(height);// 没有传递,使用默认值 18}con({  name: 'zhangning187',  age: 24,  love: 'js'})

8.rest参数

用于获取参数的实参,用于代替arguments

rest参数是一个数组和es5中的arguments不一样,arguments里面是一个对象

获取实参的方式

function data(a, b, ...args) {// rest 参数必须放到参数的最后面    console.log(a);// 1    console.log(b);// 2    console.log(args);// [3, 4, 5, 6, 7]}data(1, 2, 3, 4, 5, 6, 7);

9.扩展运算符  ...

可以将数组转换为逗号分隔的参数序列,将一个数组分割,并将各个项作为分离的参数序列传递给函数

const RNG = ['UZI', 'MLXG', 'LETME', 'MING'];console.log(...RNG)// UZI MLXG LETME MING  解构之后的序列console.log(RNG);// ['UZI', 'MLXG', 'LETME', 'MING']  返回的是一个数组const a = [1,2], b=[3,6];const c = [...a, ...b];// [1, 2, 3, 6]

10.Symbol  新的原始数据类型,表示独一无二的值

他是javascript 语言的第七种数据类型,是一种类似于字符串的数据类型

特点

  • Symbol 的值是唯一的,用来解决命名冲突的问题

  • Symbol 值不能与其他数据进行运算,也不能自己运算 + - * /

  • Symbol 定义的对象属性不能使用for in循环遍历,但是可以使用 Reflect.ownKeys 来获取对象的所有键名

//创建Symbollet s = Symbol();// s不可见,在内部实现唯一性let s2 = Symbol('zhangning187');// 这里面的字符串只是一个标志,Symbol返回的值都是唯一的let s3 = Symbol('zhangning187');console.log(s2 == s3);// false,确定唯一性//Symbol.for()方法创建,这是一个对象,这种方式可以得出唯一的Symbol值let s6 = Symbol.for('zhangning187');let s8 = Symbol.for('zhangning187');console.log(s6 ==s8);// true  得到唯一的Symbol值

对象添加Symbol类型的属性

let zn = {      up: function(){},      down: function(){},      name: 'zhangning187',      age: 24    }    // 向对象zn中添加 up down 方法    // zn.up = function(){}// 这个可以添加但是不确定zn中是否存在up方法,可能会覆盖原来的up方法    // 这时候需要考虑通过Symbol添加唯一的方法    // 声明一个对象    let methods = {      up: Symbol(),      down: Symbol()    }    zn[methods.up] = function(){      console.log('我可以爬楼');    }    zn[methods.down] = function(){      console.log('我可以下楼');    }    console.log(zn);// 已经添加唯一的方法 up down        let UZI = {      name: '自豪',      // Symbol(): function(){},// 这里不能这样直接使用, Symbol()是一个表达式,是一个动态的      [Symbol('lol')]: function(){        console.log('我会打lol');      },      [Symbol('篮球')]: function(){// Symbol()中还可以添加描述字符串        console.log('我可以打篮球')      }    }    console.log(UZI);

11.迭代器(Iterator)

迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作

ES6创造了一种新的遍历命令for...of循环,Iterator接口提供for...of消费

原生具备iterator接口的数据

Array Arguments Set Map String TypedArray nodeList

工作原理

  • a 创建一个指针对象,指向当前数据结构的起始位置

  • b 第一次调用对象的next方法,指针自动指向数据结构的第一个成员

  • c 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员

  • d 每调用next方法返回一个包含value和done属性的对象

自定义遍历数据的时候,要想到迭代器

12.生成器函数的声明与调用

生成器函数是ES6提供的一种异步编程解决方案,与传统函数完全不同,就是一个特殊的函数

// 声明    function * gen(){// * 可以靠左,也可以靠右,还可以放在中间  // console.log('hello');  yield '2020lpl牛批';// yield 语句可以算作函数代码的分隔符  let two = yield ‘uzi 退役了’;  console.log(two);  yield '湖人总冠军';}// 执行let iterator = gen();// console.log(iterator);// 返回结果是一个迭代器对象console.log(iterator.next());// 需要执行迭代器对象中的next()方法,才会执行生成器函数console.log(iterator.next());// 每个next()只会执行里面一个yield语句,这个会输出 ‘uzi 退役了’// 传递参数 参数将作为上一个yield语句的返回结果console.log(iterator.next('AAA'));// 第三次调用传递的参数将作为第二个yield 的返回结果 打印为AAA// 使用for of循环遍历输出for(let v of gen()){  console.log(v);// 依次输出yield语句中的值}

案例:1s输出 111 2s输出 222 3s输出 333

    function one(){      setTimeout(()=>{        console.log('111')        iterator.next();      }, 1000)    }    function two(){      setTimeout(()=>{        console.log('111')        iterator.next();      }, 1000)    }    function three(){      setTimeout(()=>{        console.log('111')      }, 1000)    }    // 生成器函数    function * gen(){      yield one();      yield two();      yield three();    }    // 调用生成器函数    let iterator = gen();    iterator.next();

13.Promise 基本使用

Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果

  • Promise 构造函数  Promise(excutor){}

  • Promise.prototype.then  有两个参数,两个参数都是函数,

Promise对象成功状态执行then中第一个函数,失败执行第二个函数

  • Promise.prototype.catch

    // 实例化    const p = new Promise((resolve, reject) => {      // 通过resolve,reject这两个函数来改变Promise对象的状态,      // resolve会改变p的状态为成功,reject会改变p的状态为失败,然后去执行then里面的方法      // 执行异步操作,以定时器为例,定时器也是异步      setTimeout(()=>{        //let data = '异步执行成功';        // resolve(data);// 调用resolve函数, p会变成一个成功的状态,会执行then中的第一个方法        let err = '执行失败';        reject(err);// 调用reject函数,p会变成一个失败的状态,会执行then中的第二个方法      }, 1000)    })     // 成功会调用 promise 对象 then 方法    p.then(value => {// 成功      // console.log(value);// 控制台打印:异步执行成功    }, reason => {// 失败      console.error(reason)    })

Promise.prototype.then 特性

    // then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定    const p = new Promise((resolve, reject) => {      setTimeout(()=>{        resolve('成功');        reject('失败');      }, 1000);    });    // then 的返回结果是一个Promise对象,就是result也是一个Promise对象,它的状态由函数的执行结果决定的    const result  = p.then(value => {      console.log(value);      // 1.如果返回的结果是 非Promise 类型的属性,状态为成功,返回值return 中的值      // 如果不写return,函数内部不写return返回结果是undefined,也不是Promise对象,状态也是成功      // return 123;      // 2.是 promise 对象, 该对象返回的状态就决定了then方法返回promise对象状态      return new Promise((resolve, reject)=>{        // resolve('ok');// then方法返回promise对象状态为成功        reject('no');// then方法返回promise对象状态为失败      })      // 3.抛出错误  then方法返回promise对象状态为失败,错误值为抛出错误的值      throw new Error('出错了');    }, reason => {      console.err(reason);    });    console.log(result);    // 综上总结,then方法可以链式调用  可以改变回调域的现象    p.then(value=>{}, reason=>{})      .then(value()=>{}).then();

举例:多个请求都返回之后,获取其中的数据

    const p = new Promise((resolve, reject)=>{      resolve('第一次返回成功')    });    p.then(value=>{      return new Promise((resolve, reject)=>{        resolve([value, '第二次返回成功'])      });    }).then(value=>{      return new Promise((resolve, reject)=>{        resolve([...value, '第三次返回成功'])      });    }).then(value=>{      console.log(value);// 返回值为三次请求都返回成功以后的值    });

14.集合set

新的数据结构Set(集合),它类似于数组,成员的值都是唯一的,集合实现了iterator接口,所以可以使用扩展运算符和for of遍历

集合的属性和方法

  • 1 size  返回集合的元素个数

  • 2 add  添加一个新元素,返回当前集合

  • 3 delete  删除元素,返回boolean值

  • 4 has  检测集合中是否包含某个元素,返回boolean值

  • 5 clear  清空

    // 声明    let s = new Set();    let s2 = new Set([1, 2, 3, 6, 7]);    console.log(s2);// 5    s2.add(8);// 添加新元素     console.log(s2);// 输出 {1, 2, 3, 6, 7, 8}    s2.delete(8);    console.log(s2);// 输出 {1, 2, 3, 6, 7}    console.log(s2.has(8));// false    // s2.clear();// 清空    let arr = [1, 2, 3, 3, 3, 6, 6, 8];    let arr2 = [1, 3, 6, 7, 8];    // 数组去重    let result = [...new Set(arr)];    // 交集    let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));    // 并集    let result = [...new Set([...arr, ...arr2])];    // 差集 arr有arr2中没有    let result = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

15.Map集合

类似于对象,也是键值对的集合,但是 键 不限于字符串,各种类型的值(包括对象)都可以当作键,

map也实现了 iterator 接口,所以可以使用扩展运算符和for of进行遍历

  • 1 size  返回 Map 的元素个数

  • 2 set  增加一个新元素,返回当前Map

  • 3 get  返回键名对象的键值

  • 4 has  检测Map中是否包含某个元素,返回boolean值

  • 5 clear  清空集合,返回undefined

    // 声明    let m = new Map();    m.set('name', 'zhangning');    m.set('change', function(){console.log('变得更努力')});// 键 change 值 一个function    let key = {company: 'supwisdom'};     m.set(key, [1, 2, 3]);//键 对象 值 数组    m.size;// 获取m个数    m.delete('name');// 删除键值对    m.get('change');// 获取键对应的值    // m.clear();// 清空    for(let v of m){console.log(v);}

16.class 类

通过class可以定义类,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已。

  • 1 class  声明类

  • 2 constructor  定义构造函数初始化

  • 3 extends  继承父类

  • 4 super  调用父级构造方法

  • 5 static  定义静态方法和属性

  • 6 父类方法可以重写

es5通过 构造函数实例化 对象的方法

    // 人    function People(name, sex) {      this.name = name;      this.sex = sex;    }    // 这个height这种添加方式是属于函数对象的,不属于实例对象,这样的属性称之为静态成员    People.height = '180';    People.prototype.height1 = '100';    // 添加方法    People.prototype.play = function(){      console.log('打篮球');    }    let zn = new People('zhangning', '男');    zn.play();// 输出 打篮球    console.log(zn);    console.log(zn.height);// 输出 undefined     console.log(zn.height1);// 输出 100,必须通过prototype添加才能添加到实例对象上

通过class实现

    class People{      // 静态属性 static,对于static 标注的方法属于类,不属于实例对象      static height = '100';      static change(){        console.log('我可以改变世界');      }      // 构造方法 名字不能更改(在使用new People的时候会自动执行实例对象上的constructor方法)             constructor(name, sex){        this.name = name;        this.sex = sex;      }      // 添加方法必须使用该语法,不能使用es5的完整形式(play: function(){} 这种形式不支持,必须使用play()形式)      // 成员属性      play(){        console.log('打篮球');      }    }    let zn = new People('zhangning', '男');    console.log(zn);    console.log(zn.height);// undefined  static 标注的方法属于类,不属于实例对象    console.log(People.height);// 100

使用es5构造函数实现继承

    // 举例 chinese 继承 People 属性    function People(name, sex) {      this.name = name;      this.sex = sex;    }    People.prototype.play = function(){      console.log('打LOL');    }    function Student(name, sex, like, height){      // 通过call方法,改变this值,this指向chinese中的this,也就是chinese的一个实例对象      People.call(this, name, sex);      this.like = like;      this.height = height;    }    // 设置子集构造函数原型    Student.prototype = new People;// 这样就会有父级的一个方法    Student.prototype.constructor = Student;// 做一个校正,没有这行代码也无所谓    // 声明子类方法    Student.prototype.photo = function(){      console.log('去拍照');    }    // 实例化    const zn = new Student('zhangning', '男', '打篮球', '187');    console.log(zn)

使用es6 class 类 实现继承 及 父类方法的重写

    // 声明父类    class People{      // 父类构造方法      constructor(name, sex) {        this.name = name;        this.sex = sex;      }      // 父类成员属性      play(){        console.log('打LOL');      }    }    // 声明子类 使用extends 继承父类    class Student extends People {      // 构造方法      constructor(name, sex, like, height){        super(name, sex);// super 就是父类的constructor构造函数,这样调用        this.like = like;        this.height = height;      }      photo(){        console.log('去拍照');      }      // 对父类中的play方法进行重写,子类是不能去调用父类的同名方法的,      play(){        // super(); 不允许,在普通的成员方法里面是不能出现super()去调用父类的同名方法的,会报错,只能完全重写        console.log('我会打LOL,还会打篮球');      }    }    const zn = new Student('zhangning', '男', '打篮球', '187');    console.log(zn)

class 中 getter 和 setter 设置

    class People{      get like(){        return '打篮球';      }      set like(newVal){        // 通过传过来的newVal值,进行操作,改变 like        console.log('改变like值');      }    }    let p = new People();    console.log(p.like)// 输出 打篮球    p.like = 'LOL';// 然后通过 set like 进行操作

17.对象数值扩展

Object.is

判断两个值是否完全相等

Object.is(1, 1);// true

和 === 很相似,唯一区别就是 NaN === NaN 为 false, Object.is(NaN, NaN) 为true

Object.assign

对象的合并

const c1 = {name: 'znn'};const c2 = {name: 'zhangning', height: 187};Object.assign(c1, c2);// 如果两个对象中存在相同属性,c2 中覆盖c1中的属性内容

Object.setPrototypeOf

设置原型对象

const zn = {    name: 'zhangning',}const p = {    h: true,    sfsfdf: 'fasfasdf'}Object.setPrototypeOf(zn, p);// 设置 zn 的原型里面有 pObject.getPrototypeOf(zn);// 获取 zn 的原型console.log(zn);// 打印看下

18.数组扩展

Array.from()

Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的数据结构 Set 和Map )。

let arrayLike = {    '0': 'a',    '1': 'b',    '2': 'c',    length: 3  };  // ES5 的写法  var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  // ES6 的写法  let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']    // NodeList 对象  let ps = document.querySelectorAll('p');  Array.from(ps).forEach(function (p) {    console.log(p);  });  // arguments 对象  function foo() {  var args = Array.from(arguments);  // ...  }  //字符串转换为字符数组str.split('')  Array.from('hello')  // ['h', 'e', 'l', 'l', 'o']  let namesSet = new Set(['a', 'b'])  Array.from(namesSet) // ['a', 'b']    Array.from({ length: 3 });  // [ undefined, undefined, undefined ]

对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代:

const toArray = (() =>  Array.from ? Array.from : obj => [].slice.call(obj))();

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);  //  等同于  Array.from(arrayLike).map(x => x * x);  Array.from([1, 2, 3], (x) => x * x)  // [1, 4, 9]  //Array.from回调函数var arr1 = Array.from([1,2,3], function(item){    return item*item;});var arr2 = Array.from([1,2,3]).map(function(item){    return item*item;});var arr3 = Array.from([1,2,3], (item) => item*item);console.log(arr1); //[ 1, 4, 9 ]console.log(arr2); //[ 1, 4, 9 ]console.log(arr3); //[ 1, 4, 9 ]

值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。

// arguments 对象  function foo() {    var args = [...arguments];  }  // NodeList 对象  [...document.querySelectorAll('div')]

Array.of()

Array.of方法用于将一组值,转换为数组。Array.of总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异

Array() // []  Array(3) // [, , ,]  Array(3, 11, 8) // [3, 11, 8]    Array.of() // []  Array.of(3) // [3]  Array.of(3, 11, 8) // [3,11,8]    Array.of(3).length // 1   Array.of(undefined) // [undefined]  Array.of(1) // [1]  Array.of(1, 2) // [1, 2]

Array.of方法可以用下面的代码模拟实现:

function ArrayOf(){  return [].slice.call(arguments);}

find() 和 findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)  // -5  [1, 5, 10, 15].find(function(value, index, arr) {      return value > 9;  }) // 10

上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {      return value > 9;  }) // 2

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

[NaN].indexOf(NaN)  // -1  [NaN].findIndex(y => Object.is(NaN, y))  // 0

fill()

fill()方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)  // [7, 7, 7]  new Array(3).fill(7)  // [7, 7, 7]  ['a', 'b', 'c'].fill(7, 1, 2)  // ['a', 7, 'c']

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill()方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']

entries() , keys() 和 values()

ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {      console.log(index);  }  // 0  // 1  for (let elem of ['a', 'b'].values()) {      console.log(elem);  }  // 'a'  // 'b'  for (let [index, elem] of ['a', 'b'].entries()) {      console.log(index, elem);  }  // 0 "a"  // 1 "b"

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

let letter = ['a', 'b', 'c'];  let entries = letter.entries();  console.log(entries.next().value); // [0, 'a']  console.log(entries.next().value); // [1, 'b']  console.log(entries.next().value); // [2, 'c']

includes()

ES5中,我们常用数组的indexOf方法,检查是否包含某个值。indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于 -1 ,表达起来不够直观。二是,它内部使用严格相当运算符( === )进行判断,这会导致对NaN的误判。

[NaN].indexOf(NaN)  // -1  includes使用的是不一样的判断算法,就没有这个问题。  [NaN].includes(NaN)  // true

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于 ES7 ,但 Babel 转码器已经支持。

[1, 2, 3].includes(2); // true  [1, 2, 3].includes(4); // false  [1, 2, NaN].includes(NaN); // true

该方法的第二个参数表示搜索的起始位置,默认为 0 。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为 -4 ,但数组长度为 3 ),则会重置为从 0 开始。

[1, 2, 3].includes(3, 3); // false  [1, 2, 3].includes(3, -1); // true

下面代码用来检查当前环境是否支持该方法,如果不支持,部署一个简易的替代版本。

const contains = (() =>  Array.prototype.includes      ? (arr, value) => arr.includes(value)      : (arr, value) => arr.some(el => el === value)  )();  contains(["foo", "bar"], "baz"); // => false

另外, Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set 结构的has方法,是用来查找值的,比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

数组的空位

数组的空位指,数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位。

注意,空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值,in运算符可以说明这一点。

0 in [undefined, undefined, undefined] // true0 in [, , ,] // false

上面代码说明,第一个数组的 0 号位置是有值的,第二个数组的 0 号位置没有值。

ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。

  • forEach() ,  filter() ,  every() 和some()都会跳过空位。

  • map()会跳过空位,但会保留这个值

  • join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

// forEach方法[,'a'].forEach((x,i) => console.log(i)); // 1// filter方法['a',,'b'].filter(x => true) // ['a','b']// every方法[,'a'].every(x => x==='a') // true// some方法[,'a'].some(x => x !== 'a') // false// map方法[,'a'].map(x => 1) // [,1]// join方法[,'a',undefined,null].join('#') // "#a##"// toString方法[,'a',undefined,null].toString() // ",a,,"

ES6则是明确将空位转为undefined。

//Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位。  Array.from(['a',,'b'])  // [ "a", undefined, "b" ]  //扩展运算符(...)也会将空位转为undefined。  [...['a',,'b']]  // [ "a", undefined, "b" ]  //copyWithin()会连空位一起拷贝。  [,'a','b',,].copyWithin(2,0) // [,"a",,"a"]  //fill()会将空位视为正常的数组位置。  new Array(3).fill('a') // ["a","a","a"]  //for...of循环也会遍历空位。  let arr = [, ,];  for (let i of arr) {      console.log(1);  }  // 1  // 1  //上面代码中,数组arr有两个空位,for...of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。  //entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。  // entries()  [...[,'a'].entries()] // [[0,undefined], [1,"a"]]  // keys()  [...[,'a'].keys()] // [0,1]  // values()  [...[,'a'].values()] // [undefined,"a"]  // find()  [,'a'].find(x => true) // undefined  // findIndex()  [,'a'].findIndex(x => true) // 0  //由于空位的处理规则非常不统一,所以建议避免出现空位。

以上就是“ES6面试题有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

--结束END--

本文标题: ES6面试题有哪些

本文链接: https://lsjlt.com/news/309701.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ES6面试题有哪些
    今天小编给大家分享一下ES6面试题有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.let 变量声明以及特性声明变量&...
    99+
    2023-06-27
  • Redis面试题有哪些
    这篇文章给大家分享的是有关Redis面试题有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Redis 面试题1、什么是 RedisRedis 是完全开源免费的,遵守 BSD ...
    99+
    2024-04-02
  • Hibernate面试题有哪些
    这篇文章主要介绍“Hibernate面试题有哪些”,在日常操作中,相信很多人在Hibernate面试题有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Hibernate面...
    99+
    2024-04-02
  • MySQL面试题有哪些
    本篇内容介绍了“MySQL面试题有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!非关系型数据库和关系型...
    99+
    2024-04-02
  • JavaScript有哪些面试题
    这篇文章主要讲解了“JavaScript有哪些面试题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript有哪些面试题”吧!1.创建JavaSc...
    99+
    2024-04-02
  • 有哪些Vue面试题
    这篇文章主要讲解了“有哪些Vue面试题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“有哪些Vue面试题”吧!  一、什么是MVVM  MVVM是Model-...
    99+
    2024-04-02
  • JavaScript面试题有哪些
    这篇文章主要为大家展示了“JavaScript面试题有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript面试题有哪些”这篇文章吧。问题1:J...
    99+
    2024-04-02
  • jQuery面试题有哪些
    这篇文章将为大家详细讲解有关jQuery面试题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。  1、jQuery库中的$()是什么  答:$() 函数是 jQuer...
    99+
    2024-04-02
  • PHP有哪些面试题
    这篇文章主要介绍PHP有哪些面试题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. echo()、print()、print_r() 的区别echo()、print() 是 PHP 语句;print_r() 是函数...
    99+
    2023-06-14
  • tomcat面试题有哪些
    这篇文章主要为大家展示了“tomcat面试题有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“tomcat面试题有哪些”这篇文章吧。一. Tomcat的缺省端口是多少,怎么修改?找到Tomca...
    99+
    2023-06-20
  • java面试题有哪些
    这篇文章将为大家详细讲解有关java面试题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、什么是ARQ协议自动重传请求(Automatic Repeat-reQuest,ARQ)是OSI模型中数据...
    99+
    2023-06-20
  • net面试题有哪些
    这篇文章给大家分享的是有关net面试题有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  1、现场编码。  要求写出:缓存类+SqlHelper类(30分钟内,然后由代码引向面象对象或设计模式)。  2、数据...
    99+
    2023-06-03
  • Kotlin面试题有哪些
    这篇文章主要介绍“Kotlin面试题有哪些”,在日常操作中,相信很多人在Kotlin面试题有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Kotlin面试题有哪些”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-04
  • Nodejs面试题有哪些
    这篇文章主要为大家展示了“Nodejs面试题有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Nodejs面试题有哪些”这篇文章吧。  第1题:什么是nodejs我们在哪里使用它  Nodej...
    99+
    2023-06-04
  • HTML5面试题有哪些
    这篇文章主要介绍“HTML5面试题有哪些”,在日常操作中,相信很多人在HTML5面试题有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5面试题有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-05
  • 有关Mysql面试题有哪些
    本篇内容主要讲解“有关Mysql面试题有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“有关Mysql面试题有哪些”吧!1. 数据库的三范式是什么?第一范式:...
    99+
    2024-04-02
  • Redis的面试题有哪些
    这篇文章将为大家详细讲解有关Redis的面试题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。缓存知识点缓存有哪些类型?缓存是高并发场景下提高热点数据访问性能的一个有...
    99+
    2024-04-02
  • webpack的面试题有哪些
    这篇文章将为大家详细讲解有关webpack的面试题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。webpack 的构建流程是什么初始化参数:解析webpack配置参...
    99+
    2024-04-02
  • 有哪些Node.js面试问题
    这篇文章主要讲解了“有哪些Node.js面试问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“有哪些Node.js面试问题”吧!指导方针我建议你在阅读答案之...
    99+
    2024-04-02
  • Linux面试问题有哪些
    这篇文章主要为大家展示了“Linux面试问题有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux面试问题有哪些”这篇文章吧。假设你在为你工作的公司维护一份日常的备份。这份备份是以压缩后...
    99+
    2023-06-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作