JS基础：变量、函数、对象、数组、循环、选择（判断）

JS基础：变量、函数、对象、数组、循环、选择（判断）

js的三个组成部分

1. ECMAScript - ES - 语法规范
2. DOM - 文档对象模型 - API
3. BOM - 浏览器对象模型 - API

js的创建方式

1. 外链式 - 推荐使用-通过script标签的src属性进行导入
2. 行内式 - 不推荐使用-a标签直接写在href属性，其他标签需要添加行为属性，如：onclick
3. 内联式 - 不推荐使用-直接通过script标签书写js，建议将script标签写在body标签的结束位置

js常用的几个输出语句

alert()-浏览器提示窗口
document.write()-直接书写在浏览器上，用户可见，()内可以书写标签
console.log()-将结果输出在控制台

用户输入语句

prompt()-通过提示窗口的方式，弹出一个用户输入框

js中的数据类型

• 简单数据类型/值 - 栈内存
  • Number - 数值
    • NaN（not a number） 不是一个数字，但是它是数据类型
  • String - 字符串
    • ‘hello’
    • ’ ’
    • “你好”
    • “true”
    • ‘’
  • Boolean
    • 两个值：true；false
  • Null
  • Undefined
    • var a
    • console.log(‘a’)
• 复杂数据类型/引用 - 堆内存
  • Function - 函数
  • Object - 对象
  • Array - 数组

判断数据类型

typeof 'hello'

typeof('hello')

变量

1. 用来存储数据的’容器’
2. 关键字 var
3. = 赋值的意思
4. 命名规范 - 由数字，字母，下划线，$构成
   1. 不能有数字开头
   2. 严格区分大小写，a 和 A 就是两个变量
   3. 可以使用驼峰命名法，如：firstName 、 lastName
   4. 命名时，不要使用关键字和保留字，如：var function…
   5. 尽可能使用一些有意义的单词，英语不行的话，拼音也可以

运算符

• 算术
  • ‘+’
  • (需要特别注意，只要+号任意一边，是字符串类型的数据，这里+的作用就是字符串的拼接，而不是求和)
  • ‘-’
  • ‘*’
  • ‘/’
  • ‘%’
• 逻辑
  • && 与 同真则真，一假则假
  • || 或 同假则假，一真即真
  • ！ 非 非真即假 非假即真
• 比较 - 结果是布尔值
  • ‘>’
  • ‘<’
  • ‘<=’
  • ‘>=’
  • ‘==’
  • ‘===’
  • ‘!=’
  • ‘!==’
• 赋值
  • =
  • += var a += 1 就是 a = a + 1
  • -= var a -= 1 就是 a = a - 1
  • *= var a *= 1 就是 a = a * 1
  • /= var a /= 1 就是 a = a / 1
  • %= var a %= 1 就是 a = a % 1
• 一元
  • ++a a++
  • –a a–
    • 这里需要注意的是，运算符的前置和后置，当运算符前置时，如：++a，那么就是a先进行a += 1再进行其他操作，当运算符后置时，如：a++，那么就是先进行其他操作，再执行a += 1
    • – 和 ++ 原理一样

类型转换

1. 转数值
   1. parseInt()
      • 转换数据时是一位一位的查看结果，除非第一位不合法，数值会出现NaN，否则会保留前面数字位置内容，注意：只能解析整数部分
   2. parseFLoat()
      • 解析规则和parseInt一样，但是他可以解析小数部分
   3. number()
      • 如果整体是一个合法类型的数字那么结果就是数字，如果整体不是一个合法类型的数字，那么结果就是NaN
2. 转字符串
   1. String() ()里面写内容
   2. toString() 内容.toString()
3. 转布尔
   1. Boolean() ()里面写要转换的内容

五种假（当括号里面的内容是以下5种情况时）输出的结果是false

1. 0
2. “” 空字符串
3. null
4. undefined
5. NaN

分支

1. if(){} 条件满足就执行，不满足就不执行
2. if(){}else{} 条件满足就执行if的{}，不满足就执行else的{}
3. if(){}else if(){}…else if(){} 满足哪一个if就执行哪一个if的{}，前面有满足条件的就不考虑后面的
4. if(){}else if(){}…else if(){}else{} 所有条件都不满足时，就会执行else的{}

