代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js数据类型赋值操作的异同</title>
</head>
<body>
</body>
<script>
//js中数据类型分为基本数据类型和引用数据类型//
//常用基本数据类型:String、Number、Boolean//
//常用引用数据类型:Array、Object//
//这两种数据类型进行赋值操作时的机制是不同的//
//基本数据类型操作//
let num = 0
let number = num
console.log(num)
console.log(number)
//此时两个参数互相独立,值存储在两个不同的空间//
//两个参数的改变互不影响//
number = 1
console.log(num)
console.log(number)
//引用数据类型操作//
let arr = ["0", "1", "2"]
let array = arr//赋值操作,浅拷贝//
console.log(arr)
console.log(array)
//此时两个参数不独立,它们的值在内存中只有一份//
//两个参数的改变相互影响//
array[0] = "-1"
console.log(arr)
console.log(array)
//如果想要两个参数相互独立,需要再拷贝一份数据//
let wxarr = ["0", "1", "2"]
let wxarray = JSON.parse(JSON.stringify(wxarr))//深拷贝操作方式之一//
wxarray[0] = "-1"
console.log(wxarr)
console.log(wxarray)
//tips:深拷贝和浅拷贝的区别//
//深拷贝和浅拷贝是指在赋值一个对象时,拷贝的深度不同,深拷贝//
//会拷贝所有的属性,即使原对象的属性值发生了变化,深拷贝后的对象的属性值也不会受到影响。//
//而浅拷贝只会拷贝对象的第一层属性,用上面的代码来理解就是,基本数据类型只有一层属性,//
//而引用数据类型不止一层属性,所以浅拷贝上面的数组,仅仅只是拷贝了数组对象,而数组里面的值还是//
//在引用原对象的,所以会互相影响//
</script>
</html>
Chrome运行效果如下: