JavaScript语法基础

作者: t遇见 | 来源:发表于2022-09-23 18:03 被阅读0次

一、关于变量
（1）什么是变量
变量 Variable ，描述了程序中临时存储数据的容器

image.png
（2）变量的声明
原生JavaScript中，有两种方式可以创建变量：

可以直接通过一个自定义名称创建一个变量；
使用var关键字创建变量（推荐）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 声明了一个变量【尽管可以使用，但是项目规范中严禁使用】
    // 如果没有变量的声明关键字，当js中出现大量代码时，我们无法定位这个变量什么位置被第一次声明
    // 缺点：降低了代码的可读性
    name = "大牧"

    // 声明了另一个变量【推荐的操作方式】
    var age = 18

    console.log("name:", name)
    console.log("age:" , age)
  </script>
</body>
</html>

备注：关于es6中声明变量的操作

ES6语法标准中，提供了let、const用来声明变量和常量，主要用于补充原生JavaScript中的var关键字功能，相当于对变量的声明语法，提供了更多的功能扩展

注意：关于ES6语法标准，关注我，后面会单独讲解！

（3）命名规则
原生 JavaScript 作为一种编程语言，内部可以通过一些符号表示一些数据，。样的符号称为标识符.
标识符中包含了关键字、变量
标识符命名规则：描述数据的符号由字母、数字、下划线、 $ 符号组成，其中
数字不能开头
① 关键字
编程语言本身已经内置使用了很多的英文单词，这些内置的单词都称为关键字，如 var
可以参考一下都有哪些关键字，没有必要去记忆，使用的过程中可以根据程
序是否报错直接进行代码调整
下图中是一些常见关键字

image.png
② 变量
代码开发过程中，开发人员为了存储数据自定义的符号；注意不能使用关键字
变量的命名，遵循标识符的命名规则、不能使用关键字

var height = 175 // √
var shenGao = 180 // √
var w = 80 // √
var 1 = 80 // X
var this = 80 // X
var gender = '男' // √
var &gender = '女' // X ? √
var address = '河南省郑州市'   // √
var _addr = '河南省开封市' // √
var $addr = '河南省焦作市' // X ? √
var 2addr = '河南省濮阳市' // X
var %intro = '个人介绍' // X ? √
var intro% = '个人介绍' // X ? √
var intro_personal = '个人介绍' // √

（4）命名规范
大量的项目实践中，为了提高代码的阅读性/可读性，以及提高查看代码的效率；对变量名称的命名有一定的开发规范

见名知意
驼峰命名法：一个或者多个单词(拼音)组成，第一个单词(拼音)全部小写，后面每个单词（拼音）首字母大写

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 这四个变量，分别表示了什么意思？
    var a = 12
    var b = 80
    var c = 180
    var d = 1

    // 这四个变量，分别表示了什么意思？
    var shenGao = 178
    var tiZhong = 80
    var xingBie = 1
    var nianLing = 16     // ninaLing（【小】驼峰命名法）   NianLing（大驼峰命名法 | 帕斯卡命名法）
    // 这四个变量，分别表示了什么意思？
    var height = 180
    var weight = 75
    var gender = 0
    var age = 20
    // 下面两个变量，那个变量语法更加人性化/更容易阅读
    var xian = "xxxx"
    var xiAn = "xxxxx"
    var xian = "xxxxx"
    var gerenjieshao = "........"
    var geRenJieShao = "xxxxxxxx"
    var personalIntroduce = "......"
    var personalintroduce = "xxxxxx"
  </script>
</body>
</html>

（5）变量的赋值
变量作为一个存储数据的容器，需要添加数据之后才能正常访问，数据访问方式主要有：存储数据、查询数据、修改数据以及删除数据
变量中存储数据的方式就是变量的赋值操作，需要使用赋值运算符：=

<script>
    // 1、赋值方式（默认）
    // 使用赋值语句，给单个变量中存储数据
    var version = "V1.0.0"
    console.log("version:", version)

    // 2、连续赋值
    // 项目开发中使用到多个变量，初始数据都是一致的
    // 1 1 2 3 5 8... 斐波那契数列
    // 基本赋值
    var n1 = 1
    var n2 = 1
    console.log("n1:", n1, ",n2:", n2)

    var n3 = n4 = 1
    console.log("n3: ", n3, ", n4:", n4)

    // 3、项目中某些场景下，多个变量初始数据不一致
    var name = '大牧', age = 20, gender = '男'
    console.log('name:', name, ", age:", age, ", gender:", gender)

    // 4、注意的问题：关于变量的交叉赋值
    // var name, age = '大牧', 28 
    // 期望  name="大牧" age=28; js语法中不支持

  </script>