5. switch (已知条件) {			根据已知条件找到一个完全匹配的选项，执行对应的代码，需要注意的
   							switch 语句的判断条件比较单一
     case 选项1：
       ...
       break					总结：1.找到和已知条件完全匹配的选项就会执行
     case 选项2：						2.执行完毕代码需要写break，不然会向下穿透
       ...								3.可以写default：，会在所有选项都不匹配的时候执行
       break							4.当发生穿透效果时，会从第一个满足条件的选项开始向										下穿透遇到break会停止
     default：
       ....
   }
   

6. 三目运算 a > 10 ? ‘hello’ : ‘byebye’
   • 条件为真，执行 ’hello‘ 否则执行’byebye‘

循环

1. for(var i = 0;i < 10;i++){ console.log(123)}
2. while(){}
3. do{}while()
   总结，循环语句都需要初始变量，结束条件，步长。需要注意的是，
   • 一定要书写改变初始值的代码（步长），不然会出现死循环
   • 在循环内，初始值，结束条件，步长（改变初始值）都能控制循环的次数
   • for循环的初始值，结束条件，步长都是写再一个（）内的，中间记得用；隔开
   • 最后需要注意一点，while和do while的区别当初始变量不满足条件时，do while循环会执行一次，而while循环一次都不会执行

函数

1. 数据类型 - 复杂/地址/引用数据类型
2. 关键字 function
3. 相同代码块的封装，实现某一功能（就是一个可以装代码块的盒子）
4. 两种创建方式

   1. 声明式：
      function fn() {
        
      }
      

   2. 赋值式：
      var fn = function () {
        
      }
      

5. 参数
   1. 形参
      • 一个特殊的变量
      • 只能在函数内部使用
      • 由函数调用时实参的值决定的
   2. 实参
      • 函数调用时给形参赋值的内容，注意可以是常量也可以是变量
6. arguments对象
   • arguments.length的值，表示实参的个数。形参的个数由 函数名.length的值表示
7. return
   1. 返回值 （根据实际需求，设定返回值）
   2. 终止代码运行

预解析

代码真正执行之前的一步操作

找到var的变量以及声明式函数，把他们提到最顶部

然后开始执行代码

函数内部同样遵循预解析的原理

变量和函数命名冲突，预解析阶段以函数为主

作用域的范围

1. 局部作用域
   1. 只有函数能够形成局部作用域
2. 全局作用域
   1. 一个页面就是一个全局作用域

作用域的使用

1.定义：声明在什么位置的变量就是哪一个作用域的变量

2.访问：自己有用自己的，自己没有用父级的，以此类推，到全局都没有的话就会报错，（not undefined）

3.赋值：自己给自己的赋值，自己没有给父级赋值，以此类推，到全局都没有，定义为全局再赋值

对象

1. 数据类型 - 地址/复杂/引用类型
2. 创建方式
   1. 字面量
      var obj = {
      name: ‘xiaomi’, name: 键（key） ‘xiaomi’:值（value）
      sex: 'male
      }
   2. 构造函数
      var obx = new Object()
      obx.play = function () { 增
      }
      obx.name = ‘xiaoming’
      obx[‘play’] = ‘wan’ 改
      delete obx.play 删
      obx.name 查
3. 键值对
   • 对象就是用来放置键值对的，每个键值对之间用逗号隔开
4. 属性和方法构成了对象
   • 放法就是函数，其他的就是属性
5. 操作(增删改查)
6. 遍历 ( for in )
   for (var k in obj) {
   console.log(k + ‘===’ + obj[k])
   }

数组

1. 数据类型 - 地址/复杂/引用类型
2. 创建方法
   1. 字面量
      var arr = [1, 2, 3]
      2.构造函数
      var sz = new Array()
3. 下标(索引)
   • 从左到右，从0开始依次+1
4. 长度
   • arr.length 获取长度
   • arr…length = 数字 操作长度
5. 数据
   • arr[索引] 获取数据
   • arr[索引] = 值 设置数据
6. 数组的遍历

   • for (var i = 0; i < arr.length; i++) {
       	console.log(arr[i])
     }
     

7. 获取数组的最后一项
   arr[arr.length - 1]