JavaScript - 基础①
⭐️ 有关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
-
分享