LEON

JavaScript 基础 (一)

2022.03.13

js简介

  • js是一种运行在客户端的脚本语言。不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行。
  • 也可以通过Node.js技术进行服务器编程

js组成：

  • ECMAScript：JavaScript语法
  • DOM：页面文档对象模型
  • BOM：浏览器对象模型

js书写位置：

  • 行内：包含在HTML元素标签内（不推荐）
  • 内嵌：在 <head> <script> 代码段 </script> </head> 中内嵌
  • 外部：使用 <script src=”index.js”></script> 引入js文件

输入输出

  • alert(msg) 浏览器弹出警示框
  • console.log(msg) 浏览器控制台打印输出信息
  • prompt(info) 浏览器弹出输入框，供用户输入

变量

  • 声明：var age; 声明一个名为age的变量

  • 赋值：age = 10; 给名为age的变量赋值为10

  • 初始化：var age = 10; 声明变量的同时进行赋值，称为初始化

  • 更新：变量被重新赋值后，原有的值会被覆盖，变量值以最后一次更新为准

  • 声明多个变量：中间以逗号隔开

    var myname = 'Leon',
    age = 18,
    money = 99999;

Tips：

  • 变量已声明未赋值，结果是 undefined
  • 变量未声明直接赋值，可以运行，但不提倡
  • 变量未声明未赋值，直接使用会报错

变量命名规范

Untitled

  • 驼峰命名法
  • 尽量不要使用 name 作为变量名，在某些浏览器中有特殊含义

数据类型

JavaScript是一种弱类型、动态的语言，不需要提前声明变量的类型，程序在运行过程中，变量的类型会被自动确定，且类型可以被修改。

基本数据类型（简单数据类型）

  • Number：数字型，包含整型和浮点型，默认值为0
  • Boolean：布尔型，true / false，默认值为false
  • String：字符串型，用引号包含，默认值为””
  • Undefined：变量已声明未赋值，默认值为undefined
  • Null：空值，默认值为nul

Number数字型：

  • 八进制（0~7）：在数字前加上0，表示此数字为八进制
  • 十六进制（0~9，A~F）：在数字前加上0x，表示此数字为十六进制
  • 取值范围：最大值 Number.MAX_VALUE ，最小值 Number.MIN_VALUE
  • 无穷：无穷大 Infinity ，最穷小 -Infinity
  • 非数值：NaN ，Not a Number
  • isNaN() 判断是否为非数值，返回true / false

String字符串型

  • 双引号”” 或单引号’’ 包含的任意内容均为字符串型，推荐使用单引号

  • 如果有引号的嵌套，则可以单双错开使用，如外单内双，或外双内单

  • 转义符：以 \ 开头

    Untitled

  • .length 属性：计算字符串的长度（字符的个数）
  • 'my'+'name' = ‘myname’ 多个字符串之间可以用 + 连接进行拼接
    • '1' + 1 = '11' 字符串与其他类型拼接，会被转换为字符串类型
    • ‘I am ’ + valueAge + ‘ years old’ 也可以字符串与变量进行拼接，之间也用 + 连接

Boolean布尔型

  • 仅有两个值：true / false
  • 在参与计算时，true等价于1，false等价于0

获取变量的数据类型

  • typeof num 获取名为num的变量的数据类型
  • 字面量：在源码中一个固定值的表示法

数据类型的转换

从表单、prompt获取的数据默认都是字符串string类型的。若要进行运算，应进行数据类型的转换

  • 转换为字符串型
    • .tostring() 方法
    • String() 函数
    • 隐式转换：利用 + 拼接字符串，实现转换
  • 转换为数字型
    • parseInt() 函数：转化为整型数值型（舍弃小数部分，舍弃字符单位）
    • parseFloat() 函数：转换为浮点型数值型（舍弃字符单位）
    • Number() 函数：强制转换为数值型
    • 隐式转换：利用 - * / 运算符进行运算，实现转换
  • 转换为布尔型
    • Boolean() 函数
    • 代表空的、否定的值（如’’ 0 NaN null undefined等）会被转换为false，其他的都会被转换为true

运算符

算数运算符

  • +加 -减 *乘 /除 %取余数(取模)
  • 浮点数用算数运算符，会有精度问题。且不能直接判断两个浮点数是否相等
  • 取余运算符主要用来判断某数能否被整除
  • 先乘除后加减，小括号优先

递增递减运算符（自增自减）

  • 需要和变量配合使用
  • 前置递增++i 前置递减--i ：先自加减，后返回值
  • 后置递增i++ 后置递减i-- ：先返回原值，后自加减
  • 单独使用时两者效果一样，与其他代码联用效果不同
  • 更常用后置运算符

比较运算符（关系运算符）

  • >大于号 <小于号 >=大于等于号 <=小于等于号 ==判等号(会转型) !=不等号 ===全等号(值和数据类型都相等) !==不全等号
  • 返回值为布尔型

逻辑运算符（布尔运算符）

  • &&逻辑与(and) ||逻辑或(or) !逻辑非(not)
  • 返回值为布尔型
  • 短路运算（逻辑中断）：当有多个表达式（值）时，当左边的表达式值可以确定结果时，就不再继续运算右边的表达式值
  • 两个值进行逻辑与&&运算时，当左边的值为真true，则返回右边的值。左边的值为假false，则返回左边的值
  • 两个值进行逻辑或||运算时，当左边的值为真true，则返回左边的值。左边的值为假false，则返回右边的值

赋值运算符

  • =直接赋值 += -=加等减等 *= /= %=乘等除等取模等

运算符优先级

  1. 小括号：()
  2. 一元运算符：++ -- !
  3. 算术运算符：先* / % 后+ -
  4. 关系运算符：> >= < <=
  5. 相等运算符：== != === !==
  6. 逻辑运算符：先&& 后||
  7. 赋值运算符：=
  8. 逗号运算符：,
JavaScript