es6新增的运算符怎么使用

发布时间：2023-01-28 14:11:05 作者：iii
来源：亿速云阅读：138

ES6新增的运算符怎么使用

ES6（ECMAScript 2015）是JavaScript语言的一次重大更新，引入了许多新的语法特性和功能，其中包括一些新的运算符。这些新增的运算符不仅简化了代码的编写，还提高了代码的可读性和性能。本文将详细介绍ES6新增的运算符及其使用方法。

1. 展开运算符（Spread Operator）

展开运算符（...）是ES6中引入的一个非常有用的运算符，它可以将一个数组或对象展开为多个元素或属性。

1.1 数组展开

展开运算符可以用于数组的展开，将数组中的元素逐个取出。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

1.2 对象展开

展开运算符也可以用于对象的展开，将对象中的属性逐个取出。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

1.3 函数参数展开

展开运算符还可以用于函数参数的展开，将数组中的元素作为参数传递给函数。

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6

2. 剩余参数（Rest Parameters）

剩余参数（...）是ES6中引入的另一个运算符，它允许我们将不定数量的参数表示为一个数组。

2.1 函数参数中的剩余参数

剩余参数可以用于函数参数中，将多余的参数收集到一个数组中。

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

const result = sum(1, 2, 3, 4); // 10

2.2 解构赋值中的剩余参数

剩余参数还可以用于解构赋值中，将剩余的元素收集到一个数组中。

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

3. 指数运算符（Exponentiation Operator）

指数运算符（**）是ES6中引入的一个新的运算符，用于计算一个数的指数。

const result = 2 ** 3; // 8

3.1 指数运算符的优先级

指数运算符的优先级高于乘法运算符和除法运算符。

const result = 2 * 3 ** 2; // 18

3.2 指数运算符的结合性

指数运算符是右结合的，即从右向左计算。

const result = 2 ** 3 ** 2; // 512

4. 可选链运算符（Optional Chaining Operator）

可选链运算符（?.）是ES6中引入的一个新的运算符，用于简化对可能为null或undefined的对象的属性访问。

4.1 对象属性访问

可选链运算符可以用于访问对象的属性，如果对象为null或undefined，则返回undefined。

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

const city = user.address?.city; // 'Wonderland'
const country = user.address?.country; // undefined

4.2 函数调用

可选链运算符还可以用于调用可能为null或undefined的函数。

const user = {
  name: 'Alice',
  greet() {
    console.log('Hello, ' + this.name);
  }
};

user.greet?.(); // 'Hello, Alice'
user.sayGoodbye?.(); // undefined

5. 空值合并运算符（Nullish Coalescing Operator）

空值合并运算符（??）是ES6中引入的一个新的运算符，用于在左侧的值为null或undefined时返回右侧的值。

5.1 基本用法

空值合并运算符可以用于设置默认值。

const value = null;
const result = value ?? 'default'; // 'default'

5.2 与逻辑或运算符的区别

空值合并运算符与逻辑或运算符（||）的区别在于，空值合并运算符只在左侧的值为null或undefined时返回右侧的值，而逻辑或运算符在左侧的值为falsy时返回右侧的值。

const value = 0;
const result1 = value ?? 'default'; // 0
const result2 = value || 'default'; // 'default'

6. 逻辑赋值运算符（Logical Assignment Operators）

逻辑赋值运算符是ES6中引入的一组新的运算符，用于将逻辑运算与赋值操作结合起来。

6.1 逻辑与赋值运算符（`&&=`）

逻辑与赋值运算符（&&=）在左侧的值为truthy时，将右侧的值赋给左侧的变量。

let a = 1;
let b = 2;
a &&= b; // a = 2

6.2 逻辑或赋值运算符（`||=`）

逻辑或赋值运算符（||=）在左侧的值为falsy时，将右侧的值赋给左侧的变量。

let a = 0;
let b = 2;
a ||= b; // a = 2

