ES6中对象、函数、数组的扩展

2019-08-15 admin

对象

判断两个参数的值是否全等,与 === 类似,不过区别在于 Object.is(+0, -0)返回false, Object.is(NaN, NaN)返回true

    Object.is('foo','foo') //true
    Object.is({},{}) //false
  • Object.assign(target,o1,o2...)

用于对象的合并将参数中所有可枚举的属性复制到目标对象target,返回目标对象 若有相同的属性值,后面的会覆盖之前的值

const target = {a:1, b:2, c:3}
const o1 = {b:4, d:5}
const newTarget = Object.assign(target, o1)

console.log(target) //{a:1, b:4, c:3, d:5}
console.log(Object.is(target,newTarget)) //true

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键名

const obj = {name: 'lil', age: 3}
console.log(Object.keys(obj)) //[ 'name', 'age' ]

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键值

const obj = {name: 'lil', age: 3}
console.log(Object.values(obj)) //[ 'lil', 3 ]

传入一个对象返回一个数组,包含对象中所有可遍历的属性的键值对

const obj = {name: 'lil', age: 3}
console.log(Object.entries(obj))
//[ [ 'name', 'lil' ], [ 'age', 3 ] ]
  • Object.setPrototypeOf(obj,prototype)

用来设置对象的prototype对象,返回参数对象本身,这个方法是ES6 正式推荐的设置原型对象的方法,等同于

function foo(obj,proto) {
    obj.__proto__ = proto;
    return obj
}
  • Object.getPrototypeOf(obj)

传入对象获取对象的原型对象

函数

reset用来获取函数多余的参数,将多余的参数放入数组中,可调用数组的方法

function foo(...rest) {
  return rest
}
console.log(foo(1,2,3)) //[1,2,3]

数组

扩展运算符表示为...,可理解为rest参数的逆运算 扩展运算符将一个数组转为用逗号隔开的参数序列

const arr = [1,2,3,4]
console.log(arr) //1 2 3 4

将字符串转换为数组

console.log([...'hello']) //[ 'h', 'e', 'l', 'l', 'o' ]

合并数组

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = [...arr1,...arr2]
console.log(arr3) //[ 1, 2, 3, 4, 5, 6 ]

用于将类数组或者可遍历的对象转为数组

const obj = {'0':'a','1':'b','2':'c',length:3}
console.log(Array.from(obj)) //[ 'a', 'b', 'c' ]

console.log(Array.from('hello'))//[ 'h', 'e', 'l', 'l', 'o' ]

将一组值转换为数组,弥补了Array()的不足之处

Array.of(1,2,3) //[1, 2, 3]
Array(1,2,3) //[1, 2, 3]

Array.of(3) //[3]
Array(3) //[, , ,]

返回数组中满足回调函数的第一个的值,全都不满足则返回undefined

const arr = [1, 2, 30, 100, 60]
const result = arr.find(item => item > 30)
console.log(result) //100

find()用法类似,返回值为满足回调函数的第一个值的下标 全都不满足则返回undefined

const arr = [1, 2, 30, 100, 60]
const result = arr.findIndex(item => item > 30)
console.log(result) //3

用于遍历数组,返回一个遍历器对象Object [Array Iterator]{} 可用for...of进行循环遍历

const arr = ['a', 'b', 'c']
for (let [index, item] of arr.entries()) {
    console.log(index, item)
}
//0 'a'
//1 'b'
//2 'c'

[转载]原文链接:https://segmentfault.com/a/1190000020078516

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72557.html

文章标题:ES6中对象、函数、数组的扩展

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部