JavaScript - 基础①
99
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.Symbollet 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()后，需要赋值a2.调用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
-
分享