在 JS 中要尽量避免使用 delete 操作符

一、delete 操作符灵魂六问

关于 delete 操作符的几个问题：

• delete 的返回值是什么？
• delete 删除不存在的属性返回值是什么？
• delete 能不能删除原型上的属性？
• delete 能否删除变量？
• delete 删除数组某个数据，数组长度会不会变？
• 哪些属性不能被 delete 删除？

1、delete 的返回值是什么？

delete 返回的是布尔值。

• 删除一个存在或不存在的属性，只要能删除成功，就会返回 true。
• 删除失败返回 false。

var a = {
	p1: 1
}
console.log(delete a.p1) // true
console.log(delete a.p2) // true
console.log(delete window) // false

2、delete 删除不存在的属性返回值是什么？

由 1 可知，删除不存在的属性返回值也是 true。

3、delete 能不能删除原型上的属性？

无法删除原型上的属性。

var a = { p1: 10 }
a.__proto__ = { p2: 20 }
console.log('pre-a.p2', a.p2) // 20
console.log(delete a.p2) // true
console.log('old-a.p2', a.p2) // 20

不过最好不要直接使用 __proto__，更好的写法见下面这种：

function Foo () {
	this.name = "zhangsan"
}
Foo.prototype.age = 20
var foo new Foo()
console.log('pre-foo.age', foo.age) // 20
console.log(delete foo.age) // true
console.log('old-foo.age', foo.age) // 20

4、delete 能否删除变量？

delete 不能删除一个变量。

var a = 10
console.log(delete a) // false
console.log(a) // 10

5、delete 删除数组某个数据，数组长度会不会变？

• delete 删除数组的某一项，并不会导致数组长度变短。
• 对应的数据的值会变成 empty，而不是 undefeated 或 null。

var arr = [1, 2, 3]
console.log('pre', arr.length) // 3
console.log(delete arr[1]) // true
console.log('old', arr.length) // 3
console.log(arr) // [1, empty, 3]

【拓展】
empty 是“未初始化”的意思。

• new Array(2) 会得到 [empty x 2]。
• forEach 和 in 并不会对未初始化的值进行任何操作。

6、哪些属性不能被 delete 删除？

• var、const、let 声明的全局变量
• 数据属性 configurable: false 的属性
• 原型上的属性
• 函数参数
• 一些常量（NaN、Infinity、undefined）
• 函数声明

JavaScript中delete操作符不能删除的对象

【总结】

• delete 返回 false 一定删除失败了；
• delete 返回 true 不一定删除成功了。

二、若不使用 delete ，该如何删除对象的属性？

使用 delete 操作符并不会直接释放内存，而是说它会使得 V8（Javascript）引擎中的 hidden class 失效，将该 object 变为一个通用的 slow object，这就使得执行速度有了很明显的降低。

hidden class：由于 JavaScript 是一种动态编程语言，属性可进行动态的添加和删除，这意味着一个对象的属性是可变的，大多数的 JavaScript 引擎（V8）为了跟踪对象和变量的类型引入了隐藏类的概念。在运行时 V8 会创建隐藏类，这些类附加到每个对象上，以跟踪其形状/布局。这样可以优化属性访问时间。
参考：
http://debuggable.com/posts/u…: 4c7e81e4-1330-4398-8bd2-761bcbdd56cb
https://stackoverflow.com/que…

那么如果不使用 delete ，我们如何删除对象的属性？

1、将不需要的属性设置为 undefined

最有效的方式，应该是将不需要的属性设置为 undefined ，例如：

const person = {
    name: 'sudada',
    gender: 'female'
}

person.name = undefined // 删除 name 属性

但是设置为 undefined，得到的结果为：

{
    name: undefined,
    gender: 'female'
}

有时需要额外的操作，例如：

JSON.parse(JSON.stringify(person))
// 或者
Object.keys(person).reduce((pre, cur) => {
    const value = person[cur]
    return value === undefined ? pre : {...pre, [cur]: value}
}, {})

这样效率会大幅度地降低，所以在实际业务中可以考虑使用 Map 来代替 object ，例如：

let map = new Map([['a', 1]])
// 执行
map.delete('a');

2、使用 lodash 的 omit 方法（推荐）

lodash 的 omit 方法

官方示例如下：

var object = { 'a': 1, 'b': 2, 'c': 3 };

_.omit(object, ['a', 'c']);
// => { 'b': 2 }

在使用时，需要先引入 lodash 的 omit，然后直接使用此方法：

import { omit } from 'lodash';

let obj = { 'a': 1, 'b': 2, 'c': 3 };
omit(obj, 'b')
// => {'a': 1, 'c': 3}

【拓展】lodash omit 源码在这里：

var omit = flatRest(function(object, paths) {
  var result = {};
  if (object == null) {
    return result;
  }
  var isDeep = false;
  paths = arrayMap(paths, function(path) {
    path = castPath(path, object);
    isDeep || (isDeep = path.length > 1);
    return path;
  });
  copyObject(object, getAllKeysIn(object), result);
  if (isDeep) {
    result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone);
  }
  var length = paths.length;
  while (length--) {
    baseUnset(result, paths[length]);
  }
  return result;
});

【参考】
为什么说在 JS 中要避免使用 delete
谨慎使用 delete