DAY_5
一、数组塌陷
- 当你删除数组中某一个数据的时候, 从该索引位置开始, 后续所有数据的索引位置向前递减
- 引起的问题: 当你删除过后, 继续遍历数组的时候, 后续会跳过部分内容
- 如何解决:
=> 倒着循环数组
=> i 不动
二、回调函数 callback
回调函数 callback
- 目的: 为了代码封装时使用
=> 封装异步代码
=> 封装类似循环的过程 - 什么是回调 ?
=> 把 函数A 当做实参传递到 函数B 内
=> 在 函数B 内以形参的方式调用 函数A
=> 我们说 A 是 B 的回调函数
三、数组常用方法
数组常用方法 forEach
- 语法: 数组.forEach(function (item, index, origin) {})
=> item 就是数组内的每一项
=> index 就是数组内每一项的索引
=> origin 就是原始数组 - 返回值: undefined
var arr = [ 100, 200, 300 ]
var res = arr.forEach(function (item) {
console.log(item)
})
console.log(res)
数组常用方法 map
- 语法: 数组.map(function (item, index, origin) {})
- 返回值: 根据条件映射出来的新数组
- 注意: 映射条件以 rteurn 的形式书写
var arr = [ 10, 20, 30 ]
var res = arr.map(function (item, index, origin) {
return item * 100
})
console.log(arr)
console.log(res)
方法: filter
- 语法: 数组.filter(function (item, index, origin) {})
- 作用: 从原始数组中过滤出满足要求的项, 放在新数组内
- 返回值: 一个新数组, 存储的是原始数组中满足要求的数据
- 注意: 以 return 的形式书写 过滤条件
使用的时候
var res = arr.Filter(function (item) {
// 以 return 的形式书写条件
return item > 300
})
console.log(res)
删除源数组内所有的 300
arr = arr.Filter(function (item) { return item !== 300 })
console.log(arr)
方法: find()
- 语法: 数组.find(function (item, index, origin) {})
- 返回值: 原始数组内满足条件的第一项
- 注意: 以 return 的形式书写查找条件
// 使用的时候
var res = arr.Find(function (item) {
console.log('我执行了')
return item.id === id
})
console.log(res)
var arr = [
{ id: 1, name: 'Jack' },
{ id: 2, name: 'Rose' },
{ id: 3, name: 'Tom' },
{ id: 2, name: 'Jerry' }
]
思考:
- find 多用于查找 [] 内存储的是复杂数据类型
- 作用: 根据一个条件找到一条数据
- 问题: 你为什么要找他 ?
=> 找到这条信息进行 增删改查 - 如果 find 方法实现的是 深拷贝
=> 你的返回值和数组内的内容是两个 数据结构
=> 当你使用 返回值修改的时候, 数组内的数据不变 - 最好的方案, 把数组中某一条数据的 地址 拿出来
=> 利用返回值修改的时候, 数组中对应的数据也会改变
var user = arr.find(function (item) { return item.id === 2 })
user.name = '张思睿'
console.log(arr)
方法: findIndex
- 语法: 数组.findIndex(function (item, index, origin) {})
- 返回值: 数组内满足要求的第一项的 索引
- 注意: 以 return 的形式书写 查找条件
var arr = [
{ id: 1, name: 'Jack' },
{ id: 2, name: 'Rose' },
{ id: 3, name: 'Tom' },
{ id: 2, name: 'Jerry' }
]
var id = 2
var res = arr.findIndex(function (item) {
console.log('执行')
return item.id === id
})
console.log(res)
方法: every()
- 语法: 数组.every(function (item, index, origin) {})
- 返回值: 必然是一个 布尔值
=> 如果原始数组中每一个数据都满足条件, 返回的是 true
=> 只要有任何一个不满足条件, 返回值就是 false
var arr = [ 100, 200, 300, 400, 500 ]
var res = arr.every(function (item) {
console.log('执行')
return item < 300
})
console.log(res)
方法: some()
- 语法: 数组.some(function (item, index, origin) {})
- 返回值: 必然是一个布尔值
=> 如果数组中有任意一个满足条件, 最终返回 true
=> 只有数组中所有数据都不满足条件, 最终返回 false
var arr = [ 100, 200, 300, 400, 500 ]
var res = arr.some(function (item) {
console.log('执行')
return item > 100
})
console.log(res)
方法: reduce()
- 语法: 数组.reduce(function (prev, item, index, origin) {}, init)
=> prev:
-> 循环的第一次表示的是 init 初始值
-> 循环的第二次开始表示的是 上一次的 结果
=> init: 表示叠加的初始值, 选填
-> 如果你填写了 init, 方法内数组遍历的时候, 从 [0] 开始
-> 如果你没有填写 init, 默认使用数组 [0] 数据来充当 init, 方法内遍历的时候从 [1] 开始遍历
// 使用的时候
var r1 = arr.Reduce(function (prev, item) {
console.log('prev : ', prev, ' --- ', 'item : ', item)
return prev + item
}, 0)
console.log(r1)
var r2 = arr.Reduce(function (prev, item) {
console.log('prev : ', prev, ' --- ', 'item : ', item)
return prev + item
})
console.log(r2)
四、数学方法
- 一堆操作数字的方法
- Math 对象内存储了一些方法
1. random()
语法: Math.random()
返回值: 一个 0 ~ 1 之间的随机小数, 包含0 不包含1
console.log(Math.random())
2. round()
语法: Math.round(数字)
返回值: 对该数字 四舍五入 后取整的结果
console.log(Math.round(-10.4)) // -10 -10 -11
console.log(Math.round(-10.5)) // -11 -10 -10
console.log(Math.round(-10.6)) // -11 -11 -10
一个数字的小数部分是多少
任何一个数字的小数部分是 0 ~ 0.999999
-10.4 的小数部分和整数部分
整数部分: -11
小数部分: 0.6
什么叫 舍: 在数轴上向负方向的整数靠近
什么叫 入: 在数轴上向正方向的整数靠近
-10.5 如果是 舍, 结果是 -11
-10.5 如果是 入, 结果是 -10
3. ceil()
语法: Math.ceil(数字)
返回值: 向上取整的结果
console.log(Math.ceil(10.1))
console.log(Math.ceil(-10.1))
4. floor()
语法: Math.floor(数字)
返回值: 向下取整的结果
console.log(Math.floor(10.9))
console.log(Math.floor(-10.9))
5. abs()
语法: math.abs(数字)
返回值: 该数字去绝对值的结果
console.log(Math.abs(-10.12345))
6. pow()
语法: Math.pow(底数, 指数)
返回值: 取幂结果
console.log(Math.pow(1.01, 365))
console.log(Math.pow(0.99, 365))
7. sqrt()
语法: Math.sqrt(数字)
返回值: 该数字的算数平方根
console.log(Math.sqrt(4))
8. max()
语法: Math.max(数字1, 数字2, 数字3, ...)
返回值: 若干个数字内的最大值
var a = [10, -7, 33, 22, 14, 5]
console.log(Math.max(...a))
9. min()
语法: Math.min(数字1, 数字2, 数字3, ...)
返回值: 若干个数字内的最小值
var a = [10, -7, 33, 22, 14, 5]
console.log(Math.min(...a))
10. PI
语法: Math.PI
得到: 一个近似 π 的值
console.log(Math.PI)
五、案例 - 封装范围内随机整数
-
封装函数, 能根据参数给出一个范围内的随机整数
// 1. 封装函数, 求 0 ~ 10 之间的随机整数
/*
概率问题:
放大十倍以后的取之范围 [0, 10)
+ 0 ~ 0.499 0
+ 0.5 ~ 1.499 1
+ 8.5 ~ 9.499 9
+ 9.5 ~ 9.999 10
*/
// function fn() {
// // 1. 拿到随机小数
// // 取值范围 [0, 1)
// var r1 = Math.random()
// // 2. 放大 10 倍
// // 取值范围 [0, 10)
// var r2 = r1 * 10
// // 3. 四舍五入
// var res = Math.round(r2)
// return res
// }
// function fn() {
// // 1. 拿到随机小数
// // 取值范围 [0, 1)
// var r1 = Math.random()
// // 2. 放大 10 倍
// // 取值范围 [0, 11)
// var r2 = r1 * (10 + 1)
// // 3. 取整
// // Math.ceil => 取整之前 -0.999 ~ 9.999
// // Math.floor => 取整之前 0 ~ 10.999
// var res = Math.floor(r2)
// return res
// }
// 2. 求 0 ~ 20 之间的随机整数
// function fn() {
// var r1 = Math.random()
// var r2 = r1 * (20 + 1)
// return Math.floor(r2)
// }
// 3. 求 10 ~ 30 之间的随机整数
// function fn() {
// // 1. 求 0 ~ 10 之间的随机整数
// var r1 = Math.floor(Math.random() * (20 + 1))
// // 2. 用结果 + 10
// return r1 + 10
// }
// 4. 求 min ~ max 之间的随机整数
// function fn(a, b) {
// // 0. 判断大小
// var min = Math.min(a, b)
// var max = Math.max(a, b)
// // 1. 求 0 ~ (max - min) 之间的随机整数
// var r1 = Math.floor(Math.random() * (max - min + 1))
// // 2. 加上 min
// return r1 + min
// }
// 函数的参数默认值
// 在设计形参的时候, 给形参添加一个默认值
// 使用的时候, 如果你没有传递实参, 那么就用默认值
// function fn(a = 255, b = 0) {
// return Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b)
// }
var obj = {}
for (var i = 0; i < 1000000; i++) {
var res = fn(17)
if (obj[res]) {
obj[res]++
} else {
obj[res] = 1
}
}
console.log(obj)
六、案例 - 六位随机验证码
*/
// function randomCode() {
// // 准备一个验证码可以出现的内容
// var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
// // 准备一个变量接受结果
// var res = ''
// // 拿出随机的一位
// for (var i = 0; i < 6; i++) {
// var s = randomNum(str.length - 1)
// res += str[s]
// }
// // 返回 res
// return res
// }
// var res = randomCode()
// console.log(res)
// 需求2: 随机的 6 位不重复的验证码
// function randomCode() {
// // 准备一个验证码可以出现的内容
// var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
// // 准备一个数组接受结果
// var res = []
// // 循环生成六个内容(不一定是六次)
// // 只要 res 的 length 小于 6, 就得再来一次
// while (res.length < 6) {
// // 向数组内添加一个内容
// var s = str[ randomNum(str.length - 1) ]
// // 一定要把 s 加进去吗 ?
// // 保证原始数组内没有内容的时候, 才添加
// if (res.indexOf(s) === -1) res.push(s)
// }
// // 制作返回值
// return res.join('')
// }
// var code = randomCode()
// console.log(code)
// 生成函数, 出现随机颜色字符串
function randomColor() {
// 组装一个随机数字的字符串
return `rgb(${ randomNum() }, ${ randomNum() }, ${ randomNum() })`
}
console.log(randomColor())
// document.body.style.backgroundColor = randomColor()
七、进制转换 和 保留小数位
进制转换
- 十进制 转换成 其他进制
=> 语法: 数字.toString(你要转换的进制数)
=> 注意: 以字符串的形式返回转换完进制的结果 - 其他进制 转换成 十进制
=> 语法: parseInt(要转换的数字, 这个数字是)
=> 返回值: 把数字转换成 十进制 以后的结果
// 十进制 转换 其他进制
// var n = 100
// var res = n.toString(16)
// console.log(res)
// console.log(typeof res)
// 其他进制 转换成 十进制
// 把 100 当做一个 十六进制 数字, 转换成 十进制 赋值给 res
// var res = parseInt('ff', 16)
// console.log(res)
// 颜色 # ff ff ff
// r g b
// # FF0000 红
// # 00FF00 绿
// # FFFF00 黄
// # 0000FF 蓝
// # 00FFFF 青
// # FF00FF 紫
// # FFFFFF 白
// # 000000 黑
// document.body.style.backgroundColor = '#666600'
保留小数位
- 语法: 数字.toFixed(保留几位小数)
- 返回值: 以字符串的形式返回保留后的结果
// var n = 123.456789
// var res = n.toFixed(2)
// console.log(res)
/*
自己实现保留小数位
*/
// var n = 1.15
// // 保留 x 位小数
// var x = 1
// // 1. 把原始数字放大 10^x 倍, 然后取整
// var r1 = parseInt(n * Math.pow(10, x + 1))
// console.log(r1)
// // 2. 拿到个位数字
// var r2 = r1 % 10
// console.log(r2)
// // 3. 让 r1 还原到整数 + 指定小数位的个数
// var r3 = parseInt(r1 / 10)
// r3 = r2 >= 5 ? r3 + 1 : r3
// console.log(r3)
// // 4. 还原成最开始的小数状态
// var res = r3 / Math.pow(10, x)
// console.log(res)
var n = 1.15123456
// 保留 x 位小数
var x = 1
// 换成字符串来实现
var r1 = n + ''
// 拿到最后一位
// 字符串也可以使用 indexOf 方法
var index = r1.indexOf('.') + x + 1
// 判断的小数位
var s = r1[index]
// 把原始数字放大
var r2 = parseInt(n * Math.pow(10, x))
r2 = s >= 5 ? r2 + 1 : r2
// 缩小倍数
var res = r2 / Math.pow(10, x)
console.log(res)