ECMAScript 6 新特性下篇-优快云博客

ECMAScript 6 新特性续

对象字面量增强

ES6中的对象字面量增强是一种简化对象创建的语法，它可以让我们更方便地定义对象的属性和方法。下面是对ES6对象字面量增强的详细解析与代码示例。

1、简洁属性名

在ES6之前，我们在定义对象属性时，需要将属性名和属性值都写出来。而在ES6中，如果属性名和属性值的变量名一致，我们可以直接省略属性名，只写属性值。

const name = 'John';
const age = 18;

const person = {
  name,
  age,
};

console.log(person); // { name: 'John', age: 18 }

2、计算属性名

在ES6之前，如果我们想要使用变量来定义对象的属性名，我们需要通过方括号[]来包裹变量名，并使用字符串形式来表示属性名。而在ES6中，我们可以直接在对象字面量中使用方括号包裹表达式，来定义一个计算属性名。

const propName = 'name';

const person = {
  [propName]: 'John',
};

console.log(person); // { name: 'John' }

3、简洁方法名

在ES6之前，如果我们想要定义一个对象的方法，需要使用函数表达式或函数声明的形式。而在ES6中，我们可以直接在对象字面量中定义函数，而无需使用function关键字。

const person = {
  sayHi() {
    console.log('Hi!');
  },
};

person.sayHi(); // Hi!

4、简化对象方法

在ES6之前，如果我们想要在一个方法中访问对象的其他属性，我们需要使用this关键字来引用当前对象。而在ES6中，我们可以直接在对象字面量中访问其他属性，而无需使用this关键字。

const name = 'John';

const person = {
  name,
  sayHi() {
    console.log(`Hi, my name is ${name}.`);
  },
};

person.sayHi(); // Hi, my name is John.

ES6的对象字面量增强使得对象的创建更加简洁和语义化，可以更方便地定义属性和方法，提高了代码的可读性和开发效率。

需要注意的是，ES6对象字面量中的方法是定义在原型上的，而不是每个对象实例都会创建一个新的方法副本。这样可以节省内存，提高性能。

对象扩展方法

ES6带来了许多新的特性和语法糖，其中包含了一些新的对象扩展方法。这些方法能够帮助你更方便地进行对象的操作和处理。下面我们将详细解析一些常用的对象扩展方法，并提供相应的代码示例。

1、Object.assign()

Object.assign() 方法用于将源对象的可枚举属性复制到目标对象中，并返回目标对象。它可以用于对象的合并、混入等操作。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

const merged = Object.assign(target, source1, source2);
console.log(merged); // { a: 1, b: 2, c: 3 }

2、Object.keys()

Object.keys() 方法返回一个由对象的可枚举属性名组成的数组。

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys); // ["a", "b", "c"]

3、Object.values()

Object.values() 方法返回一个由对象的可枚举属性值组成的数组。

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]

4、Object.entries()

Object.entries() 方法返回一个由对象的可枚举属性键值对组成的数组。

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]

5、Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法返回一个对象的所有自身属性的描述符。

const obj = {
  foo: 123,
  get bar() {
    return this.foo * 2;
  }
};

const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.foo); // { value: 123, writable: true, enumerable: true, configurable: true }
console.log(descriptors.bar); // { get: [Function: get bar], set: undefined, enumerable: true, configurable: true }

6、Object.fromEntries()

Object.fromEntries() 方法将一个键值对的列表转换为一个对象。

