無.Flac's Blog

無.Flac

JavaScript - 基础①

2024-03-11

⭐️ 有关JavaScript的学习总结



JavaScript

> JavaScript 是一种广泛应用于网页开发的脚本语言,它为网页添加了动态交互和丰富的功能。

> JavaScript 用于在网页中添加交互性和动态功能。它可以控制网页的行为,处理用户输入,并与服务器进行通信,以实现各种功能。

> JavaScript 的语法类似于其他编程语言,它是一种动态类型语言,允许变量在运行时更改类型。JavaScript 中的语句以分号结尾,而代码块使用大括号来定义。

> JavaScript、HTML和CSS一起构成了现代网页的核心。HTML 负责结构,CSS 负责样式,JavaScript 则负责交互和动态功能。


小试牛刀

>网页弹窗

<script>
     alert("text")
</script>

>打印语句

<script>
  	alert("哈哈哈哈")
  	console.log("你猜我在哪?")
    document.write("你猜我在哪!!")
</script>

常规入门

>Script标签

<script>
        // JS代码
</script>

>外部JS文件

<script src="xxx.script"></script>

>标签中的属性

<button onclick="js代码">按钮</button>
<a href="javascript:js代码;">超链接</a>

>单行注释

// 单行注释

>多行注释

/* 多行注释 */

>字变量和变量

  • 字面量:字面量其实就是一个值,它所代表的含义就是它的字面意思。

比如:1 2 3 4 100 "hello" true null .....

在JS中所有的字面量都可以直接使用,但是直接使用字面量不方便

  • 变量:变量可以用“存储”字面量。

变量中存储的字面量可以随意的修改

通过变量可以对字面量进行描述,并且变量比较方便

  • 变量的使用

声明变量:let 变量名 / var 变量

变量赋值:a = xx

声明和赋值同时进行:let 变量 = 值

let a  / var a
let b,c,d / var f,g,h

let a =100
console.log(a)
  • 变量的内存

变量中不存储任何值,而是存储值的内存地址

  • 常量

在 JS 中,使用 const 声明常量,常量只能赋值一次,重复赋值会报错

在 JS 中除了常规的常量外,有一些对象的数据我们也会声明为常量

const PI = 3.1415926
  • 标识符

在 JS 中,所有可自主命名的内容,都可以是标识符,例如:变量名、函数名、类名...

使用标识符需要遵循如下命名规范:

1、标识符只能含有字母、数字、下划线、$,且不能以数字开头

2、标识符不能是 JS 中的关键字和保留字,也不建议使用内置函数或类名作为变量名

命名规范:

①通常会使用驼峰命名法:

> 首字母小写,每个单次字母大写

> maxlength - -> maxLength

> borderleftwidth - -> borderLeftWidth

②类名会使用大驼峰命名法:

> 首字母大写,每个单词开头大写

> maxlength - -> MaxLength

③MAX_LENGTH

let a = 10
let abc123_$ = 22
let _abc = 33
let $bcd = 44

数据类型

>数值(Number)

  • 在 JS 中所有的整数和浮点数都是 Number 类型

  • JS 中的数值并不是无限大的,当数值超过一定范围后会显示近似值

  • Infinity 是一个特殊的数值,表示无穷

  • 在 JS 中进行一些精度比较高的运算时要十分注意

  • NaN 也是一个特殊的数值,表示非法的数值

let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2
a = 1 - "a" // NaN (Not a Number)
a = NaN

>大整数(BigInt)

  • 大整数用来表示一些比较大的整数

  • 大整数使用 n 结尾,它可以表示的数字范围是无限大

 a = 99999999999999999999999999999999999999999999999999n

>其他进制的数字:

  • 二进制:0b

  • 八进制:0o

  • 十六进制:0x

a = 0b1010
a = 0o10
a = 0xff

>运算符(typeof)

  • typeof 用来检查不同值的类型

  • 它会根据不同的值返回不同的结果

let a = 10
let b = 10n

console.log(typeof a) // "number"
console.log(typeof b) // "bigint"

>字符串(String)

  • 在 JS 中使用单引号或双引号来表示字符串

  • 转义字符 \

\" --> "
\' --> '
\\ --> \\
\t --> 制表符
\n --> 换行
  • 模板字符串