（6）变量的使用
项目中的数据操作，根据操作方式主要区分为两种

数据的操作：数据作为一个独立的整体，可以执行存储、查询、修改、删除，简称增删改查
- 增删改查：简称CRUD
- C:Create 增加、R:Retrieve 查询、U:Update 修改、D:Delete 删除
数据的运算：数据和数据之间，通过运算符执行运算，一般都是基础的加减乘除...
变量的使用，区分增加、修改、查询和删除的操作
增加：声明变量赋值的过程
查询：通过变量名称，获取变量中数据的过程
修改：给指定的变量重新赋值的过程
删除：
- 业务删除：项目开发中，约定变量中存储一个无效数据，表示该数据被删除；变量依然存在
- 真实删除：项目代码中，使用delete关键字针对变量进行物理删除，很容易造成代码稳定性问题，语法上受到一定的限制，如不能直接删除var声明的变量

<script>
    // 声明变量
    // 声明变量的同时可以赋值；也可以声明变量以后再进行赋值
    var myName;   // 等价于：var myName = undefined(未定义)
    console.log("myName:", myName)

    // 赋值：增加数据
    myName = "damu"
    console.log("myName:", myName)

    // 修改数据：给变量中存储新的数据，覆盖旧的数据
    myName = "大牧"
    console.log("myName:", myName)

    // 删除数据：对于已经不再使用的变量，需要删除变量释放占用的系统资源
    // 业务中的删除，并不建议直接删除变量，而是给变量赋值一个(开发规范)约定的空值
    // 1- 约定空字符串，表示删除了数据
    // 2- 约定undefined，表示删除了数据
    myName = ""
    console.log("myName: ", myName)

    // 只有在特殊的情况下，才会真实删除变量
    // 直接删除变量的操作是一种敏感并且危险的操作: 变量一旦真实删除，代码中再次使用很容易出现问题
    // delete语句对于var声明的变量，目前语法上不支持删除DontDelete
    // delete myName
    // console.log("myName delete:", myName)
</script>

（7）变量预解析

// 练习1
// 项目中我想使用班级的名称 
console.log("班级名称：", className)
// Uncaught Reference Error: className    is not defined
// 未捕获的  引用       错误：className变量  没有    定义
// 一旦程序报错，后面的代码不会执行（程序崩溃退出）


// 练习2
// 项目中变量的使用规则：先声明后使用
var className = "精品班"
console.log("班级名称：", className)


// 练习3
// 变量的预解析 
console.log("班级名称：", className) // undefined，没有报错？！
var className = "精品班"
console.log("班级名称：", className) // "精品班"


// 练习4
// 为什么没有报错？var关键字声明的变量，存在预解析功能
// 预解析：也称为变量提升，将变量的声明语句提升最前面，赋值还在原来的位置
// 上面的代码，等价于：
var className; // 变量预解析：提升了变量的声明，保障当前程序代码运行正确性（容错性）
console.log("班级名称：", className) // undefined，没有报错？！
className = "精品班"
console.log("班级名称：", className) // "精品班"

二、数据类型
（1）认识数据类型
可以表示各种数据的类型的概念编程语言中，通过具体的代码，描述对应的数据类型！
（2）基本数据类型(掌握)
原生JavaScript中提供了6种基本数据类型：

数值：Number
字符串：String
布尔：Boolean
空值：Null
未定义：Undefined
对象（一切皆对象）：Object

// String 字符串类型，可以使用双引号、单引号包含起来的一串字符
// 开发规范中：一般推荐或者要求使用单引号包含的语法
// 描述一个人的姓名
var name = "廉颇" // var name = '廉颇'
console.log('姓名：',name)

// Number 数值类型，包含整数和小数(浮点数)
// 描述一个人的身高
var height = 1.75
// 描述一个人的体重
var weight = 80
console.log('height身高：',height)
console.log('weight体重：',weight)

// Boolean 类型，布尔类型，只有两种取值：true / false
// 描述一个人是否存活|该用户账号是否可用
var status = true   // false
console.log('status可用：',status)

