ES6-const/let

102 阅读2分钟

1.const 常量

// ES5中定义常量
Object.defineProperty(window,A,{
    value: 'ES5',
    writable: false
})

var obj1 = {};
Object.defineProperty(obj1,name, {
    value: 'xiaoming',
    writable: false
})


// ES6
// 不能重复赋值
const A = 1;
A = 3   // Uncaught TypeError: Assignment to constant variable

// 声明时不能没有初始化值
const B;  // Uncaught SyntaxError: Missing initializer in const declaration

2.cosnt 和 let 都有块级作用域

var 没有块级作用域,const 有块级作用域

// var
if (true) {
  var B = 1;
}
console.log("var", B); // var 1

// const
if (true) {
  const A = 1;
}
console.log("const", A); // Uncaught ReferenceError: A is not defined

// const
if (true) {
  let A = 1;
}
console.log("let", A); // Uncaught ReferenceError: A is not defined

3.const 和 let 会存在 done zone 暂时性死区

在块级作用域内,const 声明不会提升至最前面,如果在调用之前使用变量,会陷入暂时性死区

// var
if (true) {
  console.log(A); //  undefined
  var A = 123;
}

// const
if (true) {
  console.log(A); // Uncaught ReferenceError: Cannot access 'A' before initialization
  const A = 123;
}

// let
if (true) {
  console.log(A); // Uncaught ReferenceError: Cannot access 'A' before initialization
  let A = 123;
}

4.const 和 let 的顶层对象不是 window

// var
var A = 123;
window.A; // 123
// const
const A = 123;
window.A; // undefined
// let
let name = "xiaoming";
window.name; //undefined

5.const 定义引用类型数据可改变数据

当 const 定义的数据是数组或者对象时,不能改变的只是定义数据的内存地址,而存储的数据是可以修改的

// 对象
const obj1 = {
  a: "123",
};
obj1.a = 123; // 123赋值成功
obj1 = {}; // Uncaught TypeError: Assignment to constant variable.

// 数组
const arr1 = [1, 2, 3, 4, 5];
arr1.push(6); // arr: [1, 2, 3, 4, 5, 6]
arr1.length = 5; // arr: [1, 2, 3, 4, 5]
arr1 = []; // Assignment to constant variable.

面试题: 如何使一个对象中的属性不可修改呢? 答:Object.freeze(),但是 freeze 只能使对象第一层属性不可修改,如果对象下层还有引用类型,则还需要遍历更深层去 fereeze() 获取报警时间时间

const obj2 = {
  name: "小明",
  age: "27",
  interest: ["治疗", "算卦", "增伤"],
};
// 使用forEach遍历
// function deepFreeze(obj) {
//     Object.freeze();
//     (Object.keys(obj) || []).forEach((key) => {
//         if(typeof obj[key] === "object") {
//             deepFreeze(obj[key]);
//         }
//     })
// }
// 使用for-in遍历
function deepFreeze(obj) {
  Object.freeze(obj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key) && typeof obj[key] === "object") {
      Object.freeze(obj[key]);
    }
  }
}

deepFreeze(obj2);

obj2.name = "瑶瑶"; //不起作用,严格模式下会报错
obj2.interest.push("防御"); // Cannot add property 3, object is not extensible 不可添加增加第三个属性,该对象不可扩展