目录
1.数字操作
1.1.toFixed()
- 数字型可以通过
toFixed()
方法以四舍五入的保留方法,保留指定小数(默认保留0位)
console.log(10.11.toFixed()); // 10
console.log(10.toFixed(2)); // 10.00
2.数组操作
2.1.forEach
forEach 只遍历,不返回值(加强版for循环)
<script>
// 适合于遍历数组对象
const arr = ['red', 'green', 'yellow']
arr.forEach(function (item, index) {
console.log(index); // 0, 1, 2
console.log(item); // red, green, blue
})
</script>
2.2.map
map可以遍历处理数据,并且返回新的数组(forEach无返回)
const arr = ['red', 'green', 'blue', 'yellow']
const newArr = arr.map(function (item, index) {
console.log(index); // 0, 1, 2, 3
console.log(item); // red, green, blue, yellow
return `${index}:${item}`
})
console.log(newArr); // ["0:red","1:green","2:blue","3:yellow"]
2.3.jion
join 拼接数组元素为字符串
const str = arr.join('')
console.log(str); // redgreenblueyellow
// 自带‘ , ’
const str1 = arr.join()
console.log(str1); // red,green,blue,yellow
2.4.filter
与map相似,但是map可以根据添加
筛选
,返回新数组
const arr = [10, 20, 30]
const result = arr.filter(item => item >= 20)
console.log(result); // 20, 30
2.5.reduce
累加器,返回积累处理的结果,经常用于数组求和,其语法如下:
const arr = [1, 2, 3]
const sum1 = arr.reduce(function (prev, current) {
return prev + current
})
console.log(sum1); // 6
const sum2 = arr.reduce(function (prev, current) {
return prev + current
},4)
console.log(sum2); // 10
- 其中,
prev
和current
分别表示上一个值当前值和当前值 - 后面的4为起始值,初始值默认为零
如果没有起始值,执行情况如下:
prev | current | return | |
---|---|---|---|
第一次执行 | 1 | 2 | 3 |
第二次执行 | 3 | 3 | 6 |
如果有起始值4,
执行情况如下:
prev | current | return | |
---|---|---|---|
第一次执行 | 4 | 1 | 5 |
第二次执行 | 5 | 2 | 7 |
第三次执行 | 7 | 3 | 10 |
总结:
- 如果没有起始值,prev 和 current指向
arr[0]
和arr[1]
,相加后返回的值作为prev,而将 current的下一个值作为下一次指行中的current - 如果有起始值,则首次循环将prev 和 current指向
起始值
和arr[0]
,在依次执行
reduce还可以用于对象数组的属性累加
const someone = [
{
name: "Tom",
money: 10
},
{
name: "Jack",
money: 20
}
]
const total = someone.reduce((prev, current) => {
return prev.money + current.money
}, 10)
console.log(total); // 40
2.6.find
find
用于数组查找
- 找到值则不会继续向下查找
在数组查找中,找到则返回寻找的值,没有找到则返回
undefined
const arr = ['yellow', 'pink', 'green']
const ifPink = arr.find((item) => {
return item === "pink"
})
console.log(ifPink); // pink
find
还可以用于对象数组的属性查找(常常用于判断属性来渲染数组中的某个对象)
const someone = [
{
name: "Tom",
money: 10
},
{
name: "Jack",
money: 20
}
]
const ifJack = someone.find((item) => {
return item.name === "Jack"
})
console.log(ifJack); // {name: 'Jack', money: 20}
2.7.every
,some
every
用于判断数组中是否每一个都符合条件,返回布尔值
arr = [1, 2, 3]
const ifEvery = arr.every(item => item >= 20)
console.log(ifEvery); // false
some
用于判断数组中是否有某一个值,与find类似,不同的是some返回的是布尔值
2.8.补充
方法 | 用途 |
---|---|
sort | 对原数组进行排序 |
concat | 合并两个数组,返回生成的新数组 |
splice | 删除数组某个指定值 |
reverse | 反转数组 |
findIndex | 查找元素索引 |
3.字符串操作
3.1.split
split
将字符串拆分成数组,与join(将数组拼接成字符串)相反
const str1 = '1,2,3'
const arr1 = str1.split(',') // 以','拆分字符串arr1成数组
console.log(arr1); // ['1', '2', '3']
3.2.substring
substring
将字符串截取
- 如果省略结束索引号,默认取到最后
- 截取范围左开右闭
const str2 = '春眠不觉晓'
console.log(str2.substring(1,2)); // 眠
console.log(str2.substring(3)); // 觉晓
console.log(str2.substring(4)); // 晓
3.3.startWith
startWith
判断字符串是不是以某字符开头
- 索引号代表以那个索引开头向后查找
const str3 = '春眠不觉晓'
console.log(str3.startsWith('春')); // true
console.log(str3.startsWith('春眠')); // true
// 有索引号
console.log(str3.startsWith('觉',3)); // true
3.4.includes
includes
判断一个字符串是否包含在另外一个字符串中(区分大小写)
const str4 = '春眠不觉晓'
console.log(str4.includes('春')); // true
console.log(str4.includes('夏')); // false