// undefined：表示无效数据，未定义数据
// 描述一个无效数据
var jobs;   // var jobs = undefined
console.log('jobs工作：',jobs)

// null:表示空值，表示一种没有任何数据的状态
// 描述一个空数据
var address = null
console.log('address地址：',address)

（3）复杂数据类型(了解)
原生JavaScript中也提供了一些复杂数据类型，用于描述一些较为复杂的事物，如：常见的复杂类型

Array：数组
Function：函数
Object：对象
Math：处理数学运算的类型
Date：处理日期时间的类型
RegExp：处理正则表达式的类型
UUID：处理唯一数据的类型

// 复杂类型的基本使用
// 1、数组
var names = ["老王", "小李", "大黄", "小灰"]
console.log(names)

// 2、日期
var date = new Date()
console.log("今年是：", date.getFullYear(), "，月份：", date.getMonth() + 1)

// 3、随机数：得到一个验证码
var rcode = Math.random().toString(36).substr(2, 6)
console.log("随机验证码：", rcode)

（4）查看类型

typeof(dat)：简易的数据类型查看方式，适用于大部分场景
Object.prototype.toString.call(dat)：数据类型原型查看方式

// 定义基本类型
var name = "耀"
console.log(name, typeof name)  // 耀 string

var hero = "娜可露露"
console.log(hero, typeof(hero)) // 娜可露露 string

var height = 20
console.log(height, typeof(height)) // 20 'number'

var pi = 3.1415
console.log(pi, typeof(pi))  // 3.1415 'number'

// status 单词，和前面用过的name一样，浏览器软件里面已经使用过这个变量
var sts = true
console.log(sts, typeof(sts)) // true  'boolean'

var address = undefined;
console.log(address, typeof(address))  // undefined 'undefined'

var intro = null
console.log(intro, typeof(intro)) // null 'object'
// 基本类型中存在Null类型，为什么这里打印object类型？有争议的类型
console.log(intro, Object.prototype.toString.call(intro)) // null '[object Null]'


// 复杂类型
var names = ["李信", "吕布"]
console.log(names, typeof(names)) // ['李信', '吕布'] 'object'
console.log(names, Object.prototype.toString.call(names)) // ['李信', '吕布'] '[object Array]'

var date = new Date()
console.log(date, typeof(date)) // 
console.log(date, Object.prototype.toString.call(date)) //

（5）类型转换
项目中原生JavaScript数据的表示方式，同一个数据可能会以不同类型的形式表示出来；进行数据运算(加减乘除)的时候很容易出现错误运算结果；需要掌握类型的转换技术

转换成字符串
- 字符串拼接
- String(dat)
- dat.toString()
转换成数值
- Number(dat)
- parseInt(dat)
- parseFloat(dat)
转换成布尔（字符串、数值、null/undefined）
- Boolean(dat)

// 同一个数据，可以是不同的类型
// var n1 = 3.14   // number
// var n2 = '3.14' // string

// var b1 = true     // boolean
// var b2 = 'false'  // string

// 需要进行类型转换（大部分类型转换都是基本类型的转换）
// 练习1、将其他类型转换成字符串类型
var x = 12
console.log(x, typeof(x))

var x1 = x + ''
console.log(x1, typeof(x1))
var x2 = String(x)
console.log(x2, typeof(x2))
var x3 = x.toString()
console.log(x3, typeof(x3))

var b = true
var b1 = String(b)
console.log(b1, typeof(b1))   // 'true'  string
var n = null
var n1 = String(null)
console.log(n1, typeof(n1))   // 'null'  string
var u = undefined
var u1 = String(u)
console.log(u1,  typeof(u1))  // 'undefined' string

// 练习2、转换成数值
var age = '20.01'
console.log(age, typeof(age))  // '20' string

// 转换成数值
var a1 = Number(age)
console.log(a1, typeof(a1))  // 20.01 number

// 转换成整数
var a2 = parseInt(age)
console.log(a2, typeof(a2))  //  20 number

// 转化成浮点数
var a3 = parseFloat(age)
console.log(a3, typeof(a3)) //  20.01 number

// 特殊转换
var money = "200元"
var m1 = parseInt(money)
console.log(m1, typeof(m1))  //  200 number

