飞雪团队

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 12149|回复: 0

前端之JavaScript

[复制链接]

7953

主题

8041

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
26189
发表于 2022-2-12 14:35:41 | 显示全部楼层 |阅读模式

* }* {4 Z6 H1 L' [. ]<h1 id="前端之javascript">前端之JavaScript</h1>
7 N! }# d$ e# J& n& l& k+ S3 x1 v<p></p><p></p>
) u7 W+ X5 X/ G% ~3 {* s6 l4 V" P<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
4 F% e: p. X0 H& X$ A2 _0 Y<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>
0 T. J3 n. O3 |6 S  R: o3 s它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>
3 X7 R" T6 G7 \" h" ~/ A$ I7 w. ^! ]它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>" a; l0 T* O& }
它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>
- K. A6 [" r8 h, L<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>7 ?' W; J$ S5 X3 I
<h3 id="21-注释">2.1 注释</h3>5 w7 b) M6 w% R( T* Q) C
<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>5 b& U$ O& h: o9 I1 P& Y
<pre><code class="language-javascript">// 这是单行注释/ D* g; w0 ~* K2 P0 s0 b7 B

& `. n' h1 `3 b/ G7 w( u/*
6 }6 ^4 Q0 Z' a. b+ l+ c0 U这是多行注释的第一行,
' j5 c' ~3 P6 S6 J这是第二行。6 i1 B  {9 f0 A* w, q; I
*/8 @7 Y9 c. s  |
</code></pre>+ z8 e9 S+ Z6 L$ T+ O0 U8 U- L
<h3 id="22-变量和常量">2.2 变量和常量</h3>
& \' @* \5 ]* `' D+ N<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>( J, G  M6 t3 V/ e, k% L
<ul>5 e7 V8 S' G  e+ }; B
<li>变量必须以字母开头</li>1 G& n& V- P# v3 p8 [2 M8 L+ J
<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>
  B: P! J  X- O9 E) K& h0 h, a- E: }<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>/ T( s& T  [. q
</ul>  M3 e( f* w4 @0 E( E3 u
<p><code>var</code>定义的都为全局变量</p>
. |* `5 v- D2 q8 l3 K<p><code>let</code>可以声明局部变量</p>$ s6 o: |: a& B0 O: R7 L" _
<p><strong>声明变量:</strong></p>! N( A9 j+ i4 E# i$ ?3 f
<pre><code class="language-javascript">// 定义单个变量: ^9 b( R0 A) I/ m: G! w
&gt; var name$ h  h6 Y) `7 D0 @/ a  s# R
&gt; name = 'Hans': a9 M& r- f2 l" \8 C/ c- i, c* @
//定义并赋值0 u- B, m* D9 W" N. K* P$ s
&gt; var name = 'Hans'! [" [0 e/ l9 D, A
&gt; name
# x: o) A6 L; x$ }'Hans': l- [! z8 I; {& k# f" ]0 G6 s, t$ p
& S8 N9 M5 j8 A9 _, C
// 定义多个变量  Y8 G2 D: y/ a
&gt; var name = "Hans", age = 18% k" Z7 D1 k( v- \: C
&gt; name* U- Y& r" s/ ~# m1 R4 n3 G: L( ?# J
'Hans'
7 f7 ~3 L, n' R+ q3 x: J&gt; age2 `+ _2 O5 e7 G! h0 n( s9 |
18( }1 N% ]4 Y$ Y8 y9 f

/ l, t# a4 u- L! {//多行使用反引号`` 类型python中的三引号; A5 o% {9 F. p( N2 S& @- ~
&gt; var text = `A young idler,+ E0 s! b: e* z, F- q
an old beggar`+ y; E: L+ }- J" `& s& h0 M
&gt; text
# c* r! A$ z2 ]5 R2 k* ]'A young idler,\nan old beggar'" O$ t' h5 C" R9 m; K, o0 w
</code></pre>
  D$ h% {. p, f3 l, W# B7 I<p><strong>声明常量:</strong></p>+ T" u) ^% l5 H: `
<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>% {' B7 L2 F! w& i6 C/ y( V
<pre><code class="language-javascript">&gt; const pi = 3.14
3 F+ ^7 _# `. v2 O; ]&gt; pi
- V& D; ?) c5 _3.14
  o/ J5 ~0 B0 z4 d&gt;  pi = 3.01
" t, ?5 R; f& d9 KUncaught TypeError: Assignment to constant variable.& T* c; `' m$ v0 O6 _3 P$ D
    at &lt;anonymous&gt;:1:4
) I2 E  i) K, L/ d7 m, Y
9 I8 d' p3 L0 q7 K</code></pre>! ]4 V% t6 X9 G. }; T
<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
3 W5 G4 a1 n. ]8 ^3 V3 ~% i, v<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>
6 U) p  D9 U4 W& y4 h<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>$ z! D: r" v9 ^6 v3 t! G' U  u6 f
<h4 id="231-number类型">2.3.1 Number类型</h4>
! A  c5 D0 R9 b: m% L( s; u( v<pre><code class="language-javascript">&gt; var a = 5
, D5 h3 U# Q4 f) d5 J9 x&gt; typeof a   //查看变量的类型  
! Y7 i% {, M0 {) Dnumber
" y* ~8 e  y! t* I
, S9 b  W5 p- S  z1 V8 x4 _&gt; var b = 1.3
. i" }) @+ D% L6 F& z& a&gt; typeof b. C( ?7 F/ S% M  X9 ]6 l: G. j9 `
number/ n4 n/ j' ~+ @% o7 y5 ^# O% h  {
' R0 r& b: C# j
// 不管整型还是浮点型打开出来的结果都是number类型  r9 ?& j4 w" `* f  B

- ]+ V: k, G$ Q" X/*7 u$ \( R# f! o, h) o: t
NaN:Not A Number
; F( F% a3 B( w: ?, hNaN属于数值类型 表示的意思是 不是一个数字
, |$ [: }- l! G*/
, W9 x% m6 h; S; p' p
6 V. E9 n  q! J& a5 _  D/ K8 oparseInt('2345')  // 转整型+ E$ N; U2 j& ?5 {) \1 U
23456 ~9 s: j! Z+ `% O# K
parseInt('2345.5')8 _# O! i1 S% L% |0 Y
2345# |5 D7 `7 I6 g% ]7 @, {
parseFloat('2345.5') // 转浮点型8 e9 R( w5 d% i$ q
2345.5
: G/ D7 @- n1 F# ^* TparseFloat('ABC'), K& \) g" h/ q/ T
NaN% E# x) B- e/ R3 p/ h
parseInt('abc'), _/ ^" w8 D; Y6 H- E( x
NaN
0 V5 u# [8 F0 T( y, q; x</code></pre>: `+ E+ u  }; z# a  l3 y
<h4 id="232-string类型">2.3.2 String类型</h4>
  x4 _8 {% l, j6 U* r9 ~<pre><code class="language-javascript">&gt; var name = 'Hans'7 ], O" n) \& q" L/ P2 ^( k
&gt; typeof name* L& n& X* B- S( T3 ^
'string': Y7 p4 q: K, ^, n$ K

& ~( H6 G# e. U& n  s//常用方法
$ u/ M1 f! x: F4 P; N0 A  D// 变量值长度
# e9 \9 \1 M) T5 t7 K&gt; name.length
5 x1 n# t, N5 t7 T% y! z( d" s2 H4
" c( b, a+ O6 q$ n: t1 a. h( f9 G// trim() 移除空白: m% B4 |5 ]8 O, L& A4 ?$ V* [& g
&gt; var a = '    ABC    '" _( Z; o3 r! R+ d
&gt; a
4 A$ c* D% I3 o/ F'    ABC    '
/ M. R7 k* d* ^, y+ {' l&gt; a.trim()
. c! v( o, W  U' V$ w4 X'ABC'
! L5 i$ g$ @( x+ h3 L& Q: d3 {9 m//移除左边的空白, z. O, \7 i3 `) q7 Z) a
&gt; a.trimLeft()1 p( l: O' m+ h9 u$ G2 o0 {- m
'ABC    '9 j* K# q' X( k" c9 R" `
//移除右边的空白5 ]: ~4 E! J5 ~9 r9 i) Q4 N
&gt; a.trimRight()
$ B5 }0 D. J/ R' y8 `# H  I, k'    ABC'3 ^( @  H1 R! V6 a

4 W( J5 X/ T* _$ J3 }//返回第n个字符,从0开始; P. T. z" @0 P2 h
&gt; name
/ r" b, n; Y/ ^- ~'Hans'
% W0 {0 I8 K' g&gt; name.charAt(3)
9 r7 `2 R: f8 F1 S's'4 w1 R0 V8 Z: t- Q+ t- M6 L
&gt; name.charAt()7 N, G+ ?2 G( L- l3 o! |! q
'H'
! q- N8 G. i# G6 r1 x* \4 A* U&gt; name.charAt(1)  {" W' y6 Z0 f6 @: v  g" y$ k
'a'
! S& l$ C$ N0 Q: J" [0 D4 f
" c: l% J: L9 X% H: ?# P% S// 在javascript中推荐使用加号(+)拼接
% E5 ~! w/ q9 ^7 e5 M: }; s&gt; name
8 C& z5 Y* ]/ M+ H* u. W9 g'Hans'; Y8 s# D! F3 U. H3 X
&gt; a( Q3 v+ l4 L+ x/ b/ e$ q' q+ g
'    ABC    '- `! ^! U1 F: ^! l3 ~: Y
&gt; name + a" i8 X6 I. B* E  X) X
'Hans    ABC    '" b, K8 H4 c2 ~; P# a0 I' E' @3 c
// 使用concat拼接
; V, T! b& {( I&gt; name.concat(a)& ?% D( I) Y  E4 y
'Hans    ABC    '
/ D8 m3 H" t- `" p. C) j. q# ~7 H6 Q9 i
//indexOf(substring, start)子序列位置9 X7 l" B# w3 i$ M4 h' j

, @& ?4 j$ G/ F& K& B2 C/ Z&gt; text
4 q4 T7 e' v% s" l# p) M) \'A young idler,\nan old beggar'- f0 S, O- R( ]
&gt; text.indexOf('young',0)0 l' p, O8 |3 m
2% J& o5 R: e" w1 @  K  U" |
+ d0 @! Q; }' q6 }5 L
//.substring(from, to)        根据索引获取子序列
# h9 ]# e3 i! ?5 Q, I3 C# l% B&gt; text.substring(0,)
! G2 ~: |. G! L'A young idler,\nan old beggar'
6 O5 l" F2 x* _0 _/ u6 m4 g&gt; text.substring(0,10)
- d# F6 H* v% T" _'A young id'6 {  H$ n' s# P- \$ m" U) d6 S# e% e

6 r, U( U- m4 A: i- x# m+ l8 `// .slice(start, end)        切片, 从0开始顾头不顾尾$ j7 C/ I  B( ~
&gt; name.slice(0,3)
3 {6 v: }4 `4 D9 G7 h$ t3 L'Han'  Y& `- ?7 D2 q: W9 Y
( }: B) h! Q6 {, v3 o8 j
// 转小写. {0 b$ j9 m! i) r
&gt; name3 L1 [4 B3 O% f5 A1 v6 U4 F
'Hans'" f+ Z" p2 G% w" `, }1 _4 J
&gt; name.toLowerCase()
- ~0 H7 A; X+ y% q8 Y1 p'hans'3 n) U! G( r0 \1 q9 ]
// 转大写
& i' e6 L) _0 T' V7 m2 d&gt; name.toUpperCase()9 x$ T, k" t0 M8 L) d/ J0 \
'HANS'; b% Q3 F( }! z  n, B
8 w, L0 B) e# H! o
// 分隔
) J" p# l( d7 T1 s% H&gt; name
/ m+ U7 \4 V" m% c; Y1 R'Hans'
/ W- ]) t- x& v+ E! g. ^&gt; name.split('a')
1 m# |8 a! |& d! Q(2)&nbsp;['H', 'ns']
3 E# D7 f7 u4 \6 V2 F  M+ ^. Z</code></pre>1 n) F4 h- x0 y
<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>' L5 t) i+ C3 G0 q7 o
<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>; ]$ ]4 S" x/ |" F, u5 s
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>% w; @. o! J- s5 ^2 y% F
<p><strong>null和undefined</strong></p>
; J: \7 F8 u. _! y( n( s3 `( @<ul>
) t1 v; I8 F, Q* G<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>7 @  ^+ M# }' g4 Z$ q0 r
<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>
) w1 N, v8 |" f/ w</ul>
( l  ]7 a- }2 [7 t<h4 id="234-array数组">2.3.4 Array数组</h4>
6 h# I- `  `8 ^4 p( q( o; j: k6 L<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>
8 Q$ d" `9 s0 f) G2 w  D<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c'] + Q  G3 g, o/ c7 D
&gt; array18 R, k  X* Z; X( p. M! b
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
) u8 f, x+ @1 \" i3 T, u&gt; console.log(array1[2])  //console.log打印类似python中的print9 {& c0 B8 n) M2 s- p9 j
3; }1 q% @. R2 S7 p  k8 ]  ~
// length元素个数
* s  ^5 m$ q3 X&gt; array1.length4 O/ t5 N  X# x" G/ {
6
. ?3 d9 q8 t0 o! p8 z( ~// 在尾部增加元素,类型append) i. A1 M; e  J1 Z& m, x
&gt; array1.push('D')
$ P, U7 Q! Y+ V) F, }5 ?& x7
* x$ _' F# H% Q- t3 j: s: b/ j: k&gt; array11 T4 c% S" M& ~+ R
(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']2 S1 ~( }/ h: }. Y; Q
// 在头部增加元素
4 J4 Q0 |2 ]3 s( \# V5 R7 ?&gt; array1.unshift(0)
3 u* n- j( R% ~7 J8* D& L% a9 h! N% U$ M( k' a
&gt; array14 w; h- [. n! h" q% Z4 X5 h; M5 L
(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D']" P7 q# B! i7 o; E4 O
8 @+ d* Y/ Q' L" K" D9 v0 A
//取最后一个元素
7 m+ _8 V, m( G1 G1 R: L/ x: m6 {6 _&gt; array1.pop()
) O" n  B6 g& |' J: {3 O8 s$ a'D'$ q9 j& H! V' Q% V+ |+ X: u" Q
&gt; array1
% Z: W* U/ N& q+ o$ n(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']
1 g% [. q! A- e3 x/ L" v" O: b//取头部元素
8 b' F0 }* P* I&gt; array1.shift()) B. a% z* F" X# S3 U5 V, ?
0
, O3 o* p7 h) s5 b6 s/ O' s&gt; array1
2 _$ P" X4 S, I" [9 C  T! i& @& K(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']# }. o" {4 c: [% m& g

6 R, X5 ]8 n& I# i//切片, 从0开始顾头不顾尾
6 _+ A" G' L7 H. L&gt; array1.slice(3,6)9 P$ z0 B, C. K0 P5 Z* _. M: v
(3)&nbsp;['a', 'b', 'c']
/ W& O7 Q- l$ ]+ V3 M% s// 反转
0 S1 e: o  a& e& T$ L&gt; array1.reverse()5 }3 q5 c" b4 n4 w& v5 D. S
(6)&nbsp;['c', 'b', 'a', 3, 2, 1]2 U9 v2 i% T, [+ u8 v& e
// 将数组元素连接成字符串
' _* P2 V5 R2 M&gt; array1.join() // 什么不都写默认使用逗号分隔" T" V: D6 G, F4 \7 b
'c,b,a,3,2,1'" d* h5 m( d3 v& S7 x" X
&gt; array1.join(''); t, Y; E9 `9 ~
'cba321'
4 s( ?' ^* C+ ^: A( K/ y# v&gt; array1.join('|')0 G+ r$ M& f  g- O2 F* o
'c|b|a|3|2|1'
& ]$ w& s4 E# z) b5 J0 j2 D( e* n) ?# C6 T0 y$ h& W
// 连接数组3 `4 \7 E3 |/ y: c) G
&gt; var array2 = ['A','B','C']+ Z" \0 {/ d& U( F% {) [
&gt; array1.concat(array2)
5 w& T9 o  j7 f  T8 C. @(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']/ i" h9 e/ V; p# l/ D% y9 V
2 P, v0 i8 Q1 F
// 排序  J! n; }3 b6 Q5 F( z/ Z( V
&gt; array1.sort()
) h0 f/ q; J; W2 _- z$ w) Q(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']( @. x6 Z$ Z! _' K
* W5 c. s; ^5 X/ o% X
// 删除元素,并可以向数据组中添加新元素(可选)
9 q' Z0 S( h/ W&gt; array1.splice(3,3)  // 删除元素9 _0 e/ j1 B; u0 A1 I  L
(3)&nbsp;['a', 'b', 'c']3 D6 c, a/ W0 \! O; e% w$ T/ c
&gt; array1
. t1 w+ c" ^  d% u(3)&nbsp;[1, 2, 3]1 R4 D' F  _& W: c9 Z+ _& A
&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素/ {- C/ S, P2 o# o7 P
[]6 v% ^& F* j+ p  e, T3 [- R$ y
&gt; array1; U4 h: K9 f4 ?# a
(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']
& g! v3 y3 M8 ]+ Y8 `
) [3 v4 b, M; I, I8 ?/*: Z$ Q/ z' M! W7 E) q0 g. h- i
splice(index,howmany,item1,.....,itemX)9 W. O3 E: ?; ^  B/ a0 p
index:必需,必须是数字。规定从何处添加/删除元素。3 _) O; k0 [: L1 p- C
howmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。5 X9 W6 g( c" R4 _
item1, ..., itemX        可选。要添加到数组的新元素
( c: ?3 |& ~' H*/
4 n" _7 X- m9 @4 }# `" m# ?
- Q% @& T. A% q6 P& N( v. t// forEach()        将数组的每个元素传递给回调函数6 ~, W* q9 k% {5 T: R6 M7 a5 h
&gt; array1.forEach(function test(n){console.log(n)})
) m6 c  I5 h% o, C  ]) K 1* \/ z( ~* K' Z8 C  N) Q
2* l* r% u) j0 y+ C& {8 h3 I( i
3, D; j4 g0 O7 i1 X
A
2 b' I5 @/ }6 ^5 V- M B
1 Y+ l" {8 g9 l C
# ]) j" q' h3 r9 |. B. S( {  F// 返回一个数组元素调用函数处理后的值的新数组
/ A, s; u9 d! N0 Q&gt; array1.map(function(value){return value +1})$ C5 }& W( W* n7 q( u+ g7 S: L' k
(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']
) p/ G8 b+ [9 }  k</code></pre>
/ \/ K# G$ W( L7 H3 s4 @<h3 id="24-运算符">2.4 运算符</h3>1 C* s: j+ y+ l# `
<h4 id="241-数学运算符">2.4.1 数学运算符</h4>. N2 f' D2 ~" O- N
<p><code>+ - * / % ++ --</code></p>
5 @8 R9 ^, j! T<pre><code class="language-javascript">&gt; var a = 6
- W& G6 d' X* Q9 I+ B6 m2 `3 o&gt; var b = 3& n5 m( w+ ^, R
// 加
5 D* D( e) d" U; {4 G&gt; a + b& L  I3 C% w1 X7 v
9
# V' t+ r" S$ {  ?1 C1 R. z0 m, g// 减9 `7 d/ ?+ c& k, |5 d. K% T' R
&gt; a - b
& o5 N" p5 _9 W8 T; Q1 l0 I5 O1 r3& o2 c: b  W3 P: S) v' {2 v
// 乘
  {2 G/ p- }! L- s( j&gt; a * b% E; |' w: W/ z7 y# W: Q
18% B8 ~3 C  W- X: ?/ M: C& Y
// 除; S8 v8 I+ h$ H4 N7 b& j
&gt; a / b
; ?0 S7 ]& p2 V$ K7 k* X2
/ v& Q9 b# |1 b// 取模(取余)
1 ?. h9 W8 {6 i$ h; ]; a6 _&gt; a % b  _* _( `/ \7 m5 @& l) _+ N: A
0' H) j- B( |9 ], _1 Y
// 自增1(先赋值再增1)
2 T" G( {& z' V$ X&gt; a++
, l( U1 ^/ K3 k4 \, }67 R1 \7 G# ?6 P1 m3 g
&gt; a8 u  \8 |/ X) X0 d9 f
7
: B" \7 A6 f; V1 v// 自减1(先赋值再减1)& h6 {9 H9 j- F/ X3 Z8 y2 B* j
&gt; a--7 G: q0 T0 a: X! u% f* h2 c
7" e& z9 o7 w/ |1 a- ?
&gt; a2 \+ p% v' i  |
6) [; H2 ?' e! G# F( v$ v: q
// 自增1(先增1再赋值)
! F1 L/ |0 F: L+ r: n# w&gt; ++a! ?- Y) z+ Z1 B6 y9 h* h8 W
71 x" w( h) u' R- R& S, C
// 自减1(先减1再赋值)& K# Q7 ?9 z- u1 _
&gt; --a7 }7 Y) G. e4 y8 b
6
! f. Q% `/ q2 z  A3 S&gt; a
0 |' [0 T7 F& t& B. @65 r% m2 y% s; s4 T6 W& L

9 K+ K. f, v" W3 u0 F2 ^2 Y//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理  X* u9 a) ?+ Z' o7 k1 ?" {
</code></pre>
& X( ~' R7 j* ~. v/ G<h4 id="242-比较运算符">2.4.2 比较运算符</h4>1 {: ?7 ^# p) B+ N
<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>
6 m! C: i+ O1 L4 H<pre><code class="language-javascript">// 大于
$ }8 f: K7 \! O4 O1 J% i+ s2 `; E, [&gt; a &gt; b: E0 J* X$ k: b
true. |/ y7 c' u3 P7 E6 U
// 大于等于. A, Q6 P( M( O9 ?
&gt; a &gt;= b+ Z# \3 A6 n, W& G! ?
true  s/ ?. B9 g. g6 p
// 小于
' B0 |- Z9 ?0 ^& q  ]&gt; a &lt; b  V4 M/ ~7 k7 L* ]* a% Z
false
* b' z' g! t8 r  \" ~& I" y' I( m// 小于等于
% J0 _. B0 H1 c$ O9 @% X4 M2 O&gt; a &lt;= b" _& m0 V% k4 D& v# b: u, O( @# D; G
false- ]$ n2 q7 E( N9 u) b+ J( F. m
// 弱不等于, D4 M9 {/ s' c- h: j
&gt; a != b- _" G+ D3 j$ y+ x
true
2 K; X% ^" u" O8 m1 M// 弱等于
" W, F4 i8 U* q. r  w&gt; 1 == '1'! j  @# [: B# ^6 b  |# a" W
true# H$ e4 R% q: y! }+ O
// 强等于+ _8 \; E7 M9 A5 ^
&gt; 1 === '1'
; V; J  h0 m* _. X/ Wfalse8 {5 F# P! M2 Z
// 强不等于
  i3 q& K  Z  p+ j" F&gt; 1 !== '1'0 _" ?0 H% ^0 u
true
) c+ u+ `* B: s+ G3 q; P% G4 \4 l" g. i. ~  Q
/*
& a- Z: F3 n  c2 \1 p3 z6 \JS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误- {. O0 Y1 w9 u, P7 A- s; e7 W
*/' _5 W4 T; W/ K4 \, j1 H/ I
</code></pre>
7 |6 T( s6 `! h: L( B<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>
, y- z; B3 \6 _) |<p><code>&amp;&amp; || !</code></p>
/ ^0 W5 D* h% g% i0 U, V1 P2 ^' Z<pre><code class="language-javascript">&amp;&amp; 与
2 u6 h" F4 M% V9 z  U2 s0 N|| or
5 A- V+ o* r0 H- }, v! 非
, A% h6 N0 }/ O6 S; S</code></pre>
8 ~% S/ h$ @- K$ N% {2 T' R4 K; N<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>( q5 Z& {/ ]1 U. K3 ~; H
<p><code>= += -= *= /=</code></p>8 c. |% K2 |/ _  T% z+ h* |) C$ w
<pre><code class="language-javascript">// 赋值1 i" i# _) U# |8 W. \; o  j
&gt; var x = 3# ?/ S# O7 w; I6 |
// 加等于
! x$ z2 X2 I* [+ z5 g/ S9 G&gt; x += 2" j6 G; h1 E. o  l, U+ R$ x
5
' f4 E/ A" [0 q* x- _// 减等于
5 d: x+ [/ p6 L8 t0 @! \6 o&gt; x -= 1. C- T( h* O9 h- F) b3 H9 }% a
4
9 [$ F1 a1 L# u) B. T  K// 乘等于; f% E5 v; k+ q: `4 B( h
&gt; x *= 29 o4 a6 ?- f% r
8
' C# D% D+ k" g. i" S8 c  q4 v6 h, V// 除等于
5 M6 T) \; _4 n6 u&gt; x /= 20 y( ?7 f  f* g, m* Q/ W
4* O/ }6 c  r, n. O6 W
</code></pre>' @5 U2 u5 ?2 q4 Y: ~2 z
<h3 id="25-流程控制">2.5 流程控制</h3>
, w9 S5 ^) ^. L<h4 id="251-if">2.5.1 if</h4>
: y* Y- s( C8 r0 V9 n% B" V' }% \<pre><code class="language-javascript">1, if(条件){条件成立执行代码}# |* s$ n( O# l# X

  p! L  C4 b7 y- k&gt; var x = 3. O! Q+ b. A% u. d
&gt; if (x &gt; 2){console.log("OK")}( _8 w4 U, `) v( O# `$ _$ V# g
OK
. }6 @3 n) f5 I9 C/ f9 ]4 w8 m  F
2, if(条件){条件成立执行代码}
; v  s) F7 r: f9 p" G        else{条件不成立执行代码}
1 N+ d6 G5 r6 T- C) m( j. h' E: Q. O! O3 w, t
&gt; if (x &gt; 4){console.log("OK")}else{"NO"}9 t- w6 v& W( Y4 v. Z! K
'NO'
, W8 ^# i% j4 |9 A3 K$ e3 s, D5 D! e7 ^! e
3, if(条件1){条件1成立执行代码} 1 A' Q$ w8 K3 I, h- {+ w, V3 Q1 c
        else if(条件2){条件2成立执行代码}" u% `2 c/ h2 E% e
    else{上面条件都不成立执行代码}/ |5 H" C& e+ Z" F: K, E7 |

% {7 d9 n4 ?6 ~: u( ]$ W&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}" q; e! _6 ]% D  R& ?- F6 D
Ha7 x0 R( y5 k: i2 l, A/ t
</code></pre>
1 X* q6 X5 F1 l. n0 W! v<h4 id="252-switch">2.5.2 switch</h4>
0 A, v0 |9 M" @<pre><code class="language-javascript">var day = new Date().getDay();
. K; L# ?8 j6 a! rswitch (day) {% |1 W& H9 d0 n' @: b4 C
  case 0:8 }' e/ g) }" T7 R4 U: |% l
  console.log("Sunday");8 m/ @! C7 @  d
  break;
# T' f, X5 A1 y2 e! @7 k) E3 V  case 1:
3 U. Q! W) i/ C0 u0 V0 `; {: v  console.log("Monday");0 V) N: q/ E& ?* [$ A, v2 J
  break;
4 I5 f% n1 I9 X3 H' ldefault:
0 }9 S2 Q$ ~9 k, \: @" ?  console.log("不在范围")9 b7 I3 Z8 B+ Q: ^( J4 b1 q1 H
}" s9 }& a* k. ?0 U$ T7 ?9 l' k( D
不在范围3 L# x9 P7 ?% V4 ^
</code></pre>4 u3 X. u2 O. @! R( J1 {* _
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>0 ~$ |2 a! U' Z3 I5 e4 A8 x
<h4 id="253-for">2.5.3 for</h4>
+ ~: o; W# v8 J3 M6 }: K<pre><code class="language-python">// for 循环) c: M& N, u  o
        for(起始值;循环条件;每次循环后执行的操作){
8 i' c7 g$ m' {& q        for循环体代码; e- `$ R( C( o) M" J; }# f8 E
    }
; J2 f" C( h& t6 r/ z2 p1 @, q5 ~6 b
( u! Y1 w/ ~# ^; K6 H0 M. O6 p% n7 }for (var i = 0; i&lt;10; i++){
6 w) |: r3 k# `- F, K& x: q    console.log(i)
- }/ @1 t9 L3 l; M. P0 C! t}
: x) W. t2 F. d& ~4 o! t  L        0
/ O2 b5 p; `0 G0 X! q' F        1/ R* X6 D- @$ ]- H% [
        2! z2 l6 C, O4 K
        3# p5 V" R+ p" M4 y
        4
' P  k9 M3 a6 a. T7 M0 R4 `3 A( k        59 C; Q% t) y7 E* l  }1 ?  @6 J
        6# l+ H: q2 E- v
        7
: t# b' n( ?5 R, A" x        8% Z% F* Q8 R0 `  B" s- @; O
        9
5 ]) J- f; P1 U5 b</code></pre>9 r/ ^( Q0 t1 d# |2 |( w& V- ]# |
<h4 id="254-while">2.5.4 while</h4>- _$ e6 L. E5 j/ {, i. Z/ J. i# j% ]# o
<pre><code class="language-javascript">// while 循环
$ F" W. [3 C# i( R. t' c  [        while(循环条件){) h. l" b# ?, O4 \1 S5 ]2 |  \* b
        循环体代码
- @) \( E3 j7 B; d& l    }
4 D& Z' f' A, E3 `6 C& V8 `
7 I9 d! G/ H3 `' C, d" J&gt; var i = 00 U% E" g8 V" g2 v0 Q
&gt; while(i&lt;10){8 R: Z8 @  W; g  o
    console.log(i)
; v6 G; o+ Z; p+ P( \0 h: _    i++# s) j$ H$ o, A. Z
}% S+ e$ n+ F9 L, y5 ?+ M( h
0# X% N8 g  T' a. y
14 B. `. R% L  l1 V, b4 H# Y5 q
2- }7 p. T- A! P. ?( }+ g
3+ Z+ n- q& C8 R) x3 {1 b
4! V0 c% `7 ]- g" e  N3 t
5
0 L3 b5 ]( ?3 f+ m, P# H7 ~ 6
) b% B2 ]/ u1 O7 L5 w2 U 7
- X# I# r6 u+ J/ T 8: ^& H8 ^$ k5 C0 H! Y" ?
9& q! F2 k8 d0 O+ ~
</code></pre>
9 _# z; y6 k9 ?/ ^( C<h4 id="255-break和continue">2.5.5 break和continue</h4>! e4 A8 I. `. u6 n
<pre><code class="language-javascript">// break8 `. H) R& n% j. B; Y( M% Z; z
for (var i = 0; i&lt;10; i++){! t' ^5 \' c. U/ Y; t
    if (i == 5){break}/ P+ I$ h, D# G0 y3 |* ^. I
    console.log(i)
8 S& ^7 F/ f( L# `}
: s- h3 y  J8 L 0  U! U( G" }2 H6 Z' M
1
( y% u4 h/ F! E. L# i 24 T) G! a* w3 {
3
8 L& D, {/ ~- z 4! R8 b5 c- C% n; S
// continue: B9 c5 `4 t$ [! g! i/ Y8 I( `
for (var i = 0; i&lt;10; i++){
* ]. e/ E6 q2 J5 E7 H    if (i == 5){continue}
1 I; ~" I. `! ~1 {; p    console.log(i)- L- b# W2 {, S- |8 Q/ V; o
}
/ b' u7 M! B( ^2 O, j 0- N) G. r* N5 |( W: p  v9 V, E
1* `6 ~9 E) y& W3 O3 o9 S
2
+ X8 p" [8 Z# g6 a7 y 32 k9 ?. N- I/ f' x
4
. q, F& {  F  H+ a* N3 g 6
. q$ C  L! w2 L, v' C! w6 ]( U2 O 72 Q0 H. v$ e0 ?0 m% G$ ]
8% l, V9 _. a  X- C+ x
93 ~7 c- T- B, x# ^2 w
0 Q) [* G% q! A* ?2 f6 `8 l0 W
</code></pre>
# d. T& g2 k- E0 U$ t<h3 id="26-三元运算">2.6 三元运算</h3>
' w8 P3 N3 |: Y( {/ }3 G" S<pre><code class="language-javascript">&gt; a
5 E  z! f: h9 L! s4 _% R& K" w63 d: P0 }# D' R, s" q7 f
&gt; b
1 p4 X* C6 D' }6 O2 q7 d+ l. B3. ~) E% M0 t" h# |( j
2 H7 M  j0 s* r/ K* A( P- N4 R' e
//条件成立c为a的值,不成立c为b的值
: j3 `2 X4 H8 p3 S0 q&gt; var c = a &gt; b ? a : b1 [7 m/ F* R8 F+ }0 l
&gt; c
4 Q  C) l( d# k) T6 d6 T# f6& p% [) W3 P" u4 _
2 `" W) H1 ?( T$ k$ E( G* ]9 W
// 三元运算可以嵌套
, X5 S5 j6 M- y6 _2 L& n3 `: @</code></pre>( l, N  o" C+ F& W  N+ D
<h3 id="27-函数">2.7 函数</h3>1 R' F& q8 C% j/ X
<pre><code class="language-javascript">1. 普通函数
) L" W2 F" n' \/ Y&gt; function foo1(){6 y! h* J9 P8 y
    console.log("Hi")+ i# @0 Z" w, k
}& `% K$ G9 r! B% Y
% h% M0 P2 j% s/ r3 \, Z/ Y# G: G
&gt; foo1(): \& o6 R$ V; P
        Hi
( ^+ _, p+ m" W+ m2. 带参数函数8 k& e/ v- g5 o- t8 v2 Z
&gt; function foo1(name){
9 s$ h. W( T" Q8 b: t# xconsole.log("Hi",name)$ h; X; E2 m/ H% P
}
8 }* H5 F7 z2 N  P  \/ O8 t0 a) s7 |
" K5 e0 \( I* a" B$ c8 D&gt; foo1("Hans")9 U7 Z' ^) p" J7 T6 B2 v
Hi Hans
. |9 Y- m' j7 s7 ?6 c1 L8 y# {
, i  W6 O- ?7 [/ c1 ~* p& t7 E&gt; var name = "Hello"
* O. `. I; K; ?% Z2 V&gt; foo1(name)
3 t: F" [/ z1 M* E% \' Q: i. A- uHi Hello0 {* N! G: Q3 d; o$ n* t2 r! \

  N' w' x7 S$ P' P3. 带返回值函数
1 x! `8 ^' L2 L. v1 ~&gt; function foo1(a,b){
! u' P" `- r4 S3 a. o9 F* @        return a + b   
3 @- G! E0 h! w' ?  b+ |) K}7 E+ d3 m, {3 D% M
&gt; foo1(1,2)0 ~% }2 d- m3 R3 i9 l; N
3
8 p( }$ e" g8 e2 q  e9 R/ |. l&gt; var a = foo1(10,20)  //接受函数返回值+ z( h: H$ a/ S
&gt; a+ R, R( J, O3 D9 w0 n1 M
30
* E; N' Q7 w1 u7 d2 \4 d* ]  Y  i3 g+ {: f+ {4 ?
4. 匿名函数9 M) t0 x  _, ?) U& l$ d
&gt; var sum = function(a, b){; v9 E7 @! E/ q6 \
  return a + b;
6 r( P% V! j+ ]8 N8 s: A}
6 [$ k/ m3 U& ^1 x' N&gt; sum(1,2)1 }3 M( h8 |0 v) i7 _; U. t
3
( Z" i  l2 T- `; }. \' q2 p% `
& l) {  j7 T5 h1 L* K! q" |; s// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
5 C* Y, E" c$ }&gt; (function(a, b){3 Q  E# l" s0 h- Q4 a6 E; n
  return a + b- |) W; [: _7 A" U4 @
})(10, 20)
7 T+ l! i6 Q( ^, h* A' k30
" s( Y  C- h2 l* e- ~& H! C/ t* j' j' V2 i' X3 t8 n
5. 闭包函数
# `$ h& @2 M! s: x! {) @" W// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数8 ]1 I' C" L( j( u( W
var city = "BJ"
( s3 Y; t: X; ~7 S) V; K& Nfunction f(){
% }4 Q! L, i2 l0 a5 Z2 j    var city = "SH". w4 ]. B, C" x9 _, {4 e- t
    function inner(){
6 a! b! I; n( I; t8 F0 T" K        console.log(city)
; Z# p  ?1 T* T0 o. `# g    }
. m) M: B, o' q* a    return inner8 H: _3 L* G+ P2 n$ A, Y
}
1 X/ b0 K8 ?# ^/ g, s' v+ Nvar ret = f()8 s+ M9 J7 }& D# a
ret()% J; \9 ?% T* s  d& Y4 B' @
执行结果:
6 \2 I% @( Q: }6 w3 MSH
  T. L' U- Y7 P1 I
% g0 d6 H2 G& x! S</code></pre>$ U7 |. H5 e! ^/ e& g
<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>$ R  x9 n  F! k1 J6 s" y# M& ^
<pre><code class="language-javascript">var f = v =&gt; v;
( Q/ Y$ H( i) d$ M( A2 a. j// 等同于+ W! b0 A; y9 r! r( n: }2 l" I
var f = function(v){
/ z# ~& q2 b$ r3 S: T- z  return v;
, N3 G# U8 o  c1 j" J+ C( m0 i}3 c/ B) F3 \/ ~
</code></pre>* \, x) ?- ^- t2 ~
<p><code>arguments</code>参数 可以获取传入的所有数据</p>* V6 g. t2 k: F* l4 G' u& E
<pre><code class="language-javascript">function foo1(a,b){% s) W6 a/ n, ^4 b6 w2 s
    console.log(arguments.length)  //参数的个数 ( W' t! r9 ]; e
    console.log(arguments[0]) // 第一个参数的值
9 f: t% l1 y: u, t' s. u- h        return a + b   0 i7 G* ^" S% l& U
}
2 T: E( O  S8 u( \6 i; h( hfoo1(10,20)5 i- s$ ~' V3 B
结果:
2 H$ D6 u% [5 Z' v- P2 e% h 2          //参数的个数 & [7 e4 d, A" X3 g
10        // 第一个参数的值
5 k  |1 {6 u8 D3 a6 k2 u30        // 返回相加的结果9 P  t; M3 }5 N' {8 G3 r
</code></pre>
; F4 m/ |! W1 w8 ?9 ~% r* n<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>
1 b) }" Z7 f1 `9 C1 l<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>" i, Q: |+ C1 z6 g0 E& k
<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>
7 y# w2 S2 P  g, ]<h4 id="281-date对象">2.8.1 Date对象</h4>( N/ L7 G2 Y5 f7 {* |
<pre><code class="language-javascript">&gt; var data_test = new Date()% X1 T5 y$ G% `+ l
&gt; data_test4 G% C( h% ], `
Fri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间). ]8 Z4 y: P- T/ E; W4 k9 g
&gt; data_test.toLocaleString()2 p3 G! A, x/ i7 H9 k% S* S+ L1 W
'2022/2/11 下午9:44:43'
4 H& G5 T3 b- d' b8 U
* H# p( B$ ?! N" t8 h. r% V& d&gt; data_test.toLocaleDateString()
- M  h! \6 H" K3 S5 z/ [2 e8 b'2022/2/11'" O' O8 t7 g- t, e+ C1 L$ k* h

: e' e& b: I- T3 |&gt; var data_test2  = new Date("2022/2/11 9:44:43")
- K( d9 M2 n1 Z7 V! w" q6 N  ^&gt; data_test2.toLocaleString(): f! I' w* z+ v
'2022/2/11 上午9:44:43'7 H: c& i! S. w% e% p4 _

( Q# X- ^- g# h3 H  L: v// 获取当前几号
2 h+ t! r$ n/ r&gt; data_test.getDate()+ h7 T' v5 e9 g" X, v* r
11
: J' X2 {5 q0 \  v+ y) X// 获取星期几,数字表示
8 r- r/ y" A  Y/ z5 T1 G4 [&gt; data_test.getDay()  ! I7 y% y( L" r1 c) r
54 }! \2 `/ T6 o! L& x! B9 K
// 获取月份(0-11)
4 z& W" W; L8 C9 J, x5 m&gt; data_test.getMonth(), w7 Y. I/ C, A; K
1
4 Q/ a6 V$ T" a0 F9 m& [4 D/ x// 获取完整年份( `0 b7 w, F0 I7 t
&gt; data_test.getFullYear()
! {7 X, e4 Z  ]& Z% Q* V2022
" ]2 R7 C) Z9 h3 C2 Y" A+ _& j// 获取时
' D# m! h. B$ Y1 x&gt; data_test.getHours()
+ q% v( e2 I1 ?, ^+ a/ e0 D21+ ?, X" @) J- M% K7 x: {  |! A
// 获取分3 Q' v" }# {# m& L: |
&gt; data_test.getMinutes(). n" t/ J" @4 F5 \( e8 ]5 a
44( r; z+ [* P/ c
// 获取秒3 x* b; e7 z$ v: h
&gt; data_test.getSeconds()
& I; D5 }* O0 F. r+ U43
* c* B8 w9 q( U/ F0 f// 获取毫秒2 r+ z1 g$ ?" @6 y; J1 R& R
&gt; data_test.getMilliseconds()5 j. e, R( F! W
290
3 ]( G1 s! F" |! w# f" U- L: a// 获取时间戳
8 w  t- D5 U( \&gt; data_test.getTime()
8 I4 ?& H* k) O1 L1 h/ R1644587083290
+ o( h# K0 |: ^</code></pre>
) x5 j# E, O  G. o( A# x( L<h4 id="282-json对象">2.8.2 Json对象</h4>! L0 a0 L7 U; O
<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串* _/ G/ Z' d8 S7 D  W/ `- }
JSON.parse()  // 反序列化,把JSON字符串转换成对象
4 I0 F0 Q' G4 d& j* c" s! e! Q( }* r# \0 w% q) G& g( l4 `
// 序列化. |+ K- o. r5 V. \# Z
&gt; var jstojson = JSON.stringify(person) ( F) |2 m" a7 n$ ?; n
&gt; jstojson  
. Q8 x  U2 D' |& y% O: u7 J  {'{"Name":"Hans","Age":18}'
, U9 H* g8 y! b( F) _4 O+ _- |2 Z
+ d. X% J6 u$ F5 d( m+ |% V' _// 反序列化; z/ H5 V2 u' n8 c% h# O
&gt; var x = JSON.parse(jstojson)% P+ T& K1 _, {. ^: y1 @6 @7 F
&gt; x! w: h! Q7 X- a5 |0 a6 |
{Name: 'Hans', Age: 18}
/ k0 Y- o- a5 u6 D&gt; x.Age$ T# H9 m& l) t+ h3 c, X! X* y
183 ?: W2 s: S7 I' T: S: T1 r: K( ]; p
</code></pre>7 ^" y6 @; X2 U& m8 i4 {
<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>$ f9 v% y# M: z% e5 t3 K
<p>正则</p>8 P# b0 x9 P" ~" c8 f
<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");2 n3 s3 J, T- Y. \4 H2 y
&gt; reg1
' R& P$ E( g) _% ?5 c* b' ]/^[a-zA-Z][a-zA-Z0-9]{4,7}/
* x4 [) X) S4 P5 e: ]&gt; reg1.test("Hans666")
5 r% J6 d# W. w" Etrue/ k) T2 F: @3 T8 A! N
  o. w: \) A( U' B2 n, }) v
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/
1 t9 a1 o. e) V4 L( a4 X. G&gt; reg23 r+ \* ~  @9 |% @9 {3 Y# d
/^[a-zA-Z][a-zA-Z0-9]{4,7}// H/ V2 j: R2 y0 k' B
&gt; reg2.test('Hasdfa')9 o$ G# j9 ~6 k! g/ G6 L8 y. O
true7 d1 l6 P8 X$ Z: R) j

; o8 a( Z+ ~6 U5 t全局匹配:1 z8 v' r9 p: [! f, k% G
&gt; name
. m$ c2 n8 g0 x: O3 p- S8 l/ x1 E'Hello'
) P$ d! E0 ^9 W% @&gt; name.match(/l/)
3 [; J, y. O, p['l', index: 2, input: 'Hello', groups: undefined]8 ?* o3 K+ G% p0 |
  F: U$ _+ H5 g- u- j7 n7 f
&gt; name.match(/l/g)1 m8 V; j+ r. F2 ]* r7 X6 e
(2)&nbsp;['l', 'l']
/ l) a2 W0 G: g4 @0 {  [// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配+ g) [/ t5 e4 D0 b; x
1 g9 x2 C+ U! D( k2 R8 H
全局匹配注意事项:& O2 S4 x1 r: A2 ^
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g
( L& f7 n) h' [3 ?' D&gt; reg2.test('Hasdfa')8 S. }+ c* T# c0 W7 s5 m5 ]& T$ k
true2 I, q3 c' @- a: R
&gt;reg2.lastIndex;
# {. z+ j+ V8 O: c% c! U* Y- L6
  y$ V" Y$ x- x# ~9 t7 X# N, i* C&gt; reg2.test('Hasdfa')
; ~, C! m, S7 z3 D3 Rfalse( \2 a2 _5 ~6 F5 r9 t. e/ {7 l
&gt; reg2.lastIndex;1 |: R. M% D9 n
0
2 a+ P& N5 {# n& }: R- e. o5 E&gt; reg2.test('Hasdfa')
1 C4 f6 u7 M$ Q- t8 jtrue( \& O) a! u9 M4 m8 s& W! S
&gt; reg2.lastIndex;
/ L! ^" H5 ?7 V6
$ b; l7 l* K( I, z4 k&gt; reg2.test('Hasdfa'), g7 k! T  R( B3 v% S2 `# R
false) ]" x  s! ], U) i
&gt; reg2.lastIndex;$ y$ v2 _( Y/ @) R, E. w
0
6 b3 o7 w+ ~% P4 [! U// 全局匹配会有一个lastindex属性# m3 F9 z0 y& [9 V, L
&gt; reg2.test()
: M; E8 S( C; m, t, Ufalse5 u* D  c4 i9 ?( C9 h2 V
&gt; reg2.test()
* T) [7 p5 E  n) c6 s/ Strue! y# x0 L: z9 f5 C+ Z6 f! E: @
// 校验时不传参数默认传的是undefined
) ?1 Q/ S6 Q9 K5 P; k* y; H/ _</code></pre>8 O" L: r; U# R
<h4 id="284-自定义对象">2.8.4 自定义对象</h4>) V8 @( C$ `0 g( t
<p>就相当于是<code>python</code>中的字典</p>
- I7 ?/ U, s* L# M6 Z<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}
) N' g: P5 J. q7 C5 Q&gt; person
4 X! P; a) L7 h" Y{Name: 'Hans', Age: 18}6 o8 ]# v5 C( k+ X1 A  c6 T
&gt; person.Name
! A3 `& \0 g- N+ W: V: V'Hans'9 s# |4 a) b6 K1 d+ ~
&gt; person["Name"]
# M$ W' S: W! p; B& k'Hans'
" z3 ^! b' u1 z( I( p
& X6 \; Y9 W# ^// 也可以使用new Object创建
) w, i1 f; ~% p' ]) |6 H&gt; var person2 = new Object()
4 r2 L1 j* d6 d' N" b&gt; person2.name = "Hello"
! H, E! n" E1 s+ D  R1 J& b'Hello'4 ^+ f2 a2 ^# i- y( \
&gt; person2.age = 20  @4 O( M( d5 {
20$ ~7 }. {7 f' J8 e  D8 z
</code></pre>
; Z0 m: Q4 @( S' C6 u$ L6 `<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>1 w8 [0 N* @- @* `
<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>
" q- s* ~6 j) F* m<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>
) \6 I: v$ x3 ^1 S<h3 id="31-window-对象">3.1 window 对象</h3>' W/ g5 ~7 Z2 U
<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p># L  Z" z" ?$ \. j7 |8 [& y! H/ }
<pre><code class="language-python">//览器窗口的内部高度! D# ?/ G# v5 ?. Q
window.innerHeight
9 G+ p2 h8 {) S, _1 V. ?706
6 R6 T6 ^, ~: i2 X( [0 h: M//浏览器窗口的内部宽度$ k) z3 q2 T$ K+ q0 b1 x
window.innerWidth8 P; }9 G# X# N
1522" U% e8 D" |# P0 t4 ]% Q* Q1 s$ M
// 打开新窗口4 s; e3 M. O+ o. l% A8 F' U: N
window.open('https://www.baidu.com')
: ]. C6 }8 [5 X. BWindow&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}
' f3 F! q7 K1 Q, c; x4 k! x: }3 ]// 关闭当前窗口
+ k' s6 G7 L3 w6 H% H9 Bwindow.close()
: R1 A+ {5 d. j//  后退一页4 N0 f2 h0 x  y0 F8 b
window.history.back()8 c) k8 y! j. g; o, F3 U
// 前进一页4 b, O+ s2 |5 T$ @8 z# q; D% L
window.history.forward()
8 _9 c; J: F2 m4 Z% w) I//Web浏览器全称
5 H( G: @4 p) a; l; q( y+ Xwindow.navigator.appName. R8 L; G' E- Y) c& i
'Netscape'
. `5 W4 F% G; m6 e// Web浏览器厂商和版本的详细字符串. f* H* y1 b# d2 A4 Z2 Q+ D6 q
window.navigator.appVersion: q( S- ^7 A( Z& \" W
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
; |7 e' p7 D1 `// 客户端绝大部分信息1 ?7 s/ p1 k3 M: r2 Y; u& g, ~
window.navigator.userAgent
- w( j* h& c) ~$ E, R'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
7 q# v; j- K4 R" ~/ A// 浏览器运行所在的操作系统& a3 T# q$ u3 E8 C
window.navigator.platform$ a; Y8 f9 i1 E+ h
'Win32'
" W! ]! C- p! m/ L8 l' y% n
7 U6 X: d0 [, \  W/ F2 Z//  获取URL
* g: x( s7 g9 X: D' B2 Swindow.location.href
9 J* U- Q( }: v5 c" P5 p// 跳转到指定页面
1 G, |8 h+ j- j) |4 [window.location.href='https://www.baidu.com'
8 k. B) R# C  Z0 I0 u// 重新加载页面
. T8 M8 ?8 ~, L+ T4 zwindow.location.reload()
& J1 ^  e. x1 C; O" ]</code></pre>
/ i- B: b( b+ O% x<h3 id="32-弹出框">3.2 弹出框</h3>
' X* p! E" f" N" w5 ~! C<p>三种消息框:警告框、确认框、提示框。</p>
) e. e7 Y% O! I! l3 j/ c/ S<h4 id="321-警告框">3.2.1 警告框</h4>
2 `. s! C) o7 ^2 h<pre><code class="language-javascript">alert("Hello")9 L, \9 _3 i- o$ x
</code></pre>: A1 Z' ^3 d4 |- `6 \$ J& n
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>
$ d3 @6 @/ M! m* @$ s<h4 id="322-确认框">3.2.2 确认框</h4>
; h& d% A# C7 M6 l* D, w<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>! D1 {! u3 s4 _8 l. }6 i
<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true
) E# Y9 `& U5 U: D! |( ^" U  w% etrue" `% V- B( p7 |0 ^0 k& o6 \
&gt; confirm("你确定吗?")  // 点取消返回false
  r* i$ Q6 U0 Q8 N, v* @* `: efalse0 H1 s3 |, k8 K3 z% F/ X
</code></pre>- i* a2 c& }$ u
<h4 id="323-提示框">3.2.3 提示框</h4>
! S- H' n+ p2 r  n3 R+ J7 W9 s<p><code>prompt("请输入","提示")</code></p>0 k" A2 I$ m( {& k
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>( w0 F! Y& q8 k- J
<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>6 M. ~9 P: z7 u' C
<p>如果直接点<code>取消</code>后端收到<code>null</code></p>7 z$ _- m5 L+ R7 ^
<h3 id="33-计时相关">3.3 计时相关</h3>
% v3 q; I8 V( L* b7 c1 b<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>/ w% ?( ?& T/ S, [5 m  `2 F- Q
<pre><code class="language-javascript">// 等于3秒钟弹窗- E6 p0 _2 Z% M- \! @
setTimeout(function(){alert("Hello")}, 3000)
- P: F! {# f5 ~" ]1 v8 Z% r( G) g; ^; y5 r. s: D
var t = setTimeout(function(){alert("Hello")}, 3000)6 a; c% r, a$ G4 k* W# t
% V0 F/ t0 q& e6 e5 w8 a
// 取消setTimeout设置
/ ~" O7 U$ q1 B% i% }9 _! R8 b8 RclearTimeout(t)0 L9 s+ `- h: K" K# C
</code></pre># i" Z  y( _- ?: x/ ~; c: T
<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>
3 `& @" a. B+ r& @  v  @+ n( K<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>
  K; x6 K( S; g2 Q<pre><code class="language-javascript">每三秒弹出 "hello" :3 J* D9 h# o6 h6 R, n0 r6 p
setInterval(function(){alert("Hello")},3000);' ]8 y9 @2 v6 G8 b1 i/ u" Y
</code></pre>
8 b/ [# ?( L) u5 h& u<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>
% O. v1 R# d/ \: M' j+ c<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);
3 X2 d7 b: q9 [& k. ]//取消:4 J! {' M6 ~6 C/ a- h
clearInterval(t)" }6 c$ [$ r* h, o
</code></pre>
  H* i! o1 a3 S
# Q, J% d( o# v" p5 n! A
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|飞雪团队

GMT+8, 2025-11-25 10:48 , Processed in 0.073596 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表