6.3 空值合并赋值运算符（`??=`）

空值合并赋值运算符（??=）在左侧的值为null或undefined时，将右侧的值赋给左侧的变量。

let a = null;
let b = 2;
a ??= b; // a = 2

7. 位运算符（Bitwise Operators）

ES6中引入了一些新的位运算符，用于处理二进制数据。

7.1 无符号右移运算符（`>>>`）

无符号右移运算符（>>>）将二进制数向右移动指定的位数，左侧空出的位用0填充。

const result = -1 >>> 1; // 2147483647

7.2 位与赋值运算符（`&=`）

位与赋值运算符（&=）将左侧的变量与右侧的值进行位与运算，并将结果赋给左侧的变量。

let a = 5; // 0101
a &= 3; // 0001
console.log(a); // 1

7.3 位或赋值运算符（`|=`）

位或赋值运算符（|=）将左侧的变量与右侧的值进行位或运算，并将结果赋给左侧的变量。

let a = 5; // 0101
a |= 3; // 0111
console.log(a); // 7

7.4 位异或赋值运算符（`^=`）

位异或赋值运算符（^=）将左侧的变量与右侧的值进行位异或运算，并将结果赋给左侧的变量。

let a = 5; // 0101
a ^= 3; // 0110
console.log(a); // 6

8. 字符串模板运算符（Template Literals）

字符串模板运算符（`）是ES6中引入的一个新的运算符，用于简化字符串的拼接和格式化。

8.1 基本用法

字符串模板运算符可以用于拼接字符串，并支持多行字符串。

const name = 'Alice';
const message = `Hello, ${name}!
Welcome to Wonderland.`;
console.log(message);
// Hello, Alice!
// Welcome to Wonderland.

8.2 标签模板

字符串模板运算符还可以与函数结合使用，形成标签模板。

function tag(strings, ...values) {
  console.log(strings); // ["Hello, ", "!"]
  console.log(values); // ["Alice"]
  return 'Tagged';
}

const name = 'Alice';
const result = tag`Hello, ${name}!`;
console.log(result); // 'Tagged'

9. 解构赋值（Destructuring Assignment）

解构赋值是ES6中引入的一个新的语法特性，用于从数组或对象中提取值并赋给变量。

9.1 数组解构

数组解构可以用于从数组中提取值并赋给变量。

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

9.2 对象解构

对象解构可以用于从对象中提取属性并赋给变量。

const { name, age } = { name: 'Alice', age: 25 };
console.log(name); // 'Alice'
console.log(age); // 25

9.3 默认值

解构赋值支持默认值，当提取的值为undefined时，使用默认值。

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

9.4 嵌套解构

解构赋值支持嵌套结构，可以从嵌套的数组或对象中提取值。

const { name, address: { city } } = { name: 'Alice', address: { city: 'Wonderland' } };
console.log(name); // 'Alice'
console.log(city); // 'Wonderland'

10. 箭头函数（Arrow Functions）

箭头函数是ES6中引入的一个新的语法特性，用于简化函数的定义。

10.1 基本用法

箭头函数可以用于定义匿名函数，语法简洁。

const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 3

10.2 隐式返回

箭头函数支持隐式返回，当函数体只有一条语句时，可以省略return关键字。

const double = x => x * 2;
console.log(double(3)); // 6

10.3 `this`绑定

箭头函数没有自己的this，它会捕获所在上下文的this值。

const obj = {
  value: 42,
  getValue: function() {
    return () => this.value;
  }
};

const getValue = obj.getValue();
console.log(getValue()); // 42

11. 类（Classes）

类是ES6中引入的一个新的语法特性，用于定义对象的模板。

11.1 基本用法

类可以用于定义对象的模板，支持构造函数和方法。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person('Alice', 25);
alice.greet(); // Hello, my name is Alice

11.2 继承

类支持继承，可以通过extends关键字实现类的继承。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying`);
  }
}