money = "￥200元"
m1 = parseInt(money)
// NaN(具体数据): not a number不是一个数值；属于数值类型
console.log(m1, typeof(m1))  //  NaN  number

// 其他类型
// 布尔类型，true -> 1；false -> 0
var b = true
var b1 = Number(b)
console.log(b1, typeof(b1))  //  1  number

// null 和 undefined
var n = null
var n1 = Number(n)
console.log(n1, typeof(n1), "Number") //  0 number
var n2 = parseInt(n)
console.log(n2, typeof(n2), "parseInt") // NaN number

var u = undefined
var u1 = Number(u)
console.log(u1, typeof(u1))  // NaN number
var u2 = parseInt(u)
console.log(u2, typeof(u2))  // NaN number

// 练习3、布尔类型
// 字符串转换布尔类型 
// 空字符串-> false，非空字符串->true
var s = ""    // 空字符串
var s2 = "  "  // 包含空白字符的字符串
var s3 = "helloworld" // 非空字符串

var s01 = Boolean(s)
console.log(s01, typeof(s01)) // false boolean

var s02 = Boolean(s2)
console.log(s02, typeof(s02)) // true boolean

var s03 = Boolean(s3)
console.log(s03, typeof(s03)) // true boolean

// 数值转换成布尔类型
// 0-> false, 非0-> true
var n1 = -10
var n2 = 0
var n3= 10

var n01 = Boolean(n1)
console.log(n01, typeof(n01)) // true, boolean

var n02 = Boolean(n2)
console.log(n02, typeof(n02)) // false booelean

var n03 = Boolean(n3)
console.log(n03, typeof(n03)) // true boolean

// null和undefined
var n = null
var n01 = Boolean(n)
console.log(n01, typeof(n01)) // false 'boolean'

var u = undefined
var u01 = Boolean(u)
console.log(u01, typeof(u01)) // false 'boolean'

（6）显式/隐式转换

// 加法运算：参与运算的数据，无法执行隐式转换，所以得到错误结果
// 通过固定语法，将类型进行转换后完成数据运算：显示类型转换
// 1.
var price = '20'
var total = price + price
var totalx = parseInt(price) + pasreInt(price) // 显式转换
console.log('total:', total)  // total: 2020 期望以外的错误结果（代码没有报错）

// 数据的隐式类型转换：数据参与运算时，类型在运算过程中进行了自动匹配转换

// 2. 字符串和数值执行乘法运算时，出现了类型自动转换（字符串-> 数值-> 参与运算）
var price2 = '30'
var cnt = 2
var total2 = price2 * 2 // 字符串 乘以 数值
console.log('total2:', total2) // total2: 60

// 3. 字符串和字符串执行减法运算时，出现类型自动转换（字符串-> 数值-> 参与运算）
var pay = '180'
var money = '200'
var balance = money - pay  // 字符串 减法 字符串
console.log("找零：", balance) // 找零： 20


// 4. 数值执行保留小数位数操作时，出现类型自动转换（数值-> 字符串）
var pi = 3.1415926
var pi2 = pi.toFixed(2) // 保留两位小数位数
console.log(pi2, typeof(pi2)) // 3.14 string

三、运算符
（1）关于数据的表示
编程语言中，一般处理数值数据，会有不同的进制表示方式：

二进制（逢二进一）：0, 1, 10, 11, 100, 101, 110, 111...
八进制（逢八进一）：0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20....
十进制（逢十进一）：0,1,2,3,4,5,6,7,8,9,10,11,12,...
十六进制（逢十六进一）：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12,....
（2）赋值运算符

符号	描述
`=`	将等号右侧的数据，赋值给左侧的变量

// 赋值操作
var name = "damu"

（3）算术运算符

符号	描述
`+`	加法运算
`-`	减法运算
`*`	乘法运算
`/`	除法运算
`%`	取余数运算
`++`	自增运算
`--`	自减运算

++在后，是先赋值后自增 j=i j=i+1; 变量赋予的是旧值，也就是1

++在前：先自增后赋值 i=1+i j=i 变量赋予的是新值也就是2.

--同上。

// 2、算术运算符
var n1 = 12 
var n2 = 5

console.log(n1 + n2) //  17
console.log(n1 - n2) // 7
console.log(n1 * n2) // 60
console.log(n1 / n2) // 2.4
console.log(n1 % n2) // 2（整除的情况下得到的余数）

