JavaScript总结【1】
JavaScript基础知识
简介
JavaScript简介
什么是JavaScript?
-
运行在客户端的脚本语言，创始人Brendan Eich
-
脚本语言，不需要编译，编译是在代码执行直接编译生成中间代码文件如exe，解释器是在代码运行时进行解释并立即执行
-
可基于Node.js技术进行服务器端编程
浏览器执行JavaScript
浏览器分为渲染引擎和JS引擎两部分：
-
渲染引擎： 解析HTML和CSS，俗称内核，如chrome的blink
-
JavaScript引擎： 也成为JS解释器，用来读取网页中的JS代码，如chrome中的V8（号称最快的JS引擎）
JavaScript的组成
JavaScript由三部分组成：
-
ECMAScript： 规定了JS的编程语法和基础知识，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准
-
DOM： 文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。通过DOM可操作页面上的各种元素（大小、位置、颜色等）。
-
BOM： 浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可操作浏览器窗口，比如弹出框、控制浏览器跳转、分辨率等。
JavaScript的书写方式
JavaScript的书写方式有三种：
-
行内式： 直接写在元素内部
注意：代码中出现字符串
</script>时需转义
<!-- 行内式的JS直接写到元素内部 -->
<input type="button" value="点一下" onclick="alert('行内式')">
- 内嵌式： 通过
<script>语句块</script>嵌入文档中，为了避免页面渲染延迟，通常放在body标签后面
<!-- 写在`<head>`或`<body>`中的<script>标签内 -->
<script>alert('内嵌式')</script>
-
外联式： 放在外部文件中
优点：
- 可维护性
- 缓存：两个页面用到同一个文件只用下载一次
<!-- 放置与外部文件中 -->
<script src="test.js"></script>
变量
变量命名
JavaScript 的变量命名有两个限制：
- 变量名称必须仅包含字母，数字，符号
$和_，可以为单个$或_ - 首字符必须非数字
- 允许英文为字母，但不推荐
保留关键字
在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。注意，用星号标记的关键词是 ECMAScript 5 和 6 中的新词。
| abstract | arguments | await* | boolean |
|---|---|---|---|
| break | byte | case | catch |
| char | class* | const | continue |
| debugger | default | delete | do |
| double | else | enum* | eval |
| export* | extends* | false | final |
| finally | float | for | function |
| goto | if | implements | import* |
| in | instanceof | int | interface |
| let* | long | native | new |
| null | package | private | protected |
| public | return | short | static |
| super* | switch | synchronized | this |
| throw | throws | transient | true |
| try | typeof | var | void |
| volatile | while | with | yield |
变量声明var 、let、const
使用优先级：const > let > var，区别：
| 比较项 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块作用域 | 块作用域 |
| 变量提升 | 是 | 否 | 否 |
| 重复声明 | 是 | 否 | 否 |
| 值修改 | 是 | 是 | 否。但能修改引用的内部属性 |
| 声明与赋值 | 可先声明 | 可先声明 | 必须同时 |
数据类型
在 JavaScript 中有 8 种基本的数据类型，分别是7种简单数据类型（原始类型）
undefined、null、boolean、number、bigint、string、symbol和1种复杂数据类型object。
Number类型
在JavaScript中，数值类型只有一种，内部表示为64位浮点数.
- 范围：整型为 ± (253-1)，浮点型为17位小数，不能直接判断两个浮点数是否相等
Infinity：超出有限数值范围时为无穷大NaN：使用isNaN()检测是否数字- 转换：
Number()、parseInt()、parseFloat()
| Number | 值 | 指数 | 符号 |
|---|---|---|---|
| 大小 | 52bits | 11bits | 1bits |
| 位置 | 0-52 | 52-62 | 63 |
/*精度*/
var a = 999999999999999; // x 将是 999999999999999
var b = 9999999999999999; // y 将是 10000000000000000
var c = 0.2 + 0.1; // x 将是 0.30000000000000004，不能直接判断两个浮点数是否相等
/*特殊值*/
var d = Number.MAX_VALUE // 最大值：1.7976931348623157e+308
var e = Number.MIN_VALUE // 最小值：5e-32
var f = Infinity // 无穷大
var g = NaN // 非数字
BigInt类型
可以突破Number类型的限制，用于表示任意长度的整数
// 尾部的 "n" 表示这是一个 BigInt 类型
const bigInt = 1234567890123456789012345678901234567890n
String类型
JavaScript 字符串是引号中的零个或多个字符。可以使用''或""，推荐使用''，因为HTML标签内的属性使用""。
- 字符串是不可变类型
- 字符串长度可通过内建属性
length返回 - 字符串拼接：
+ - 模块字面量和字符串插值：````string
```和${}` - 转换：
toString()、String() - 转义字符
| 转义符 | 含义 |
|---|---|
| \n | 换行 |
| \\ | \ |
| \’ | ’ |
| \` | ` |
| \" | " |
| \b | 退格 |
| \r | 回车 |
| \t | 水平制表符，tab 缩进 |
| \v | 垂直制表符 |
| \f | 换页 |
// 字符串拼接
var x = "123" + "456"; // x = "123456"
var y = "123" + 456; // y = "123456"
var z = "123" + true; // z = "123true"
Boolean类型
boolean 类型仅包含两个值：true 和 false
| 数据类型 | true | false |
|---|---|---|
| boolean | true | false |
| string | 非空字符串 | 空字符串 |
| number | 非零数值 | 0、NaN |
| object | 任意对象 | null |
| undefined | 不存在 | undefined |
Null类型
只有一个特殊值null，从逻辑上讲表示一个空对象指针，这也是typeof null返回object的原因。
Undefined类型
同样只有一个特殊值undefined，注意！当使用var、let声明了变量但没有初始化时，相对于给变量赋予了undefined值
复杂数据类型
-
Object类型
其他所有的数据类型都被称为“原始类型”，因为它们的值只包含一个单独的内容（字符串、数字或者其他）。相反，
object则用于储存数据集合和更复杂的实体。后续单独讲解 -
Symbol类型
symbol类型用于创建对象的唯一标识符，Object类型后单独讲解
typeof操作符
typeof操作符（无需参数，但可以使用参数）返回数据类型，返回结构有以下几种：string、number、boolean、undefined、function、object、symbol
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (数组即对象)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
数据类型转换
-
转换为String类型
转换方式 说明 obj.toString([sys])转换为字符串，可选参数进制 String(obj)强制转换为字符串 +通过拼接转换为字符串，隐式转换 obj.toString([sys])与String(obj)区别：obj.toString([sys])不能转换undefined和null**，**可以转换进制数据，传参2、8、10、16即可String(obj)可以将null和undefined转换为字符串，但不能转换进制字符串。（其本质是调用不传参的obj.toString()方法，如果是null或undefined，则返回字面量文本）
-
转换为Number类型
转换方式 说明 parseInt(string, [sys]) 将string类转换为整数数值型 parseFloat(string) 将string类转换为浮点数数值型，只能解析十进制 Number(string) 强制转换为数值型 +、-、*、/通过算式运算转换，隐式转换 -
转换为Boolean类型
见Boolean类型部分
- 示例
// 数据类型转换
/*parseInt()*/
var num1=parseInt("num123"); //NaN
var num2=parseInt(""); //NaN
var num3=parseInt("123.45") //123
var num4=parseInt("101010",2) //42
var num5=parseInt("123num") //123
var num6=parseInt("0xff") //255
/*parseFloat(string)*/
var num1=parseFloat("1234blue"); //1234
var num2=parseFloat("0xA"); //0
var num3=parseFloat("0908.5"); //908.5
var num4=parseFloat("3.125e7"); //31250000
var num5=parseFloat("123.45.67") //123.45
var num6=parseFloat("") //NaN
var num7=parseFloat("num123") //NaN
/*Number()*/
var num1=Number("Hello World"); //NaN
var num2=Number(""); //0
var num3=Number("000011"); //11
var num4=Number(true); //1
var num5=Number("num123") //NaN
/*隐式转换*/
var num1 = '12' - 0 // 12
var num2 = '123' - '190' // 3
var num2 = '123' * '1' // 123
JavaScript操作符
算术运算符
| 运算符 | 描述 |
|---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 取模（余数） |
** | 幂 |
++ | 自加 |
-- | 自减 |
比较运算符
注意： 任何比较运算符在和NaN比较时均返回false，即使两个数都是NaN 。以下假设给的x=5，则有
| 运算符 | 描述 | 案例比较 | 返回 |
|---|---|---|---|
== | 等于 | x == 8 | false |
x == 5 | true | ||
x == "5" | true | ||
=== | 值相等并且类型相等 | x === 5 | true |
x === "5" | false | ||
!= | 不相等 | x != 8 | true |
x != '5' | false | ||
!== | 值不相等或类型不相等 | x !== 5 | false |
x !== "5" | true | ||
x !== 8 | true | ||
> | 大于 | x > 8 | false |
< | 小于 | x < 8 | true |
>= | 大于或等于 | x >= 8 | false |
<= | 小于或等于 | x <= 8 | true |
? : | 三元运算符 | y = (x < 8) ? "小于8":"大于8" | 小于8 |
逻辑运算符
| 运算符 | 描述 |
|---|---|
&& | 逻辑与 |
| ` | |
! | 逻辑非 |
- 短路运算（逻辑中断）：逻辑与运算符
&&和逻辑或运算符||都是从左到右结合的，在计算机包含&&或||的表达式时，一旦能确定整个表达式的值，求解立即停止 - 应用：把最有可能的结果写在左边能提高运行效率
- 即使后面有非逻辑运算符还是会立即短路返回值
赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
<<= | x <<= y | x = x << y |
>>= | x >>= y | x = x >> y |
>>>= | x >>>= y | x = x >>> y |
&= | x &= y | x = x & y |
^= | x ^= y | x = x ^ y |
| `|=` | `x | = y` |
**= | x **= y | x = x ** y ，跨浏览器表现不稳定，不使用 |
位运算符
位运算中的任何数值运算数都会被转换为 32 位数
| 运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
& | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| ` | ` | 或 | `5 | 1` | 0101 | 0001 |
~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
>>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
其他运算符
| 运算符 | 描述 |
|---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true，如果对象是对象类型的实例。 |
?? | 空值合并运算符，x = a ?? b如果a不是undefined或null则为a |
注意：??的权重为5，如果没有明确添加括号，??不能将其与 || 或 && 一起使用
运算符优先级
权重越高优先级越靠前
括号 > 一元运算符 > 算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符
| 权重 | 运算符 | 描述 | 实例 |
|---|---|---|---|
| 20 | ( ) | 表达式分组 | (3 + 4) |
| 19 | . | 成员 | person.name |
| 19 | [] | 成员 | person["name"] |
| 19 | () | 函数调用 | myFunction() |
| 19 | new | 创建 | new Date() |
| 17 | ++ | 后缀递增 | i++ |
| 17 | -- | 后缀递减 | i-- |
| 16 | ++ | 前缀递增 | ++i |
| 16 | -- | 前缀递减 | --i |
| 16 | ! | 逻辑否 | !(x==y) |
| 16 | typeof | 类型 | typeof x |
| 15 | ** | 求幂 (ES7) | 10 ** 2 |
| 14 | * | 乘 | 10 * 5 |
| 14 | / | 除 | 10 / 5 |
| 14 | % | 模数除法 | 10 % 5 |
| 13 | + | 加 | 10 + 5 |
| 13 | - | 减 | 10 - 5 |
| 12 | << | 左位移 | x << 2 |
| 12 | >> | 右位移 | x >> 2 |
| 12 | >>> | 右位移（无符号） | x >>> 2 |
| 11 | < | 小于 | x < y |
| 11 | <= | 小于或等于 | x <= y |
| 11 | > | 大于 | x > y |
| 11 | >= | 大于或等于 | x >= y |
| 11 | in | 对象中的属性 | "PI" in Math |
| 11 | instanceof | 对象的实例 | instanceof Array |
| 10 | == | 相等 | x == y |
| 10 | === | 严格相等 | x === y |
| 10 | != | 不相等 | x != y |
| 10 | !== | 严格不相等 | x !== y |
| 9 | & | 按位与 | x & y |
| 8 | ^ | 按位 XOR | x ^ y |
| 7 | ` | ` | 按位或 |
| 6 | && | 逻辑与 | x && y |
| 5 | ` | ` | |
| 4 | ? : | 条件 | ? "Yes" : "No" |
| 3 | = | 赋值 | x = y |
| 3 | += | 赋值 | x += y |
| 3 | -= | 赋值 | x -= y |
| 3 | *= | 赋值 | x *= y |
| 3 | %= | 赋值 | x %= y |
| 3 | <<= | 赋值 | x <<= y |
| 3 | >>= | 赋值 | x >>= y |
| 3 | >>>= | 赋值 | x >>>= y |
| 3 | &= | 赋值 | x &= y |
| 3 | ^= | 赋值 | x ^= y |
| 3 | ` | =` | 赋值 |
| 2 | yield | 暂停函数 | yield x |
| 1 | , | 逗号 | 7 , 8 |
JavaScript语句
条件控制语句
-
if 语句
-
三元运算符
-
switch语句
注意在switch语句中使用的是全等操作符
循环语句
-
for
-
while
-
do-while
-
for-in
-
for-of
.forEach、for-of、for-in之间的区别：比较项 forEach for-in for-of 常用遍历对象 数组 对象、JSON 数组 循环值 value key value 是否有序 有 无 有
标签语句
- continue
- break
函数
- 函数声明：
function(){...} - 函数表达式：
let func = function(){...} - 回调函数：：
func([args], func) - 箭头函数：
let func = ([args]) => {...}
别：
| 比较项 | forEach | for-in | for-of |
|---|---|---|---|
| 常用遍历对象 | 数组 | 对象、JSON | 对象、数组 |
| 循环值 | value | key | value |
| **break打断** | 否 | 是 | 是 |
| 是否有序 | 有 | 无 | 有 |
| 效率 | 1 | 2 | 3 |
| 循环时动态添加 | 否 | 否 | 是 |
标签语句
- continue
- break
函数
- 函数声明：
function(){...} - 函数表达式：
let func = function(){...} - 回调函数：：
func([args], func) - 箭头函数：
let func = ([args]) => {...}
使用Chrome浏览器调试程序
较全的教程 javascriptInfo
扫一扫
1248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
