ES6有哪些新特性？

Posted on:2024年8月10日 at 17:06

关于ES6和JavaScript的关系

1、ES6是对于ES2015+的俗称，也可以说是通常叫法，那么，ES6是什么呢？

ES 全称是ECMAScript，它是JavaScript基础构建的一种语言，JavaScript正是建立在ECMAScript语言的基础规范中建立使用的，那么，ECMAScript的使用，对于JavaScript至关重要！

在我的理解中，ECMAScript是一种语言层面的东西，它只是定义了JavaScript以及在它基础之上建立的其他语言的语法规范，而JavaScript的语言，更关于一种平台性质在其中。

JavaScript包括 ECMAScript、DOM、BOM三个组成部分，DOM和BOM是web API提供的接口或者是JavaScript和浏览器之间进行交互的部分，实质就是操纵文档元素，进行展示布局，而ECMAScript在JavaScript中其中语法的作用，它不会去跟文档有直接的关系，但是他的数据处理完成后会通过web API展示在文档中。

ES6新特性的分类

新特性主要归为四大类：

比如let 和 const 的块级作用域

比如解构、展开、参数默认值、模板字符串

比如promise、proxy、object的assign、is

比如symbol、set、map

下面具体进行介绍

1. let、const 块级作用域以及和 var 的区别

//块级作用域一级块级作用域的使用
if (true) {
  const param = "param in if block";
  console.log(param); //param in if block
}
console.log(param); //块级作用域外访问内部定义的变量，ReferenceError: param is not defined

// 暂时性死区
const i = 100;
if (i) {
  console.log(i); //ReferenceError: Cannot access 'i' before initialization
  const i = 1000;
}


    // const常量声明必须初始化
    const i;
    i = 10;
    console.log(i) //SyntaxError: Missing initializer in const declaration


// 基本类型常量不能修改，引用类型常量能修改属性
const str = "str";
str = "str1"; //TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr[0] = 100;
console.log(arr[0]); //100
声明方式变量提升作用域初始值重复定义
var是函数级不需要允许
let否块级不需要不允许
const否块级必需不允许

2.解构-快速提取数组/对象中的元素

const arr = [1, 2, 3];

const [a, b, c] = arr;
console.log(a, b, c); //1,2,3
const [, , d] = arr;
console.log(d); //3

const arr = [1, 2, 3];

const [, , , defaultVal = "4"] = arr;
console.log("设置默认值", defaultVal);

const arr = [1, 2, 3];

const [e, ...rest] = arr;
console.log(rest); //[2, 3]

// 拆分字符串
const str = "xiaobai/18/200";
const strArr = str.split("/");
const [, age] = strArr;
console.log(age); //18

const obj = { name: "xiaohui", age: 18, height: undefined };
const { name, age } = obj;
console.log(name, age); // 'xiaohui', 18

const obj = { name: "xiaohui", age: 18, height: undefined };
const { name: objName } = obj;
console.log(objName);

const obj = { name: "xiaohui", age: 18, height: undefined };
const { next = "default" } = obj;
console.log(next);

3.模板字符串

用法：使用“将字符串包裹起来

功能：可以换行、插值、使用标签函数进行字符串操作

示例：

//换行
const str = `fdsjak
    fdsa`;
console.log(str);

// 插值
const strs = `random: ${Math.random()}`;
console.log(strs);

/**
 * 字符串模板函数
 * @param {array} strs 以插值为分隔符组成的字符串数组
 * @param {string} name 插值的value，有多少个就会传入多少个
 */
const tagFunc = (strs, name, gender) => {
  const [str1, str2, str3] = strs;
  const genderParsed = gender == "1" ? "男" : "女";
  // 可以在此做过滤，字符串处理，多语言等操作
  return str1 + name + str2 + str3 + genderParsed;
};

// 带标签的模板字符串,
const person = {
  name: "xiaohui",
  gender: 1,
};
// 返回值为标签函数的返回值
const result = tagFunc`my name is ${person.name}.gender is ${person.gender}`;
console.log(result); //my name is xiaohui.gender is 男

