js基础
js基础
  js入门
    1. JavaScript是运行在浏览器编程语言
    2.前端三老铁
      HTML ： 确定网页结构
      CSS ： 确定网页样式
      JS ： 确定网页交互
    3.js组成三个部分
      ECMAScript
        确定js的语法规范
      DOM
        js动态操作网页内容
      BOM
        js动态操作浏览器窗口
    4.js三种书写位置
      行内：写在标签内部
      内联：写在script标签里面， script标签放在</body>上方
      外联：写在js文件中，使用script标签的src属性引入
    5.js两种注释写法
      // 单行注释
      /* 多行注释 */
    6.输入与输出语句
      弹出提示框 ： alert()
      页面输出： document.write()
      控制台输出： console.log()
      弹出输入框： prompt()
      弹出确认框： confirm()
  数据类型
    1.简单数据类型(值类型)
      number数值类型
        一切数学中数字
        作用：数学计算
      string字符串类型
        一切 引号包起来的内容
          单引号 ''
            拼接： +
          双引号 ""
          反引号(模板字符串) ``
            ${变量名}
        作用：展示文本
      boolean布尔类型
        只有两个值 true:真 flase:假
        作用：表示条件成立/不成立
      undefined未定义
        变量有声明，未赋值。 默认值是undefined
      null空值
        主动赋值， 要存东西，但是暂时不知道存什么
    2.复杂数据类型(引用类型)
    3.检测数据类型
      typeof 数据 : 得到一个字符串，告诉你数据是什么类型
    4.数据类型转换
      隐式转换： 运算符两边数据类型不一样，编译器会先转成一样之后计算
        转string: 连接符
        转number
        转boolean
      显式转换
        转number
          转整数： parseInt(数据)
          转小数： parseFloat(数据)
          其他类型(布尔) : Number(数据)
        转string
          常用： String(数据)
            可以转undefined与null
          变量名.toString()
            不可以转undefined与null，会报错
        转Boolean : Boolean(数据)
          false
            undefined
            null
            0
            -0
            ''
            NaN
            false
            document.all
          true
            除false之外的一切数据
  变量
    1.变量作用： 在内存中存储数据
    2.变量语法
      声明变量 ： let 变量名
        在内存中开辟空间
      赋值： 变量名 = 值
        把右边输入存入左边的变量
      取值： 变量名
    3.变量注意点
      （1）let变量不允许重复声明
      （2）变量赋值的时候会先销毁旧值，然后存入新值
      （3）变量给变量赋值，先拷贝后赋值
    4.变量命名规则与规范
      规则： 强制遵守，不遵守就会报错。
        开头 ：字母 下划线_ $
        后面：字母 下划线_ $ 数字
        不能使用关键字
      规范：大家都养成的习惯
        取名最好是英语名词
        多个单词驼峰命名：首字母小写，后面单词首字母大写
  运算符与表达式
    算术运算符：
      作用：算术运算
        +
        -
        *
        /
        %
    赋值运算符
      赋值运算符左边一定是变量，因为只有变量才可以存储数据
      =
        右边数据存入左边的变量
      +=
        自身加多少
      -=
      *=
      /=
      %=
    自增自减(自身+1 -1)
      自增： num++
      自减： num--
    比较运算符（关系运算符）
      作用：比较运算， 判断条件是否成立。（成立/不成立）
      > >= < <= ==(相等) != ===(全等) !==
      ==：只比较值，不比较数据类型
      ===: 先比较类型，后比较值
    重要知识点
      1.运算符不能单独使用，需要与运算数据一起组成式子。称之为表达式
      2.表达式一定会有运算结果，要么打印，要么存入变量
      3.关系(比较)表达式结果一定是布尔类型， true:成立 false:不成立
    逻辑运算符
      作用：计算多个条件关系
      &&：一假则假（全真为真）
      ||：一真则真（全假为假）
      ！： 取反 true变false，false变true
      逻辑中断
        逻辑运算符的结果是 左边 或 右边 式子的值，不一定是布尔类型
        && :找假
          左边式子为false，则返回左边式子的值。 否则返回右边式子的值
        ||：找真
          左边式子为true，则返回左边式子的值。 否则返回右边式子的值
  流程控制
    顺序结构（默认）
      代码从上往下依次执行
    分支结构
      if语句： 用于条件判断
        if单分支： if(条件){ 分支代码 }
          用于单个条件判断
          注意点： 条件代码可以是哪些
            （1）关系表达式： 结果一定是布尔类型
            （2）布尔类型的值
            （3）其他值： 会隐式转换成布尔类型来判断条件
        if-else双分支: if(条件){ }else{ }
          用于两个互斥条件
          注意点： if大括号与else大括号 一定只会执行一个。（不会都执行，也不会都不执行）
        if-else if-else多分支： if(条件1){ }else if(条件2){ }else{ }
          用于多个条件判断
          注意点：
            所有的大括号最多只会执行一个，只有当上面条件不成立，才会进入下面条件判断
            必须以if开头， 后面可以写多个else if,结尾else可以省略
      三元表达式
        式子 ? 代码1 : 代码2
          如果式子为true,则执行代码1，否则执行代码2
          如果代码1和代码2有运算结果，三元表达式的结果就是他们的值
      switch-case:固定值匹配
        switch(匹配值){ }
          注意点
            匹配值和case值 一定是全等
            break作用是结束switch-case，如果省略则会穿透
              穿透： 代码从上一个case无条件执行到下一个case
              合理穿透： 多个匹配值需要执行的代码相同
    循环结构
      代码重复执行
        while循环：用于循环次数不明确
        for循环：用于循环次数明确
      循环结构场景
        1.找出指定范围符合条件的数：筛选功能
          (1)遍历指定范围的数
          （2）找出符合条件的数
        2.求累加和 ： 求和
          （1）声明变量存储结果
          （2）遍历数量
          （3）累加
        3.求最大值/最小值
          （1）声明变量存储结果
            求最大值 let max = -Infinity
            求最小值 let max = Infinity
          （2）遍历数量
          （3）依次比较大小
      循环结构关键字
        break:结束整个循环语句，立即执行循环外面代码
        continue:结束本次循环体，立即进入下一次循环体
  数组
    1.数组作用
      一个变量存储多个数据
    2.数组三要素
      元素：数组中的数据
      下标：元素的位置
        下标从0开始递增
      长度：元素的数量
        长度 = 最大下标 + 1
    3.数组语法
      1.声明
        let 数组名 = [元素1,元素2,元素3,…………]
      2.取值
        数组名[下标]
      3.赋值
        数组名[下标] = 值
      4.遍历
        固定for循环 for(let i = 0;i<arr.length;i++){ arr[i] }
    4.数组操作
      查
        数组名[下标]
          下标存在，则是获取元素值
          下标不存在，则是获取undefined
      改
        数组名[下标] = 值
          下标存在，则是 修改 元素值
          下标不存在，则是动态新增元素
      增
        末尾新增： 数组.push( 元素1,元素，…………)
        开头新增： 数组.unshift(元素1,元素，…………)
      删
        删除末尾： 数组.pop( )
        删除开头： 数组.shift()
        删除指定位置： 数组.splice(起始位置,删除数量)
  函数
    1.函数作用
      存储代码，解决代码复用
    2.函数语法
      声明函数：存储代码
        function 函数名(){ 函数体代码：需要复用的代码 }
        声明函数的时候，不会执行函数体代码
      调用函数：执行函数体代码
        函数名()
    3.函数参数
      3.1 参数作用： 调用者 传递数据给 函数
      3.2 参数语法
        传：调用者
          函数名( 实参 )
        收：函数
          function 函数名( 形参 ){ 函数体 }
      3.3 传参原理
        实参给形参赋值
      3.4 传参注意点
        实参与形参数量可以不一致，但是按照顺序一一赋值
        每一次传参都是独立的过程，互不影响
    4.函数返回值
      4.1 返回值作用： 函数 传递数据给 调用者
      4.2 返回语法
        传：函数
          function 函数名( 形参 ){ 函数体; return 返回值 }
        收：函数
          let 变量名 = 函数名( 实参 )
      4.3 返回值注意点
        (1)如果函数没有return，则默认返回值是undefined
        （2）return关键字可以结束函数体执行， return后面的代码不会执行
    5.函数三个执行流程
      1.传参：实参给形参赋值
      2.执行函数体
      3.返回值
    6.函数返回值注意点
      (1)如果函数没有return，则默认返回值是undefined
      （2）return关键字可以结束函数体执行， return后面的代码不会执行
  对象
    1.对象作用
      一个变量存储多个数据
        数组：有序存储。 下标从0开始递增
        对象：无序存储。属性名和属性值一一对应
    2.对象语法
      声明对象
        let 对象名 = { 属性名:属性名 }
      对象取值
        对象名.属性名
        对象名['属性名']
        特点
          （1）属性名存在，则是获取属性值
          （2）属性名不存在，则是获取undefined
      对象赋值
        对象名.属性名 = 值
        对象名['属性名'] = 值
        特点
          （1）属性名存在，则是'修改'属性值
          （2）属性名不存在，则是新增属性
    3.对象遍历
      固定格式for-in循环
        for(let key in 对象名){ 对象名[key] }
        注意点：只能使用字符串语法取值
    4.环境对象 this
      谁调我我，我就指向谁
      提示： 这个this相当于中文的 ‘我’ 字， 谁说出来，就代表谁