使用反单引号` 来表示模板字符串
模板字符串中可以嵌入变量
  • 使用typeof 检查一个字符串时会返回“string”

let a = "Hello"
a = "你好"
a = '这是一个"字\\\\符串'
a = "呵呵\t哈哈哈"
a = "呵呵\n哈哈哈"

a = "今天天气真不错!"
a = `今天天气挺好的!`

let name = "猪八戒"

let str = `你好,${name}`

let b = 10
//console.log(`b = ${b}`)

let c = "5"
c = "hhh"
c = `aaa`
console.log(typeof c)

>其他数据类型

布尔值(Boolean)
      - 布尔值主要用来进行逻辑判断
      - 布尔值只有两个 true 和 false
      - 使用typeof检查一个布尔值时会返回"boolean"

空值 (Null)
      - 空值用来表示空对象
      - 空值只有一个 null
      - 使用typeof检查一个空值时会返回"object"
      - 使用typeof无法检查空值

未定义(Undefined)
      - 当声明一个变量而没有赋值时,它的值就是Undefined
      - Undefined类型的值只有一个就是undefined
      - 使用typeof检查一个Undefined类型的值时,会返回"undefined"
            
符号(Symbol)
      - 用来创建一个唯一的标识    
      - 使用typeof检查符号时会返回"symbol"
  • 原始值是构成各种数据的基石,在JS中是不可变类型,一旦创建就不能修改。

//JS中原始值一共有七种!
- -> 1.Number
- -> 2.BigInt
- -> 3.String
- -> 4.Boolean
- -> 5.Null
- -> 6.Undefined
- -> 7.Symbol
let bool = true // 真
    bool = false // 假

//    let num = 1
let a = null

console.log(typeof bool)
console.log(typeof a)

//    let b
//    console.log(typeof b)

let c = Symbol() // 调用Symbol()创建了一个符号
console.log(typeof c)

类型转换

类型转换值是指将一种数据类型转换为其他类型(字符串、数值、布尔值)

>字符串

1、调用 toString()方法将其他类型转换为字符串

调用 xxx 的 yyy 方法 --> xxx.yyy()

let a = 10 // "10"
	a = true // "true"
	a = 11n  // "11"
 	a = undefined

console.log(typeof a)

注意:
由于 null 和 undefined 中没有 toString(),所以对这两个东西调用toString()时会报错。

 a = a.toString()// “10”
console.log(typeof a,a)

toString()后,需要赋值a
2.调用String()函数将其他类型转换为字符串

调用xxx函数 --> xxx()

原理:
对于拥有toString()方法的值调用String()函数时,实际上就是在调用toString()方法


let b = 33 // "33"
	b = null // "null"
    b = undefined // "undefined"
    b = true
console.log(typeof b, b)

对于null,则直接转换为"null"
对于undefined,直接转换为"undefined"

	b = String(b)
console.log(typeof b, b)

>数值

1.使用Number()函数来将其他类型转换为数值
--> a = Number(a)

let a = '123' // 123
	a = 'abc' // NaN
	a = '3.1415926' // 3.1415926
字符串 - 如果字符串是一个合法的数字,则会自动转换为对应的数字
       
	a = '11px' // NaN
字符串 - 如果字符串不是合法数字,则转换为NaN

	a = ''  // 0
	a = '    ' // 0  
字符串 - 如果字符串是空串或纯空格的字符串,则转换为0
      
	a = true // 1
布尔值 - true转换为1

    a = false // 0
布尔值 - false转换为 0

    a = null // 0
空值 - null 转换为 0

    a = undefined // NaN
未定义 - undefined 转换为 NaN
专门用来将字符串转换为数值的两个方法:

parseInt() —— 将一个字符串转换为一个整数
- 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的整数
- 也可以使用parseInt()来对一个数字进行取整

parseFloat() —— 将一个字符串转换为浮点数 
- 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的小数


let b = '123px' // 123
    b = 'a123' // NaN
    b = '123.45'
  	// b = 456.123
console.log(typeof b, b)

b = parseInt(b)
console.log(typeof b, b)

>布尔值

使用Boolean()函数来将其他类型转换为布尔值

	a = Boolean(a)
console.log(typeof a, a)

	a = -1 // true
	a = 0 // false
    a = NaN // false
    a = Infinity // true
数字:- 0 和 NaN 转换为false
     - 其余是true

	a = 'abc' // true
    a = 'true' // true
    a = 'false' // true
    a = '' // false
    a = " " // true
字符串:
     - 空串 转换为 false
     - 其余是true

    a = null
    a = undefined
null和undefined 都转换为 false

	-对象:对象会转换为true
	-0、NaN、空串、null、undefined、false

运算符

  • 运算符可以用来对一个或多个操作数(值)进行运算

>算数运算符

let a = 1 + 1 --> + 加法运算符
	a = 10 - 5 --> - 减法运算符
	a = 2 * 4 --> * 乘法运算符
	a = 10 / 5 --> / 除法运算符
	a = 10 ** 4 --> ** 幂运算
	a = 10 % 3 --> % 模运算,两个数相除取余数

	a = 10 / 0 // Infinity
	a = 9 ** .5 // 开方

console.log(typeof a, a)

JS是一门弱类型语言,当进行运算时会通过自动的类型转换来完成运算

	a = 10 - '5' // 10 - 5
    a = 10 + true // 10 + 1
    a = 5 + null // 5 + 0
    a = 6 - undefined // 6 - NaN

注意:
当任意一个值和字符串做加法运算时,它会先将其他值转换为字符串,然后再做拼串的操作. 
可以利用这一特点来完成类型转换
	a = 'hello' + 'world'
    a = '1' + 2 // "1" + "2"

可以通过为任意类型 + 一个空串的形式来将其转换为字符串,其原理和String()函数相同,但使用起来更加简洁
	a = true

    a = a + ''

console.log(typeof a, a)

>赋值运算符

  • 赋值运算符用来将一个值赋值给一个变量

 let a = 10
     a = 5 // 将右边的值 赋值 给左边的变量

 let b = a // 一个变量只有在=左边时才是变量,在=右边时它是值

     a = 66
     a = a + 11 // 大部分的运算符都不会改变变量的值,赋值运算符除外
	 a = 5

     // a = a + 5 // 10
     a += 5 // 在a原来值的基础上增加5

	 a = null
     a ??= 101

 console.log(a)
	  =
        - 将符号右侧的值赋值给左侧的变量
    ??=
        - 空赋值
        - 只有当变量的值为null或undefined时才会对变量进行赋值
    +=
        - a += n 等价于 a = a + n
    -=
        - a -= n 等价于 a = a - n
    *=
        - a *= n 等价于 a = a * n
    /=
        - a /= n 等价于 a = a / n
    %=
        - a %= n 等价于 a = a % n
    **=
        - a **= n 等价于 a = a ** n

>一元±

let a = +10

+ 正号
     - 不会改变数值的符号

let a = -10
    a = -a // "10"
- 负号
     - 可以对数值进行符号位取反
                
当我们对非数值类型进行正负运算时,会先将其转换为数值然后再运算

let b = "123"
b = +b // b = Number(b)
console.log(typeof b, b)

>自增和自减

++ 自增运算符
	- ++ 使用后会使得原来的变量立刻增加1
	- 自增分为前自增(++a)和后自增(a++)
	- 无论是++a还是a++都会使原变量立刻增加1

let a = 10
// let b = a++
//console.log("a++ =", b)
                
let b = ++a
//console.log("++a =", b)
console.log(a)             
                
    - 不同的是++a和a++所返回的值不同
    a++ 是自增前的值 旧值
    ++a 是自增后的值 新值

let n = 5
//   		  5  +	7  + 7
let result = n++ + ++n + n
console.log(result) //则返回值为 19
-- 自减运算符
   - 使用后会使得原来的变量立刻减小1
   - 自减分为前自减(--a)和后自减(a--)
   - 无论是--a还是a--都会使原变量立刻减少1

   - 不同的是--a和a--的值不同
   a-- 是自减前的值 旧值
   --a 是自减后的值 新值

let a = 5
        
// console.log('--a', --a)
console.log('a--', a--)
console.log(a)

>逻辑运算符

  • ! 逻辑非

! 逻辑非
  - ! 可以用来对一个值进行非运算
  - 它可以对一个布尔值进行取反操作
  true --> false
  alse --> true
  - 如果对一个非布尔值进行取反,它会先将其转换为布尔值然后再取反
  可以利用这个特点将其他类型转换为布尔值

let a = true 
	a = !a
//console.log(a)

	a = 123
	a = !!a
console.log(typeof a, a)


-->>类型转换
  - 转换为字符串
	显式转换 String()
	隐式转换 + ""

  - 转换为数值
	显式转换 Number()
	隐式转换 +

  - 转换为布尔值
	显式转换 Boolean()
	隐式转换 !!
  • && 逻辑与

&& 逻辑与
  - 可以对两个值进行与运算
  - 当&&左右都为true时,则返回true,否则返回false
  - 与运算是短路的与,如果第一个值为false,则不看第二个值
  - 与运算是找false的,如果找到false则直接返回,没有false才会返回true

let result = true && true // true
	result = true && false // false
	result = false && true // false
	result = false && false // false

 // true && alert(123) // 第一个值为true,alert会执行
 // false && alert(123) // 第一个值为false,alert不会执行

  - 对于非布尔值进行与运算,它会转换为布尔值然后运算,最终会返回原值
      - 如果第一个值为false,则直接返回第一个值
        如果第一个值为true,则返回第二个值

 // true && true  -> true
     result = 1 && 2 // 2 
 // true && false -> false
     result = 1 && 0 // 0
 // false && false -> false 
     result = 0 && NaN // 0

console.log(result)
  • || 逻辑或

|| 逻辑或
  - 可以对两个值进行或运算
  - 当||左右有true时,则返回true,否则返回false
  - 或运算也是短路的或,如果第一个值为true,则不看第二个值
  - 或运算是找true,如果找到true则直接返回,没有true才会返回false

let result = true || false // true
    result = false || true // true
    result = true || true // true
    result = false || false // false

 // false || alert(123) // 第一个值为false,alert会执行
 // true || alert(123) // 第一个值为true,alert不会执行

  - 对于非布尔值或运算,它会转换为布尔值然后运算,最终会返回原值
      - 如果第一个值为true,则返回第一个
        如果第一个值为false,则返回第二个

     result = 1 || 2 // 1
     result = "hello" || NaN // "hello"
     result = NaN || 1 // 1
     result = NaN || null // null

console.log(result)

>关系运算符

关系运算符用来检查两个值之间的关系是否成立
 - 成立返回true,不成立返回false

  >
      - 用来检查左值是否大于右值
  >=
      - 用来检查左值是否大于或等于右值
  <
      - 用来检查左值是否小于右值
  <=
      - 用来检查左值是否小于或等于右值

let result = 10 > 5 // true
    result = 5 > 5 // false
    result = 5 >= 5 // true

注意:
    当对非数值进行关系运算时,它会先将前转换为数值然后再比较。 
    当关系运算符的两端是两个字符串,它不会将字符串转换为数值,而是逐位的比较字符的Unicode编码,利用这个特点可以对字符串按照字母排序。
    注意比较两个字符串格式的数字时一定要进行类型转换。

	result = 5 < "10" // true
    result = "1" > false // true

    result = "a" < "b" // true
    result = "z" < "f" // false
    result = "abc" < "b" // true

    result = "12" < "2" // true
    result = +"12" < "2" // false

// 检查num是否在5和10之间
let num = 4

// result = 5 < num < 10 // 错误的写法
result = num > 5 && num < 10

console.log(result)

>相等运算符

==
    - 相等运算符,用来比较两个值是否相等
    - 使用相等运算符比较两个不同类型的值时,
        它会将其转换为相同的类型(通常转换为数值)
		然后再比较类型转换后值相同也会返回true
    - null和undefined进行相等比较时会返回true
    - NaN不和任何值相等,包括它自身
	
let result = 1 == 1 // ture
	resule = 1 == 2 // false
    result = 1 == '1' // true
    result = true == "1" // true

	result = null == undefined // true
    result = NaN == NaN // false

===
    - 全等运算符,用来比较两个值是否全等
    - 它不会进行自动的类型转换,如果两个值的类型不同直接返回false
    - null和undefined进行全等比较时会返回false

let	result = 1 === "1" // false
	result = null === undefined // false

!=
    - 不等,用来检查两个值是否不相等
    - 会自动的进行类型转换

let result = 1 != 1 // false
	result = 1 != "1" // false

!==
    - 不全等,比较两个值是否不全等
    - 不和自动的类型转换

let result = 1 !== "1" // true

console.log(result)

>条件运算符

条件表达式 ? 表达式1 : 表达式2
    - 执行顺序:
    条件运算符在执行时,会先对条件表达式进行求值判断,
    如果结果为true,则执行表达式1
    如果结果为false,则执行表达式2

// false ? alert(1) : alert(2)

let a = 100
let b = 200
// a > b ? alert('a大!') : alert("b大!")
let max = a > b ? a : b
alert(max) //获取最大值

>运算符的优先级

和数学一样,JS中的运算符也有优先级,比如先乘除和加减。

let a = 1 + 2 * 3 // 7

	可以通过优先级的表格来查询运算符的优先级
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

	- 在表格中位置越靠上的优先级越高,优先级越高越先执行,优先级一样自左向右执行
      优先级我们不需要记忆,甚至表格都不需要看
      因为()拥有最高的优先级,使用运算符时,如果遇到拿不准的,可以直接通过()来改变优先级即可

 	a = (1 && 2) || 3

console.log(a)

  • 4