Array、Object常用方法
JS 内置对象方法总结
Array(数组) 参考
1、归纳:
实例方法 | 调用参数 | 功能 | 返回值 | 改变原数组 | 版本 |
---|---|---|---|---|---|
push | …items | (尾部)追加 n 个元素 | 新数组长度 | Y | - |
unshift | …items | (开头)插入 n 个元素 | 返回新数组长度 | Y | - |
pop | - | 删除数组的最后一位 | 被删除的数据 | Y | - |
shift | - | 删除数组的第一位 | 被删除的数据 | Y | - |
splice | start,deleteCount?,…items? | 指定位置(索引从 0 开始) 删除指定个数再追加 n 个元素 | 被删除的数据组成的数组 | Y | - |
slice | start?,end? | 裁切指定位置的数组 | 被裁切的元素形成的新数组 | N | - |
sort | (a,b)=>number? | 对数组进行排序,可传入 | 新数组 | Y | - |
reverse | - | 反转数组中的元素 | 反转后数组 | Y | - |
concat | valueN | 合并两个或多个数组 | 合并之后的数组 | N | - |
join | separator? | 数组拼接形成字符串(默认,) | 拼接的字符串 | N | - |
find | (e, i, a) =>boolean | 返回数组中满足提供的函数的第一个元素的值,否则返回 undefined | 满足条件第一个元素 | N | ES6 |
findIndex | (e, i, a) =>boolean | 返回数组中满足提供的函数的第一个元素的下标,否则返回-1 | 满足条件第一个索引 | N | ES6 |
includes | searchElement,fromIndex? | 判断一个数组是否包含一个指定的值 | true、false | N | ES6 |
fill | value,start?,end? | 用固定值填充一个数组 | 新数组 | Y | ES6 |
indexOf | searchElement,fromIndex? | 返回数组中第一次出现给定元素的索引,不存在返回-1 | 下标,不存在返回 -1 | N | - |
lastIndexOf | searchElement,fromIndex? | 返回数组中给定元素最后一次出现的索引,不存在则返回-1 | 最后出现的下标,不存在返回-1 | N | - |
forEach | callbackFn, thisArg? | 方法对数组的每个元素执行一次给定的函数 | - | N | - |
map | callbackFn, thisArg? | 方法创建一个新数组(由原数组中的每个元素都调用一次提供的函数后的返回值组成) | 新的自定义数组 | N | - |
filter | callbackFn, thisArg? | 回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中 | 新的数组 | N | - |
reduce | callbackFn, initialValue? | 遍历数组,每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值 prev,传入到下一次函数中 | 结果汇总为单个返回值 | N | - |
flat | depth? | 根据指定深度递归地将所有子数组拉平 | 新数组 | N | ES6 |
flatMap | callbackFn,thisArg? | 先通过 map 返回一个新数组,再将数组拉平( 只能拉平一次 ) | 新数组 | N | ES6 |
2、示例:
-
push(…items):方法将指定的元素添加到数组的末尾,并返回新的数组长度。
参数 描述 备注 elementN 添加到数组末尾的元素。 可选 let list = [1, 2, 3] console.log("push", list.push(...list), list) // > push 6 (6) [1, 2, 3, 1, 2, 3]
-
unshift(…items):方法将指定元素添加到数组的开头,并返回数组的新长度。
参数 描述 备注 elementN element1、…、elementN 添加到 arr 开头的元素。 可选 list = [1, 2, 3]; console.log("unshift", list.unshift(...list), list); // > unshift 6 (6) [1, 2, 3, 1, 2, 3]
-
pop():方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
list = [1, 2, 3]; console.log("pop", list.pop(), list); // > pop 3 (2) [1, 2]
-
shift():方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
list = [1, 2, 3]; console.log("shift", list.shift(), list); // > shift 1 (2) [2, 3]
-
splice(start, deleteCount?, …items?):移除或者替换已存在的元素和/或添加新的元素。
参数 描述 备注 start 从 0 开始计算的索引,表示要开始改变数组的位置 必选 deleteCount 一个整数,表示数组中要从 start
开始删除的元素数量可选 item1、…、itemN 从 start 开始要加入到数组中的元素。如果不指定任何元素,splice() 将只从数组中删除元素。 可选 list = [1, 2, 3]; console.log("splice", list.splice(1, 1, 4, 5), list); // > splice [2] (4) [1, 4, 5, 3]
-
slice(start?,end?): 方法返回一个新的数组对象,这一对象是一个由 start 和 end 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
参数 描述 备注 start 提取起始处的索引(从 0 开始),如果索引是负数,则从数组末尾开始计算 可选 end 提取终止处的索引(从 0 开始),如果索引是负数,则从数组末尾开始计算 可选 list = [1, 2, 3, 4, 5, 6]; console.log("slice", list.slice(1, 4), list); // > slice (3) [2, 3, 4] (6) [1, 2, 3, 4, 5, 6]
-
sort(compareFn):对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。
如果 (a, b)=> {return a - b;} ,a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
如果 (a, b)=> {return b - a;} ,b - a > 0 那么 b 会被排列到 a 之前; (从大到小排序)参数 描述 备注 compareFn 定义排序顺序的函数 可选 list = [3, 1, 2]; console.log("sort", list.sort(), list); // > sort (3) [1, 2, 3] (3) [1, 2, 3] list = [3, 1, 2]; console.log( "sort", list.sort((a, b) => { return b - a; }), list ); // > sort (3) [3, 2, 1] (3) [3, 2, 1]
-
reverse():反转数组中的元素,并返回同一数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。换句话说,数组中的元素顺序将被翻转,变为与之前相反的方向。要在不改变原始数组的情况下反转数组中的元素,使用 toReversed()。
list = [1, 2, 3]; console.log("reverse", list.reverse(), list); // > reverse (3) [3, 2, 1] (3) [3, 2, 1]
-
concat(valueN):方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
参数 描述 备注 valueN 数组和/或值,将被合并到一个新的数组中。如果省略了所有 valueN 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝 可选 list = [1, 2, 3]; console.log("concat", list.concat(list, list, list), list); // > concat (12) [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3] (3) [1, 2, 3]
-
join(separator):将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔 (默认",")。如果数组只有一个元素,那么将返回该元素而不使用分隔符。
list = [1, 2, 3]; console.log("join", list.join(), list); // > join 1,2,3 (3) [1, 2, 3]
-
find(callbackFn, thisArg?):方法返回数组中满足提供的回调函数的第一个元素的值。否则返回 undefined。
参数 描述 备注 callbackFn 为数组中的每个元素执行的函数。它应该返回一个真值来表示已经找到了匹配的元素。该函数被调用时将传入以下参数: 必选 -element 数组中当前正在处理的元素。 必选 -index 正在处理的元素在数组中的索引。 可选 -array 调用了 find() 的数组本身。 可选 thisArg 执行 callbackFn 时用作 this 的值 可选 list = [1, 2, 3]; console.log( "find", list.find((item, index, array) => item > 1), list ); // > find 2 (3) [1, 2, 3]
-
findIndex(callbackFn, thisArg?):返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
参数 描述 备注 callbackFn 为数组中的每个元素执行的函数。它应该返回一个真值以指示已找到匹配元素,否则返回一个假值。该函数被调用时将传入以下参数: 必选 -element 数组中当前正在处理的元素。 必选 -index 正在处理的元素在数组中的索引。 可选 -array 调用了 findIndex() 的数组本身。 可选 thisArg 执行 callbackFn 时用作 this 的值 可选 list = [1, 2, 3]; console.log( "findIndex", list.findIndex((item, index, array) => item > 1), list ); // > findIndex 1 (3) [1, 2, 3]
-
includes(searchElement,fromIndex?):方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
参数 描述 备注 searchElement 需要查找的值。 必选 fromIndex 开始搜索的索引(从零开始),负索引从数组末尾开始计数 可选 list = [1, 2, 3]; console.log("includes", list.includes(2), list); // > includes true (3) [1, 2, 3]
-
fill(value,start?,end?):方法用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。
参数 描述 备注 value 用来填充数组元素的值。注意所有数组中的元素都将是这个确定的值:如果 value 是个对象,那么数组的每一项都会引用这个元素 必选 start 基于零的索引,从此开始填充。负数索引从数组的末端开始计算 可选 end 基于零的索引,在此结束填充。负数索引从数组的末端开始计算 可选 list = [1, 2, 3]; console.log("fill", list.fill(4, 1, 3), list); // > fill (3) [1, 4, 4] (3) [1, 4, 4]
-
indexOf(searchElement,fromIndex?):方法返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。
参数 描述 备注 searchElement 数组中要查找的元素。 必选 fromIndex 开始搜索的索引(从零开始),负索引从数组末尾开始计数 可选 list = [1, 2, 3]; console.log("indexOf", list.indexOf(2, 0), list); // > indexOf 1 (3) [1, 2, 3]
-
lastIndexOf(searchElement,fromIndex?):方法返回数组中给定元素最后一次出现的索引,如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。
参数 描述 备注 searchElement 被查找的元素。 必选 fromIndex 以 0 起始的索引,表明反向搜索的起始位置 可选 list = [1, 2, 3, 4, 3]; console.log("lastIndexOf", list.lastIndexOf(3, 3), list); // lastIndexOf 2 (5) [1, 2, 3, 4, 3]
-
forEach(callbackFn,thisArg?):方法对数组的每个元素执行一次给定的函数。
参数 描述 备注 callbackFn 为数组中每个元素执行的函数。并会丢弃它的返回值,该函数被调用时将传入以下参数 必选 -element 数组中正在处理的当前元素。 必选 -index 数组中正在处理的当前元素的索引。 可选 -array 调用了 forEach() 的数组本身。 可选 thisArg 执行 callbackFn 时用作 this 的值 可选 list = [1, 2, 3]; list.forEach((item, index, array) => { console.log("forEach", item, index, array); }); // > forEach 1 0 (3) [1, 2, 3] forEach 2 1 (3) [1, 2, 3] forEach 3 2 (3) [1, 2, 3]
-
map(callbackFn,thisArg?):方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
参数 描述 备注 callbackFn 为数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该函数被调用时将传入以下参数: 必选 -element 数组中当前正在处理的元素。 必选 -index 正在处理的元素在数组中的索引。 可选 -array 调用了 map() 的数组本身。 可选 thisArg 执行 callbackFn 时用作 this 的值 可选 list = [1, 2, 3]; console.log( "map", list.map((item, index, array) => item + 1) ); // > map (3) [2, 3, 4]
-
filter(callbackFn,thisArg?):方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。
参数 描述 备注 callbackFn 为数组中的每个元素执行的函数。它应该返回一个真值以将元素保留在结果数组中,否则返回一个假值。该函数被调用时将传入以下参数: 必选 -element 数组中当前正在处理的元素。 必选 -index 正在处理的元素在数组中的索引。 可选 -array 调用了 filter() 的数组本身。 可选 thisArg 执行 callbackFn 时用作 this 的值 可选 list = [1, 2, 3]; console.log( "list", list.filter((item, index, arr) => item >= 2) ); // > list (2) [2, 3]
-
reduce(callbackFn,initialValue?):方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
参数 描述 备注 callbackFn 为数组中每个元素执行的函数。其返回值将作为下一次调用 callbackFn 时的 accumulator 参数。对于最后一次调用,返回值将作为 reduce() 的返回值。该函数被调用时将传入以下参数: 必选 -accumulator 上一次调用 callbackFn 的结果。在第一次调用时,如果指定了 initialValue 则为指定的值,否则为 array[0] 的值。 可选 -currentValue 当前元素的值。在第一次调用时,如果指定了 initialValue,则为 array[0] 的值,否则为 array[1]。 可选 -currentIndex currentValue 在数组中的索引位置。在第一次调用时,如果指定了 initialValue 则为 0,否则为 1。 可选 -array 调用了 reduce() 的数组本身。 可选 initialValue 第一次调用回调时初始化 accumulator 的值 可选 list = [1, 2, 3]; console.log( "reduce", list.reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 10), list ); // > reduce 16 (3) [1, 2, 3]
-
flat(depth?):方法创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中。
参数 描述 备注 depth 指定要提取嵌套数组的结构深度,默认值为 1。 可选 list = [ [1.1, 1.2, 1.3], [2.1, 2.2, 2.3], ]; console.log("flat", list.flat(1), list); // > flat (6) [1.1, 1.2, 1.3, 2.1, 2.2, 2.3]
-
flatMap(callbackFn,thisArg?):方法对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法(arr.map(…args).flat()),但比分别调用这两个方法稍微更高效一些。
参数 描述 备注 callbackFn 一个在数组的每个元素上执行的函数。它应该返回一个包含新数组元素的数组,或是要添加到新数组中的单个非数组值。该函数将被传入以下参数: 必选 -element 数组中正在处理的当前元素。 可选 -index 数组中正在处理的当前元素的索引。 可选 -array 调用 flatMap() 的当前数组。 可选 thisArg 在执行 callbackFn 时用作 this 的值。 可选 list = [1, 2, 3]; console.log( "flatMap", list.flatMap((element, index, array) => { return [element, index]; }), list ); // > flatMap (6) [1, 0, 2, 1, 3, 2] (3) [1, 2, 3]
Object(对象) 参考
1、归纳
静态方法 | 参数 | 功能 | 返回值 | 改变原数据 | 版本 |
---|---|---|---|---|---|
assign | target,…sources | 将一个或者多个源对象中所有可枚举的自有属性复制到目标对象 | 返回修改后的目标对象 | Y | ES6 |
create | proto,propertiesObject | 静态方法以一个现有对象作为原型,创建一个新对象。 | 新对象 | N | - |
defineProperties | obj,props | 静态方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。 | 此对象 | Y | - |
defineProperty | obj, prop?, descriptor? | 静态方法会直接在一个对象上定义一个新属性,或修改其现有属性,并返回此对象。 | 此对象。 | Y | - |
entries | obj | 静态方法返回一个数组,包含给定对象自有的可枚举字符串键属性的键值对。 | 数组 | N | ES8 |
freeze | obj | 静态方法可以使一个对象被冻结。 | 此对象 | Y | ES6 |
getOwnPropertyNames | obj | 静态方法返回一个数组,其包含给定对象中所有自有属性 | 数组属性 | N | - |
is | value1, value2 | 静态方法确定两个值是否为相同值。 | Boolean | N | ES6 |
keys | - | 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组 | 数组键 | N | - |
hasOwnProperty | prop | 方法返回一个布尔值,表示对象自有属性(而不是继承来的属性)中是否具有指定的属性。 | Boolean | N | - |
2、示例:
-
Object.assign(target, …sources):静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象,并返回修改后的目标对象。(注意:针对深拷贝,需要使用其他办法,因为 Object.assign() 只复制属性值。)
参数 描述 备注 target 需要应用源对象属性的目标对象,修改后将作为返回值。 必选 sources 一个或多个包含要应用的属性的源对象。 可选 let target = { a: 1, b: 2 }, source = { b: 4, c: 5 }; console.log("assign", Object.assign(target, source), target); // > assign {a: 1, b: 4, c: 5} {a: 1, b: 4, c: 5}
-
Object.create(proto, propertiesObject?):静态方法以一个现有对象作为原型,创建一个新对象。
参数 描述 备注 proto 新创建对象的原型对象。 必选 propertiesObject 对象可枚举的自有属性将为新创建的对象添加具有对应属性名称的属性描述符 可选 target = { a: 1, b: 2 }; let newObj = Object.create(target, { c: { value: "play" } }); console.log("target", newObj, Object.getPrototypeOf(newObj), target); // > target {c: 'play'}c: "play"[[Prototype]]: Object {a: 1, b: 2}a: 1b: 2[[Prototype]]: Object {a: 1, b: 2}
-
Object.defineProperties(obj, props?):静态方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象
参数 描述 备注 obj 在其上定义或修改属性的对象。 必选 props 一个对象,其中每个键表示要定义或修改的属性的名称(属性详见) 可选 target = { a: 1, b: 2 }; newObj = Object.defineProperties(target, { a: { value: "张三" } }); console.log("defineProperties", newObj, target); // > defineProperties {a: '张三', b: 2} {a: '张三', b: 2}
-
Object.defineProperty(obj, prop?, descriptor?):静态方法会直接在一个对象上定义一个新属性,或修改其现有属性,并返回此对象。
描述:Object.defineProperty() 允许精确地添加或修改对象上的属性。通过赋值添加的普通属性会在枚举属性时(例如 for…in、Object.keys() 等)出现,它们的值可以被更改,也可以被删除。此方法允许更改这些额外细节,以使其不同于默认值。默认情况下,使用 Object.defineProperty() 添加的属性是不可写、不可枚举和不可配置的。参数 描述 备注 obj 要定义属性的对象。 必选 prop 一个字符串或 Symbol,指定了要定义或修改的属性键。 可选 descriptor 要定义或修改的属性的描述符。 可选 -configurable 为 false 时该属性的类型不能在数据属性和访问器属性之间更改,且该属性不可被删除,
且其描述符的其他属性也不能被更改(但是,如果它是一个可写的数据描述符,则 value 可以被更改,writable 可以更改为 false)。可选 -
Object.entries(obj):静态方法返回一个数组,包含给定对象自有的可枚举字符串键属性的键值对。
target = { a: 1, b: 2 }; for (const [key, val] of Object.entries(target)) { console.log(`${key}: ${val}`); } // > a: 1 b: 2 console.log("entries", Object.entries(target)); // > entries [["a",1],["b",2]]
-
Object.freeze(obj):静态方法可以使一个对象被冻结。冻结对象可以防止扩展,并使现有的属性不可写入和不可配置。被冻结的对象不能再被更改:不能添加新的属性,不能移除现有的属性,不能更改它们的可枚举性、可配置性、可写性或值,对象的原型也不能被重新指定。freeze() 返回与传入的对象相同的对象。
target = { a: 1, b: 2 }; Object.freeze(target); target.a = "sa"; console.log("freeze", target); // > freeze {a: 1, b: 2}
-
Object.keys(obj):静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
target = { a: 1, b: 2 }; console.log("keys", Object.keys(target)); // > keys (2) ['a', 'b']
-
Object.prototype.hasOwnProperty(prop):方法返回一个布尔值,表示对象自有属性(而不是继承来的属性)中是否具有指定的属性。
target = { a: 1, b: 2 }; console.log("hasOwnProperty", target.hasOwnProperty("a")); // > hasOwnProperty true