在 ES7 中,引入了三个新的方法:Object.values、Object.entries以及Array.prototype.includes,这三个方法都能对我们的前端开发带来很大的便利,本文就来详细讲解一下它们的用法和特点。
Object.values方法
Object.values方法是用来获取一个对象所有的值,返回一个数组,这个数组的元素顺序就是对象属性枚举顺序。
语法
Object.values(obj)
参数
- obj: 要获取所有值的对象
返回值
一个数组,包含该对象所有的枚举属性值
示例
let myObj = {a: 1, b: 2, c: 3}; console.log(Object.values(myObj)); // [1, 2, 3]
Object.entries方法
Object.entries方法是用来获取一个对象所有的键值对,返回一个数组,这个数组的元素顺序就是对象属性枚举顺序。
语法
Object.entries(obj)
参数
- obj: 要获取所有键值对的对象
返回值
一个数组,这个数组中的元素是一对数组,每对数组包含两个元素,第一个元素是属性名,第二个元素是对应的属性值。
示例
let myObj = {a: 1, b: 2, c: 3}; console.log(Object.entries(myObj)); // [['a', 1], ['b', 2], ['c', 3]]
Array.prototype.includes方法
Array.prototype.includes方法是用来判断一个数组是否包含一个指定的值,返回一个布尔值。
语法
arr.includes(searchElement[, fromIndex])
参数
- searchElement: 要查找的元素
- fromIndex(可选): 开始查找的位置,默认值为0,如果指定了一个负数,则从数组的末尾查找,从-1开始
返回值
布尔值,如果找到searchElement,则返回true,否则返回false。
示例
let myArr = [1, 2, 3]; console.log(myArr.includes(2)); // true console.log(myArr.includes(4)); // false
与其他方法比较
Object.values方法、Object.entries方法和Array.prototype.includes方法可以分别和其他已有的方法进行比较,来更好地理解它们的用处。
与Object.keys方法比较
Object.keys方法是用来获取一个对象所有的键名,返回一个数组,这个数组的元素顺序就是对象属性枚举顺序。
Object.keys方法和Object.values方法之间相似度很高,都是用来返回一个对象的所有key或者value。不同的是Object.keys方法返回的是一个包含对象所有属性名的数组,而Object.values方法返回的是一个包含对象所有属性值的数组。
与Object.entries方法比较
Object.entries方法和Object.keys方法比较也相似。它们都是只针对对象,并且返回一个包含所有属性的数组,只不过返回的数组中的元素形式不同。
Object.entries方法返回的数组中的元素是一个二维数组,包含属性名和属性值。而Object.keys方法只返回了属性名。
与Array.prototype.indexOf方法比较
Array.prototype.indexOf方法和Array.prototype.includes方法都是查找数组中是否包含指定的元素,但是其返回值不同。
Array.prototype.indexOf方法返回要查找元素在数组中的位置,如果没有找到则返回-1,而Array.prototype.includes方法则直接返回布尔值,表示数组中是否包含了执行的元素。
总结
ES7 的三个新方法Object.values、Object.entries和Array.prototype.includes都是很实用的。Object.values方法和Object.entries方法可以轻松地获取对象所有的值或者键值对,而Array.prototype.includes方法能快速地查找数组中是否包含特定的元素,这些方法的使用能够提高Javascript开发的效率和代码的优雅度。
在实际工作中,合理的使用这些新的方法能够更快地让你的代码实现,并且代码更加可读,简洁。希望这篇文章可以让你更好地理解这三个新的方法并且正确的运用它们。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c7312410032fedd390bc77