const entries = [["a", 1], ["b", 2], ["c", 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

上述是ES6中一些常用的对象扩展方法的详细解析与代码示例。它们能够极大地简化对象的操作和处理，提高代码的可读性和可维护性。在实际开发中，我们可以根据具体需求选择合适的方法来处理对象。

class 类

ES6引入了class（类）的概念，使得JavaScript的面向对象编程更加直观和易于理解。在此之前，JavaScript实现面向对象编程通常使用构造函数和原型链，而class类提供了更简洁、更直观的语法。

class类的定义方式如下：

class ClassName {
  constructor() {
    // 构造函数
  }

  method1() {
    // 方法1
  }

  method2() {
    // 方法2
  }
}

上述代码定义了一个名为ClassName的类，包含了一个构造函数和两个方法method1和method2。构造函数通过constructor关键字定义，用于创建类的实例对象。方法则直接在类的定义中定义，无需再使用原型链。

类的实例化可以通过new关键字来完成，例如：

const instance = new ClassName();

在类的实例中，可以直接调用类中定义的方法，例如：

instance.method1();
instance.method2();

类还支持继承，通过extends关键字实现。例如：

class ChildClassName extends ParentClassName {
  constructor() {
    super(); // 调用父类的构造函数
  }

  // 子类的其他方法
}

在子类的构造函数中，使用super()来调用父类的构造函数。通过继承，子类可以获得父类的属性和方法，并可以在子类中进行扩展和重写。

除了构造函数和普通方法，ES6的class类还支持静态方法和静态属性的定义。静态方法和静态属性不会被实例继承，而是直接通过类来调用。

静态方法通过在方法前面加上static关键字来定义：

class ClassName {
  static staticMethod() {
    // 静态方法
  }
}

静态属性可以直接在类的定义中定义，并且不需要使用static关键字：

class ClassName {
  static staticProperty = 123; // 静态属性
}

使用静态方法和静态属性时，直接使用类名来调用：

ClassName.staticMethod();
console.log(ClassName.staticProperty);

class类的引入使得JavaScript的面向对象编程更加直观、易于理解和维护。它简化了原型链的使用，提供了更清晰的语法，帮助开发者更好地组织和管理代码。

类的继承

ES6引入了class关键字来定义类，使类的定义和继承更加简洁和直观。类的继承可以通过extends来实现。下面是对ES6类的继承的详细解析和代码示例：

1、定义一个基类（父类）

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

2、定义一个子类，并继承自基类

class Dog extends Animal {
  constructor(name, breed) {
    super(name); //调用父类的构造函数
    this.breed = breed;
  }
  
  bark() {
    console.log('Woof Woof!');
  }
}

3、创建对象并调用方法

let dog = new Dog('Bobby', 'Golden Retriever');
dog.sayHello(); //输出 "Hello, my name is Bobby"
dog.bark(); //输出 "Woof Woof!"

在上面的示例中，Animal类是一个基类（父类），它有一个构造函数和一个sayHello方法。Dog类是一个子类，它继承自Animal类，并且有自己的构造函数和bark方法。

在子类的构造函数中，需要调用super方法来调用父类的构造函数。通过super关键字，可以访问父类的属性和方法。

通过继承，子类可以继承父类的属性和方法，并且可以添加自己的属性和方法。

Set 数据结构

ES6引入了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

1、创建Set

可以通过new关键字创建一个Set对象，示例如下：

const set = new Set();

2、添加元素

可以通过add()方法向Set中添加元素，示例如下：

set.add(1);
set.add(2);
set.add(3);

也可以一次性添加多个元素，示例如下：

set.add(1).add(2).add(3);

3、删除元素

可以通过delete()方法删除Set中的元素，示例如下：

set.delete(2);

4、判断元素是否存在

可以使用has()方法判断Set中是否存在某个元素，示例如下：

console.log(set.has(2));  // false

5、获取元素个数

可以使用size属性获取Set中元素的个数，示例如下：

console.log(set.size);  // 2

6、遍历Set

Set有多种遍历方法，包括forEach、for...of和扩展运算符(...)，示例如下：

set.forEach(value => console.log(value));
for(let value of set) {
  console.log(value);
}
const arr = [...set];
console.log(arr);

7、Set中的元素是唯一的

Set中的元素是唯一的，不会出现重复的值，示例如下：

const set = new Set([1, 2, 3, 3]);
console.log(set);  // Set {1, 2, 3}

注意：Set中NaN和NaN是相等的，即NaN只能出现一次。

const set = new Set([NaN, NaN]);
console.log(set);  // Set {NaN}

8、Set的应用场景

Set的应用场景有很多，比如去除数组中的重复元素、判断某个元素是否出现过等。

const arr = [1, 2, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr);  // [1, 2, 3, 4, 5]

const set = new Set(arr);
console.log(set.has(5));  // true

Map 数据结构

ES6中的Map数据结构是一种有序的键值对的集合。它类似于对象，但有一些不同之处。

Map数据结构的键可以是任何数据类型，包括基本类型和对象。
Map中的键值对按照插入的顺序进行存储，并且可以迭代。
Map中的键是唯一的，不会出现重复的键。
与对象不同，Map数据结构是可迭代的，可以直接使用forEach()方法进行遍历。
Map数据结构的size属性可以获取Map中键值对的数量。

下面是一些示例代码，演示了Map数据结构的使用方法：

// 创建一个空的Map
const map = new Map();

// 添加键值对
map.set('name', 'John');
map.set(1, 'One');
map.set({}, 'Object');

// 获取值
console.log(map.get('name'));   // 输出：John
console.log(map.get(1));        // 输出：One
console.log(map.get({}));       // 输出：Object

// 检查是否存在某个键
console.log(map.has('name'));   // 输出：true
console.log(map.has('age'));    // 输出：false

// 删除某个键值对
map.delete(1);

// 遍历Map
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 获取Map的大小
console.log(map.size);          // 输出：2

上述代码中，我们首先创建了一个空的Map。然后使用set()方法添加了三个键值对。我们可以使用get()方法获取键对应的值，使用has()方法检查是否存在某个键，使用delete()方法删除键值对。使用forEach()方法可以遍历Map，并且获取键和值。最后，我们使用size属性获取Map中键值对的数量。

Symbol

ES6引入了一种新的原始数据类型Symbol，它表示一种独一无二的值。它的主要用途是为对象属性定义唯一的键名，防止命名冲突。

Symbol值通过Symbol()函数生成，每次调用Symbol()函数都会返回一个新的独一无二的Symbol值。

以下是Symbol的一些特点和使用方法：

Symbol值独一无二，不可重复

let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2); // false

Symbol可以接受一个可选的字符串参数，用于描述Symbol的信息
```
let s = Symbol('foo');
console.log(s.toString()); // Symbol(foo)
```

Symbol值可以用作对象属性的键名

let obj = {};
let s = Symbol();
obj[s] = 'value';
console.log(obj[s]); // value

使用Symbol定义的属性不会被常规的遍历方法遍历到，但是可以使用Object.getOwnPropertySymbols方法获取
```
let obj = {
  [Symbol('key')]: 'value'
};
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(key)]
```

Symbol值可以用作常量，保证不会和其他值冲突

const RED = Symbol();
const GREEN = Symbol();

function printColor(color) {
  if (color === RED) {
    console.log('red');
  } else if (color === GREEN) {
    console.log('green');
  } else {
    console.log('unknown color');
  }
}

printColor(RED); // red

Symbol可以定义一些内部使用的方法或属性，以防止外部访问

let obj = {
  [Symbol('secret')]: 'password',
  getSecret: function() {
    return this[Symbol('secret')];
  }
};

console.log(obj.getSecret()); // undefined

for…of 循环

ES6引入了一个新的循环语法，称为for...of循环。它使得遍历可迭代对象（如数组和字符串）变得更加简单和直观。在这篇文章中，我们将详细解析for...of循环的特性，并提供一些代码示例。

1、遍历数组

使用for...of循环遍历数组非常简单。它会依次将数组中的每个元素赋值给指定的变量。

let myArray = [1, 2, 3, 4, 5];
for(let value of myArray) {
    console.log(value);
}

输出结果：

2、遍历字符串

同样地，我们也可以使用for...of循环遍历字符串。它会将字符串中的每个字符赋值给指定的变量。

let myString = "Hello";
for(let char of myString) {
    console.log(char);
}

输出结果：

H
e
l
l
o

3、遍历可迭代对象

除了数组和字符串，for...of循环还可以遍历其他具有迭代器的可迭代对象，如Set和Map。

let mySet = new Set([1, 2, 3, 4, 5]);
for(let value of mySet) {
    console.log(value);
}

输出结果：

let myMap = new Map([['name', 'John'], ['age', 30]]);
for(let [key, value] of myMap) {
    console.log(key, value);
}

输出结果：

name John
age 30

4、跳出循环

使用for...of循环，我们可以使用break语句提前跳出循环。

let myArray = [1, 2, 3, 4, 5];
for(let value of myArray) {
    if(value === 3) {
        break;
    }
    console.log(value);
}

输出结果：

1
2

5、跳过当前迭代

使用for...of循环，我们可以使用continue语句跳过当前迭代。

let myArray = [1, 2, 3, 4, 5];
for(let value of myArray) {
    if(value === 3) {
        continue;
    }
    console.log(value);
}

输出结果：

需要注意的是，for...of循环不能遍历普通对象。如果你想遍历对象的属性，可以使用Object.keys()等方法先转换为数组。

总结：

for...of循环可以遍历数组、字符串和具有迭代器的可迭代对象。
使用break语句可以提前跳出循环。
使用continue语句可以跳过当前迭代。