• 深入理解JavaScript中的原始类型和引用类型
  • 发布于 1周前
  • 55 热度
    0 评论
JavaScript作为我们开发前端时不可或缺的工具,你真的理解它的核心概念吗?今天我想用通俗易懂的语言,结合一些实际的业务场景,来带你了解JavaScript中的原始类型和引用类型,顺便讲一下它们的可变性和不可变性。相信我,看完这些你一定会对代码有更深的理解!

原始类型:就像快递里的物品
在现实生活中,如果你下单了一件商品,商家直接给你寄过来商品本身,这就像JavaScript中的原始类型一样——变量存储的就是具体的值。不论是数字、字符串还是布尔值,它们都是独立存在的,互不干扰。

举个业务场景的例子:你在一个购物网站上查看商品库存。
let itemStockA = 10;  // 商品A库存
let itemStockB = itemStockA;  // 商品B库存初始和A一样
itemStockB = 20;  // 更新商品B的库存
console.log(itemStockA);  // 10
console.log(itemStockB);  // 20
在这个例子中,商品A和商品B各自有自己的库存数据,互不影响。因为它们是原始类型的数字,赋值时只是复制了值,彼此之间完全独立。

引用类型:就像外卖地址
现在我们来看引用类型。引用类型就好像是你的外卖地址,外卖小哥并不会直接带着你家的门钥匙,而是拿着一份写有地址的纸条,按照这个地址去送货。也就是说,引用类型存储的不是值,而是指向值所在位置的引用。我们来换个实际场景——比如一个公司有多个部门,各个部门共享同一个客户信息表。
let customerInfo = { name: "小明", age: 30 };  // 客户信息
let salesDepartment = customerInfo;  // 销售部门查看客户信息
let serviceDepartment = customerInfo;  // 客服部门查看客户信息

salesDepartment.name = "小红";  // 销售部门更新客户姓名
console.log(serviceDepartment.name);  // "小红"
在这个例子里,无论是销售部门还是客服部门,都在用同一个客户信息。当销售部门修改了客户的姓名,客服部门看到的客户姓名也会变成“小红”。这就是引用类型,多个部门其实都是指向同一个客户信息表。

可变性和不可变性:随时变动 vs 永远不变
既然提到了数据,我们还需要聊聊它们的可变性。在JavaScript里,引用类型是可变的,就像刚才的客户信息那样,可以随时修改。而原始类型则是不可变的,一旦你设置了它的值,它本身是不会改变的。如果你想改变它,只能创建一个新的值。再来看个实际场景:比如在一个在线购物平台上,用户的订单号一旦生成,就不能更改,而订单详情可以随时调整。
// 订单号——不可变
let orderNumber = "123456";
let newOrderNumber = orderNumber.replace("123", "789");
console.log(orderNumber);  // "123456"
console.log(newOrderNumber);  // "789456"

// 订单详情——可变
let orderDetails = { item: "手机", price: 3000 };
orderDetails.price = 2500;  // 打折啦
console.log(orderDetails);  // { item: "手机", price: 2500 }
在这里,订单号是不可变的,改变订单号只会生成一个新的值;而订单详情则是可变的,你可以随时更新订单中的信息。

避免引用带来的麻烦:深拷贝的解决方案
作为开发者,你一定会遇到这种情况:因为多个变量指向同一个对象,修改一个变量会影响到其他变量。这种时候,我们需要用到深拷贝,也就是把对象完整复制一份,这样修改时不会影响到原对象。举个业务例子:某个电商平台上,有一个商品模板,创建新商品时不能直接修改模板,而是要先复制一份再修改。
let productTemplate = { name: "通用手机壳", price: 20 };
// 堆代码 duidaima.com
// 深拷贝模板创建新商品
let newProduct = JSON.parse(JSON.stringify(productTemplate));
newProduct.name = "iPhone手机壳";  // 修改新商品名称
newProduct.price = 30;  // 修改新商品价格

console.log(productTemplate);  // { name: "通用手机壳", price: 20 }
console.log(newProduct);  // { name: "iPhone手机壳", price: 30 }
这样,你修改新商品信息时,模板商品的内容不会被影响。

结束
掌握JavaScript中的原始类型和引用类型、可变性与不可变性,是写出高效、可靠代码的基础。这些概念在日常业务开发中非常常见。
用户评论