1.let
和 const
let
和const
用于声明块级作用域的变量,避免了使用 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.新的数据结构Set
和 Map
:分别用来存储唯一值和键值对的集合,它们都有默认的迭代器对数据集合进行迭代;
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:
- Promise 是一种用于处理异步操作的编程解决方案,它通过链式调用解决了异步编程回调地狱问题,使异步代码的结构更加清晰和可读。Promise 有三种状态:进行中(Pending),已成功(Fulfilled),和已失败(Rejected)。当异步操作成功时,Promise 会进入 已成功 状态,并通过 .then() 方法处理成功的结果;当异步操作失败时,Promise 会进入 已失败 状态,并通过 .catch() 方法处理错误;
- 更详细介绍看地址:理解 promise Promise 简介 Promise 是一种用于处理异步操作的编程解决方案,通过链式调用有效地解 - 掘金 (juejin.cn)
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); // 处理可能的错误
});