4. 字符串扩展方法

const str = "abcd";

console.log(str.includes("e")); //false
console.log(str.startsWith("a")); //true
console.log(str.endsWith("a")); //false

5.参数默认值&剩余参数

// 带默认参数的形参一般放在后面，减少传参导致的错误几率
const defaultParams = function (name, age = 0) {
  return [age, name];
};
console.log(defaultParams(1));

// 剩余参数，转化成数组
const restParams = function (...args) {
  console.log(args.toString()); //1, 2, 3, 4, 5
};

restParams(1, 2, 3, 4, 5);

6.展开数组

使用…将数组展开

const arr = [1, 2, 3];

console.log(...arr);
// 等价于es5中以下写法
console.log.apply(console, arr);

7.箭头函数

特性&优势：

const inc = (n) => n + 1;
console.log(inc(100));

const obj = {
  name: "aa",
  func() {
    setTimeout(() => {
      console.log(this.name); //aa
    }, 0);
    setTimeout(function () {
      console.log(this.name); //undefined
    }, 0);
  },
};
obj.func();

8.对象字面量增强

/**
 * 1、增强了对象字面量：
 * 1，同名属性可以省略key:value形式，直接key，
 * 2，函数可以省略key：value形式
 * 3，可以直接func(),
 * 4，可以使用计算属性，比如：{[Math.random()]: value}
 */
const arr = [1, 2, 3];
const obj = {
  arr,
  func() {
    console.log(this.arr);
  },
  [Math.random()]: arr,
};

console.log(obj);

9.Object.assign(target1, target2, targetN)-复制/合并对象

/**
 * Object.assign(target1, target2, ...targetn)
 * 后面的属性向前面的属性合并
 * 如果target1是空对象，可以创建一个全新对象，而不是对象引用
 */
const obj1 = {
  a: 1,
  b: 2,
};
const obj2 = {
  a: 1,
  b: 2,
};

const obj3 = Object.assign({}, obj1);
obj3.a = 5;
console.log(obj3, obj2, obj1);

10.Object.is(value1, value2)

作用：比较两个值是否相等

特性：

console.log(NaN === NaN); //false
console.log(Object.is(NaN, NaN)); //true
console.log(0 === -0); // true
console.log(Object.is(0, -0)); //false
console.log(Object.is(1, 1)); //true

11.Proxy(object, handler)

作用：

用法：

const P = {
  n: "p",
  a: 19,
};

const proxy = new Proxy(P, {
  get(target, property) {
    console.log(target, property);
    return property in target ? target[property] : null;
  },
  defineProperty(target, property, attrs) {
    console.log(target, property, attrs);
    //   throw new Error('不允许修改')
  },
  deleteProperty(target, property) {
    console.log(target, property);
    delete target[property];
  },
  set(target, property, value) {
    target[property] = value;
  },
});

proxy.c = 100;
console.log("pp", P);

与 Object.definePropert 对比

优势：

12.Reflect

作用：

集成 Object 操作的所有方法，统一、方便，具体方法如下：

用于对对象的统一操作，集成 Object 相关的所有方法

1、apply：类似 Function.prototype.apply

2、Reflect.construct()

对构造函数进行 new 操作，相当于执行 new target(…args)。

3、Reflect.defineProperty()

和 Object.defineProperty() 类似。

4、Reflect.deleteProperty()

作为函数的 delete 操作符，相当于执行 delete target[name]。

5、Reflect.get()

获取对象身上某个属性的值，类似于 target[name]。

6、Reflect.getOwnPropertyDescriptor()

类似于 Object.getOwnPropertyDescriptor()。

7、Reflect.getPrototypeOf()

类似于 Object.getPrototypeOf(), 获取目标对象的原型。

8、Reflect.has()

判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。

9、Reflect.isExtensible()

