ES6 基础

本文将介绍 JavaScript ES6 的基础知识，重点关注数组、对象、字符串和函数的新增方法。我们将提供示例代码来演示这些方法的使用。

数组（Array）

ES6 引入了一些有用的数组方法，使得数组的操作更加方便和强大。

1. Array.from()

Array.from() 方法用于将一个类似数组或可迭代对象转换为一个新的数组实例。

const str = "Hello";
const arr = Array.from(str);
console.log(arr); // ["H", "e", "l", "l", "o"]

2. Array.find()

Array.find() 方法返回数组中满足测试函数条件的第一个元素的值。

const numbers = [1, 2, 3, 4, 5];
const even = numbers.find((num) => num % 2 === 0);
console.log(even); // 2

3. Array.includes()

Array.includes() 方法用于判断数组是否包含某个特定的元素，并返回布尔值。

const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

对象（Object）

ES6 为对象新增了一些有用的特性，使得对象的创建和操作更加便捷。

1. 属性简写

在 ES6 中，当对象字面量的属性和变量名相同时，可以使用属性简写。

const name = "Alice";
const age = 25;

const person = {
  name,
  age,
};

console.log(person); // { name: "Alice", age: 25 }

2. 对象解构赋值

ES6 允许使用解构赋值从对象中提取属性并赋值给变量。

const person = {
  name: "Alice",
  age: 25,
  city: "New York",
};

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

3. 对象扩展运算符

对象扩展运算符（...）用于将一个对象的所有可枚举属性复制到另一个对象中。

const obj1 = { foo: 1, bar: 2 };
const obj2 = { ...obj1, baz: 3 };

console.log(obj2); // { foo: 1, bar: 2, baz: 3 }

字符串（String）

ES6 提供了一些新的字符串方法，使得对字符串的处理更加灵活和高效。

1. 模板字符串

模板字符串允许在字符串中插入表达式，并支持多行字符串。

const name = "Alice";
const message = `Hello, ${name}!
Welcome to our website.
`;

console.log(message);
// 输出:
// Hello, Alice!
// Welcome to our website.

2. startsWith() 和 endsWith()

startsWith() 方法用于判断字符串是否以指定的子字符串开头，endsWith() 方法用于判断字符串是否以指定的子字符串结尾。

const str = "Hello, World!";

console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true

3. includes()

includes() 方法用于判断字符串是否包含指定的子字符串，并返回布尔值。

const str = "Hello, World!";

console.log(str.includes("World")); // true
console.log(str.includes("Goodbye")); // false

函数（Function）

ES6 引入了一些函数的新增方法，使得函数的定义和调用更加灵活和简洁。

1. 箭头函数

箭头函数是一种更简洁的函数定义方式，它没有自己的 this，并且不能用作构造函数。

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

2. 默认参数值

ES6 允许在函数定义时为参数指定默认值。

function greet(name = "Anonymous") {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Anonymous!
greet("Alice"); // Hello, Alice!

3. 扩展运算符

扩展运算符（...）用于将一个可迭代对象展开成多个参数。

const numbers = [1, 2, 3, 4, 5];

console.log(Math.max(...numbers)); // 5

以上是一些 ES6 引入的数组、对象、字符串和函数的新增方法和特性。通过学习和应用这些方法，你可以更高效地处理和操作 JavaScript 中的数据和函数。希望本文能对你有所帮助！