【笔记】查漏补缺-H5+CSS3+JS基础：JS基础

一、数据类型

1. 简单数据类型(基本数据类型)

• Number：数字型(整型+浮点型)；
  1. 范围：Number.MIN_VALUE - Number.MAX_VALUE
  2. 特殊值：Infinity无穷大，大于任何数值；-Infinity无穷小；NaN非数值
  3. 判断是否为非数字：isNaN()
  4. 转换为：
     
• Boolean：布尔值
  1. 可以参与算术运算：true为1；false为0
  2. 转换：Boolean() （转为false：’’, 0, NaN, null, undefined）
• String：字符串类型
  1. 引号匹配：外双内单/内单外双
  2. 转换为String：隐式转换(x+"")；x.toString()；String(x)
  3. 转义符
     
  4. 长度：str.length
  5. 拼接：数值相加，字符相连
  6. Undefined：只声明未赋值
  7. Null：空值

2. 复杂数据类型：对象object

3. 检测数据类型：typeof

4. 运算符优先级

5. 简单数据类型(值类型)与复杂数据类型(引用类型)

• 值类型：
  1. 在存储时变量中存储的是值本身
  2. 存在于栈内
  3. 如string，number，boolean，undefined，null(typeof null → Object)
• 引用类型：
  1. 在存储时变量中存储的仅仅是地址(引用)
  2. 通过new关键字创建对象(系统对象、自定义对象)
  3. 存放在堆内
  4. 如Object, Array, Date等

二、流程控制分支

• 顺序结构
• 分支结构：根据不同的条件，执行不同的路径
  1. 分支if
  2. 分支switch
  3. 三元表达式
• 循环结构
  1. for(初始化变量;条件表达式;操作表达式) { 循环体 }：计数有关的循环
• 双重for循环(外层循环一次，内层循环全部执行)
  1. 正三角形 (var j = 1; j <= i; j++)
  2. 倒三角形 (var i = j; j <= num; j++)
  3. while(条件表达式){ 循环体; 操作表达式}：条件表达式为true，一直执行
  4. do {循环体;} while(条件表达式)循环：先执行一次循环体；条件表达式为true，一直执行
  5. contiue和break

三、数组

1. 创建数组：
   a. var attr = new Array()
   b. var attr = []
2. 数组内数据(数组元素)用逗号分割，可以是任意类型
3. 获取数组元素：
   a. 索引：attr[0]
   b. 越界：undefined
4. 遍历数组(数组长度：attr.length)
5. 新增元素
   a. attr.length = xxx
   b. attr[x] = “xxx” 或 attr[attr.length] = “xxx”
6. 冒泡排序

四、函数

1. 声明函数：函数名一般是动词；函数不调用，自己不执行
2. 调用函数
3. 参数：
   a. 形参、实参
   b. 实参 > 形参，会取到形参的个数，多的实参部分舍去
   c. 实参 < 形参，没有接受的变量定义为undefined(数字NaN)
4. return 终止函数；只能返回一个值，若多个只返回最后一个
5. arguments：当前函数的内置对象，存储了传递的所有实参
   a. 伪数组：具有length属性；按索引方式存储；没有真正数组的方法
   b. 只有函数才有，且每个函数都内置好了
6. 声明方式
   a. 命名函数：利用函数关键字自定义函数
   b. (匿名函数)函数表达式：var 变量名 = function() {}
7. 作用域(es6之前)：
   a. 全局作用域、局部作用域
   b. ES6：块级作用域
   c. 作用域链：内部函数可以访问外部函数的变量，且采用链式查找方式（就近原则）
8. 预解析
   a. js引擎会把js里面所有var和function提升到当前作用域的最前面
   b. 分为：
   i. 变量预解析（变量提升）：将所有的变量声明提升到最前，不提升赋值操作
   ii. 函数预解析（函数提升）：把所有的函数声明提升到最前，注意匿名函数的使用！
   iii. 案例1
   iv. 案例2
   

五、对象

1. 对象由属性和方法组成：
   a. 属性：事物的特征，常用名词；采用键值对形式；多个属性用逗号隔开；方法冒号后是匿名函数
   b. 方法：事物的行为，常用动词
2. 创建方式：
   a. 字面量：var obj = { name: “”, age: 1 }
   b. new Object：var obj = new Object(); obj.name = “”; obj.age = 1
   c. 构造函数：
   a. 定义：特殊的函数，主要用来初始化对象
   b. 语法形式(构造函数名首字母大写)：function 构造函数名() { this.属性=值; this.方法 = function(){} }
   c. 调用(无需return)：var 变量 = new Star(构造函数名)
