美文网首页
杂货小铺之ES6+ 🥪 Const

杂货小铺之ES6+ 🥪 Const

作者: 羊驼驼驼驼 | 来源:发表于2020-07-07 21:29 被阅读0次
es.png
  • const

📖 不能被改变的叫做常量

  1. ES5中使用Object.defineProperty(obj, prop, descriptor)定义常量;
    🌻 obj 要定义属性的对象
    🌻 prop 要定义或修改的属性的名称或 Symbol
    🌻 descriptor 要定义或修改的属性描述符
// writable 是否可以修改,默认为false
Object.defineProperty(window,'a',{
  value: '哈哈哈',
  writable: false
})
console.log(a); // 哈哈哈
a = '啦啦啦';
console.log(a); // 哈哈哈
  1. const除了具有let的块级作用域和不会变量提升的特性之外,还具有定义的常量不能被改变的特性;
const a = 'hello world';
console.log(a);
a = 'hello pp';
console.log(a); // 报错:Uncaught TypeError: Assignment to constant variable.

// 在代码块中尝试对a进行修改,导致浏览器报错,这就说明const定义的变量是不能被修改的,它是只读的

换一种方式

const a;
a = 'hello pp';
console.log(a); // 报错:Uncaught SyntaxError: Missing initializer in const declaration

🔎 \color{Orange}{Warning}:
const声明的常量必须进行初始化,不然会抛出异常Uncaught SyntaxError: Missing initializer in const declaration

  1. 如果用const定义一个对象呢?
const  obj = {
  name: 'xiaoming',
  age: 13
};
console.log(obj); // {name: "xiaoming", age: 13}
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13, like: "code"}

const 定义的obj居然被改变了,这是咋回事呢?请各位看官莫急呦👀

🌻叮~小葵花mama课堂开课啦🌻
我们现在需要了解一下JS中的变量是如何存储的,主要有两种方式堆内存栈内存
🌻 栈:栈内存主要用于存储各种基本类型的变量,包括Boolean、Number、String、Undefined、Null
🌻 堆:堆内存主要负责像对象Object这种变量类型的存储

栈&&堆.png
❄️❄️❄️❄️❄️❄️❄️
基本了解了一下堆和栈,下面我们来举两个🌰来唠唠基本数据类型引用数据类型

基本数据类型:
📖 Number、String、Boolean、null、undefined,基本数据类型是按照值访问的,因为可以直接操作保存在变量中的实际值

var a = 10;
var b = a;
b = 20;
console.log(a); // 10

🔎 \color{Orange}{Warning}:
b只是保存了a复制的一个副本。所以,b的值改变,对a没有影响,虽然两个变量的值相等,但是两个变量保存了两个不同的基本数据类型值

基本数据类型赋值过程.png

引用数据类型:
📖 Object、Array、Data、Function等。javascript的引用数据类型是保存在堆内存中的对象。与其他语言不同的是,你不可以直接访问堆内存里空间中的位置和操作堆内存空间,只能操作对象在栈内的引用地址,所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "我叫obj2";
console.log(obj1.name); // 我叫obj2

🔎 \color{Orange}{Warning}:
obj1赋值给obj2,实际上是这个堆内存对象在栈内存的引用地址复制了一份给obj2,他们指向的是同一个堆内存对象,实际改变的也是堆内存对象。

引用数据类型赋值过程.png
🌈 通过上面了解对基本数据类型和引用数据类型不同的存储方式后,就可以解释为什么const定义基本数据类型不能够被重新赋值,但是引用数据类型却可以,下面我们来看一下数组
const arr = [1,2,3];
arr.push(4);
console.log(arr); // 1 2 3 4 
// arr也属于引用数据类型,内容是存储在堆内存里面的,所以会发生改动

🔎 \color{Orange}{Warning}:
那么const声明的常量不发生改动到底指的是什么呢?其实指的是变量所指向的内存地址不能改动,地址里面存的内容发生了改变

❄️❄️❄️❄️❄️❄️❄️
🤔 那我们来思考一下有没有什么办法可以让对象也不发生改变?我们来看一下

const  obj = {
  name: 'xiaoming',
  age: 13,
};
console.log(obj); // {name: "xiaoming", age: 13}
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13, like: "code"}

使用 Object.freeze(obj), 只能传对象不能传数组

const  obj = {
  name: 'xiaoming',
  age: 13,
};
console.log(obj); // {name: "xiaoming", age: 13}
Object.freeze(obj);
obj.like = 'code';
console.log(obj); // {name: "xiaoming", age: 13}

再增加一层

const  obj = {
  name: 'xiaoming',
  age: 13,
  skill: {  // 再增加一层
    name: 'code',
    year: 1
  }
};
console.log(obj); // {age: 13, name: 'xiaoming', skill: {name: "code", year: 2}}
Object.freeze(obj); // 只能做浅层冻结
obj.like = 'code';
obj.skill.year = 2;
console.log(obj); // {age: 13, name: 'xiaoming', skill: {name: "code", year: 2}}

以上是对const的一个小小的总结~

相关文章

  • 杂货小铺之ES6+ 🥪 Const

    const ? 不能被改变的叫做常量 ES5中使用Object.defineProperty(obj, prop,...

  • 杂货小铺之ES6+ 🍤 数组

    数组遍历 ? 在 ES6 中新增了很多实用的原生 API,方便开发者对 Array 的操控性更强,如 for......

  • 杂货小铺之ES6+ 🍕 Let

    let ? ES6新增了let命令,用来声明变量 let声明的全局变量不是全局对象window的属性; ? :va...

  • 杂货小铺之ES6+ 🍳 解构赋值

    解构赋值 ? 在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值...

  • [翻译 & 校对] ES6 中 的 var、let 和 cons

    原文链接: JavaScript ES6+: var, let, or const? 原文作者: Eric Ell...

  • 杂货铺赋

    友之微商小铺,无商贾之俗,却满怀温情,难得难得,以小文记这一朵奇异之花 杂货铺赋 杂货一...

  • ES6+ let 和 const 命令

    知识梳理 1、变量提升 变量还没有被声明,但是我们却可以使用这个未被声明的变量,这种情况就叫做提升,并且提升的是声...

  • 杂货小铺之作用域 🍟

    叮~,今天杂货小铺正式开业?,货架会不定期上新(好用的工具、日常小总结等等...)哦~ ? 敲好用的NRM源切换 ...

  • 知礼

    首发于微信公众号:有样杂货铺/一个唠嗑小铺,传递温度与态度。 personal passage “人和人之间...

  • JavaScript - String相关方法

    一. 静态方法: ES6+ 二. 实例方法(不包含已废弃的方法和浏览器支持度低的方法): ES6+

网友评论

      本文标题:杂货小铺之ES6+ 🥪 Const

      本文链接:https://www.haomeiwen.com/subject/iaipqktx.html