浅谈ES6部分新特性之let、const与解构

今天哈士奇和大家分享一下哈士奇所了解到的一些ES6的新特性，以后学到以后会逐步更新的

一、let、const与var的区别

请参照之前哈士奇给大家的分享：let、const、var的区别

在这里哈士奇要做出一些补充，首先是和大家一起复习一下原始类型和引用类型

原始类型与引用类型：JavaScript 数据的两个主要分类

在JavaScript中，数据类型可以分为两大类：原始类型（基本类型）和引用类型。理解它们之间的区别对于有效地使用JavaScript语言至关重要。

原始类型（基本类型）：

1. 字符串（String）： 表示文本数据。例如：let name = 'John';

2. 数字（Number）： 表示数值，包括整数和浮点数。例如：let age = 25;

3. 布尔（Boolean）： 表示逻辑值，即 true 或 false。例如：let isAdult = true;

4. undefined： 表示未定义或未初始化的值。例如：let x;

5. null： 表示空值或无值。例如：let y = null;

6. Symbol： 表示唯一的标识符。例如：const uniqueKey = Symbol('unique');

这些原始类型是不可变的，一旦创建，它们的值就不能被修改。任何对原始类型的操作都会返回一个新的值，而不会修改原始值本身。

引用类型：

1. 对象（Object）： 表示复杂数据结构，可以包含多个键值对。例如：

   let person = { name: 'John', age: 25 };

2. 数组（Array）： 是一种特殊的对象，用于按顺序存储数据。例如：

   let numbers = [1, 2, 3];

3. 函数（Function）： 是一种可调用的对象，可以包含可执行的代码块。例如：

   function add(a, b) {
       return a + b;
   }

引用类型是可变的，这意味着它们的内容可以被修改。对于对象和数组，可以添加、删除或修改属性或元素。对于函数，可以修改其内部实现或重新赋值。

区别和注意事项：

1. 赋值方式不同： 原始类型通过值复制，而引用类型通过引用复制。

   let a = 5;
   let b = a; // 原始类型通过值复制

   let obj1 = { name: 'John' };
   let obj2 = obj1; // 引用类型通过引用复制

2. 不可变性： 原始类型是不可变的，任何操作都会返回新值。引用类型可以被修改，需谨慎操作以避免意外行为。

3. 存储方式： 原始类型存储在栈内存中，引用类型存储在堆内存中，而变量中存储的是引用地址。

4. 传递方式： 在函数参数传递时，原始类型是按值传递，而引用类型是按引用传递。

那么接下来问题来了

const obj = {
 name:'范总'
 
}
obj.name = '宝总';
console.log(obj)

这份代码的传递的值是什么呢？是范总呢？还是宝总呢？答案是宝总。这就是哈士奇想要为大家补充的点！！在es6中，const所声明的原型是一旦创建就无法修改的，但是const创建的引用类型虽然说不能修改，但是引用类型的属性值是可以修改的。实际上的obj的name的引用地址由于改变了值而导致了变化！！

二、解构

在JavaScript中，解构赋值是一种方便而强大的特性，允许我们从数组或对象中提取值并赋给变量。这种语法糖使得操作数据变得更简洁、更灵活。让我们深入了解解构赋值的使用和优势。

数组解构赋值：

通过解构赋值，可以轻松提取数组中的元素并将其赋值给变量。

// 传统方式
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];

// 使用解构赋值
const [x, y, z] = numbers;

这样，变量 x、y 和 z 分别被赋值为数组 numbers 中对应的元素。解构赋值使得代码更简洁易读。

对象解构赋值：

对于对象，也可以使用解构赋值来提取属性值。

// 传统方式
const person = { name: 'John', age: 25 };
const name = person.name;
const age = person.age;

// 使用解构赋值
const { name, age } = person;

通过 {} 中指定的属性名，可以直接将对象中的属性值提取到对应的变量中。

默认值和重命名：

解构赋值还支持设置默认值和对属性进行重命名。

// 默认值
const [a = 1, b = 2] = [10];
// a = 10, b = 2

// 重命名
const { name: fullName, age } = person;
// fullName = 'John', age = 25

这允许我们在解构的同时为变量设置默认值或者使用不同的变量名。

嵌套解构：

解构赋值也可以用于嵌套结构，提取嵌套对象或数组中的值。

const user = {
    info: {
        name: 'Alice',
        address: {
            city: 'Wonderland',
            country: 'Fictional'
        }
    }
};

const { info: { name, address: { city } } } = user;
// name = 'Alice', city = 'Wonderland'

这样我们可以轻松地获取嵌套结构中的值。

函数参数解构：

解构赋值在函数参数中也是常用的，可以提高代码的可读性。

// 传统方式
function printInfo(person) {
    console.log(person.name, person.age);
}

// 使用解构赋值
function printInfo({ name, age }) {
    console.log(name, age);
}

通过解构赋值，我们可以直观地看到函数需要哪些属性，提高了函数的可读性和可维护性。