ES6(11)、新增的API(上)

新增API序列表:

1、Object.assign                                             2、Array
3、Array.of                                                      4、Array.prototype.fill
5、Array.prototype.find                                   6、Array.prototype.findIndex
7、Array.prototype.copyWithin                       8、Array.prototype.entries
9、Array.prototype.keys                               10、Array.prototype.values

1、Object.assign

方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

1、语法

Object.assign(target, ...sources)

参数:
target:目标对象
sources:源对象
返回值:目标对象

(1)、合并对象

var a={a1:1,a2:2}
var b={b1:1,b2:2,b3:3}  //没有出现过的key,会新增到目标对象
Object.assign(a,b)  
console.log(a)  //{a1: 1, a2: 2, b1: 1, b2: 2, b3: 3}

(2)、合并具有相同属性的对象

var a={a1:'a',a2:2}
var b={a1:'b',b1:1,b2:2,b3:3}  //有相同的key,后面会覆盖前面的
Object.assign(a,b)  
console.log(a)  //{a1: 'b', a2: 2, b1: 1, b2: 2, b3: 3}

(3)、Object.assign 不会在那些source对象值为 nullundefined 的时候抛出错误。

var a={
    a1:'a',
    a2:2
}
var b={
    b1:undefined,
    b2:null
}
Object.assign(a,b)
console.log(a)  //{a1: 'a', a2: 2, b1: undefined, b2: null}
2、Array.from

方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

语法:

Array.from(arrayLike[, mapFn[, thisArg]])

参数:
arrayLike:想要转换成数组的伪数组对象或可迭代对象。
mapFn(可选):如果指定了该参数,新数组中的每个元素会执行该回调函数。
thisArg (可选):可选参数,执行回调函数 mapFn 时 this 对象。
返回值:一个新的数组实例。

(1)、ES6之前:将伪数组变成真数组

方法1:

var a={
    0:'000',
    1:'111',
    2:'222',
    length:3
}
a=Array.prototype.slice.call(a,0)  //关键代码
console.log(a) //['000', '111', '222']

方法2:

var a={
    0:'000',
    1:'111',
    2:'222',
    length:3
}

function slice(假数组){
    var b=new Array()  //var b=[]
    for(let i=0;i<假数组.length;i++){
        b[i]=假数组[i]
    }
    return b
}
console.log(slice(a)) //['000', '111', '222']

(2)、ES6: 利用Array.from将伪数组变成真数组

var a={
    0:'000',
    1:'111',
    2:'222',
    length:3
}
a=Array.from(a)
console.log(slice(a))

(3)、利用Array.from可以创建一个长度为n,内容为空的数组

a=Array.from({length:5})
console.log(a)  // [undefined, undefined, undefined, undefined, undefined]

旧方法:

a=Array.apply(null,{length:5})
console.log(a)  // [undefined, undefined, undefined, undefined, undefined]

(4)、经典题目:给出一个数组长度n,和数字n,打出这个数组[n,n,n..,n]

方法1:

console.log(x(6,6))  // [6, 6, 6, 6, 6, 6]

function x(n,fill){
    var array=Array.from({length:n})
    return array.map(v=>fill)
}

旧方法:

console.log(x(6,6))  //[6, 6, 6, 6, 6, 6]

function x(n,fill){
   return new Array(n+1).join(fill).split('')
}
3、Array.of

方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of

a=Array.of(1,{},'2',true,'xxx',new Set())
console.log(a) //[1, {…}, '2', true, 'xxx', Set(0)]

总结:感觉和直接写数组没啥差别,有点鸡肋

4、Array.prototype.fill

方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

语法

arr.fill(value[, start[, end]])

参数
value:用来填充数组元素的值。
start (可选):起始索引,默认值为0。
end (可选):终止索引,默认值为 this.length。

(1)、

var a=[0,1,2]
a.fill(3,1)  //从数组下标1开始,没写结束下标,就是把后面都改成3
console.log(a) // [0, 3, 3]

(2)、

var a=[0,1,2]
a.fill(3)  //没写开始下标,表示从开始到结尾都改成3
console.log(a) // [3, 3, 3]
5、Array.prototype.find

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

1、语法:

arr.find(callback[, thisArg])

参数
callback:在数组每一项上执行的函数,接收 3 个参数:
(1)、element:当前遍历到的元素。
(2)、index可选:当前遍历到的索引。
(3)、array可选:数组本身。
thisArg可选:执行回调时用作this 的对象。
返回值:数组中第一个满足所提供测试函数的元素的值,否则返回 undefined

var a=[{name:'a1'},{name:'a2'},{name:'a3'}]
b = a.find((item)=>item.name==='a2')  //寻找第一个符合条件内容
console.log(b) //{name: 'a2'}

2、find和filter两者的区别
(1)、find寻找第一个符合条件内容就返回,后面至于还有没有就不管了

var a=[{name:'a1',age:20},{name:'a2',age:18},{name:'a3',age:18}]
b=a.find((item)=>item.age===18)
console.log(b)  //{name: 'a2', age: 18}

(2)、filter找出所有符合条件的内容再返回

var a=[{name:'a1',age:20},{name:'a2',age:18},{name:'a3',age:18}]
b = a.filter((item)=>item.age===18)
console.log(b)  //[{name: 'a2', age: 18},{name:'a3',age:18}]
6、Array.prototype.findIndex

方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

var a=[{name:'a1',age:20},{name:'a2',age:18},{name:'a3',age:18}]
b=a.findIndex(item=>item.age===18)
console.log(b)  //1
7、Array.prototype.copyWithin

方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

参数
target:0 为基底的索引,复制序列到该位置。
start:0 为基底的索引,开始复制元素的起始位置。
end:0 为基底的索引,开始复制元素结束位置。但不包括 end 这个位置的元素。
返回值:改变后的数组。

var a=['a','b','c','d','e']
b=a.copyWithin(1,3,4)
console.log(b)  

打印出:

['a','d','c','d','e']
8、Array.prototype.entries

方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

1.png
9、Array.prototype.keys

方法返回一个包含数组中每个索引键的Array Iterator对象。

2.png
10、Array.prototype.values

方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

3.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容