类似于 Object.isExtensible().判断对象是否可扩展，可以添加额外属性

Object.seal(封闭对象)， Object.freeze（冻结对象）是不可扩展的

10、Reflect.ownKeys()

返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受 enumerable 影响).

11、Reflect.preventExtensions()

类似于 Object.preventExtensions()。返回一个 Boolean。

12、Reflect.set()

将值分配给属性的函数。返回一个 Boolean，如果更新成功，则返回 true, 反之返回 false。

13、Reflect.setPrototypeOf()

类似于 Object.setPrototypeOf()。

示例：

const obj = {
  name: "reflect",
};
Reflect.preventExtensions(obj); //禁止扩展
console.log(Reflect.set(obj, "age", "xiaobai")); //false
console.log(obj); //{ name: 'reflect' }
console.log(Reflect.isExtensible(obj, "name")); //false
console.log(Reflect.ownKeys(obj)); //[ 'name' ]

13.Promise

作用：解决异步编程中回调嵌套过深问题

14.class&静态方法&继承

定义

class Person {
  constructor(props) {
    this.props = props;
  }
}

方法

class Person {
  constructor(props) {
    this.props = props;
  }
  // 实例方法
  eat() {}
  // 静态方法
  static run() {}
}
// 调用静态方法
Person.run();
const person = new Person("props");
// 调用实例方法
person.eat();

继承：子类使用 extends 关键字实现继承，可以继承父类所有属性

class Student extends Person {
  constructor(props) {
    super(props);
  }
  printProps() {
    console.log(this.props);
  }
}

const student = new Student("student");
student.printProps();

15.Set

说明：

Set 是一种类似于数组的数据结构

特性：

用途：

const arr = [1, 3, 1, 1, 1];
const set = new Set(arr);
set.add(1).add(1);
console.log(set.size); //2
const newArr = Array.from(set);
console.log(newArr); //[ 1, 3 ]

16.Map

说明：

类似 Object，以 key、value 形式存储数据

区别：

Map 键不会隐式转换成字符串，而是保持原有类型

实例：

const map = new Map();
map.set(1, 1);
map.set("name", "map");
map.set(obj, obj);
console.log(map.get(1)); //1
/**
        1 1
        name map
        { '1': 1, true: true, a: 'a' } { '1': 1, true: true, a: 'a' }
     */
map.forEach((val, key) => {
  console.log(key, val);
});

17.Symbol

说明：

JavaScript 第六种原始数据类型，用来定义一个唯一的变量

作用：

如何获取对象的 symbol 属性？

实例

// 对象属性重名问题；
const objSymbol = {
  [Symbol()]: 1,
  [Symbol()]: 2,
};
console.log(objSymbol);

// 2、为对象、类、函数等创建私有属性
const name = Symbol();
const obj2 = {
  [name]: "symbol",
  testPrivate() {
    console.log(this[name]);
  },
};

obj2.testPrivate();
// 定义toString标签；
console.log(obj2.toString());
obj2[Symbol.toStringTag] = "xx";
console.log(obj2.toString()); //[object xx]

18.for…of…

用途：

已统一的方式，遍历所有引用数据类型

特性：

可以随时使用 break 终止遍历，而 forEach 不行

实例：

// 基本用法
// 遍历数组
const arr = [1, 2, 3, 4];
for (const item of arr) {
  if (item > 3) {
    break;
  }
  if (item > 2) {
    console.log(item);
  }
}

