一、Const 与 Var 的区别

  • 只允许声明事赋值

  • 先定义后使用

  • 不允许重复声明

  • 不支持变量提升

    不支持变量提升
    console.log(a);  //undefined
    console.log(b); //Uncaught ReferenceError: b is not defined
    var a = 123;

    而 let / const 会在第一行报 Cannot access 'a' before initialization ,即需要先定义后使用。

  • 解决了全局变量污染(不属于顶层对象 window)

  • 暂时性死区 (区块中的 let/const 所声明变量,形成封闭作用域,覆盖作用域之外的同名变量,也就是需要遵循先定义后使用原则)

    暂时性死区
    var URL = 'https://xxx.com';
    if(true) {
    URL = 'xxx'; // 此处报错
    const xxx;
    }

    此时报:Uncaught SyntaxError: Missing initializer in const declaration

  • 块级作用域特性

二、Const 变量的可变性

Const 变量的可变性
Const 变量的可变性
  • const 定义的引用类型变量,其内容可以更改,可以利用 freeze 冻结保证内容不被改变。

  • Object.freeze(obj) : 只能冻结一层,例如 const 定义对象中的某个属性为数组,数组中内容依旧可改。

  • 自定义方法遍历实现深层次冻结。

    function myFreeze(obj) {
    Object.freeze(obj);
    Object.keys(obj).forEach(function(key) {
    if(typeof obj[key] === 'object')
    myFreeze(obj[key]);
    });
    }

三、箭头函数

箭头函数需要注意的场景:

  • 箭头函数作为事件回调函数时。
  • 对象中方法的箭头函数时(建议不用)。
  • 构造函数中的箭头函数。
  • 箭头函数中 arguments 失效。
  • 函数原型下的方法。

四、解构赋值

等号左右两边完全匹配
const people = {
name: 'xxx',
age: 18
}

const {name, age} = people;
console.log(name, age) // xxx 18
const people = {
name: 'xiaoming',
age: 18,
mother: {
name: 'xiaohong'
}
}

const {
name,
age,
mother: {
name: motherName // 别名
}
} = people;

console.log(name, age, motherName) // xiaoming 18 xiaohong
如何正确的使用解构赋值
const sum = ([a, b, c]) => {
console.log(a + b + c);
};

sum([1, 2, 4]);
const foo = ({name, age, sex = 'boy'}) => {
console.log(name, age, sex);
}

foo({
name: 'xiaohong',
age: '18',
sex: 'girl'
}); // xiaohong 18 girl
let a = 1;
let b = 2;
[b, a] = [a, b];
console.log(a, b); // 2 1
const json = '{"name": "xiaoming", "age": 18}';
const {name, age} = JSON.parse(json);
console.log(name, age); // xiaoming 18
axios.get('./data.json').then(({data: {name, age}}) => {
console.log(name, age)
});

评论

:doodle { @grid: 1x5 / 100vmin; } @place-cell: center; width: @rand(45vmin, 75vmin); height: @rand(45vmin, 75vmin); transform: translate(@rand(-120%, 120%), @rand(-80%, 80%)) scale(@rand(.8, 2.8)) skew(@rand(45deg)); clip-path: polygon( @r(0, 30%) @r(0, 50%), @r(30%, 60%) @r(0%, 30%), @r(60%, 100%) @r(0%, 50%), @r(60%, 100%) @r(50%, 100%), @r(30%, 60%) @r(60%, 100%), @r(0, 30%) @r(60%, 100%) ); background: @pick(#f44336, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf, #e136eb, #32ed39); opacity: @rand(.5, .9); position: relative; top: @rand(-80%, 80%); left: @rand(0%, 80%); animation: colorChange @rand(6.1s, 26.1s) infinite @rand(-.5s, -2.5s) linear alternate; @keyframes colorChange { 100% { left: 0; top: 0; filter: hue-rotate(360deg); } }