ES6 新特性

78 阅读4分钟

1.letconst

  • letconst 用于声明块级作用域的变量,避免了使用 var 声明函数作用域变量导致变量提升的问题,const 用于声明常量,给常量赋值后不能再重新赋值,但它声明的对象和数组可以修改元素和属性;
为什么 const 可以修改数组和对象的值
  • 因为对象和数组是引用数据类型,const 保证了变量名引用的地址不变,但不限制修改地址指向的内容。
    let name = 'Alice';
    if (true) {
      let age = 25; // 只能在这个块级作用域中访问
    }
    console.log(age); // 报错,age 在块级作用域外不可访问
    onst PI = 3.14159;
    PI = 2; // 报错,PI 的值不能被重新赋值
    ```

2. 展开运算符: 用于展开数组或对象中的元素,可用于数组和对象合并,求数组最大值和最小值;函数调用中传递多个参数,用扩展运算符以数组的形式接收传递过来的所有参数;

```
// 求数组最大值,最小值
const arr = [2,1,3]
// ...arr === 2,1,3
console.log(Math.max(...arr) // 3
console.log(Math.min(...arr) // 1
// 数组合并
const arr1 = [1, 2];
const arr2 = [5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 5, 6]
 // 对象克隆 
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 函数调用中传递多个参数,用扩展运算符以数组的形式接收传递过来的所有参数
function add(...arr) {
        console.log(arr) // [2,3]
    }
    const numbers = [4, 38]
    add(2, 3)
```

3.解构赋值: 它可以从数组或对象中提取值并赋值给变量,从而简化代码;

// 数组解构
   const [a, b] = [1, 2];
   console.log(a); // 1
   console.log(b); // 2
// 对象解构
const person = {name:"Alice",age:25}
const {name,age } = person
console.log(name) // "Alice"
const {name:newName} = person // 解构后重新赋值
console.log(newName) // "Alice"
// 解构数组对象
const arr = [{name:"Alice",age:25}]
const [{age}] = arr
console.log(age) // 25

4.箭头函数:

  • 语法比传统函数更加简洁, 省略了 function 关键字,使用简写的方式可省略花括号和 reture 语句;
  • 箭头函数内的 this 是指向函数外部,引用函数外部的变量
  • 箭头函数内没有arguments对象,可以使用剩余运算符以数组的形式接收所有形参;
  • 不可以使用new 关键字实例化创建构造函数,否则会抛出错误;
// 箭头函数,只有一个形参时,可省略小括号
const square = x => x * x;
 // 1. 利用箭头函数加剩余运算符来求和
        const getSum = (...arr)=>{
            let sum = 0;
            for(let i=0; i<arr.length;i++){
                sum +=arr[i]
            }
            return sum
        }
       const result = getSum(2,3,4)
       console.log(result) // 9

5.模板字符串: 允许在字符串中使用反引号加${} 插入变量

const name = 'Alice'; const greeting = `Hello, ${name}!`; // 使用反引号和 ${} 进行插值

6. 模块化语法:使用 export 导出和 import 导入可以将同一个文件中的代码分别导入到其它的文件中,使用 export default导出整个文件;

// 导出
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// 导入
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5

7.class 类构造器: 类语法在本质上是 js 的原型继承机制的语法糖,通过 constructor 方法初始化构造器的属性,并对属性和方法进行封装,使用 new 关键子实例化对象,让js面向对象编程看起来更直观;

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."

8.新的数据结构SetMap:分别用来存储唯一值和键值对的集合,它们都有默认的迭代器对数据集合进行迭代;

const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // "value"
const set = new Set();
set.add(1);
set.add(1); // 重复的值不会被添加
console.log(set.size); // 1

9.对象中属性和方法简写:如果对象中属性名和赋值的变量名相同时可以简写,对象中添加方法,可以省略 function 关键字

let name = "ChatGPT";
let age = 3;

let obj = { name, age };
console.log(obj); // { name: "ChatGPT", age: 3 }
let obj = {
  sayHello() {
    console.log("Hello!");
  }
};

obj.sayHello(); // 输出: Hello!

10.对象新增方法:

  • Object.assign() : 用于对象合并,将素有可枚举属性的值从一个或多个源对象复制到目标对象中,并返回目标对象;
  • Object.keys() :取出对象的属性名合并成一个数组并返回该数组;
  • Object.values() :取出对象的属性值合并成一个数组并返回该数组;
  • Object.entries(): 取出对象的属性值和属性值合并成一个个数组返回一个二维数组;
  • for of :循环对象,可直接得到对象属性值;
// assign 方法
let obj1 = { a: 1 }; 
let obj2 = { b: 2 }; 
let combined = Object.assign(obj1, obj2); console.log(combined); // { a: 1, b: 2 }

// keys 和 entries 方法
const obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
//  ["foo", "bar"]
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

10.数组新增方法:

  • find() 用于从数组中查找出第一个符合条件的元素,找到了就返回,没有就返回 undefined;
  • findIndex() 用于从数组中查找出第一个符合条件的元素的索引,找到了就返回 索引,没有就返回 undefined;
  • includes() 用于判断数组是否包含给定的值,返回true 和 false;
let numbers = [1, 2, 3, 4, 5]; let firstEven = numbers.find(n => n % 2 === 0); // 2

11.Promise:

const promise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Operation succeeded');
    } else {
      reject('Operation failed');
    }
  }, 1000);
});

promise
  .then(result => {
    console.log(result); // 输出: "Operation succeeded"
  })
  .catch(error => {
    console.error(error); // 处理可能的错误
  });