javascript基础知识

长大的岁月里长大的岁月里，我们从未改变，只是越来越清晰的成为自己

概述

• JavaScript是一种专为网页与用户之间交互而设计的脚本语言，它包含类型，运算符，内置对象和方法
• JavaScript是前端开发工程师必须要掌握的三种技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript
• JavaScript由ECMAScript(标准，提供核心语言功能)、DOM、BOM组成

书写位置

• 行内式 (不常用)
  • <div onclick="alert('点击事件')"></div>
• 内嵌式 (一般常用)
  • 将一段js代码嵌入到html页面中，在网页中任何一个位置添加一个<script></script>标签，在此标签中写对应的js代码
• 外联式 (常用)
  • 单独新建一个js文件，文件后缀名是.js，在新建的js文件中直接写js代码，在html中通过<script src="js文件路径"></script>引入

注意：同一个网页中既可以保留外联式写法，又可以保留内嵌式写法，二者不可以混合使用

输出消息的方式

• alert('你好')
• 通过js在浏览器的控制台输出消息：console.log('你好')
• 在网页body中输出消息：document.write('')，可以在网页中直接输出文字信息、也可以在网页中输出html标签
• 在网页中获取用户输入：prompt('提示信息')
• 在网页中判断用户输入 (确定还是取消)：confirm('提示信息')

注意：在js中是严格区分字母大小写的，在编程语言中遇到的所有特殊符号都是英文输入法下

变量

• 作用：通过变量可以将程序中的数据保存下来
• 定义：var 自定义的变量名
  • 变量名不能以数字开头或者纯数字或者特殊符号定义 ($符号除外)
  • 变量名不建议使用汉字 (不规范)
  • 变量名不能使用关键字定义 (关键字在js中具有特殊含义的单词)
  • 变量名不能使用保留字定义 (保留字在当前的js版本中没有特殊含义，但是在其他版本中有特殊的含义)
  • 变量名不推荐使用name作为变量
  • 在定义变量的时候，变量名中间不能出现空格
  • 变量中间出现了逗号，表示的是同时定义了两个或者多个变量
  • 变量的命名要使用驼峰命名法(首字母小写 后面单词首字母大写)
  • 变量的命名要具有一定的语义
• 赋值：变量名= 值
  • 如果值是一个变量，那么在输出的时候不需要添加引号
  • 如果值不是一个变量，那么在输出的时候需要添加引号
  • 同一个变量一次只能保存一个值，是最后一次的赋值结果

数据类型

• 简单数据类型 (值类型，保存在内存的栈区)
  • 数字类型 (Number)：一个变量的值是数字 (整数，负数，小数)，并且该变量的值没有添加引号
  • 字符串类型 (String)：一个变量的值使用了引号
  • 布尔类型 (Boolean)：一个变量的值是true或者false
    • true：表示正确的 (真的)，在内存中对应的值是数字1
    • false：表示错误的 (假的)，，在内存中对应的值是数字0
  • undefined类型：一个变量的值是undefined或者变量没有赋值
  • null类型：一个空对象
    获取数据类型：typeof(变量)或者typeof 变量
• 复杂数据类型 (引用类型，保存在堆区，指向堆中的数组或者对象的地址)
  • Object (对象)
  • Array (数组)
  • Function (函数)

数据类型转换

• 显示类型转换
  • 转数字类型：Number(变量)、parseInt(变量)、parseFloat(变量)
    • 相同点
      • 都可以将变量转化为数字类型
      • 如果变量的值是一个整数，那么通过以上三种方法最后得到的结果也是整数
    • 区别
      • Number和parseFloat数据类型转换后，保留原来的结果
      • parseInt数据类型转换后，只能保留整数部分，小数部分直接忽略
  • 转字符串类型：变量.toString()、String(变量)
    • 相同点
      • 都可以将变量转化为字符串类型
    • 区别
      • String()方式可以将任何的变量都能转化为字符串类型
      • 变量.toString()方式无法将undefined转化为字符串类型
  • 转布尔类型：Boolean(变量)
    • 空字符串、undefined、null、0在转换布尔类型的时候是false
    • 将布尔类型转化为数字类型时，只能用Number
• 隐式类型转换
  • 在程序运算过程中发生的数据类型转换，不需要程序员手动干预

运算符

