一些有意思的JavaScript代码片段

Javascript是一门很灵活的语言，我们可以使用它动态地实现各种各样的功能。但是动态带来便利的同时，也存在一些令人费解的行为，稍不注意就会进入误区一个接着一个的坑。虽然我使用JavaScript的时间还不算长，也是遇到了一些有意思的场景，一开始百思不得其解，弄清楚之后又让我哭笑不得。现在就来跟大家一起分享一下。

语法糖带来的浅拷贝

先来预测一下下面代码的输出内容：

const user = {
  name: 'zong',
  location: {
    city: 'Shanghai',
    state: 'Shanghai'
  }
};
const copy = Object.assign({}, user);
// 或者
// const copy = { ...user };
copy.location.city = 'Suzhou';
console.log('original: ', user.location);
console.log('copy:', copy.location);

输出结果应该是：

original:  {
  city: 'Shanghai',
  state: 'Shanghai'
}
copy: {
  city: 'Shanghai',
  state: 'Shanghai'
}

咦？为什么操作复制的对象会修改原来的对象呢？这是因为Object.assign跟spread operator只做了一层浅拷贝，这意味着只有对象的第一层属性会被复制，如果某个属性是个嵌套的对象，那么只有引用会被复制，所以我们操作修改的对象的属性影响到了原来的对象。

所以在我们这个例子中copy的location属性将仍然指向原来user对象对应的location属性。

JavaScript从右向左赋值的行为

function display() {
  var a = b = 10;
}

display();

console.log('b', typeof b === 'undefined');
console.log('a', typeof a === 'undefined');

输出是：

b false
a true

这是因为JavaScript赋值操作符是从右向左的，这意味着我们的赋值操作也是从右向左来的，首先b会被赋值10，然后它被赋给了a。

所以：

function display() {
  var a = b = 10;
}

等同于：

function display() {
  b = 10;
  var a = b;
}

所以b没有用var声明成了一个全局变量，所以在外部可以被访问到，而a只是个局部变量，所以外部会打印出a === undefined为true。

但是如果上面的代码在严格模式中执行的话，情况又不一样了，由于严格模式不允许创建全局变量所以这段代码会直接抛出异常。

提升

var num = 8;

var display = function () {
  console.log(num);
  var number = 20;
};

display();

猜猜这里的输出结果是什么？它不是8而是undefined，这又是为什么？

这是因为JavaScript里面有个现象叫提升。提升是JavaScript中把变量声明移到当前作用域最顶部的一种行为。

所以上面的代码可以转换成如下：

var num = 8;

var display = function () {
  var num;
  console.log(num);
  num = 20;
};

display();

我们可以看到只有声明被移到了函数的最顶端，而赋值操作还在原地，所以这边num由于还未赋值会打印出undefined。

delete的作用对象

const num = 1;

const result = (function () {
  delete num;
  return num;
})();

console.log(result);

这边的代码不会报出任何错，因为我们是在number类型上使用的delete，它还是会打印出1。

The delete操作符被用来删除一个对象的属性，在这儿num并不是一个对象所以它会返回这个变量对应的值，也就是1。

const num = 1;

const result = (function (num) {
  delete num;
  return num;
})(10);

console.log(result);

上面的代码将输出10。

这边我们把10作为参数传给函数，同样地delete在这里对原始类型也不起作用，所以会照常打印出10。

好啦，今天的分享就到这里啦，主要是在使用JavaScript的过程中可能会经常遇到的一些细节问题，希望能给大家带来一丢丢的收获，happy coding~