Array方法
不改变原数组
map
迭代数组,对数组每个值处理,返回一个新数组
const arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.map((item, index) => item * 2)); // [2, 4, 6, 8, 10, 12, 14, 16, 18]
console.log(arr); // [1,2,3,4,5,6,7,8,9]
forEach
遍历比较复杂的数组
const arr = [1,2,3,4,5,6,7,8,9]
arr.forEach( (item, index) => {}) // 没有返回值
`item` // 每次遍历的元素
`index` // 下标 可选
join
将数组每个值用符号拼接,返回一个字符串
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const result = arr.join('-');
console.log(result); // 1-2-3-4-5-6-7-8-9
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
filter
过滤数组 返回一个过滤完的新数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.filter((item, index) => item > 1) // 返回一个过滤完的新数组
`item` // 每次遍历的元素
`index` // 下标 可选
`return` // 一个表达式 为flase表示过滤掉
reduce
求累计值,一般用来求和,返回累计的结果
const arr = [1, 2, 3]
const sum = arr.reduce((prev, item) => prev + item, 0) // 循环2次 写起始值循环3次
console.log(sum); // 6
`prev -> 累计值`
`item -> 每次循环的元素值 `
`return -> 返回累计值`
`0` // 起始值,不写prev默认为数组第一个元素的值,
find
查找对应的值或对象,返回查找的结果,没有查到则返回 undefined
const arr = [{
name: '张三',
salary:10000,
},
{
name: '李四',
salary:10000,
},
{
name: '王五',
salary:10000,
}
]
const obj = arr.find(item => item.name === '李四')
console.log(obj); // { name: '李四', salary: 10000 }
every
检测数组是否都符合条件,返回一个布尔值
const arr = [1,2,3,4,5,6,7,8,9];
const falg = arr.every(item => item >= 1)
console.log(falg); // true
some
检测数组中是否有符合条件的值, 返回一个布尔值, 只要有一个符合就返回true,如果都不符合则返回false
const arr = [1,2,3,4,5,6,7,8,9];
const falg = arr.some(item => item > 8)
console.log(falg); // true
findIndex
寻找对应元素的下标,返回数组下标
const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
console.log(arr.findIndex(item => item === 205)); // 3
Array.from
将伪数组转换为真数组,返回新数组,不改变原数组
<ul>
<li></li>
<li></li>
<li></li>
</ul>
let lis = document.querySelectorAll('ul li')
const arr = Array.from(lis) // 返回一个真数组
console.log(arr) // [li, li, li, li] 可以调用数组方法
toString
数组上的toString方法,可以将数组转化成字符串
let arr = [1,2,3]
console.log(arr.toString()); // 1,2,3
console.log(arr); // [1,2,3]
slice
截取数组,返回截取元素的数组,该方法不会改变原数组
const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9]
const result = arr.slice(0, 3)
console.log(arr) // [635, 205, 168, 152, 56, 48, 9, 5, 5]
console.log(result) // [5, 152, 56]
改变原数组
splice
删除或添加对应的数组元素,只返回被删除的元素数组,该方法会改变数组
const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
console.log(arr.splice(3, 1, '0')); // [205]
console.log(arr); // [5, 152, 56, "0", 5, 48, 168, 635, 9]
`3` // 要删除或要替换的下标
`1` // 删除的元素个数
`'0'` // 要添加的元素
sort
对数组进行排序,改变原数组,返回原数组
const arr = [5, 152, 56, 205, 5, 48, 168, 635, 9];
// a - b 从小到大排列
const result = arr.sort((a, b) => a - b) // 正序
console.log(arr); // [5, 5, 9, 48, 56, 152, 168, 205, 635]
// b - a 从大到小排列
const result = arr.sort((a, b) => b - a) // 反序
console.log(arr); // [635, 205, 168, 152, 56, 48, 9, 5, 5]
reverse
翻转数组,返回翻转的数组,会改变原数组
const arr = [1, 2, 3, 4, 5]
console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]
console.log(arr); // [ 5, 4, 3, 2, 1 ]
String方法
split
将字符串转换为数组,返回一个数组
const str = 'jsc,onst'
console.log(str.split(`可以配置正则`)); // [ 'jsc,onst' ]
substring
截取字符串,返回截取结果
const str = 'jsconst'
console.log(str.substring(2, 4)); // co
`2` // 从字符串下标2开始截取
`4` // 从字符串下标4结束(不包括4)
// 如果不写结束下标则截取到字符串最后一位
startsWith
判断一个字符是否以什么开头,返回一个布尔值
const str = 'jsconst'
console.log(str.startsWith('co', 2)); // true
`'co'` // 是否以co开头
`2` // 默认为0,从字符串哪个位置开始匹配(可选)
includes
判断此字符串是否含有某个字符,返回一个布尔值
const str = 'jsconst'
console.log(str.includes('j', 2)); // false
`j` // 要匹配的字符
`2` // 匹配的位置(可选)