es6新特性

1.声明方式 

        1.变量声明

         新增了let变量声明方式，这种方式相比传统的var限制了变量声明的作用域，它声明的变量只在代码块内可用，不存在变量提升的情况。这个变量声明方式基本上取代了var。

        2.常量声明

        新增了const常量声明方式

2.字符串

1.新方法

        includes()判断是否包含某字符

        startsWith()判断是否以某字符开头

        endsWith()判断是否某字符结束

let str = "Hello, world!";  
  
console.log(str.includes("world")); // 输出: true  
console.log(str.includes("JavaScript")); // 输出: false  
  
console.log(str.startsWith("Hello")); // 输出: true  
console.log(str.startsWith("hello")); // 注意大小写，输出: false  
  
console.log(str.endsWith("world!")); // 输出: true  
console.log(str.endsWith("!")); // 只判断最后一个字符，输出: true  
console.log(str.endsWith("World!")); // 注意大小写，输出: false  

 2.模板字符串

        用反引号包裹的字符串就是模板字符串，模板字符串内可以插入变量

3.新的遍历对象方法

        for of方法可以遍历对象，通过迭代器实现。这种写法相比传统for循环会失去下标信息，不过可以更清晰的展示当前正在操作的元素。

let fruits = ['Apple', 'Banana', 'Cherry'];  
  
for (let fruit of fruits) {  
  console.log(fruit);  
}  
  
// 输出结果：  
// Apple  
// Banana  
// Cherry

4.箭头函数

        箭头函数使函数的写法变得更简便了，不再需要function关键字，部分情况课省略return关键字。

const multiplyAndAdd = (a, b, c) => {  
  const result = a * b;  
  return result + c;  
};  
  
console.log(multiplyAndAdd(2, 3, 1)); // 输出: 7

// 只有一个参数的箭头函数  
const square = x => x * x;  
console.log(square(4)); // 输出: 16

// 无参数的箭头函数  
const sayHello = () => 'Hello, World!';  
console.log(sayHello()); // 输出: Hello, World!

        当函数无参数时需要一个括号，只有一个参数时括号可以省略，一个以上参数时不能省略，有多行语句时需要用大括号包裹，只有一行语句时无需return。

        箭头函数中的this在当前对象中找不到变量时会自动向上一级寻找。

5.解构

1. 数组解构

        解构的含义是将对象或数组中的值提取到一个个单独的变量中。

        解构可以直接从数组中提取值，也可以跳过某些指只提取部分值。

const [first, second, third] = [1, 2, 3];  
console.log(first); // 输出: 1  
console.log(second); // 输出: 2  
console.log(third); // 输出: 3
const [, , third1] = [1, 2, 3];  
console.log(third1); // 输出: 3

        在列表中的元素数量大于接收元素的值的数量时可以将剩余的元素都收集到一个数组中。

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

 2.对象解构

        也可以对对象进行解构：

const person = {  
  name: "Alice",  
  age: 30,  
  job: "Engineer"  
};  
  
const { name, age } = person;  
console.log(name); // 输出: Alice  
console.log(age); // 输出: 30

        结构对象时注意接收的名字必须和对象内的名字向对应才行。

3.嵌套解构

        即使有对象有很多层我们也可以嵌套解构，如下即使时嵌套的代码也可以全部摊开。

const user = {  
  id: 1,  
  profile: {  
    name: "Bob",  
    age: 25,  
    address: {  
      street: "123 Elm St",  
      city: "Somewhere"  
    }  
  }  
};  
  
const { profile: { name, address: { city } } } = user;  
console.log(name); // 输出: Bob  
console.log(city); // 输出: Somewhere

6.扩展运算符

        扩展运算符就是...，是一种在数组或对象字面量中使用的语法，它允许一个数组表达式或字符串在需要多个参数（用于函数调用）或多个元素（用于数组字面量）或多个属性（用于对象字面量）的地方展开。扩展运算符只能用于可迭代对象（如数组、字符串）且只会复制对象自身的可枚举属性。

        在数组中使用时，扩展运算符可以将一个数组的元素展开为另一个数组的元素。

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5, 6];  
  
console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]

        也可以展开作为数组长度个参数使用

function sum(a, b, c) {  
  return a + b + c;  
}  
  
const numbers = [1, 2, 3];  
const result = sum(...numbers);  
  
console.log(result); // 输出: 6

        es6中的扩展运算符还不能给对象使用，不过在后续更新中已经实现，可以移步这里查看。

7.Symbol类型

1.简介

        symbol类型是ES6中新增的基本数据类型，表示独一无二的值。每个symbol值都是唯一的，这意呀着即使两个symbol值的描述相同，它们也是不相等的。symbol这个特性使得它在需要唯一标识符的场景下非常有用，比如对象的属性名、常量名等，从而避免了使用可能与其他属性名冲突的字符串。

let sym1 = Symbol("description");  
let sym2 = Symbol("description");  
  
