es6饥人谷技术博客ECMAScript

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

2022-04-15  本文已影响0人  飞天小猪_pig

新增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
上一篇 下一篇

猜你喜欢

热点阅读