// 自增运算
n1++      // 独立出来的，++符号放在前面和后面没有区别
console.log('n1',n1)  // 13
++n1
console.log('n1',n1)  // 14

// 自增赋值
var x1 = n1++   // 先赋值，后加加
console.log(x1,',x1, ', n1, ",n1") // 14 ',x1, ' 15 ',n1'

var x2 = ++n1   // 先加加，后赋值
console.log(x2, ',x2, ', n1, ",n1") // 16 ',x2, ' 16 ',n1'

注意事项：算术运算符可以和赋值运算符进行混合使用

符号	描述
`+=`	`a += 1`<br />等价于<br />

// 2.1、混合运算符
var num = 12
// num += 10
num = num + 10
console.log(num, ": num")

（4）比较运算符
项目中经常做一些数据的比较操作，通过返回的数据（布尔类型的）体现比较的结果（true | false）

符号	描述
`>`	大于
`>=`	大于等于
`<`	小于
`<=`	小于等于
`==`	等于
`!=`	不等于 `！=`
`===`	全等于`= = =`
`!==`	不全等于`！==`

// 3、比较运算符
var age = 17      // 真实年龄
var verify = 20   // 限制年龄

console.log(age > verify)  // false：age不大于verify
console.log(age >= verify)  // false
console.log(age < verify)  // true：age数据小于verify数据
console.log(age <= verify) // true

age = 20
console.log(age == verify) // true 相等
console.log(age != verify) // false

age = '20'
console.log(age == verify) // true age中的数值和verify数值相等
console.log(age === verify) // false: age和verify，数据类型或者数值不相同
console.log(age !== verify) // true

// 字符串，通过ascii码（整数）表示
// 字符串进行比较运算时，自动通过ascii码进行判断
var c1 = "a"    // 字母a ascii: 97
var c2 = "b"    // 字母b ascii：98
console.log(c1 > c2) // false，"a"不大于"b"

// 字符串中包含多个字符时，逐位比较
var c3 = "ab"
var c4 = "abc"
console.log(c3 > c4) // false

（5）逻辑运算符

符号	描述
`&&`	并且关系，多个条件同时为`true`返回`true`
`!`	取反

|| 或者关系，多个条件只要有一个为true返回true

// 4、逻辑运算符
// 账号+密码，同时正确，表示登录成功
var uname = "admin"
var upass = "123"

// 判断账号密码是否正确
console.log("admin" === uname && "1234" === upass) 
// true：账号密码正确
// false：提示账号或者密码有误

// 用户可以使用账号或者手机号码登录
var uname = "admin"
var uphone = "15899990000"
var upass = "123"
console.log(
  ('admin' === uname || '15899990000' === uphone)
  &&
  "123" === upass
) // true: 账号|手机号码 + 密码输入正确
// false：账号|手机号码  或者 密码有误


// 注册一个账号，判断账号是否合法
var account = "admin" // 模拟用户输入
console.log(Boolean(account)) // false，提示-注册账号不能为空
// true，用户输入了账号，可以继续注册
console.log(!Boolean(account)) // 和上一行代码的结果刚好相反，为了方便明天要学的合法性if判断

（6）三元运算符

符号	描述
条件 ? 结果1 ：结果2	执行表达式中的?符号前面的条件运算<br />条件为`true`执行结果1中的代码<br />条件为`false`执行结果2中的代码

// 5、三元运算符
var uname = "admin"
var upass = "123"

var name = prompt("请输入账号：")
var pass = prompt("请输入密码：")

name === uname && pass === upass ? alert("用户登录成功"): alert("账号或者密码有误")

（7）位运算符(了解)

符号	描述
`&`	与运算，`1 - 1 -> 1、1 - 0 -> 0 、0 - 0 -> 0`<br />`eg: 1 & 2 => ?`<br />`eg: 01 & 10 => 00`
`^`	异或运算：`1-1-> 0、0-0-> 0、1-0-> 1`
`>>`	右移运算，`100` -> `>>` -> `010`<br /> 4 4>>1 2
`<<`	左移运算，`010` -> `<<` -> `100`<br /> 2 -> 2<<1 -> 4

| | | 或运算：1 - 1 -> 1、1- 0-> 1、0 - 0 -> 0<br />eg: 1 | 2 => ?<br />eg: 01 | 10 => 11 |

JavaScript语法基础

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读