数据类型之间的区别

1. 存储
   • 基本数据类型存储在栈内存中,比如:string number undefined null boolean
   • 复杂数据类型,将数据本体存放在堆内存中,比如:对象或者数组或者函数
   • 然后将指向该内存的地址,存放在栈内存中
   • 基本数据类型内部存储的是值,引用数据类型内部存储的是地址
2. 赋值
   • 基本数据类型:赋值以后,两个变量之间没有任何关系,相当于将自己的某一个东西,复制一份给你,你的就是你的,我的就是我的
   • 复杂数据类型:赋值以后,因为变量内部存储的是指向堆内存的地址,所以在赋值的时候,其实是将地址给到另一个变量
3. 比较
   • 基本数据类型:就是 值 的比较
   • 引用数据类型:比较的时候 比较的是存储地址 如果地址相同就是true 如果地址不同就是false
4. 传参
   • 基本数据类型:就是将值拷贝一份传递给形参,在函数内修改,不会影响外界
   • 引用数据类型:将存储地址赋值给形参,在函数内修改会影响外界

数组的常用方法

1. push

   - 语法: 数组.push(数据)
   - 作用:向数组末尾添加数据
   - 返回值:追加数据后,数组的最新长度(Length)
   

2. pop

   - 语法: 数组.pop()
   - 作用:删除数组最后一条数据
   - 返回值:被删除的数据
   

3. unshift

   - 语法: 数组.unshift(数据)
   - 作用:向数组开头添加数据
   - 返回值:添加数据后,数组的最新长度(Length)
   

4. shift

   - 语法: 数组.shift()
   - 作用:删除数组第一条
   - 返回值:被删除的数据
   

5. reverse

   - 语法: 数组.reverse()
   - 作用:反转数组
   - 返回值:反转后的数组
   

6. sort

   - 语法1: 数组.sort()
   - 作用:会将数据转化为字符串后,一位一位的对比
      
   - 语法2: 数组.sort(function(a,b){return a - b}) 
   - 作用:会按照数字大小升序排列
   
   - 语法3: 数组.sort(function(a,b){return b - a})
   - 作用:会按照数字大小降序排列
   
   - 返回值:排序后的数组      
   

7. splice

   - 语法1: 数组.splice(开始索引,多少个)
   - 作用:截取数组部分内容
   
   - 语法2: 数组.splice(开始索引,多少个,插入的数据1,插入的数据2...)
   - 作用:截取数组部分内容,并插入新的数据
   
   - 返回值:截取出来的部分内容  组成的数组
   

注意:数组的方法能改变原数组的就只有上面的7个

8. slice

    - 语法: 数组.slice(开始索引,结束索引)
    - 参数:
        - 包前不包后:包含开始索引的数据,不包含结束索引的数据
        - 不写开始索引,默认是0;  不写结束索引,默认是数组的length
        - 参数支持写负数,表示倒数第几个,其实就是length + 负数
    - 作用:截取数组部分内容 
    - 返回值:截取出来的部分内容  组成的新数组
   

9. concat

    - 语法:原始数组.concat(数组1,数组2,...,数据1,数据2,...)
    - 作用:进行数据拼接,把数组...数据之类的小括号里的内容,拼接在原始数组中
    - 返回值:拼接好的数组
   

10. join

    - 语法:数组.join('连接符')
    - 作用:使用"连接符",把数组内的每一个数据连接成一个字符串(不写连接符,默认使用的是 逗号)
    - 返回值:连接好的字符串
    

11. indexOf()

    - 语法1:数组.indexOf(要检查的数据)
        - 作用:从前到后(从左到右)检查该数据第一次在该数组内出现的索引
    - 语法2:数组.indexOf(要检查的数据,开始索引)
        - 作用:在开始索引的位置,从前到后(从左到右)检查该数据第一次在该数组内出现的索引
    - 返回值:找到数据的情况下,会将该数据第一次出现的索引返回; 没找到的情况下,会直接返回-1       
    

12. lastIndexOf()

    - 语法1:数组.lastIndexOf(要检查的数据)
        - 作用:从后向前(从右到左)检查该数据第一次在该数组内出现的索引
    - 语法2:数组.lastIndexOf(要检查的数据,开始索引)
        - 作用:在开始索引的位置,从右到左检查该数据第一次在该数组内出现的索引
    - 返回值:找到数据的情况下,会将该数据第一次出现的索引返回; 没找到的情况下,会直接返回-1
    

