_5（4）js基础（-数学方法）-CSDN博客

本文链接：https://blog.csdn.net/qq_41950754/article/details/125810987

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)