// 遍历set
const set = new Set();
set.add("foo").add("bar");
for (const item of set) {
  console.log("set for of", item);
}
// 遍历map
const map = new Map();
map.set("foo", "one").set("bar", "two");
for (const [key, val] of map) {
  console.log("for of map", key, val);
}
//迭代对象
const obj = {
  name: "xiaohui",
  age: "10",
  store: [1, 2, 3],
  // 实现可迭代的接口
  [Symbol.iterator]: function () {
    const params = [this.name, this.age, this.store];
    let index = 0;
    return {
      next() {
        const ret = {
          value: params[index],
          done: index >= params.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of obj) {
  console.log("obj for of", item);
}

19. 迭代器模式

作用：通过 Symbol.interator 对外提供统一的接口，获取内部的数据

外部可以通过 for…of…去迭代内部的数据

const tods = {
  life: ["eat", "sleep"],
  learn: ["js", "dart"],
  // 增加的任务
  work: ["sale", "customer"],
  [Symbol.iterator]: function () {
    const all = [];
    Object.keys(this).forEach((key) => {
      all.push(...this[key]);
    });
    let index = 0;
    return {
      next() {
        const ret = {
          value: all[index],
          done: index >= all.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of tods) {
  console.log(item);
}

20.Generator 生成器

// 生成迭代器方法
//  生成器Generator的应用

function* createIdGenerator() {
  let id = 1;
  while (id < 3) yield id++;
}
const createId = createIdGenerator();
console.log(createId.next()); //{ value: 1, done: false }
console.log(createId.next()); //{ value: 2, done: false }
console.log(createId.next()); //{ value: undefined, done: true }

const todos = {
  life: ["eat", "sleep", "baba"],
  learn: ["es5", "es6", "design pattern"],
  work: ["b", "c", "framework"],
  [Symbol.iterator]: function* () {
    const all = [...this.life, ...this.learn, ...this.work];
    for (const i of all) {
      yield i;
    }
  },
};
for (const item of todos) {
  console.log(item);
}

21.includes 函数-es2016

判断数组是否包含某个元素，包含 NaN，解决 indexOf 无法查找 NaN 问题

//  includes函数
const arr = ["foo", "bar", "baz", NaN];
console.log(arr.includes(NaN)); //true
console.log(arr.indexOf(NaN)); //-1

22. 运算符-es2016

指数运算

// 指数运算符 **
// es5中2十次方
console.log(Math.pow(2, 10));
// es6中2十次方
console.log(2 ** 10);

23.values 函数-es2017

将对象的值以数组的形式返回

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};

console.log(Object.values(obj)); //[ 1, 2, 3 ]

24.entries 函数-es2017

将对象以键值对二维数组返回，使之可以使用 for…of…遍历

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};
console.log(Object.entries(obj));
const entry = Object.entries(obj);
for (const [key, value] of entry) {
  console.log(key, value);
}

25.Object.getOwnPropertyDescriptors(obj)-es2017

获取对象的描述信息

可以通过获得的描述信息，配合 Object.defineProperties 来完整复制对象，包含 get，set 方法

// getOwnPropertyDescriptors

// 普通get方法
const objGet = {
  foo: 1,
  bar: 2,
  get getCount() {
    return this.foo + this.bar;
  },
};
// assign方法会把getCount当做普通属性复制，从而getCount为3，修改bar不管用
const objGet1 = Object.assign({}, objGet);
objGet1.bar = 3;
console.log(objGet1.getCount); //3
// descriptors
const descriptors = Object.getOwnPropertyDescriptors(objGet);
console.log("des", descriptors);
// 通过descriptors来复制对象，可以完整复制对象，包含get，set
const objGet2 = Object.defineProperties({}, descriptors);
objGet2.bar = 3;
console.log(objGet2.getCount); //4

26.padStart, padEnd 函数-es2017

在字符串前，或者后面追加指定字符串

参数：

targetLenght: 填充后的目标长度

padString:填充的字符串

规则：

1、填充的字符串超过目标长度，会在规定长度时被截断

2、填充字符串太短会以空格填充

3、padString 未传值，以空格填充

作用：

一般用来对齐字符串输出

/**
     *  foo.................|1
        barbar..............|2
        bazbazbaz...........|3
     */
console.log(`${key.padEnd(20, ".")}${value.toString().padStart(2, "|")}`);
原文转自：https://fe.ecool.fun/topic/5e131c75-d26e-4527-8f51-29d842f3c829