JS内置对象操作简解

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