• 算数运算符
  • 加运算 (+)
    • 数字类型的变量相加，得到的结果就是数字类型
    • 如果是字符串的变量相加，得到的结果就是一个字符串,加号的作用就是一个拼接的作用
  • 减运算 (-)
    • 数字类型的变量相减，得到的结果是数字类型
    • 如果是一个数字的字符串相减，得到的结果是数字类型 (因为发生了隐式类型转换)
    • 如果是非数字的字符串相减，得到的结果是NaN
      • NaN：not a number (不是一个数字) 对应的数据类型是Number类型
  • 乘运算 (*)
    • 数字类型的变量相乘，得到的结果是数字类型
    • 如果是一个数字的字符串相乘，得到的结果是数字类型 (因为发生了隐式类型转换)
    • 如果是非数字的字符串相乘，得到的结果是NaN
  • 除运算 (/)
    • 数字类型的变量相除，得到的结果是数字类型
    • 如果是一个数字的字符串相除，得到的结果是数字类型 (因为发生了隐式类型转换)
    • 如果是非数字的字符串相除，得到的结果是NaN
    • 如果除数是0，得到的结果是Infinity (无穷大)
  • %取余 (获取余数)
    • 与乘法运算符的特点一样
    • %获取余数
    • 做取余数运算时，被除数小于除数的，商的整数部分为0，余数等于被除数
• 赋值运算符
  • 作用：用来给变量赋值
  • +=：a+=b等价于a = a + b
  • -=：a-=b等价于a = a - b
  • *=：a*=b等价于a = a * b
  • /=：a/=b等价于a = a / b
  • %=：将运算符右侧的结果赋值给左侧的变量
• 一元运算符
  • 前置++：var a = 2 ++a
  • 后置++：var a = 2 a++
  • 前置--：var a = 2 --a
  • 后置--：var a = 2 a--
    相同点：都是在变量原来值的基础上加1
    区别
    • b = ++a：由于加号在前，计算机就先给变量a加1,然后将加1之后的结果赋值给变量b
    • b = a++：由于加号在后，计算机在执行代码的时候，先把a原来的值赋值给变量b，最后a再加1
• 比较运算符
  • 大于 (>)
  • 小于 (<)
  • 大于或等于 (>=)：只要有一个满足的(正确的),最后的结果就是正确的(true)
  • 小于或等于 (<=)：只要有一个满足的(正确的),最后的结果就是正确的(true)
  • 等于 (==)：判断是否相等,不考虑数据类型,判断值是否相等
  • 全等于 (===)：判断是否相等,同时考虑值和数据类型必须都一样
  • 不等于 (!=)：判断是否不相等,判断值是否不相等,不用考虑数据类型
    注意：通过比较运算符最后得到的是一个布尔类型的结果
• 逻辑运算符
  • 作用：用来连接多个比较运算符
  • 或运算 (||)
    • || 或者的意思，只要有一个条件满足就可以了
      • false || true 结果 ===> true
      • false || false 结果 ===> false
      • true || true 结果 ===> true
    • 概述：只要有一个结果为true，最后的结果就是true，只有都为false时，最后的结果才为false
  • 且运算 (&&)
    • && 并且的意思，必须所有的条件都满足才可以
      • false && false 结果 ===> false
      • false && true 结果 ===> false
      • true && true 结果 ===> true
    • 概述：只要有一个结果为false，最后的结果就是false，只有都为true时，最后的结果才为true
  • 非运算 (!)
    • ! 取反
      • !false 结果 ===> true
      • !true 结果 ===> false
    • 概述
      • 如果操作数是一个对象、非空字符串、任意非0数值（包括Infinity），则返回false
      • 如果操作数是空字符串、数值0、null、undefined、NaN，则返回true

扩展

• 数字类型的取值范围
  • 最大取值：获取数字类型最大取值 Number.MAX_VALUE
  • 最小取值：获取数字类型最小取值 Number.MIN_VALUE
• 转义字符
  • 作用：可以解决同一种引号嵌套导致的报错问题
  • 语法：在引号前加一个 '\'
    注意：转义字符只能用在字符串中使用
• isNaN()
  • 作用：用来判断一个值是不是一个数字
  • 规律总结
    • isNaN(变量) 结果是false ===> 当前这个变量的值是一个数字
    • isNaN(变量) 结果是true ===> 当前这个变量的值不是一个数字
  • 提示：在程序中判断一个值是不是数字,不能通过数据类型去判断,因为NaN这个值的数据类型也是Number类型