ES6 新语法和数组方法：轻松理解现代 JavaScript

前端

2023-12-30 20:48:31

ES6 新语法

ES6 中最重要的新语法包括：

let 和 const： let 和 const 用于声明变量。let 声明的变量可以在块作用域内重新赋值，而 const 声明的变量则不能重新赋值。
解构赋值： 解构赋值是一种将对象或数组中的值分配给变量的简便方法。
箭头函数： 箭头函数是一种简短的匿名函数，它使用 => 符号来定义。
展开运算符 ...： 展开运算符可以将数组或对象中的值展开成一个列表。

数组方法

ES6 中还引入了许多新的数组方法，包括：

map()： map() 方法将数组中的每个元素都映射到一个新值，并返回一个新的数组。
filter()： filter() 方法将数组中的每个元素都筛选一遍，并返回一个只包含通过筛选的元素的新数组。
reduce()： reduce() 方法将数组中的所有元素都累积成一个单一的值。

示例

以下示例演示了如何使用 ES6 新语法和数组方法：

// 使用 let 和 const 声明变量
let name = "John";
const age = 30;

// 使用解构赋值从对象中提取值
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const { name, age } = person;

// 使用箭头函数定义一个函数
const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// 使用展开运算符将两个数组合并成一个新的数组
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const numbers = [...numbers1, ...numbers2];

// 使用 map() 方法将数组中的每个元素都映射到一个新值
const doubledNumbers = numbers.map((number) => number * 2);

// 使用 filter() 方法将数组中的每个元素都筛选一遍，并返回一个只包含通过筛选的元素的新数组
const evenNumbers = numbers.filter((number) => number % 2 === 0);

// 使用 reduce() 方法将数组中的所有元素都累积成一个单一的值
const sumOfNumbers = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

// 输出结果
console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
greet("Jane");
console.log(numbers);
console.log(doubledNumbers);
console.log(evenNumbers);
console.log(`Sum of numbers: ${sumOfNumbers}`);