一、数组相关方法
1.map()迭代数组
⚫ 作用： map 迭代数组
⚫使用场景： map 可以处理数据，并且返回新的数组
⚫ 语法：(item,index)参数可以是其它任何字母或者是单词表示 ; 左边的参数一定是表示 数组元素 ; 右边的参数一定是表示 数组下标*
小案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map方法 </title>
</head>
<body>
<script>
const arr = ['宅亦非', '喜欢', '五一'] // 数组对象
/* map 迭代数组 返回一个新的数组 */
const newArr = arr.map(function (item, index) {
console.log(item) // 数组元素
console.log(index) // 数组下标
return `<div>${item + '同学'}</div>`
})
console.log(newArr)
</script>
</body>
</html>
输出结果：
2.forEach（）
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
小案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr = [1, 4, 2, 16, 7, 9, 8, 14]
arr.forEach(item => console.log(item))
</script>
</body>
</html>
输出结果：
3.filter（）：
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
小案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 4, 2, 16, 7, 9, 8, 14]
let newArr = arr.filter(item => item > 4)
console.log(newArr)
</script>
</body>
</html>
输出结果：
4.find（）
find() 用于查找数组中第1个满足条件的元素，并返回，如果没有这样的元素则返回undefined
语法： 数组名.find(function(item, index, arr){return 条件})
小案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// find() 用于查找数组中第1个满足条件的元素，并返回，如果没有这样的元素则返回undefined
/*
// 语法
数组名.find(function(item, index, arr){
return 条件
})
*/
let arr = [5, 7, 5, 10, 9]
let ret = arr.find(function(item,index){
// console.log(item,index);
return item > 7
})
console.log(ret);
</script>
</head>
<body>
</body>
</html>
输出结果：
5.reduce（）
说明：reduce会将回调函数调用多次，如果传递了初始值，reduce会从数组的0号元素开始遍历，如果没有传则从1号元素开始遍历回调函数第1次被调用时，reduce方法会将初始值，传递给pre其后各次，reduce方法会将回调函数上一次返回的结果，传递给pre。
语法： 数组.reduce(function(){},初始值) // reduce()方法的参数 数组.reduce(function(pre,item,index,arr){},初始值) // reduce的回调函数，方法的参数
小案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// reduce() 用于对数组进行遍历，并统计满足条件元素的元素的个数。
/*
// 语法：
数组.reduce(function(){},初始值) // reduce()方法的参数
数组.reduce(function(pre,item,index,arr){},初始值) // reduce的回调函数，方法的参数
// 说明：
reduce会将回调函数调用多次，如果传递了初始值，reduce会从数组的0号元素开始遍历，如果没有传则从1号元素开始遍历
回调函数第1次被调用时，reduce方法会将初始值，传递给pre
其后各次，reduce方法会将回调函数上一次返回的结果，传递给pre
*/
/* // 求和
let arr = [10, 3, 19, 15, 20]
let sum = arr.reduce(function(pre,item){
return pre + item; // 67
},0)
console.log(sum); */
// 求偶数元素的个数
let arr = [10, 3, 19, 15, 20]
let num = arr.reduce(function(pre,item){
if(item % 2 == 1){
return pre + 1;
}else{
return pre
}
}, 0)
console.log(num); //3
</script>
</head>
<body>
</body>
</html>
输出结果:
二、字符串相关方法:
1.splic()
字符串.split(切割符)
将字符串使用指定的切割符，分割成多个部并以数组的形式返回
小案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 字符串.split(切割符)
// 将字符串使用指定的切割符，分割成多个部并以数组的形式返回
let str = 'my name is dong ge';
let arr = str.split(' ')
console.log(arr);
console.log(str.split(''));
输出结果:
2.subString()
字符串.substring(起始下标,结束下标)
在字符串中，读取 起始下标 与 结束下标 之间的内容，含头不含尾
小案例:
// 字符串.substring(起始下标,结束下标)
// 在字符串中，读取 起始下标 与 结束下标 之间的内容，含头不含尾
let url = 'http://www.xxx.com/admin/index.html';
let ret = url.substring(7,18)
console.log(ret);
</script>
输出结果:
3.startsWith()与startsEnd()
①.startsWith()判断字符串是否以某个 内容 开头 ②.startsEnd()判断字符串是否以某个 内容 结束
// 字符串.startsWith(内容)
// 判断字符串是否以某个 内容 开头
let url = 'http://www.xxx.com/admin/index.html';
let ret = url.startsWith('http://')
console.log(ret);
// 字符串.endsWith(内容)
// 判断字符串是否以某个 内容 结束
console.log(url.endsWith('.html'));
</script>
输出结果:
4.includes()
判断字符串是否包含 内容
// 字符串.includes(内容)
// 判断字符串是否包含 内容
console.log(url.includes('.com'));
</script>
输出结果:
5.padStart()和padEnd() ①.padStart()判断 字符串 是否小于 长度，如果小于，则在前面使用 字符填充 ②.padEnd()判断 字符串 是否小于 长度，如果小于，则在后面使用 字符填充
小案例:
// 字符串.padStart(长度,补充字符)
// 判断 字符串 是否小于 长度，如果小于，则在前面使用 字符填充
let str = '1';
console.log(str.padStart(5,'0'));
// 字符串.padEnd(长度,补充字符)
console.log(str.padEnd(5,'0'));
</script>
输出结果:
三、数值相关方法:
1.toFixed()
数值.toFixed(小数位)
保留指定位数的小数，并四舍五入
小案例:
// 数值.toFixed(小数位)
// 保留指定位数的小数，并四舍五入
let price = 10
console.log(price.toFixed(2));
let num = 10.456;
console.log(num.toFixed(2));
</script>
输出结果:
2.toString()
数值.toString() 将数值转换为字符串
小案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 数值.toString() 将数值转换为字符串
let n = 10;
console.log(n);
console.log(typeof n);
console.log(typeof n.toString());
</script>
</head>
<body>
</body>
</html>
输出结果:
