JavaScript合集
学完HTML5+CSS3的小伙伴,学习JS时,要多敲多练多想多拓展
刚开始入门JS的时候,我们不需要纠结那么多,有些需要先记住,后面会慢慢明白为什么是这样的
JS基础部分
我们为什么要学习JS?
js是前端开发的核心,没有js,前端就没有了灵魂,它是一门解释型
的语言,不需要我们手动编译,而是通过解释器边解释,边执行,也就是我们所说的JS引擎
,不管是浏览器还是Node.js都要遵循我们的ECMAScript的语法(ES)标准,ES6是一个大的变化,其中的一些语法也要掌握,Node.js后续也会有。
js可以像其他类型的值一样赋值给任意变量,也可以作为参数传递给其他函数,所有JS的函数是非常重要的,函数式编程
让代码更加有灵活性。
js是一个单线程
的编程语言,总而言之,言而总之,js同一时间只能做一件事,不像Java那样多线程,一个时间干多件事。有人可能会问,一个时间做一件事,那效率得多低呀,性能得多差呀,单线程虽然降低了JS代码的复杂程度,但是JS性能变差,所以为了解决问题,JS又提供了异步的编程方式,提高代码运行速度,同步异步这些后面也会有说到。
几乎大多数的编程语言都是面向对象
的,同样我们的JS也是,这个对象非比"对象",面向对象,通俗的来说,就是把一些相关的功能都封装到一个对象中,使用的时候直接调用就可以完成该功能,比如:汽车,汽车里面的每个大的零件都是有小的零件组成,我们把小零件都封装成一个大的零件----也就是对象,我们组装车的时候,只需要使用这个大零件就行,至于小零件怎么安装的,我们不需要考虑。
JS基础中的基础语法
如果你了解其他的编程语言,第一个程序都是编写HelloWorld,我们直接上代码:
编写位置(你不知道编写位置,你怎么编写)
编写位置分为三种:
-
script标签内部
<script> // 此处编写JS代码 </script>
-
外部的JS文件
<script src="xxx.script"></script> 注意:这个可不是你css学的link引入,注意这个是双标签的 script
-
标签的属性中
<button onclick="js代码">按钮</button> <a href="javascript:js代码;">超链接</a>
这个三个呀,你肯定该说,这要怎么用呀,到底用哪个呢?
js代码少可以写在script内部,如果多一些就外部引入,标签属性的方式,框架用的还是比较多的
这个地方注意一点的是,你要注意引入的位置,js是从上往下执行的,如果你把js代码放到页面渲染之前执行,就会出问题,所以一般的话,把js放到DOM 渲染结束后的位置
基本输出语句
那我们就先试试几个打印语句吧,为以后的排错输出打下基础:
<script>
alert("我是弹出框语句")
// 控制台就是页面点击F12打开
console.log("我是控制台输出语句")
document.write("我是页面打印语句")
</script>
注释的方式和分号的使用
-
单行注释
// 单行注释
-
多行注释
/* 多行注释 */
-
分号
3.1 基本上大多数的编程语言都需要加分号,但是JS不一样,可加可不加,完全看自己的心情。
3.2 JS严格区分大小写
3.3 同时我们也可以忽略空格,空格和换行都会被忽略掉,但是我们为了代码的美观,可以适当的使用一些插件来美化。
<!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>Hello World</title> <!-- 1.JS代码需要编写到script中 --> <script> alert("哈哈哈哈") console.log('你猜我在哪?') document.write('你猜我在哪?') </script> <!-- 2.可以将js编写外部的js文件中,然后通过script标签进行引入 --> <script src="./script/script.js"></script> </head> <body> <!-- 3.可以将js代码编写到指定属性中 --> <button onclick="alert('你点我干嘛!')">点我一下</button> <hr> <a href="javascript:alert(123);">超链接</a> <hr> <a href="javascript:;">超链接</a></body> </html>
字面量和变量
1.字面量
- 字面量其实就是一个值,它所代表的含义就是它字面的意思
- 比如:1 2 3 4 100 "hello" true null .....
- 在js中所有的字面量都可以直接使用,但是直接使用字面量并不方便
2.变量
-
变量可以用“存储”字面量
-
并且变量中存储的字面量可以随意的修改
-
通过变量可以对字面量进行描述,并且变量比较方便修改
变量有三种声明方式:
1.var ---有很多缺陷,会造成变量的值泄露,一般很少使用
2.let --推荐使用,有块级作用域,不可以重复声明,没有变量提升
3.const --用于声明常量,也可以声明对象和数组这些复杂数据类型的
let num = 10
const obj = {}
const arr = []
变量的内存结构(看图理解):
变量中并不存储任何值,而是存储值的内存地址!
我们可以通过:
console.log(a===b) //true
的形式查看两者的内存地址是否指向同一个
常量
在JS中,使用const声明常量,常量只能赋值一次,重复赋值会报错
在JS中除了常规的常量外,有一些对象类型的数据我们也会声明为常量
const PI = 3.1415926
标识符
在JS中,所有可以由我们自主命名的内容,都可以认为是一个标识符
像 变量名 函数名 类名...
使用标识符需要遵循如下的命名规范:
1. 标识符只能含有字母、数字、下划线、$,且不能以数字开头
2. 标识符不能是JS中的关键字和保留字,也不建议使用内置的函数或类名作为变量名
3. 命名规范:
- 通常会使用驼峰命名法
- 首字母小写,每个单词开头大写
- maxlength --> maxLength
- borderleftwidth --> borderLeftWidth
- 类名会使用大驼峰命名法
- 首字母大写,每个单词开头大写
- maxlength --> MaxLength
- 常量的字母会全部大写
- MAX_LENGTH
数据类型
数值
数值(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 =666666666666888888888888888888888855555555555n
其他进制的数字:
二进制 0b
八进制 0o
十六进制 0x
a = 0b1010
a = 0o10
a = 0xff
console.log(a) //以十进制打印
类型检查
typeof 运算符
- typeof用来检查不同的值的类型
- 它会根据不同的值返回不同的结果
let a = 0
let b = 10n
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"
字符串
字符串(String)
-
在JS中使用单引号或双引号来表示字符串
-
转义字符
- \ " --> "
- \ ' --> '
- \\ --> \\
- \t --> 制表符
- \n --> 换行
-
模板字符串
- 使用反单引号` 来表示模板字符串
- 模板字符串中可以嵌入变量,可以跨行书写
- 使用typeof检查一个字符串时会返回 "string"
let str = `你好,${name}`
console.log(typeof str) //"string"
其他数据类型
布尔值(Boolean)
-
布尔值主要用来进行逻辑判断
-
布尔值只有两个true 和 false
-
使用typeof检查一个布尔值时会返回 "boolean"
let bool = true // 真 bool = false // 假 let num = 1
空值 (Null)
-
空值用来表示空对象
-
空值只有一个 null
-
使用typeof检查一个空值时会返回"object"
-
使用typeof无法检查空值
let a = null console.log(typeof a) //"object"
未定义(Undefined)
-
当声明一个变量而没有赋值时,它的值就是Undefined
-
Undefined类型的值只有一个就是 undefined
-
使用typeof检查一个Undefined类型的值时,会返回 "undefined"
let b console.log(typeof b) //"undefined"
符号(Symbol)
-
用来创建一个唯一的标识
-
使用typeof检查符号时会返回 "symbol"
let c = Symbol() // 调用Symbol()创建了一个符号
console.log(typeof c)
七种数据类型
JS中原始值一共有七种
Number,BigInt,String,Boolean,Null,Undefined,Symbol
七种原始值是构成各种数据的基石 原始值在JS中是不可变类型,一旦创建就不能修改
类型转换
转换为字符串
-
调用
toString()
方法将其他类型转换成字符串let a = 10 a = a.toString() // "10"
-
调用
String()
函数将其他类型转换为字符串对于拥有toString()方法的值调用String()函数时, 实际上就是在调用toString()方法 对于null,则直接转换为"null" 对于undefined,直接转换为"undefined"
-
b = null // "null" b = undefined // "undefined" b = true console.log(typeof b, b) b = String(b) console.log(typeof b, b)
null和undefined没有toString()方法,通常用String函数
,
类型转换不是改变了原始值,而是根据原始值去创建了一个新的类型的值
转换为数值
1.使用Number()
函数来将其他类型转换为数值
转换的情况:
- 字符串:
- 如果字符串是一个合法的数字,则会自动转换为对应的数字
- 如果字符串不是合法数字,则转换为NaN
- 如果字符串是空串或纯空格的字符串,则转换为0
- 布尔值:
- true转换为1,false转换为0
- null 转换为 0
- undefined 转换为 NaN
2.专门将字符串转化为数值
parseInt()
--- 将一个字符串转成一个整数- 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的整数
- 也可以使用parseInt()来对一个数字进行取整
parseFloat()
---- 将一个字符串转成浮点数- 解析时,会自左向右读取一个字符串,直到读取到字符串中所有的有效的小数
转换为Boolean
1.使用Boolean()
函数来将其他类型转换为布尔值
- 转换的情况:
数字:
- 0 和 NaN 转换为false
- 其余是true
字符串:
- 空串 转换为 false
- 其余是true
null和undefined 都转换为 false
对象:对象会转换为true
- 所有表示空性的没有的错误的值都会转换为false:
0、NaN、空串、null、undefined、false
运算符
-
运算符可以用来对一个或多个操作数(值)进行运算
算数运算符
+ 加法运算符 - 减法运算符 * 乘法运算符 / 除法运算符 ** 幂运算 % 模运算,两个数相除取余数
-
注意:
-
-
算术运算时,除了字符串的加法其他运算的操作数是非数值时,都会转换为数值然后再运算
let a = 1 + 1 a = 10 - 5 a = 2 * 4 a = 10 / 5 a = 10 / 3 a = 10 / 0 // Infinity a = 10 ** 4 a = 9 ** .5 // 开方 a = 10 % 2 a = 10 % 3 a = 10 % 4
JS
是一门弱类型语言,当进行运算时会通过自动的类型转换来完成运算a = 10 - '5' // 10 - 5 a = 10 + true // 10 + 1 a = 5 + null // 5 + 0 a = 6 - undefined // 6 - NaN
当任意一个值和字符串做加法运算时,它会先将其他值转换为字符串, 然后再做拼串的操作 可以利用这一特点来完成类型转换 可以通过为任意类型 + 一个空串的形式来将其转换为字符串 其原理和String()函数相同,但使用起来更加简洁
当任意一个值和字符串做加法运算时,它会先将其他的值转化为字符串,然后再做拼串操作
可以利用这个特征来完成隐式类型转换
可以通过为任意类型 + 一个空串的形式来将其转换为字符串
a = 'hello' + 'world' a = '1' + 2 // "1" + "2" a = true a = a + '' console.log(typeof a, a) //string true
-
-
赋值运算符
赋值运算符用来将一个值赋值给一个变量
=
- 将符号右侧的值赋值给左侧的变量
??=
- 空赋值
- 只有当变量的值为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
a = 5 // 将右边的值 赋值 给左边的变量
let b = a // 一个变量只有在=左边时才是变量,在=右边时它是值
a = 66
a = a + 11 // 大部分的运算符都不会改变变量的值,赋值运算符除外
a = 5
// a = a + 5 // 10
a += 5 // 在a原来值的基础上增加5
a = null
//当a的值为null或者undefined时,就会赋值
a ??= 101
console.log(a)
一元运算符
一元的加减
-
正号 +
不会改变数值的符号
-
负号 -
可以对数值进行符号位取反
当我们对非数值类型进行正负运算时,会先将其转换为数值
小试: let a = -10 a = -a let b = '123' b = +b // b = Number(b) console.log(typeof b, b)
自增自减运算符
-
自增运算符
-
使用后会使原来的变量加1
-
自增分为前自增(++a)和后自增(a++)
-
前自增:
先自增后赋值
新值 -
后自增:
先赋值后自增
旧值let n = 5 let result = n++ + ++n + n 是多少呢?
-
-
自减运算符
同自增,运行的方式都是一样的
逻辑运算符
-
逻辑非 !
-
可以用来对一个值进行非运算 !
-
它可以对一个布尔值进行取反操作
- true --> false
- false --> true
-
如果对一个非布尔值类型的值进行取反,它会先将其转化为布尔值
可以利用这个特点将其他类型转化为布尔值
-
类型转换
-
转化为字符串
-
显式转换
String()
-
隐式转换
+ ""
-
-
转化为数值
-
显式转换
Number()
-
隐式转换
+
-
-
转化为布尔值
-
显式转换
Boolean()
-
隐式转换
!!
-
-
-
-
逻辑与 &&
- 可以对两个值进行运算
- 当&&左右都为true时,则返回true,否则返回false
- 与运算是短路的与,如果第一个是false,就不看第二个值了
- 对于非布尔值运算,它会转换为布尔值然后运算,但是最终会返回原值
- 如果第一个值是false,则直接返回第一个值
- 如果第一个值为true,则返回第二个值
-
逻辑或 ||
- 可以对两个值进行或运算
- 当||左右有true时,则返回true,否则返回false
- 或运算是找true,如果找到true,就直接返回
- 对于非布尔值或运算,它会转换为布尔值然后运算,但是最终会返回原值
- 如果第一个为true,则返回第一个
- 如果第一个值为false,则返回第二个值
也就是说:
逻辑与&&:必须都要满足,如果一个就是false,就不用看第二个了,因为有一个false就为false了,没必要看第二个
逻辑或||:有一个满足就可,如果第一个true了,也就直接返回了,没必要看第二个了
let result = true && true // true
result = true && false // false
result = false && true // false
result = false && false // false
result = true || false // true
result = false || true // true
result = true || true // true
result = false || false // false
关系运算符
关系运算符:关系运算符用来检查两个值之间的关系是否成立 成立返回true,不成立返回false
关系运算符
>
- 用来检查左值是否大于右值
>=
- 用来检查左值是否大于或等于右值
<
- 用来检查左值是否小于右值
<=
- 用来检查左值是否小于或等于右值
注意:
1.当对非数值进行关系运算时,它会先将前转换为数值然后再比较
2.当关系运算符的两端是两个字符串,它不会将字符串转换为数值,而是逐位的比 较字符的Unicode编码 ,利用这个特点可以对字符串按照字母排序
注意比较两个字符串格式的数字时一定要进行类型转换
let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true
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不和任何值相等,包括它自身
===
全等运算符,返回一个布尔值
- 它不会进行自动的类型转换,如果两个值的类型不同直接返回false
- null和undefined进行全等比较时会返回false
let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true
result = null == undefined // true
result = NaN == NaN // false
result = 1 === "1" // false
result = null === undefined // false
result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true
console.log(result)
条件运算符
条件运算符
条件表达式 ? 表达式1 : 表达式2
- 执行顺序:
条件运算符在执行时,会先对条件表达式进行求值判断,
如果结果为true,则执行表达式1
如果结果为false,则执行表达式2
也就是说:
先判断条件表达式,如果返回true,就执行表达式1,如果返回的是false,就执行表达式2
let a = 100
let b = 200
// a > b ? alert('a大!') : alert("b大!")
let max = a > b ? a : b
三元运算符
的值就是比较之后返回true的对应的值
运算符的优先级
优先级查询:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
流程控制
持续更新中.........................................
标签:false,JavaScript,笔记,JS,运算符,let,result,true From: https://www.cnblogs.com/taotaoFrontEndDevelopment/p/16935575.html