13. forEach()

    - 语法: 数组.forEach(function(item,index,origin){})
        - item:数组的每一项的值
        - index:数组的每一项对应的下标
        - origin:原始数组 (了解即可,一般没人用)
    - 作用:遍历数组
    - 返回值:无 该方法永远没有返回值(undefined)
    

14. map

    - 语法:数组.map(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:映射数组
    - 返回值:返回一个和原始数组长度相同的数组,但是内部数据可以经过我们的映射加工
    - 映射加工:就是在函数内 以return的形式书写
    

15. filter

    - 语法:数组.filter(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:过滤数组
    - 返回值:返回一个新数组,内部存储的是原始数组过滤出来的部分内容
    - 过滤条件: 过滤条件以return的形式书写
    

16. find

    - 语法:数组.find(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:在数组内查找满足条件的第一项
    - 返回值:找到的数据,如果没找到返回的是undefined
    - 查找条件以 return 的形式书写
    

17. findIndex

    - 语法:数组.findIndex(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:在数组内查找满足条件的第一项的下标
    - 返回值:找到的数据的下标,如果没找到返回的是-1
    - 查找条件以 return 的形式书写
    

18. some

    - 语法:数组.some(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:判断数组内是否有一个满足条件
    - 返回值:一个布尔值  true/false
    - 判断条件以 return 的形式书写
    

19. every

    - 语法:数组.every(function(item,index,origin){})  三个参数的意义与forEach相同
    - 作用:判断数组内是否全都满足条件
    - 返回值:一个布尔值  true/false
    - 判断条件以 return 的形式书写
    

20. reduce

    - 语法:数组.reduce(function(prev,item,index,origin){},init)
        - prev: 表示初始值或者上一次的运算结果
        - item:数组的每一项的值
        - index:数组的每一项对应的下标
        - origin:原始数组 
    - 作用:用来实现叠加效果
    - 返回值:最终叠加的结果
    - 注意点:  
        - 叠加条件以 return 的形式书写
        - prev 的值,如果传递了 init,就是 init 的值,如果没有传递 init ,那么就是数组[0]的值
        - 如果传递了 init,循环执行  数组.length 次,如果没有传递 init, 循环执行 数组.length - 1 次
    

数学的方法

1. random

    - 语法:Math.random()
    - 作用:得到一个随机数,每次生成的数字都不一样,但一定是0~1之间的,包含0,不包含1,也就是说最大值可能是0.999999...
   

2. round

    - 语法:Math.round(数字)
    - 作用:将数字(小数),按照四舍五入的形式变成整数
   

3. ceil

    - 语法:Math.ceil(数字)
    - 作用:将这个数字(小数),向上取整
   

4. floor

    - 语法:Math.floor(数字)
    - 作用:将这个数字(小数),向下取整
   

5. abs

    - 语法:Math.abs(数字)
    - 作用:返回这个数字的绝对值
   

6. sqrt

    - 语法:Math.sqrt(数字)
    - 作用:求平方根
   

7. pow

    - 语法:Math.pow(基数,幂)
    - 作用:返回基数的几次幂
   

8. max

    - 语法:Math.max(数字1,数字2,数字3...)
    - 作用:返回传入的数字中最大的那一个
   

9. min

    - 语法:Math.min(数字1,数字2,数字3...)
    - 作用:返回传入的数字中最小的那一个
   

10. PI

    - 语法:Math.PI
    - 作用:返回π
    

字符串常用方法

1. charAt

    - 语法:字符串.charAt(索引)
    - 作用:查询指定下标的值
    - 返回值:查询到的值,如果没有查询到就是一个空字符串
   

2. charCodeAt

    - 语法:字符串.charCodeAt(索引)
    - 作用:查询指定下标的值  对应的 十进制码
    - 返回值:查询到的值对应的十进制码,如果没有查询到会返回一个 NaN
   

3. toLowerCase

    - 语法:字符串.toLowerCase()
    - 作用:将字符串全部转换成小写
    - 返回值:转换后的字符串
   

4. toUpperCase

    - 语法:字符串.toUpperCase()
    - 作用:将字符串全部转换成大写
    - 返回值:转换后的字符串
   

5. substr

    - 语法:字符串.substr(开始索引,多少个)
    - 作用:截取指定的字符串
    - 返回值:截取到的字符串
    - 注意:官方说明这个方法将来某一天可能会删除,所以建议我们使用  substring
   

6. substring

    - 语法:字符串.substring(开始索引,结束索引)
    - 作用:截取指定的字符串
    - 返回值:截取到的字符串
    - 注意:
        - 1.参数包前不包后
        - 2.结束索引可以不写,相当于写了length
   

7. slice

    - 语法:字符串.slice(开始索引,结束索引)
    - 作用:截取指定的字符串
    - 返回值:截取到的字符串
    - 注意:
        - 1.参数包前不包后
        -  2.结束索引可以不写,相当于写了length
        -  3.开始索引可以不写,相当于写了0
        -  4.结束索引支持写负数,相当于写了 length + 负数
   

8. concat

    - 语法:字符串.concat(数据1,数据2,数据3...)
    - 作用:将字符串和参数传递的数据进行拼接
    - 返回值:拼接后的字符串
   

9. indexOf

    - 语法:字符串.indexOf(数据,开始下标)
    - 作用:寻找数据在字符串中的位置
    - 返回值:找到的时候返回下标,找不到返回 -1
    - 注意:第二个参数可以不传递,默认为0
   

10. lastIndexOf

    - 语法:字符串.lastIndexOf(数据,开始索引)
    - 作用:寻找数据在字符串中的位置(从后往前/从右向左)
    - 返回值:找到的时候返回下标,找不到返回 -1
    - 注意:第二个参数可以不传递,默认为length - 1
    

11. split

    - 语法:字符串.split('符号')
    - 作用:在字符串中找到 '符号' 然后将这个字符串分隔,并放在一个数组内
    - 返回值:一个数组
    - 注意: 参数如果传递的是空字符串(''),会将字符串全部分隔开
    

12. trim

    - 语法: 字符串.trim()
    - 作用: 去掉字符串两侧的空格
    - 返回值:去掉空格后的字符串
    

13. trimStart / trimLeft

    - 语法: 字符串.trimStart()  /  字符串.trimLeft()
    - 作用: 去掉字符串开始(左侧)的空格
    - 返回值:去掉空格后的字符串
    

14. trimEnd / trimRight

    - 语法: 字符串.trimEnd()  /  字符串.trimRight()
    - 作用: 去掉字符串结束(右侧)的空格
    - 返回值:去掉空格后的字符串
    

15. includes

    - 语法: 字符串.includes(字符串片段)
    - 作用: 判断 当前字符串中,是否拥有指定字符串片段
    - 返回值:一个布尔值
        - true -> 拥有
        - false -> 没有
    

16. startsWith

    - 语法: 字符串.startsWith(字符串片段)
    - 作用: 判断字符串开头是不是指定的字符串片段
    - 返回值:一个布尔值
        - true -> 是开头
        - false -> 不是开头
    

17. endsWith

    - 语法: 字符串.endsWith(字符串片段)
    - 作用: 判断字符串结尾是不是指定的字符串片段
    - 返回值:一个布尔值
        - true -> 是结尾
        - false -> 不是结尾
    

18. replace

    - 语法: 字符串.replace(要被替换的字符,替换的字符)
    - 作用: 找到当前字符串中第一个参数对应的值,然后将其替换为第二个参数
    - 返回值:替换完成的字符串
    

19. JSON字符串

    - JSON.stringify(数据)  将数据转换为 JSON格式的字符串  但本质上还是一个字符串
    - JSON.parse(JSON格式的字符串)  将JSON格式的字符串串换为原本的数据类型
    

进制转换

1. 十进制转换为其他进制

    十进制数组.toString(其他进制的数)
    var num = 100
    num.toString(2) // 将 10 进制的 100, 转换为 2 进制的数, 得到了: '1100100'
    num.toString(36) // 将 10 进制的 100, 转换为 36 进制的数, 得到了: '2s'
   

2. 其他进制转换为十进制

var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)
var num = parseInt(100, 2)  // 将100视为2进制的数, 然后将其转换为十进制的数字, 得到了: 4
var num = parseInt(100, 16)  // 将100视为16进制的数, 然后将其转换为十进制的数字, 得到了: 256

保留小数

var num = 100.123456789
var num1 = num.toFixed(2)   // 100.12
var num2 = num.toFixed(4)   // 100.1235

时间对象

1. 时间对象的创建

• 语法: var timer = new Date()
• 不传参
  • 默认返回当前时间

   var timer = new Date()
   console.log(timer)

• 传参

1. 可以获取到一个你传递进去的时间

    var timer = new Date('2022-01-01 00:00:00')
    console.log(timer)

2. 传递两个数字, 第一个为年, 第二个为月

var timer = new Date(2022, 00)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
    console.log(timer)

3. 传递三个数字, 前两个不变, 第三个表示该月份的第几天, 从1到31

    var timer = new Date(2022, 00, 31)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
    console.log(timer)
    // Mon Jan 31 2022 00:00:00 GMT+0800 (中国标准时间)

4. 传递四个数字, 前三个不变, 第四个表示当天的几点, 0-23

    var timer = new Date(2022, 00, 31, 23)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
    console.log(timer)
    // Mon Jan 31 2022 23:00:00 GMT+0800 (中国标准时间)

5. 传递五个数字, 前四个不变, 第五个为该小时的多少分钟, 0-59

    var timer = new Date(2022, 00, 31, 23, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
    console.log(timer)
    // Mon Jan 31 2022 23:59:00 GMT+0800 (中国标准时间)

6. 传递六个参数, 前五个不变, 第六个表示该分钟的多少秒, 0-59

    var timer = new Date(2022, 00, 31, 23, 59, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
    console.log(timer)
    // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)

7. 传递字符串的形式

    console.log(new Date('2000-05-15 12:00:00')) 

2. 获取相关

• getFullYear 得到指定字符串中的那一年

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getFullYear()) // 2022

• getMonth 得到指定字符串中的那一月, 月的计数从 0 开始

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMonth()) // 0

• getDate 得到指定字符串中的那一日

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDate()) // 31

• getHours 得到指定字符串的那小时

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getHours()) // 23

• getMinutes 得到指定字符串中的那分钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMinutes()) // 59

• getSeconds 得到指定字符串中的那秒钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getSeconds()) // 59

