前言
在面试的时候，ES6几乎已成必问问题，对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
特点
- 1.this是静态的，this始终是指向函数声明时所在作用域下的this值，他没有自己的this
- 2.不能作为构造实例化对象
- 3.不能使用arguments变量
- 4.箭头函数的简写
省略小括号，当形参有且只有一个的时候可以省略
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 语言的第七种数据类型，是一种类似于字符串的数据类型
特点
- 1.Symbol 的值是唯一的，用来解决命名冲突的问题
- 2.Symbol 值不能与其他数据进行运算，也不能自己运算 + – * /
- 3.Symbol 定义的对象属性不能使用for in循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名
//创建Symbol
let 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接口，就可以完成遍历操作
1.ES6创造了一种新的遍历命令for…of循环，Iterator接口提供for…of消费
2.原生具备iterator接口的数据
Array Arguments Set Map String TypedArray NodeList
3.工作原理
- 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 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
- 1、 Promise 构造函数 Promise(excutor){}
- 2、 Promise.prototype.then 有两个参数，两个参数都是函数，
Promise对象成功状态执行then中第一个函数，失败执行第二个函数
- 3、 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 的原型里面有 p
Object.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] // true
0 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
//由于空位的处理规则非常不统一，所以建议避免出现空位。
文章来源于公众号： 猴哥说前端，作者：monkeysoft
以上就是W3Cschool编程狮关于****的相关介绍了，希望对大家有所帮助。
小狮博客
