在 ES6 中,新增了许多强大的 Array 和 Object 方法,它们大大简化了我们的代码,提高了开发效率。本文将详细介绍这些方法及其应用示例,希望能对前端开发带来帮助。
Array 方法介绍
Array.from()
Array.from()
方法接收一个类数组对象或可迭代对象作为参数,将其转化成一个真正的数组。该方法的语法如下:
---------------------- ------- ----------
其中,arrayLike
参数是将要转换成数组的对象,可迭代对象是一个拥有可访问其元素的 length
属性和正整数索引的对象。mapFn
是一个映射函数,用于对每个元素进行处理,thisArg
是 mapFn
函数执行时的 this
值。
下面是一个示例:
--- ------- - --------------------------------- --- -------- - -------------------- ----------------------
Array.of()
Array.of()
方法可以将一组值转化成数组。该方法的语法如下:
------------------- ---------- ----- ------------
下面是一个示例:
--- ----------- - ----------- -- -- -- --- ------------------------- -- --- -- -- -- -- --- ----------- - ---------------------- ------- ------------------------- -- -------------- ------
Array.find()
find()
方法返回数组中第一个符合条件的元素。该方法的语法如下:
--------------------- ---------
其中,callback
是用来测试每个元素的函数,返回 true
表示符合条件,false
表示不符合条件。thisArg
是可选的,为 callback
函数执行时使用的 this
值。
下面是一个示例:
--- ----------- - --- -- --- --- ---- --- ------ - ---------------------------------- - ------ ------- - --- --- -------------------- -- --
Array.findIndex()
findIndex()
方法返回数组中第一个符合条件的元素的索引值。该方法的语法如下:
-------------------------- ---------
其中,callback
是用来测试每个元素的函数,返回 true
表示符合条件,false
表示不符合条件。thisArg
是可选的,为 callback
函数执行时使用的 this
值。
下面是一个示例:
--- ----------- - --- -- --- --- ---- --- ------ - --------------------------------------- - ------ ------- - --- --- -------------------- -- -
Array.fill()
fill()
方法用一个固定值填充数组中从起始索引到终止索引之间的所有元素。该方法的语法如下:
------------------ ------- ------
其中,value
是填充数组的固定值,start
是起始索引,end
是终止索引(不包含)。
下面是一个示例:
--- ----------- - --- -- -- -- --- ------------------- -- --- -- ---------------- ------------------------- -- --- -- -- -- --
Array.keys()
keys()
方法返回一个包含数组中每个索引键的可迭代对象。该方法的语法如下:
------------
下面是一个示例:
--- ----------- - --- -- -- -- --- --- -------- - ------------------- --- ---- --- -- --------- - ----------------- -
输出结果为:
- - - - -
Array.values()
values()
方法返回一个包含数组中每个值的可迭代对象。该方法的语法如下:
--------------
下面是一个示例:
--- ----------- - --- -- -- -- --- --- -------- - --------------------- --- ---- ----- -- --------- - ------------------- -
输出结果为:
- - - - -
Array.entries()
entries()
方法返回一个包含数组中每个索引键和值的可迭代对象。该方法的语法如下:
---------------
下面是一个示例:
--- ----------- - --- -- -- -- --- --- -------- - ---------------------- --- ---- ----- -- --------- - --------------------- ---------- -
输出结果为:
- - - - - - - - - -
Object 方法介绍
Object.assign()
assign()
方法用于将一个或多个源对象的属性值赋值到目标对象。该方法的语法如下:
--------------------- -----------
其中,target
是目标对象,...sources
是一个或多个源对象。
下面是一个示例:
--- ------------ - --- --- ------------- - - ----- ------- -- --- ------------- - - ---- -- -- --------------------------- -------------- --------------- -------------------------- -- - ----- -------- ---- -- -
Object.is()
is()
方法判断两个值是否相同。该方法的行为与严格的 ===
运算符相同,但是它可以正确的处理 NaN
和 -0
。该方法的语法如下:
----------------- -------
其中,value1
和 value2
是将要比较的值。
下面是一个示例:
-------------------------- ------ -- ---- ------------------------- ---- -- ----- ------------------------- ----- -- ---- --------------------------- -- ----- -------------------------------- ------------ -- ---- --------------------------- ------------ -- -----
Object.entries()
entries()
方法返回一个包含对象中每个键值对的可迭代对象。该方法的语法如下:
-------------------
其中,obj
是将要返回键值对列表的目标对象。
下面是一个示例:
--- ------------ - - ----- -------- ---- -- -- --- ------- - ----------------------------- ---------------------
输出结果为:
- - ------- ------- -- - ------ -- - -
Object.values()
values()
方法返回一个包含对象中每个值的可迭代对象。该方法的语法如下:
------------------
其中,obj
是将要返回值的目标对象。
下面是一个示例:
--- ------------ - - ----- -------- ---- -- -- --- ------ - ---------------------------- --------------------
输出结果为:
- -------- -- -
Object.getOwnPropertyDescriptors()
getOwnPropertyDescriptors()
方法返回一个对象所有自身属性的描述符对象。该方法的语法如下:
-------------------------------------
其中,obj
是将要返回自身属性描述符对象的目标对象。
下面是一个示例:
--- ------------ - - ----- -------- ---- -- -- --- ----------- - ----------------------------------------------- -------------------------
输出结果为:
- ----- - ------ -------- --------- ----- ----------- ----- ------------- ---- -- ---- - ------ --- --------- ----- ----------- ----- ------------- ---- - -
总结
ES6 新增的 Array 和 Object 方法提供了很多有用的功能,使得代码更加简洁、高效。熟练掌握这些方法,可以提高前端开发效率,减少代码复杂度。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/647b25b2968c7c53b06b385a