一、数组实例方法
1、破坏性方法
破坏性方法表示方法会改变原数组
-
push
在数组的末尾添加一个元素或者多个元素,并返回数组的新长度
-
unshift()
在数组的开头添加一个元素或者多个元素,并返回数组的新长度
let arr = ['a', 'b', 'c'] arr.push('d') console.log(arr); console.log(arr.push());//['a', 'b', 'c','d'] arr.unshift('A') console.log(arr); console.log(arr.unshift());//['A','a', 'b', 'c','d']
-
pop()
删除数组的最后一个元素,返回值的被删除的元素
-
shift()
删除数组的第一个元素,返回值的被删除的元素
-
splice(开始删除的位置,删除的元素个数)
第二个参数不写表示从第一个参数下标开始删除后面的所有元素,返回值是被删除的元素组成的数组
splice 也可以添加元素 : splice (起始位置,0 ,添加的元素,添加的元素…),但是添加元素返回的是空数组,只是改变了原数组
-
sort()
sort( function(a,b){ return a-b})//这是升序 b-a则是降序
-
reserve()
反转原数组,返回反转后的数组
2、非破坏性方法
非破坏性方法表示方法不会改变原数组
-
slice (截取的起始位置,截取的结束位置)
:前闭后开截取数组片段,返回一个新截取的数组 不改变原数组,第一个参数不写那么则会一直截取到最后,两个参数都省略可以对数组进行浅拷贝,返回一个新数组
-
concat()
连接数组,返回一个新数组
-
indexOf
(元素,开始查询此元素的位置)获取数组中元素第一次出现的索引,并返回它的索引,没有返回-1
-
lastIndexOf
和③ 相同 但是是从后往前找
-
join(分隔符)
将数组的元素连接成一个字符串,默认元素之间用逗号隔开,在小括号里面可以指定元素之间的符号 如join(@):这表示元素之间用@符号隔开,返回一个字符串
-
map(function(item,index){})
map映射,返回一个新的数组,新数组由每个元素调用回调函数的返回值组成,也就是由回调函数的返回值组成,(有几个元素就有几个返回值)
const arr = ['张三','李四','王五'] const res = arr.map(function(item,index){ return 1 }) console.log(res);//res[1,1,1]
-
filter(回调函数作为参数,一般要写返回值,返回true或者false,函数里面传入的是 element,index,array )
将数组中满足条件的保存到一个新数组中返回,根据回调函数的返回值决定是否将这个元素放入新数组
const arr = [10,20,30] const res = arr.filter(function(item,index){ return item > 10 }) console.log(res)
-
reduce(回调函数(pre,cur){return pre + cur},第二个参数:初始值)
逐个遍历数组元素,每一步都将当前元素的值与上一步的计算结果相加(上一步的计算结果是当前元素之前所有元素的总和)——直到没有更多的元素被相加。
// 语法:arr.reduce(function(){}, initValue) // 作用:对数组里面的每个元素都执行一个自定义的reducer函数,将其结果汇总为单个返回值。 // 参数 : // callbackFn : 回调函数 必须 √ // initValue : 初始值 (可选) √ // callbackFn的参数: ==> 要写return // previousValue : 上一次调用calbackFn 时的返回值 √ // currentValue : 当前元素 √ // currentIndex : 当前元素的索引 (可选) // array : 源数组 (可选) // 返回值 : 使用 “reducer” 回调函数遍历整个数组后的结果。
const arr = [{ name: '张三', salary: 10000 }, { name: '李四', salary: 10000 }, { name: '王五', salary: 20000 }] const res = arr.reduce(function (prv, cur) { return prv + cur.salary * 0.3//每一次将当前的元素与上一步的计算结果相加 }, 0)//0时初始值,这里如果不写的话时数组里面的第一个对象 console.log(res)
-
find(function(ele,index,当前数组))
搜索查找,返回数组中满足函数return条件的第一个元素,没有返回undefined
const arrTemp = [{name:'小米', price:1999},{name:'华为', price:5999}] const res = arrTemp.find(function(item,index){ return item.name = "小米" }) console.log(res)//{name:'小米', price:1999}
-
findIndex(function(ele,index, array){return 。。。})
返回满足return条件的数组元素的下标,没有返回 -1
-
arr.every(cbfn)
cbfn
是回调函数,检测数组内元素是否都满足return指定条件,如果都满足,返回true,否则 返回false -
arr.some(cbfn)
检测数组内元素至少有一个元素满足return指定条件,如果满足,返回true,否则 返回false
⚠注:map
、filter
、forEach
、find
、findIndex
、every
、some
等传入回调函数的参数都是三个分别为:element(当前元素)、index(当前 元素索引)、array(被遍历的数组)且这些都能迭代数组
二、数组实例方法总结
1、添加/删除元素
push(...items)
—— 向尾端添加元素,pop()
—— 从尾端提取一个元素,shift()
—— 从首端提取一个元素,unshift(...items)
—— 向首端添加元素,splice(pos, deleteCount, ...items)
—— 从pos
开始删除deleteCount
个元素,并插入items
到原数组中,(删除和添加同时进行)slice(start, end)
—— 创建一个新数组,将从索引start
到索引end
(但不包括end
)的元素复制进去。concat(...items)
—— 返回一个新数组:复制当前数组的所有元素,并向其中添加items
。如果items
中的任意一项是一个数组,那么就取其元素。
2、搜索元素
indexOf/lastIndexOf(item, pos)
—— 从索引pos
开始搜索item
,搜索到则返回该项的索引,否则返回-1
。includes(value)
—— 如果数组有value
,则返回true
,否则返回false
。find/filter(func)
—— 通过func
过滤元素,返回使func
返回true
的第一个值/所有值。findIndex
和find
类似,但返回索引而不是值。
3、遍历元素
forEach(func)
—— 对每个元素都调用func
,不返回任何内容。
4、转换数组
map(func)
—— 根据对每个元素调用func
的结果创建一个新数组。sort(func)
—— 对数组进行原位排序,然后返回它。reverse()
—— 原位反转数组,然后返回它。split/join
—— 将字符串转换为数组并返回。reduce/reduceRight(func, 初始值)
—— 通过对每个元素调用func
计算数组上的单个值,并在调用之间传递中间结果。
5、其他
-
Array.from()
: 将伪数组转化为真数组 -
Array.isArray(value)
检查value
是否是一个数组,如果是则返回true
,否则返回false
。 -
请注意,
sort
,reverse
和splice
方法修改的是数组本身。 -
arr.flat(depth)
从多维数组指定深度创建一个新的扁平数组。返回一个新数组
6、不常用方法
-
[arr.some(fn)]/[arr.every(fn)
检查数组。与
map
类似,对数组的每个元素调用函数fn
。如果任何/所有结果为true
,则返回true
,否则返回false
。这两个方法的行为类似于
||
和&&
运算符:如果fn
返回一个真值,arr.some()
立即返回true
并停止迭代其余数组项;如果fn
返回一个假值,arr.every()
立即返回false
并停止对其余数组项的迭代。我们可以使用
every
来比较数组:function arraysEqual(arr1, arr2) { return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]); } alert( arraysEqual([1, 2], [1, 2])); // true
-
arr.fill(value, start, end)
—— 从索引start
到end
,用重复的value
填充数组。 -
arr.copyWithin(target, start, end)
—— 将从位置start
到end
的所有元素复制到 自身 的target
位置(覆盖现有元素)。 -
Array.of(element0[, element1[, …[, elementN\]]])
基于可变数量的参数创建一个新的Array
实例,而不需要考虑参数的数量或类型。
三、字符方法
-
str.split
(分隔符)使用指定的分隔符,将字符串分割,转化为一个字符串数组,跟数组的join()方法反过来
const str ='sun-zigayue' console.log(str.split('-'))
-
str.subString
(开始截取的位置(startIndex
),结束位置(endIndex
) )结束位置的索引省略则截取到最后,得到
[start ,end)
:前闭后开 -
str.startsWith
(searchString
,[,position
])判断是否以某个字符串开头
const str = "sun zi ga yue" console.log(str.startsWith('sun'))//false console.log(str.startsWith('sun',5))//false console.log(str.startsWith('zi',4))//true
-
str.includes(字符,[位置])
判断一个数组是否包含另一个字符
const str = 'sunzigayue' console.log(str.includes('ga'),5)//false
四、数字方法
-
num.fixed(保留小数位数)
保留小数,返回一个字符串类型
五、对象方法
Objeect.values(obj)
返回传入对象属性值组成的数组
Object.keys(obj)
返回传入对象的属性名组成的字符串数组
-
Object.assign(目标对象,...源对象)
对象的浅拷贝
拷贝对象:将源对象复制给目标对象,返回拷贝完成后的目标对象
注:如果源对象里面有和目标对象相同的属性,拷贝后源对象属性会覆盖掉目标对象的属性
for...in...
遍历对象的属性
获取属性值用obj[key]