console.log(sym1 === sym2); // false，因为每个 Symbol 都是唯一的

const MY_SYMBOL = Symbol("my symbol");  
  
let obj = {};  
obj[MY_SYMBOL] = "Hello!";  
  
console.log(obj[MY_SYMBOL]); // "Hello!"  
  
// 注意，直接使用字符串作为键名无法访问到 Symbol 属性的值  
console.log(obj["MY_SYMBOL"]); // undefined

  2.相关方法

        使用Symbol作为键的属性时，你需要采用特殊的方法进行遍历，因为普通的for...in循环和Object.keys()方法不会遍历到Symbol属性。

        使用Object.getOwnPropertySymbols()可以获取到Symbol属性

const obj = {  
  [Symbol('a')]: 'hello',  
  [Symbol('b')]: 'world',  
  normal: 'prop'  
};  
  
const symbols = Object.getOwnPropertySymbols(obj);  
  
for (let sym of symbols) {  
  console.log(sym, obj[sym]);  
}  
  
// 输出:  
// Symbol(a) hello  
// Symbol(b) world

8.set对象和map对象

        它们提供了存储唯一值或键值对的能力。

        set成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。此数据结构会自动去重，排序就是插入时的顺序。可以通过 add(value) 方法添加成员，delete(value) 方法删除成员，has(value) 方法判断成员是否存在。

const mySet = new Set();  
  
mySet.add(1);  
mySet.add(2);  
mySet.add(2); // 重复的值不会被添加  
  
console.log(mySet.has(1)); // 输出: true  
console.log(mySet.size); // 输出: 2  
  
mySet.delete(2);  
console.log(mySet.has(2)); // 输出: false  
  
// 遍历 Set  
for (let value of mySet) {  
  console.log(value);  
}

        Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。不过一个键只能映射一个值，键不能重复。键和值可以是任何类型。

const myMap = new Map();  
  
myMap.set('key1', 'value1');  
myMap.set('key2', 'value2');  
  
console.log(myMap.has('key1')); // 输出: true  
console.log(myMap.get('key2')); // 输出: 'value2'  
  
myMap.delete('key1');  
console.log(myMap.has('key1')); // 输出: false  
  
// 遍历 Map  
for (let [key, value] of myMap) {  
  console.log(key + ' = ' + value);  
}  
  
// 或者使用 Map 的 keys(), values() 和 entries() 方法  
for (let key of myMap.keys()) {  
  console.log(key);  
}  
  
for (let value of myMap.values()) {  
  console.log(value);  
}  
  
for (let [key, value] of myMap.entries()) {  
  console.log(key + ' = ' + value);  
}

9.Promise

1.简介

        Promise 对象代表了一个异步操作的最终完成（或失败）状态及其结果值。

        promise有三种状态：等待（pending）成功（fulfilled）失败（rejected）

        当异步操作成功时，Promise 被解决（resolve），并将结果作为参数传递；当异步操作失败时，Promise 被拒绝（reject），并将错误作为参数传递。

2.用法

        此代码可以很清晰的展现出使用promise处理异步时的代码结构

let promise = new Promise(function(resolve, reject) {  
  // 异步操作  
  setTimeout(() => {  
    if (/* 操作成功 */) {  
      resolve(value); // value 是传递给成功回调的参数  
    } else {  
      reject(error); // error 是传递给失败回调的参数  
    }  
  }, 1000);  
});

3.异常处理

Promise 提供了 .then()、.catch() 和 .finally() 方法来指定异步操作成功、失败和完成时执行的回调函数。

• .then(onFulfilled, onRejected)：onFulfilled 是当 Promise 被解决时调用的函数；onRejected 是当 Promise 被拒绝时调用的函数。这两个参数都是可选的。
• .catch(onRejected)：相当于 .then(null, onRejected)，用于指定发生错误时的回调函数。
• .finally(onFinally)：无论 Promise 最终的完成状态如何，都会执行 onFinally 指定的回调函数

promise.then(  
  value => console.log(value),  
  error => console.error(error)  
).catch(  
  error => console.error('捕获到错误：', error)  
).finally(  
  () => console.log('操作完成，无论成功或失败。')  
);

 

10.总结

        ES6无疑是一次里程碑式的重大更新，它彻底革新了JavaScript的代码编写范式，以前所未有的方式增强了这门语言的功能性与表现力。通过引入一系列创新特性，ES6不仅极大地提升了编程效率，还显著优化了代码的可读性、可维护性和可扩展性。这一更新不仅推动了模块化编程的蓬勃发展，使得代码的组织与管理变得更加清晰与高效，还深刻改善了异步编程的体验，让复杂的异步流程变得简洁明了，易于控制。正是这些革命性的变化，使得JavaScript从一种脚本语言蜕变成为了一种功能强大、灵活多变的编程语言，赢得了全球开发者的广泛赞誉与青睐。