const bob = new Student('Bob', 20, 'A');
bob.greet(); // Hello, my name is Bob
bob.study(); // Bob is studying

11.3 静态方法

类支持静态方法，可以通过static关键字定义静态方法。

class MathUtils {
  static sum(a, b) {
    return a + b;
  }
}

console.log(MathUtils.sum(1, 2)); // 3

12. 模块（Modules）

模块是ES6中引入的一个新的语法特性，用于组织和封装代码。

12.1 导出

模块可以通过export关键字导出变量、函数或类。

// math.js
export const sum = (a, b) => a + b;
export const PI = 3.14159;

12.2 导入

模块可以通过import关键字导入其他模块的变量、函数或类。

// app.js
import { sum, PI } from './math.js';

console.log(sum(1, 2)); // 3
console.log(PI); // 3.14159

12.3 默认导出

模块可以通过export default关键字导出默认值。

// math.js
export default function sum(a, b) {
  return a + b;
}

12.4 默认导入

模块可以通过import关键字导入默认值。

// app.js
import sum from './math.js';

console.log(sum(1, 2)); // 3

13. Promise

Promise是ES6中引入的一个新的语法特性，用于处理异步操作。

13.1 基本用法

Promise可以用于处理异步操作，支持then和catch方法。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success');
  }, 1000);
});

promise.then(result => {
  console.log(result); // 'Success'
}).catch(error => {
  console.error(error);
});

13.2 Promise链

Promise支持链式调用，可以通过then方法串联多个异步操作。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

promise.then(result => {
  console.log(result); // 1
  return result + 1;
}).then(result => {
  console.log(result); // 2
}).catch(error => {
  console.error(error);
});

13.3 Promise.all

Promise.all可以用于处理多个Promise，当所有Promise都成功时返回结果数组。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3]).then(results => {
  console.log(results); // [1, 2, 3]
}).catch(error => {
  console.error(error);
});

13.4 Promise.race

Promise.race可以用于处理多个Promise，当第一个Promise成功或失败时返回结果。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 500);
});

Promise.race([promise1, promise2]).then(result => {
  console.log(result); // 2
}).catch(error => {
  console.error(error);
});

14. 迭代器（Iterators）

迭代器是ES6中引入的一个新的语法特性，用于遍历数据结构。

14.1 基本用法

迭代器可以通过Symbol.iterator方法定义，支持next方法。

const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 3) {
          return { value: step, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

14.2 生成器（Generators）

生成器是ES6中引入的一个新的语法特性，用于简化迭代器的定义。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterable = generator();

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

15. 集合（Sets）

集合是ES6中引入的一个新的数据结构，用于存储唯一值。

15.1 基本用法

集合可以通过Set构造函数创建，支持add、delete、has等方法。

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(1); // 重复值不会被添加

console.log(set.size); // 3
console.log(set.has(2)); // true

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

15.2 集合遍历

集合支持for...of循环遍历。

const set = new Set([1, 2, 3]);

for (const value of set) {
  console.log(value); // 1, 2, 3
}

16. 映射（Maps）

映射是ES6中引入的一个新的数据结构，用于存储键值对。

16.1 基本用法

映射可以通过Map构造函数创建，支持set、get、delete、has等方法。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);

console.log(map.get('name')); // 'Alice'
console.log(map.has('age')); // true

map.delete('age');
console.log(map.has('age')); // false

16.2 映射遍历

映射支持for...of循环遍历。

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
  // name: Alice
  // age: 25
}

17. 弱集合（WeakSets）

弱集合是ES6中引入的一个新的数据结构，用于存储弱引用的对象。

17.1 基本用法

弱集合可以通过WeakSet构造函数创建，支持add、delete、has等方法。

”`javascript const weakSet = new WeakSet(); const obj1 = {}; const obj2 = {};

weakSet.add(obj1); weakSet.add(obj2);

console.log(weakSet