3. 调用：
   a. 调用属性：对象名.属性名； 对象名[‘属性名’]
   b. 调用方法：对象名.方法()
4. 变量和属性：均是用来存储数据
   a. 变量：单独声明并赋值，使用时直接写变量名，单独存在
   b. 属性：在对象中不需要声明，使用时必须是：对象.属性
5. 函数和方法：均是实现某种功能
   a. 函数：单独声明，使用函数名()调用，单独存在
   b. 方法：在对象内，调用：对象.方法()
6. 构造函数和对象
   a. 构造函数：泛指某一大类(class)，抽取对象的公共部分，封装到函数内
   b. 对象：特指某一个，通过new关键字创建对象(实例化)
7. new关键字执行时做四件事：
   a. 在内存中创建一个新的空对象
   b. 让this指向这个新对象
   c. 执行构造函数内代码，给新对象添加属性和方法
   d. 返回这个新对象(无需return)
8. 遍历对象：for(var k in obj) { k(属性名); objk}

六、内置对象

1. 对象类型：自定义对象、内置对象、浏览器对象
2. js中内置对象：Math、Date、Array、String等
3. 查文档：MDN/W3C https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
4. Math数学对象
   a. 不是构造器，方法都是静态的，可以直接使用里面的属性和方法
   b. 取整（四舍五入：.5特殊，往大了取）
   c. 随机数：方法：random()；区间：[0,1)；无参数，返回随机小数
5. 日期对象
   a. 是构造函数，需要new创建对象：var date = new Date();
   b. 参数常用写法
   i. 数字型(2022, 03, 22) → 比实际月份大一个月
   ii. 字符串型(‘2022-03-22 16:57:8’)
   
   c. 时间戳(总的毫秒数)：距离1970.1.1
   i. 通过date.valueOf()；date.getTime()
   ii. 简单写法 +new Date()
   iii. H5新增：Date.now()
6. 数组对象
   a. 创建数组：字面量；new Array
   b. 检测是否为数组：instanceof运算符；内置方法(H5新增)Array.isArray()
   c. 添加数组元素，返回值为数组长度
   i. 末尾添加push，返回值为数组长度：attr.push(x,y,z)
   ii. 开头添加unshift，返回值为数组长度：attr.unshift(x,y,z)
   d. 删除数组元素，返回值为被删除的元素
   i. 删最后一个元素：attr.pop()
   ii. 删第一元素：attt.shift()
   e. 翻转数组：attr.reverse()
   f. 冒泡排序
   i. 按位数(逐个字符)升序：attr.sort()
   ii. 冒泡排序(升序a-b；降序b-a)：attr.sort(function(a,b) ){ return a - b;}
   g. 数据索引（只返回第一个满足条件的索引号，若不存在返回-1）：
   i. 正序查找：arry.indexOf(“xxx”)
   ii. 倒序查找：arry.lastIndexOf(“xxx”)
   h. 数组去重：遍历旧数组，并与新数组查询，若indexOf为-1，则push如新数组
   i. 转换为字符串
   i. 逗号分割：arr.toString()
   ii. 任意分隔符：arr.join(’&’)
   j. 连接两个数组，返回新数组(不影响原数组)：concat()
   k. 数组截取：slice(begin,end)
   l. 数组删除：splice(开始位置，个数)
7. 字符串对象
   a. 基本包装类型：将简单数据类型包装成为复杂数据类型，使基本数据类型有了属性和方法
   b. 字符串不可变：字符串内值不可变，实际上看到的改变内容是地址改变，即在内存中新开辟了内存空间
   c. 根据字符返回位置(只找第一个)：字符串所有的方法都不会修改字符串本身，操作完成会返回一个新的字符串
   i. indexOf(‘要查找的位置’, 索引位置)：正序查找，返回位置索引号，找不到-1
   ii. lastIndexOf(‘要查找的位置’, 索引位置)：倒序查找，返回位置索引号，找不到-1
   d. 根据位置返回字符
   i. charAt(index)：返回指定位置的字符
   ii. charCodeAt(index)：返回指定位置处字符的ASCII码
   iii. str[index]：返回指定位置处字符，H5新增
   e. 字符串操作方法
   i. concat(str1, str2, …)：连接两个或多个字符串，等效于+
   ii. substr(start, length)：从索引号start位置开始，抽取length个字符
   iii. slice(start, end)：从start位置开始，截取到end位置(不含)
   iv. substring(start, end)：从start位置开始，截取到end位置(不含)，不接受负值
   v. 转换大小写：toUpperCase() / toLowerCase()