JS-ES6

ES6

简介

ECMAScript6，简称ES6，是javaScript语言的一次重大更新，ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、结构、默认值参数、模块系统等等Vue3中大量使用了ES6语法

ES6的变量和

n 模板字符串

let和const

• let声明的变量
  • 不能重复声明
  • 有块级作用域，非函数的花括号遇见let会有块级作用域
  • 不会预解析进行变量提升
  • 定义的全局变量不会作为window的属性
• const声明的常量
  • 用于常量声明，一旦赋值就无法从新赋值相当于java中的final
  • 其余特性与let相同

变量提升：执行代码时将变量和函数的声明提升到它们作用域的顶部，使得域内均可访问这些变量和函数，但是赋值操作不会被提升

模板字符串

• 模板字符串运行在字符串中嵌入常量，使用反引号包裹，变量使用${}包裹

let name = "Alice";
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);

ES6的解构表达式

ES6的结构赋值是一种便捷的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号{}表示对象，方括号[]表示数组

数组解构

let [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2

对象解构

//在对象结构时，是通过变量名来进行赋值的，而不是顺序
let { x, y } = { x: 1, y: 2 };
console.log(x); // 输出 1
console.log(y); // 输出 2

默认值

let [a = 1, b = 2] = [3];
console.log(a); // 输出 3
console.log(b); // 输出 2

剩余项

let [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 输出 1
console.log(rest); // 输出 [2, 3, 4]

嵌套结构

let { x, y, z: { a, b } } = { x: 1, y: 2, z: { a: 3, b: 4 } };
console.log(x); // 输出 1
console.log(y); // 输出 2
console.log(a); // 输出 3
console.log(b); // 输出 4

ES6的箭头函数

箭头函数不能用作构造函数（不能使用new关键字实例化），也不能使用arguments对象，但可以使用rest参数（…args）来代替。箭头函数的作用域是词法作用域，它们继承父级作用域的this值。

// 传统函数表达式
const traditionalFunction = function (a, b) {
  return a + b;
};

// 箭头函数
//方法体中只有一行代码{}可以不写
const arrowFunction = (a, b) => a + b;

// 无参数箭头函数
const greet = () => {
  return "Hello!";
};

// 单参数箭头函数
//参数列表中有且只有一个参数()可以不写
const square = x => x * x;

// 多行箭头函数
const multiLineArrowFunction = (a, b) => {
  const sum = a + b;
  return sum;
};

// 使用箭头函数作为回调函数
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);

ES6的rest和spread

Rest参数

Rest参数允许将不定数量的参数表示为一个数组。在函数声明中，用三个点（…）来表示rest参数。

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10

//在这个例子中，sum函数使用rest参数...args来接收传递给函数的所有参数，并将它们作为一个数组来处理。

Spread操作符

Spread操作符允许在函数调用/数组字面量/对象字面量中展开数组或对象。在这种情况下，用三个点（…）来表示spread操作符。

在函数调用中使用Spread操作符

function multiply(x, y, z) {
  return x * y * z;
}

const numbers = [1, 2, 3];

console.log(multiply(...numbers)); // 输出 6

//在这个例子中，multiply函数接受三个参数，我们使用spread操作符将数组numbers中的元素展开作为函数的参数。

---

在数组字面量中使用Spread操作符

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // 输出 [1, 2, 3, 4, 5]

//在这个例子中，我们使用spread操作符将一个数组展开到另一个数组中。

---

在对象字面量中使用Spread操作符

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }


//在这个例子中，我们使用spread操作符将一个对象展开到另一个对象中。

ES6的对象创建和拷贝

对象创建的语法糖

对象字面量的增强
ES6允许在对象字面量中直接使用变量名作为对象的属性名，而不需要重复书写。例如：

let name = 'Alice';
let age = 30;

let person = { name, age };

计算属性名
ES6允许在对象字面量中使用表达式作为属性名。例如：

let propKey = 'foo';
let obj = {
    [propKey]: 'bar'
};

对象解构赋值
ES6允许从对象中提取属性，将属性赋值给变量。例如：

let { x, y } = { x: 1, y: 2 };

Object.assign
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。这样可以方便地合并对象的属性。

let obj1 = { a: 1 };
let obj2 = { b: 2 };
let mergedObj = Object.assign({}, obj1, obj2);

对象方法简写
ES6允许在对象字面量中使用简写方法名。例如：

let obj = {
    method() {
        return 'Hello';
    }
};

对象的深拷贝和浅拷贝

浅拷贝是创建一个引用，深拷贝是创建一个新的对象

浅拷贝（Shallow Copy）
浅拷贝是指创建一个新对象，新对象的属性值和原始对象的属性值相同，但如果属性值是对象，新对象和原始对象的属性值将引用同一个对象。换句话说，浅拷贝只复制对象的第一层，而不会复制嵌套对象。

在 ES6 中，可以使用对象展开运算符（Spread Operator）或Object.assign()方法来进行浅拷贝，例如：

// 使用对象展开运算符进行浅拷贝
const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObj };

// 使用Object.assign()进行浅拷贝
const shallowCopy2 = Object.assign({}, originalObj);

深拷贝（Deep Copy）
深拷贝是指创建一个新对象，新对象的属性值和原始对象的属性值完全独立，包括嵌套对象。换句话说，深拷贝会递归复制所有层级的属性，确保新对象和原始对象完全独立。

在 ES6 中，实现深拷贝比较复杂，可以使用第三方库（如Lodash的_.cloneDeep()方法）或自行编写递归函数来实现。以下是一个简单的深拷贝示例：

function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }

    const newObj = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        newObj[key] = deepCopy(obj[key]);
    }

    return newObj;
}

const originalObj = { a: 1, b: { c: 2 } };
const deepCopiedObj = deepCopy(originalObj);

ES6的模块化处理

无论何种方式导入，导入的内容都会被当成一个对象处理
在导入和导出的时候可以用解构表达式批量导出/导入

导出（Export）

命名导出（Named Exports）：

// 导出单个变量或函数
export const myVar = 10;
export function myFunction() {
    // 函数代码
}

默认导出（Default Export）：

// 导出默认值，若不指明则默认会导出
//默认导出在一个js只能导出1个
const myVar = 10;
export default myVar;

导入（Import）

导入命名导出：

// 导入单个变量或函数
import { myVar, myFunction } from './myModule';

导入默认导出：

// 导入默认值
import myVar from './myModule';

混合导入（Mixing Named and Default Exports）：

// 导入默认值和命名导出
import myVar, { myFunction } from './myModule';

导入所有导出：

// 导入所有导出
import * as myModule from './myModule';

动态导入（Dynamic Import）：

// 动态导入模块
const module = await import('./myModule');

使用模块化处理：

// 在文件中使用导入的变量或函数
//这里使用了解构表达式
import { myVar, myFunction } from './myModule';
console.log(myVar);
myFunction();