• getDay 获取当前日期是一周中的 第几天(周日是0, 周六是6)

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDay()) // 1

• getTime
• 按照 格林威治时间计算 从1970 年 1 月 1 日 0 时 0 分 0 秒 到现在(或指定日期)的毫秒数

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getTime()) // 1554681622000

3. 设置相关

• setFullYear()

     语法: `时间对象.setFullYear(年份信息)`
     作用: 修改该时间对象内的 年份信息
  

• setMonth()

    语法: `时间对象.setMonth(月份信息)`
    作用: 修改该时间对象内的 月份信息
  

• setDate()

    语法: `时间对象.setDate(日期信息)`
    作用: 修改该时间对象内的 日期信息
  

• setHours()

    语法: `时间对象.setHours(小时信息)`
    作用: 修改该时间对象内的 小时信息
  

• setMinutes()

    语法: `时间对象.setMinutes(分钟信息)`
    作用: 修改该时间对象内的 分钟信息
  

• setSeconds()

    语法: `时间对象.setSecond(秒钟信息)`
    作用: 修改该时间对象内的 秒钟信息
  

• setMilliseconds()

    语法: `时间对象.setMilliseconds(毫秒信息)`
    作用: 修改该时间对象内的 毫秒信息
  

• setTime()

    语法: `时间对象.setTime(毫秒信息)`
    作用: 使用时间戳信息直接定位时间对象
    
  

定时器

1. setInterval 计时器, 每间隔固定的时间执行一次

• 语法: setInterval(函数, 数字)
  • 函数: 每间隔多少时间执行的代码
  • 数字: 间隔时间, 单位是毫秒

2. setTimeout 倒计时器, 在指定时间到达后, 执行一次

• 语法: setTimeout(函数, 数字)
  • 函数: 一段时间后执行的代码
  • 数字: 间隔时间, 单位是毫秒

3. 定时器的返回值及意义

• 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
• 作用: 用来关闭定时器

4. 关闭定时器

• 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
• 语法:
  • clearTimeout(定时器返回值)
  • clearInterval(定时器返回值)

简单的代码异步执行机制

• 什么是非异步执行代码
  • 按照从上到下的顺序, 从左到右的顺序, 依次执行每一行代码
  • 上一行代码没有执行完毕, 不会执行下一行代码
• 什么是异步执行代码
  • 当代码遇到异步任务的时候, 会把该代码放在 异步队列 内等待
  • 所有的同步代码执行完毕后, 再开始执行 异步队列内的代码
• 什么是异步任务
  • 两种定时器都是异步任务
  • 可以理解为, 限制性定时器外面的代码, 然后执行定时器里边的代码