|
|
; L( V: r8 V, U" ~2 F9 I# M1 a
<h1 id="前端之javascript">前端之JavaScript</h1>
. Q5 ~' n2 b# ^<p></p><p></p>2 J+ d, ? s( D) E/ ]
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
/ z1 L6 y7 s5 b3 X7 S<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>
O d3 v6 p' E6 R4 S9 [; r它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>4 N* w2 x2 ^, a) c
它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>! d( ]9 A& O# ^$ t" k& o/ a8 \
它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>
, `% M5 z% B, S; j* Z2 k<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2># k2 ?# c* Q7 S# _0 D; `/ K
<h3 id="21-注释">2.1 注释</h3>& _/ G$ A$ a* o; ~4 I
<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>
3 ]: ~4 C$ s# d8 T<pre><code class="language-javascript">// 这是单行注释
( O0 Z5 M! ~& {' u0 r0 u& C
8 f7 B8 e' h% i# u, |0 O/*
" a- M _+ i$ s( M/ v这是多行注释的第一行,
) w: u, M) f$ l2 ~7 @; c, ~1 w& L7 l这是第二行。
2 s; D# I/ G, }" ]*/* ]) e# K1 Z4 m' ^) S
</code></pre>/ X- j% Y p/ h" y+ y) P, K
<h3 id="22-变量和常量">2.2 变量和常量</h3>
" n! f7 Q( F3 t. p7 H& w<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>
0 A) g8 [* n4 c0 o9 C! ~<ul>
/ u% U% S7 K% L7 L, M5 Q<li>变量必须以字母开头</li>' o/ t! C" h F! P8 ?- a
<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>
% J( V/ `" U. C) ?8 k; L" [; o<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>; {. U! t! w0 H; M
</ul>! N4 \+ }, W7 _6 J, X% d% |) t
<p><code>var</code>定义的都为全局变量</p>
- T* c% `) w* H! H$ T$ x: v) P& t0 E<p><code>let</code>可以声明局部变量</p>! @8 n7 T& I# V# X) N8 L, F. N
<p><strong>声明变量:</strong></p>
" [. i; D$ R% U2 g l<pre><code class="language-javascript">// 定义单个变量
$ h! V& v6 {4 H+ ?, {, P4 h* L> var name5 n2 z# o. D" P
> name = 'Hans'
+ z- k) @4 t6 W( ?1 s& F//定义并赋值6 B" G- R6 Y1 k2 b: O
> var name = 'Hans'
0 n' q+ |& h3 Q+ J9 s> name
( n: W( d2 h5 C$ a/ L'Hans'# ?! \3 t" K2 i$ W# k3 ^6 t
9 R" i6 m. y# Z3 _' y+ Y6 x+ ~// 定义多个变量
9 I6 F# b$ ?; l' T6 v> var name = "Hans", age = 181 K! A; Z" q1 u
> name R8 `- K0 T+ ]0 d+ @5 J
'Hans'
2 k" M ^$ ^7 x( G> age
) C. T' f+ o% N, U4 b; q18
0 b% g* @7 ?( m4 |' Q6 a
. \* Z l7 p. f2 x//多行使用反引号`` 类型python中的三引号# p: T/ ~3 Q+ O7 {
> var text = `A young idler, `4 {5 a, d! c9 T4 X+ F3 M1 A; t: r) F
an old beggar`) x0 J& R! Z" a1 u; T
> text
. l; V2 y9 x7 h* |'A young idler,\nan old beggar' @7 m$ Z( @# W( k) {
</code></pre>* S% g7 _ N) n2 B* [3 X: j
<p><strong>声明常量:</strong></p>
& z6 F1 K$ A, w; ?<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>
! s% W, T* {) N" R$ d<pre><code class="language-javascript">> const pi = 3.145 G6 [+ ~/ K( L8 Z( O0 X$ j
> pi
+ i- Q" p+ y2 H( A% s% v- l3.147 f" |* H+ t6 X# r8 b3 ]
> pi = 3.01
6 p6 m7 A4 @9 i ^Uncaught TypeError: Assignment to constant variable.+ q7 [0 X' V/ y1 J" [; a
at <anonymous>:1:4/ f' y5 S1 W' l1 H( p0 A5 c# u
w1 T9 _ C9 y9 X/ H</code></pre>0 Q: |/ M; m% x
<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
& ^1 I9 r' e: X3 t4 `# g, n/ E<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>% b0 @+ |+ U# X+ S) S
<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>/ ]( v; I/ H8 q# c
<h4 id="231-number类型">2.3.1 Number类型</h4>
7 t7 Y0 D6 i1 M' p+ _* s" R<pre><code class="language-javascript">> var a = 5, r6 N3 ^! { n5 {. p. s( U
> typeof a //查看变量的类型 % Y2 r% Q* l: U4 h
number$ T7 M& t# k8 f+ {
# S" N/ l1 I* E# T& E, t3 g7 o> var b = 1.3
0 ?1 e' r& N4 w# f1 V" T> typeof b: {) R+ c5 N) \7 i& n4 T
number9 W$ O) Z0 e0 C3 r8 ^+ X6 Y
3 b5 m( j& J' [: J* o4 `
// 不管整型还是浮点型打开出来的结果都是number类型/ Y. N- ?5 N* @0 I& Q
) S: {9 F J; i8 x3 j
/*
. k/ {" |7 ^- V: t3 x1 t; WNaN:Not A Number
! Y' l2 D, i) pNaN属于数值类型 表示的意思是 不是一个数字" Q# T& A% |8 P1 m/ t8 \
*/$ `0 n0 R: d+ _2 {
7 z7 O6 d0 x' D0 S" R. o0 {
parseInt('2345') // 转整型
/ U3 r# m0 m0 b2345
4 C9 f# k& [7 \# PparseInt('2345.5')( u' w+ u& N9 \+ b( m
23450 x3 W, k) \# D6 v9 J
parseFloat('2345.5') // 转浮点型
/ I: \/ z8 d: [( F2345.5
S/ a% L0 V+ qparseFloat('ABC')" Z% A+ L7 m+ n
NaN& U$ Y! |9 ?5 L) t# S8 S1 F8 x
parseInt('abc')3 [- Q9 d. U b1 N3 Q" T, @6 P
NaN
; B+ I7 [; Q! U' s</code></pre>
8 o5 {1 M; Y" r+ w, c<h4 id="232-string类型">2.3.2 String类型</h4>9 E7 H) L. d: c4 b- L' V; j c; C
<pre><code class="language-javascript">> var name = 'Hans'
. U" P. J0 c; ]> typeof name
( |; h- Q2 ?: c. J5 c5 t: ~; F'string'
! H: H& j' C+ D, h
6 O# ~6 c' Q& |//常用方法
- W5 R/ ^- i; N9 z/ S- a1 [// 变量值长度# M$ x1 J2 q0 g: X
> name.length) v' p$ p! E2 U5 q" H
4: [( z8 C) G$ l, q' s
// trim() 移除空白1 h" R' `0 h7 D# g3 c/ y6 I
> var a = ' ABC '
4 j: g& k+ s3 X> a
- P3 @8 w; T3 u' ABC '3 U$ a# w \. j" d
> a.trim()4 h- P" f! c3 |& V! d
'ABC'+ Y& }8 m6 x5 y7 ?! x! I6 w, Y! @' q
//移除左边的空白: ~% t; u+ w! b7 @4 o
> a.trimLeft(): L" G7 O9 I7 y: R) F/ F5 P: Q
'ABC '( c; S6 i* \8 K" ~* ~- {" p* L1 H
//移除右边的空白+ X7 }1 _* J0 ]: B0 E
> a.trimRight()! Z4 X; w5 V4 }6 w
' ABC'1 h' C: t/ H6 _" c1 H" q
, v5 Q7 I2 k% h" n3 h+ F6 f6 I0 y1 e//返回第n个字符,从0开始
* T7 R: y: |# h) B) p% R> name1 X9 D3 j, W: z5 _. G
'Hans'
0 X9 J( {- J- ]- T- V+ }> name.charAt(3)
9 v2 K, Q. l1 U& }# g; u4 ^'s'
& n7 d2 T# a( G9 U0 v; m k> name.charAt()
& s- I9 L* [; X) O% k: o! T'H'* O+ d! L/ F X& V5 ?$ H
> name.charAt(1)
0 K. A0 G, Z3 l: w; z+ T" {9 j'a'
8 |3 ~7 E" [. O5 z
3 D+ L. k. D8 h4 e/ `// 在javascript中推荐使用加号(+)拼接
* E- q7 D" r. q0 r. ]# k! q> name
# g8 H7 n* |9 M- L5 N3 C8 R5 i'Hans'! E1 N: `$ a6 A( {
> a
; ~, a P$ _: _' @' ABC '
6 M( {! L) J( W- V" y! ~0 A> name + a9 P* k0 n! s( w; F5 O/ p
'Hans ABC ') e# x8 I6 B3 q; B
// 使用concat拼接
5 n- f8 V$ y9 l3 @% I' r> name.concat(a)% O( u0 a# l8 T1 B
'Hans ABC '
3 M+ [4 d. x4 M5 h: C" q' h. c" J8 ]
//indexOf(substring, start)子序列位置
/ X9 P* ~! o0 q6 {# a. o6 o6 o3 p8 F% g
> text6 J- W4 Q* L; ]& ^+ d+ o6 c
'A young idler,\nan old beggar'* {; P/ z' q/ u! N% L2 Q
> text.indexOf('young',0)
9 P1 s0 b+ W+ W- O8 s2
$ F5 }( }+ R5 ~* Y
- z9 ^1 m9 @+ D4 U8 r//.substring(from, to) 根据索引获取子序列
- J) y$ [6 f; H; l> text.substring(0,)
) R; }4 i+ C3 ~! ~' h" Z# B'A young idler,\nan old beggar'
. ^3 R4 p$ s0 P5 c' v> text.substring(0,10)
! j$ N& b1 ~0 `. A' I% d'A young id'
) _ N! l/ {4 C. T
; n9 Q6 v2 z9 ?9 r2 N' |# t// .slice(start, end) 切片, 从0开始顾头不顾尾, {- i1 j, S, t; l0 v$ Y
> name.slice(0,3)5 Z9 X( k& P F6 U/ _1 _$ S
'Han'
, `5 g* d2 p4 r7 f+ C' k. J ]9 L- k! r( D) o
// 转小写
9 N% M( {0 f8 F2 \% [> name( i+ J' i7 g% F
'Hans'3 w7 S! d U0 `
> name.toLowerCase()
c0 t% _: _! d4 A'hans'% O6 K4 U0 z8 G, a- P* ?0 K# O
// 转大写 g+ f& V) L7 }# L( Z8 ^3 P' Z. g
> name.toUpperCase()% m. H0 d2 L9 g, L
'HANS'
, b7 o6 n) B( S- R% A- B
! ]8 Y' ?+ `7 c) A9 h; c// 分隔
+ \) X" B) ?( D+ O1 G> name8 M1 S8 M; ` d( G" l: z
'Hans'( r# u9 K% Z) `' U- C8 t" \& c
> name.split('a')# r; ?3 i8 }- p2 r# u l8 M
(2) ['H', 'ns']
& J" {8 S, w$ S$ J; o</code></pre>. F5 A2 m+ T% @6 l
<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>" M- ]& I* ^- N; I8 Q7 w6 }0 K3 H
<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>$ x: ^; R+ @& [7 m1 R- u% \
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>9 m3 `# T3 D6 i7 u: j+ {$ a' s
<p><strong>null和undefined</strong></p>1 F* Z ^4 Z/ d1 o- G
<ul>
. Q1 E! Y! f0 Q9 @ Q+ U- u<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>% R( X* _( x- N; n" C- K; c
<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>
0 x2 b' {6 [5 u" i& P' _6 S2 F; X</ul>
}# t4 _2 o" T N% @% [<h4 id="234-array数组">2.3.4 Array数组</h4>
2 M5 X5 d" h7 i3 s% I+ n<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>- g9 c2 H( X* y$ H
<pre><code class="language-javascript">> var array1 = [1, 2, 3, 'a','b','c']
6 `7 A+ O" } L( o> array1
6 Q% p# n# F& }$ P0 N(6) [1, 2, 3, 'a', 'b', 'c']) p/ X, ^ a! J: \ t' W& d
> console.log(array1[2]) //console.log打印类似python中的print
6 `: A: ?+ f, ~" V# ~1 y3
/ \8 D* q& e0 L0 i* ?// length元素个数2 J0 z# s! X# U/ j; ^; c8 u, Z
> array1.length
* I/ H) `6 q7 `( r1 W6 K1 {) m6
+ f9 }; y K" k! u3 i+ \// 在尾部增加元素,类型append# Y7 X1 u( e% W1 @5 f1 D
> array1.push('D')
* Q) u. a. r# k7 _! D: d1 n7( ^4 d6 `0 u0 h U% x" P
> array1
7 y$ |/ m5 K) ~" {(7) [1, 2, 3, 'a', 'b', 'c', 'D']
. q( E9 K- s* i! r, J// 在头部增加元素
, L. m# w( C- V P, Q> array1.unshift(0)% ?& l6 l7 m* `
8+ W3 J" b) r4 s: G3 a( }
> array13 O, }4 V' G2 P7 D/ h
(8) [0, 1, 2, 3, 'a', 'b', 'c', 'D']) R( M* I }; i Z/ I o
# x0 n' W, v* q) N
//取最后一个元素# S7 R4 D1 R- x- ~7 x7 J" x
> array1.pop()
0 ^7 }# e; R1 E, k) O'D'
6 C1 x% O$ d$ V/ j8 N! O9 u$ x> array14 A1 c" D: b* U* I; _- D! N3 ?
(7) [0, 1, 2, 3, 'a', 'b', 'c']# U& X8 ^2 f6 v+ W; E+ [! P+ M) \
//取头部元素; M4 ]/ {( i8 B9 @+ D. o2 M! Q
> array1.shift()
! z m5 o( w: |) [8 s0
( L4 z! K$ h E5 i+ J. Z1 Q. w* ]> array13 D8 u& A& E8 o' l
(6) [1, 2, 3, 'a', 'b', 'c']: i* J0 B @, |. ^4 _1 ^) D
+ l! d% m5 r& n! g3 W//切片, 从0开始顾头不顾尾9 U7 x \- O. K" E2 P, l% c! m
> array1.slice(3,6), G' z( J0 K4 D; U/ O! y' w
(3) ['a', 'b', 'c']
l" i: t6 d {, G' }// 反转7 [, J' ^/ l# m- E3 s9 J: h! `9 f
> array1.reverse()7 ]6 f+ D- k3 D
(6) ['c', 'b', 'a', 3, 2, 1]* i/ P8 @6 c. f" P
// 将数组元素连接成字符串6 A7 ]+ h! m3 I& u
> array1.join() // 什么不都写默认使用逗号分隔
' |# d* E6 \* s8 m9 t'c,b,a,3,2,1'+ A" Q) N* U" `
> array1.join('')
! ^* F+ ~8 ~/ k8 Y1 E'cba321'' D3 F* R* t: F/ C1 p" u& Y
> array1.join('|')8 S* |! X) y6 O) u; S( I; ?2 T& V
'c|b|a|3|2|1'
$ E$ F0 u" o' b- g5 `8 P. G# C9 p9 P' X9 l( }" a! a4 \
// 连接数组
1 f+ q% e7 \0 ?3 O> var array2 = ['A','B','C']; ~% s+ L2 |% l
> array1.concat(array2)- B+ |; e9 P, z
(9) ['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']5 c3 b+ g* ^- H8 u3 B: w: S8 {
1 g* @7 L6 k6 K
// 排序# l, W2 K+ I, Y6 z- l/ `! {
> array1.sort()# _' {7 [- ^& [. |0 P5 t, N
(6) [1, 2, 3, 'a', 'b', 'c']0 |( ]9 v# i5 R
3 o9 W. H* [/ t// 删除元素,并可以向数据组中添加新元素(可选)
$ `% r. C' I! N- @8 q2 V> array1.splice(3,3) // 删除元素
: q5 S7 p c: g( N(3) ['a', 'b', 'c']
|8 m; B. |# A2 c9 t$ o' R4 ^5 j$ A> array1" {5 Q) }' O; D! z
(3) [1, 2, 3]% L1 m9 G8 |. y% i# K
> array1.splice(3,3,'A','B','C') // 删除元素从添加新元素
2 Y9 U+ }( A& K( \7 B[]3 w8 u( M1 p: C4 t N
> array1
# L& {% N$ `+ o2 E(6) [1, 2, 3, 'A', 'B', 'C']
6 F0 s- e0 [' b, Y! ~& z6 `- D7 M* h* {
/*1 W1 _1 K8 f; r0 p2 Z
splice(index,howmany,item1,.....,itemX); u9 R% h" {* ^; T( b5 G
index:必需,必须是数字。规定从何处添加/删除元素。
: e; o6 c% \/ F3 rhowmany: 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
* J9 m P, i R' o0 t+ qitem1, ..., itemX 可选。要添加到数组的新元素
" w2 w+ K! I" [* |' v; z" H*/
& x) G' ~. {" k8 ]7 j2 p# g3 J
+ ` C% w3 ~7 J; b9 O3 e// forEach() 将数组的每个元素传递给回调函数
) T* D/ i1 `8 n> array1.forEach(function test(n){console.log(n)})
+ K* R5 p. y7 w. L8 X# n1 y 18 H6 i8 Y9 ?( f4 W5 B" H
2! l; H1 e) L/ g8 K9 B0 Z
3
7 j/ g/ }' w( f% `! }, V: q A8 u6 |8 z. ?1 l- U0 D7 P
B* r+ s! u! a- p3 x' @0 q0 t
C7 b4 |0 Z- i4 ?- ]5 k
// 返回一个数组元素调用函数处理后的值的新数组3 i( R" C2 n0 d( J) \
> array1.map(function(value){return value +1})# t: I; s; y" m/ T& W
(6) [2, 3, 4, 'A1', 'B1', 'C1']
. l. H' r, _; \$ A' w</code></pre>1 ?& ]" s$ n) ^8 _2 x
<h3 id="24-运算符">2.4 运算符</h3>* l% ~# k( o! A$ ]$ z( _
<h4 id="241-数学运算符">2.4.1 数学运算符</h4>, `( v9 ~9 ^7 x, L# F
<p><code>+ - * / % ++ --</code></p>
9 u" U1 n# Q/ }( f<pre><code class="language-javascript">> var a = 6
4 m/ w" J8 S/ S+ t> var b = 3# _7 [$ s" S. A0 C" E7 O) r! M
// 加; d3 J" |1 u5 k, h7 ?6 T
> a + b( T1 W- d' }- R# B# }7 [* b
95 U' v' c" R6 K. J! J" t" C' H& t& ]
// 减
+ n6 X& ]& B, c6 K> a - b
% a" {# p/ h o6 L4 S8 A3
( n% q! @* ~4 D: s- S/ o( ^7 p; ]// 乘
& q5 O2 B0 |3 m2 M2 V1 r7 I& {5 G- t- V> a * b
: t& V* o$ `7 e+ |: p/ |: ]( R18
+ _/ C4 N5 Q f3 j) M// 除! i% x( D& v3 _( u
> a / b
, v8 g5 y w2 O2 ]+ h2
' }7 p( e z" n: L+ |; a// 取模(取余)
" q' q9 T& Z& V" d( x" ^> a % b' r+ e/ l3 L5 X5 n! M
0
% z+ Q) V1 q7 c J) U// 自增1(先赋值再增1)
6 r- o' \7 E4 \1 X! p& v1 m; G> a++
7 E0 X3 S" [9 e; K5 r6
7 q- `' X' @% C* _8 D0 p> a
+ @) a" b* n9 d7 m) i; ]7
( n* j* w w1 H: P; g' ?* ~// 自减1(先赋值再减1)9 g6 `3 e9 b9 [$ d6 b" @
> a--
0 T) ~: ]* w8 p$ n% a7
$ N$ [9 M5 G3 m" Z2 n; B3 |> a
) ^- M* L5 z* \% x& x65 D( h2 f+ H1 W
// 自增1(先增1再赋值)
; N4 ?6 u5 x# u2 b# c> ++a
( d* d4 q6 c* T1 w1 ]78 \4 I1 R9 ~: g2 c! n( o; z
// 自减1(先减1再赋值)
+ `( P1 I- t0 u> --a R# w4 y3 @/ y/ I% `
6
' K2 P# v% i& k6 q( Q> a, b8 ^+ G! M: N2 ^$ P/ g
6
$ ]( o0 K$ K: B2 j- i7 V Q3 o" f7 g0 m, F+ h
//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
4 {2 C3 T1 ?) C0 `</code></pre>, n9 K- m% C2 Z( b
<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
7 @+ {! c9 |# [<p><code>> >= < <= != == === !==</code></p>( |7 r( }! k+ q' b" b0 ~4 E
<pre><code class="language-javascript">// 大于3 P0 v( ]2 J- l) {+ c& {5 {3 ~
> a > b+ z, j- H. c& D0 ]! O: y% q0 S9 U, }
true
% ~/ l( o8 t0 B* v+ J3 H1 N// 大于等于
( q/ J- g% H5 ~> a >= b# M: |) L' F+ n& U* b! D
true
+ Q, r) l& r2 f7 q) ?# p! y8 r// 小于
" ~: Q, l! a7 A> a < b
' q# N/ x x8 Q$ qfalse
8 m1 x* ^1 S4 a" j// 小于等于
O+ v! m$ H1 {6 M8 }' I> a <= b
6 |5 |; C: {. ^false
; N* s! c8 b, A9 p0 _// 弱不等于9 H+ `( U& f/ ]! i* N x
> a != b
6 h0 S9 s! v9 X6 Mtrue
: c8 L O; \2 X! B) ^) L// 弱等于
" ~, M+ F' c8 }; }; m& o; c; U> 1 == '1'
! x0 N# j5 n; {/ h2 y4 o0 k# j: Jtrue
- S4 i" J5 F5 [9 b+ Q' i// 强等于4 ? P" O* K) ~: }- P6 l
> 1 === '1'
2 f6 W0 m1 O& c% X5 Ofalse
% N% d+ c6 R% Q7 O% i6 z$ T// 强不等于% ~ {# {0 G# H% @3 }$ J) G
> 1 !== '1'
7 _. ~! p. J5 y7 J, P- Ctrue5 r4 n5 A' H0 v. O
0 x u7 Q5 I+ G
/*
* ~) B3 s0 _* w9 v6 u" zJS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误" N" d& _5 @. z
*/# p7 f0 o* V/ t4 U' O* C
</code></pre>
& d/ E) x2 P! U" @% @<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>
) I& R4 b8 x( Z1 a6 A: K N<p><code>&& || !</code></p># D) m, K* m* }& C
<pre><code class="language-javascript">&& 与+ C, {& A* g' O
|| or % D9 {( z4 n1 K. Y- R
! 非$ M9 Y- t2 n W4 `3 j
</code></pre>
- Q. v: x( I, y7 r- U! N<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>
p7 P1 G& ]9 Y<p><code>= += -= *= /=</code></p>
. _; d5 t; [, ?/ [2 B+ h# n<pre><code class="language-javascript">// 赋值
* M8 E) u( c; x9 w+ f* b& m) o; ?0 C> var x = 3
* `0 U4 i* t) f& {) t2 F T/ B// 加等于) T! W, X) X2 v: I# _2 V0 y
> x += 2
: H$ z, ~5 D! T0 c1 B! L) T5
9 `. b. r% t/ d2 B3 ^* N2 C, A% B// 减等于: @4 `) }2 j1 Z
> x -= 1
& y' P' A+ X ?6 e$ E43 e! `. v9 |0 J. f$ B
// 乘等于, C; b) t( [, n- s4 h& K- h; j
> x *= 2; ?( @: M k1 ]' l
8
}( U: }# [' u: ]/ O// 除等于: \5 d, y: B7 G) l1 | w+ v1 H
> x /= 2
1 k) L7 D- G" k j5 y8 |% b4
& A$ x) w; \' {, B/ u' R8 O9 l</code></pre>! {2 K; Z% c$ b- Q+ S" u% `: C+ ]/ D
<h3 id="25-流程控制">2.5 流程控制</h3>( A# s" |3 T6 O, J+ l
<h4 id="251-if">2.5.1 if</h4>
% C1 X+ m3 `! \1 r9 z% h<pre><code class="language-javascript">1, if(条件){条件成立执行代码}
& T+ i% v. ^. l; B' A
, @/ a/ X. k B! B> var x = 3% l1 F I) V3 d3 ]3 c# @( n
> if (x > 2){console.log("OK")}7 o0 A$ X6 a) C$ V1 X6 O4 ~" f
OK
& J5 h! B9 z7 u
. Y8 H2 F4 @# v+ P1 ^5 b+ i! f2, if(条件){条件成立执行代码}
3 j) v1 m* d! B4 }8 C; _- l/ Q7 s4 u else{条件不成立执行代码}: s7 s8 f' r& s3 U( ^
3 z4 f' B2 {8 E/ w
> if (x > 4){console.log("OK")}else{"NO"}' W/ l4 w, N+ `6 J! C
'NO'6 @4 t7 t( y! l, l0 `# r5 h7 n# W( D
8 A* l) z. M. {. @2 P# O9 h; q8 |9 v3, if(条件1){条件1成立执行代码} 6 s" f- ]+ l- Q9 Y/ a9 r
else if(条件2){条件2成立执行代码}
( \# Q* Q! _ ?! Y3 | else{上面条件都不成立执行代码}+ M+ m, i9 `. f5 C' R/ v8 Q/ b2 M% @/ T
; i9 ^# o1 v7 ^% \) `2 @> if (x > 4){console.log("OK")}else if(x > 5){console.log("OK2")}else{console.log('Ha')}) G0 `/ a) K1 i1 d* K; W
Ha* N. J- d/ D6 N' ^
</code></pre>
6 }% _6 Q2 `- S6 T1 g3 A<h4 id="252-switch">2.5.2 switch</h4>4 f- P+ u/ }$ ~% O C
<pre><code class="language-javascript">var day = new Date().getDay();
$ D* Z& R0 M/ _switch (day) {
$ j1 P" ~6 Q* N case 0:
( J2 D" _2 s) }1 e9 o5 h) @ console.log("Sunday");7 J/ h5 Q, k' `/ J# e. D
break;
* M7 p! e( G2 P case 1:
& h. q$ ]' t+ B0 ]+ A console.log("Monday");
' n6 R2 J: {" a, G7 ` \ break;' {% i. C5 \" }, f/ E) E( z; T+ `6 Z
default:9 L; ^' a) n8 P) F% F/ o- s
console.log("不在范围"); D, u" Z$ [* k3 r2 x( F
}4 i; I p* E- l7 s
不在范围: d- h$ ]& M# u6 L, Q* M+ J
</code></pre>% B& n- g/ e, a4 Q4 L
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>
1 O# @' Z- E7 V) o' @: D4 ~<h4 id="253-for">2.5.3 for</h4>
! Z) R+ p: {* a- a7 O! F<pre><code class="language-python">// for 循环
/ G7 f* a% ]( t2 |, }' d for(起始值;循环条件;每次循环后执行的操作){
) T8 m2 d2 a, ~- G- u; { for循环体代码, b2 m' B! X# Y) {4 _5 W7 r0 Q
}
2 P: L' P' h9 A7 A8 ^. l4 O1 j0 @3 K! ~& {8 {$ i3 h
for (var i = 0; i<10; i++){
" u4 p! f- t. Y; | k J& F, R console.log(i)6 l+ Z0 n2 | i2 e' f& B
}
, H$ F# D: U. Z/ T! D( v8 n 06 I( k$ S( m" z
1( o8 W' w0 l' l6 z
2
7 Y$ {) C, w& J+ y- L3 | 3. U7 c, C; y0 c2 J
4
( p! L# w! I: r \" K" r 5+ r3 [& B) e4 w3 r& I
63 @ g- u$ ]/ a' b5 H" V
7
% Q1 r4 @; }% Q# d5 B 8
& i! Z) x5 O3 P, h 9
$ a) }7 L9 K3 S9 L# p$ O' T2 f</code></pre>/ I$ L1 ^6 H0 G0 w- q, K( _: |: p& m
<h4 id="254-while">2.5.4 while</h4>
5 v( H3 i3 D" g( Y7 T) N4 M$ B<pre><code class="language-javascript">// while 循环
t2 @# Q$ Z! x8 @/ \ while(循环条件){/ K H$ P+ u# X/ \. [( T
循环体代码( s6 B3 r e. i$ {/ U$ _( B* w4 P
}0 W4 e5 ~1 c; h8 f
. X+ W- M2 u7 ~+ ?1 o> var i = 0
- j+ `3 ~, K0 ] k> while(i<10){+ K$ j# x# w2 H' W
console.log(i)
( D3 R. J3 X2 W1 d$ r( g i++
# t+ W" H; z6 u8 d5 c}0 l. b5 ]. E, {
0
. T$ P* m: ?) J" Q1 s 1
* K- H# _+ `9 U8 i R- d- ] 2& t; D% G# k" ?' \
3
/ `! d' T2 M9 Y 4
" u6 B8 i1 z/ h; J' A! U 5
$ ^0 b3 m5 E; B6 U 60 i- x3 T0 d B }
7
# K7 o* W2 l' o+ a& |( H 85 p% j" z4 T# j0 G
9
8 j6 v1 a6 o/ P) M& m& x</code></pre>
& b8 W) t& J6 Z7 l<h4 id="255-break和continue">2.5.5 break和continue</h4>. s% O& ~7 a; o' d3 N( H( @
<pre><code class="language-javascript">// break9 R3 t P( H8 }9 o
for (var i = 0; i<10; i++){
& N+ Q( f9 {: H" R9 k# m if (i == 5){break}" e1 w! p6 A' S; d
console.log(i)
" g* w( P$ o% ]8 W1 f}1 q* s- j! v; E' t+ O5 I1 h
0( d4 M Z, ]2 M- l% H1 F* ]
1' Q. g. p8 _" X; N. Q% T" R
23 v6 I! q# W) D( T7 T
31 l2 I, ?/ k. a A" `& M; Q
4
P2 q" p$ I$ b7 G// continue
2 S! t) j# ~$ }% q E8 Pfor (var i = 0; i<10; i++){
7 k7 {' I1 ]9 K& e/ C& L if (i == 5){continue}' |* U6 k$ `. T% ?. M; \
console.log(i) c& C: p& L8 c$ Q
}
1 h# b) P+ E {" m7 S/ K+ v& H 0 S9 {: s: w. E9 R
1
# J* x! U$ E) R9 p; } 2% u+ I3 [5 l! g3 e
3
( Z* V7 S P: x8 z- h( Z 4; J+ b1 Q- F% B
6/ d) p4 z/ ?" V
7, ?5 \9 I9 {! S! U+ ^/ v8 @
8
3 F. k! S \3 P5 V 9! c" G/ w+ }8 |0 d3 n
) m0 i9 |8 l7 L6 \: Y9 H9 B</code></pre>
! @* g- J& ~1 j! E; K<h3 id="26-三元运算">2.6 三元运算</h3> N1 b t( a* W% Y9 p5 d) l7 ^
<pre><code class="language-javascript">> a# P( \4 y3 L! y( `5 i
6
9 v2 R% K3 f% n0 N- ?' M> b4 p1 u0 D! m E$ R: h7 k+ t1 Q
3, B ?/ P V" E2 s
" A- t: M/ X6 [% X. P$ Q% ^
//条件成立c为a的值,不成立c为b的值
* j$ D! H* j$ I! m3 ]> var c = a > b ? a : b
! v# k2 X$ g7 U7 z> c
# v# e0 a$ f9 \6 E/ h, P/ C+ B8 H6
- g, i% i; [0 E8 a- R* s
^ d& U: @( @! b5 M8 ]/ f$ W9 C// 三元运算可以嵌套% S* n7 w1 ]. ^
</code></pre>
! K0 @9 c& Q9 I: r. v8 w<h3 id="27-函数">2.7 函数</h3>
8 v/ q& M, @! v8 U. ^<pre><code class="language-javascript">1. 普通函数
9 H6 g4 i( n& h> function foo1(){
( }8 }3 H( d1 n3 a. g$ ` console.log("Hi")
1 a4 Y/ \6 N/ Z5 V, t2 K9 K}
7 Q @) q* o1 N& h) P3 Z" N$ t# Z# [* Q6 I3 C7 O
> foo1()) Y+ |5 C" z5 s8 r7 E
Hi
, n' }: e7 S! A* c2. 带参数函数' G! r9 S% ^" A# `( U p
> function foo1(name){" ]3 K# W. K: I
console.log("Hi",name)" k2 f! q; q# T6 \" H
}
7 N5 G# \* T! a( m5 p
( q; q+ @; m5 w1 i6 u& k- h3 }> foo1("Hans")
7 p5 i9 [* b) h9 p# L' j ~# JHi Hans* L" P- k: d. K+ b
2 E! w4 w4 {; @7 f> var name = "Hello"* x2 C3 N* N( H) P$ N
> foo1(name)
, x- V. i8 c+ p+ `+ M6 E0 M0 `: @Hi Hello5 Y# Y) n5 d# W! j- ~3 e0 L
; W6 H9 T4 v7 f9 e5 U& Y
3. 带返回值函数
+ o- O0 z; H9 ]# c& E" u: j! c( E> function foo1(a,b){
& }: M2 ^& h M3 y" y return a + b
" r, Y( C M* c/ _( V}
* q/ v7 ?5 d5 N. p: T> foo1(1,2): W' H( Q: ]/ B
3
: }7 M7 V! j8 V. b7 R5 ?> var a = foo1(10,20) //接受函数返回值
! f9 v' {6 b1 J: |; T& [> a! Q% V; k" I* r3 ?
309 s) A# ~( \# `, {+ m
% C( L7 r- u o
4. 匿名函数
- M- K8 u/ e* n> var sum = function(a, b){
# @9 q" j( D( d$ k3 h U+ h return a + b;9 m* T8 @, c) h% A2 M' {& K2 E) Q
}: R/ R/ g, Y# l d M2 H
> sum(1,2)
* n6 U: V) l0 y u, L3
) o Z2 ~% P( O! d) p4 R0 N V2 R2 c+ Z
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱6 ~% @5 V. w+ o" o2 c: b% o
> (function(a, b){/ N2 C! o& k8 q9 i% h# b
return a + b
i: I- o$ G* u `: Q6 }! D( T})(10, 20)$ G# |3 W8 @0 s% {" m% o
30
5 b, _$ S+ m9 Q5 i3 S/ h
0 ~/ {# g! G& | l" ]3 E5. 闭包函数
( g7 U* ?0 Y: {( l// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数: _0 }" A9 d4 y4 y2 V- |
var city = "BJ"
) _1 Y' u8 F& Bfunction f(){: |/ `0 B! C+ h
var city = "SH"
+ J9 ?" j# l x- m% Z2 T: ^ function inner(){
0 @) i& Y: e6 \: U console.log(city)/ J3 [5 }0 O, h! J. s2 J! D
}
* }4 z3 z* F) O& x6 Z. T0 @5 s return inner
, T5 s! `( L( m# e- k/ _}7 a( l6 S$ F- b/ B
var ret = f()/ w# o8 ?* W" d
ret()
5 w4 D: @+ w; g5 ~执行结果:
# ~, e4 _# J0 z4 H9 T) K+ f! Y7 [' SSH& z7 X- }) C4 q
2 L0 \+ E/ a. r; ~6 |. h' r* X$ C ^</code></pre># I0 p# a* t# ^ t5 y9 S( x$ r: S
<p>ES6中允许使用“箭头”(=>)定义函数。</p># ?1 |6 b; a; U2 l
<pre><code class="language-javascript">var f = v => v;( f2 s3 J$ p; e
// 等同于3 z. V* o: g3 m8 d
var f = function(v){/ Q& I- i9 R* F, q
return v;6 X6 o* i$ ^. S9 @ I6 ~
}0 H; b8 V% c- ^0 L# D
</code></pre>
8 |; b# _! j7 l0 k0 u4 J<p><code>arguments</code>参数 可以获取传入的所有数据</p>8 F! F* ^% {+ h. k3 M9 x. H
<pre><code class="language-javascript">function foo1(a,b){
; D3 q, ]' `- p1 @ console.log(arguments.length) //参数的个数
5 N7 J1 J& c' |# j. G3 v! i" v- H console.log(arguments[0]) // 第一个参数的值
1 ?0 Y% Y9 p. _! B6 N) ~ return a + b ' W3 D& [, U- D: e `+ T
}
7 ~, ~0 D- N, S; Afoo1(10,20)
: K6 `8 H+ t3 t2 }结果:! ]$ l) z. j4 h% H( D! R
2 //参数的个数
' i1 r! j2 H) O; H" M10 // 第一个参数的值
. i% U7 @; G7 t6 ~; F0 c; f30 // 返回相加的结果
5 R4 c& H6 P4 O3 B2 E</code></pre>" |1 ~0 M& h" {7 B1 {
<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>* S6 i, U* _, x6 ]$ M* p; Q
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>' V" ?2 H, z1 o
<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>
) X/ I6 S u) d& o& o3 ]<h4 id="281-date对象">2.8.1 Date对象</h4>$ a0 ^" [/ [& V; ?8 v* {
<pre><code class="language-javascript">> var data_test = new Date()
' [1 N0 G) B6 Y2 ]) X> data_test5 q) O( O. a$ \8 @. x
Fri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)
( Y" _6 }2 P9 a( {> data_test.toLocaleString()
% @8 {" R% i* C3 S; f'2022/2/11 下午9:44:43'6 K+ g% r0 n6 _4 @* @
* Q) r5 q% z5 i1 k, `; @' \5 z
> data_test.toLocaleDateString()
' _0 t5 I* {. V4 l+ u'2022/2/11'
! K! {6 [$ s# x$ i' D
! r4 D$ R- a% i" q7 N> var data_test2 = new Date("2022/2/11 9:44:43")
5 X% P6 U* F" R: F( ?> data_test2.toLocaleString()
8 M! G! l/ w1 ^' H) w0 N'2022/2/11 上午9:44:43'
7 \1 Y7 e( |5 l8 T3 |# \* L6 x6 l: W) a
// 获取当前几号
/ Y3 z, @! w, ]( k> data_test.getDate()+ x5 t2 F1 Q% _! S
117 t3 S+ x6 U# q( b9 B7 _+ C
// 获取星期几,数字表示
4 W6 w+ u. L U3 V- e7 ]! r" ]4 ^* m> data_test.getDay()
( e6 q' D9 ]" _9 ~+ \5
3 B; S f* M) c4 _// 获取月份(0-11)( z' `; G# |5 }' G
> data_test.getMonth()
, r5 [+ ?, Y- }" G1
2 N: I( u6 b: L# M4 Z6 y2 y// 获取完整年份6 ^2 a5 m& T w7 ?9 R. y
> data_test.getFullYear()
- S9 N2 s! ]5 z7 ~2022# Z! B4 W8 T1 Z9 w
// 获取时
0 J! z( H! a# @0 M7 ~> data_test.getHours()
C9 {0 `$ T( p$ ~0 G: B21
) `$ n4 E3 [# v/ w// 获取分
7 b/ d1 \+ N ~$ T> data_test.getMinutes()- k8 ?3 l1 a( f
44
% _5 U8 j9 G7 B' s9 U& [// 获取秒! E& r# o! h/ p) R S
> data_test.getSeconds()
- R8 c7 S9 D& z6 x+ ]! r43- u* ?& l. ?, s5 _
// 获取毫秒
! D0 m) R4 h; @7 t+ T> data_test.getMilliseconds()8 f% b, L4 t" u
290
/ M. O$ _' m9 b. Y// 获取时间戳( ~* m2 x1 b) ^
> data_test.getTime()
$ n- _& t0 Z" c; M- h; }' Y8 c16445870832906 |% G9 W2 {( s% D' T
</code></pre>
& I/ Y1 Z$ G/ q5 e' x% K& o$ R" }<h4 id="282-json对象">2.8.2 Json对象</h4>) f0 D4 ^- M4 r, H4 S# b
<pre><code class="language-javascript">JSON.stringify() // 序列化, 把对象转换成JSON字符串# W8 E/ ]' M" P) f6 n
JSON.parse() // 反序列化,把JSON字符串转换成对象
' v2 h. B" h* o' n e. \7 G8 r" J1 I& v' S( w4 e; j- g& Q
// 序列化
( ~4 `2 _3 s4 w2 x! v> var jstojson = JSON.stringify(person)
" }9 K. ~6 q1 y' I" x8 u- i/ `> jstojson 0 d7 F5 M- u1 N1 B5 X! ^: ~1 ?
'{"Name":"Hans","Age":18}' @, q0 r+ m) R G3 ]. q
- {4 z. E/ q% P// 反序列化
) h4 m& d$ M- G7 H8 K8 R> var x = JSON.parse(jstojson)
" j+ ^* n1 c' t9 y% K8 l0 C> x
" C' U. O& J6 M$ U{Name: 'Hans', Age: 18}: k" h6 f, V0 T
> x.Age
) G+ N$ j5 I$ Z3 X0 J( @/ x$ B181 I! y# i' a m2 q5 B
</code></pre>
$ O: b3 D; h; B+ h, l2 h9 v<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>
% m2 F: v* S. ? q<p>正则</p>5 b) e* [. @' M$ M- R' j" a9 V
<pre><code class="language-javascript">> var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");; n; s9 C' m+ F+ i$ `
> reg13 W8 y/ r \) }) n$ ]: q
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
$ }& \ ~& L+ J s> reg1.test("Hans666")
9 K) r! c3 B& z; @& xtrue5 u* B6 C! T; ^4 O* B; _
+ W. Y9 Z# E: R5 s2 B> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/ // 推荐这种写法使用 /正则/
0 z! H- ^7 y/ ^& p8 R3 m9 A3 Z> reg25 _4 _# _! v% \( }* D
/^[a-zA-Z][a-zA-Z0-9]{4,7}/9 I* {9 X. N' G& e
> reg2.test('Hasdfa')
$ e& W$ J/ q- S: N n% _$ A* n) otrue7 I8 E( J3 x6 Z/ u; D
$ B+ Y3 A8 t7 M) }+ Q3 E
全局匹配:0 |3 `9 n) B& X9 b
> name3 q" T3 Y' T/ k
'Hello'
( G5 I+ }+ a% u, a+ i& x6 }' A> name.match(/l/)
6 p- X" w3 o0 T; }- e6 F) P['l', index: 2, input: 'Hello', groups: undefined]
`# G1 M) S6 g
! W9 ` p. I# r8 F3 X0 C2 K a> name.match(/l/g)7 b1 m9 w% W% K' D$ g
(2) ['l', 'l']8 I: ~' g1 \2 N* o
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配
3 f; B0 I/ q1 X0 G7 L8 x: `4 o9 [4 |9 b N
全局匹配注意事项:7 F# S# s+ t1 k. A9 X0 K6 s9 S
> var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g; H0 r4 Z1 X4 b0 a- v: b, V6 q5 P
> reg2.test('Hasdfa')
`* X- A2 a: A B* I* ktrue
1 D' K: d7 X' O p- |# q3 v>reg2.lastIndex;
# Y3 f# O; k% h. S4 b61 T/ T9 D+ r0 \' U
> reg2.test('Hasdfa')) h( P, i* U: ?/ F K) O
false
. d& R% N2 `2 M4 P> reg2.lastIndex;
* e5 \ j7 Y/ @1 Y& {% a0
( H, x' x2 n. @, T8 Q8 w0 W+ W> reg2.test('Hasdfa')
7 |0 k- a, z' s+ g/ o( \true
; M* n* M: j4 } [1 d> reg2.lastIndex;
* W/ }9 N$ |, Z67 m, l$ ]9 j9 M8 K& P; d
> reg2.test('Hasdfa')
2 ^9 { k- I/ |5 j9 {: qfalse& B3 a6 T1 Q4 d
> reg2.lastIndex;
0 F( I: H+ Y6 a: ]0& y+ ^" U- f% W% M
// 全局匹配会有一个lastindex属性
1 S! E/ m2 `0 W; V _! w" M( e* ^> reg2.test()
K, h6 b' d2 E5 @; G. B8 D# hfalse M! i6 n$ `7 R
> reg2.test()6 S4 \- U& j+ M8 ~% Y
true
9 A9 j! \, @# w// 校验时不传参数默认传的是undefined
6 u" }6 r) P ?. B</code></pre>
6 B' K9 P1 T( q$ L: O$ i$ i<h4 id="284-自定义对象">2.8.4 自定义对象</h4>* C+ {% R# R. k7 T7 {% n% _
<p>就相当于是<code>python</code>中的字典</p>
0 E7 f6 x; }6 g<pre><code class="language-javascript">> var person = {'Name':"Hans", "Age":18}
x7 ?! I( s6 c1 n r! Z7 _> person
( o* t- I( l# E% E- O" p3 l$ {4 o{Name: 'Hans', Age: 18}
0 S6 D, w: f, S1 ~# K. g4 z> person.Name
) {) A& s/ o0 p& o" D'Hans'
: ]! |6 ^/ D' A; f8 ~) B> person["Name"]7 g* {" Z7 ^- o% k0 a9 a
'Hans'
3 y3 g. ~# F: C2 x u8 H
4 M9 `; }# U8 \; e// 也可以使用new Object创建: L% t; i; ]1 \% j* ^' O! O/ J% ^
> var person2 = new Object()
) p- v6 e/ R C' ?* h# K> person2.name = "Hello"
, `% H6 G% B, \1 z'Hello'
9 D# m) R! W6 [; A( u: A> person2.age = 20
* [6 I8 X; a5 P4 ]20
2 f9 t6 q5 F: c. S% ?% C</code></pre>
$ M0 z; s3 X* ?9 Y! |) w<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>6 b( `6 ]3 Z7 z
<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>
7 j) D$ @! g. q: ^4 Q. s<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>, Y1 P8 z9 T2 o* R
<h3 id="31-window-对象">3.1 window 对象</h3>; F. d5 a7 l L: [4 ?' Z
<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
$ k* L% i0 k1 m# N9 `( G<pre><code class="language-python">//览器窗口的内部高度* |- v/ r5 ]( m. U) b3 ~& f
window.innerHeight % w# m5 E. {0 }& P9 d* O; n5 B1 _
706/ `8 I/ X: x7 Q5 B' a
//浏览器窗口的内部宽度
" E4 }$ r! T4 \) n. \# ?# b! j( gwindow.innerWidth
2 {; |* t" O# T1522# B! }: L0 M1 S2 z
// 打开新窗口
. s; y% r% b8 ~0 owindow.open('https://www.baidu.com')4 l8 I' v/ p; J9 ]$ H) }
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
" m1 `7 V( ^* A p6 F8 e// 关闭当前窗口
5 \2 d! E( J# D- Rwindow.close()
5 \1 h+ f1 a" Q4 K// 后退一页
* Q6 `+ F' q9 O0 Iwindow.history.back()
- X+ {. m7 h; C4 N// 前进一页1 u& |$ R! ]) x) k% k7 @& u+ o
window.history.forward() & T# s V% W. q% |7 v+ g
//Web浏览器全称/ Q/ v! z9 n+ z0 x7 Q* V6 s" e
window.navigator.appName( s8 F- w* C6 P0 K. C% x
'Netscape'
/ @" {% a. C1 Y2 f1 @* u// Web浏览器厂商和版本的详细字符串2 ^) z. @' j( B% j6 j1 e- q+ d
window.navigator.appVersion
$ R, h0 }, r) v# \7 j3 D* u( z& n'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'4 E% \. Q* F5 n! |% l* ] l
// 客户端绝大部分信息) B: C5 Y8 V) l; d1 C9 U% h
window.navigator.userAgent2 m% w( C0 p$ |, T/ s. B
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
! t; t1 @1 w2 s, v, `! \// 浏览器运行所在的操作系统: q: q& M7 u2 H2 R' R( {3 F9 o
window.navigator.platform
, Y8 t' e3 J% X4 ~, }) V# o'Win32'; U, j# i( {5 c @' k% X% }
$ R: N, n! f& a6 O) ]// 获取URL
( Y: G4 Q$ P- awindow.location.href
" {9 f5 N3 e) C% Y// 跳转到指定页面
: `% x8 X! t% A- p" m9 m. X6 `7 owindow.location.href='https://www.baidu.com'
5 D, D! k6 R, q// 重新加载页面
# V! r: o% p1 E5 Y2 Kwindow.location.reload()
* U2 u/ a0 L( S/ C</code></pre>
* F8 f. N: N- b7 j<h3 id="32-弹出框">3.2 弹出框</h3>% |- d! o- B/ ? Y- w1 O& X$ c
<p>三种消息框:警告框、确认框、提示框。</p>- J4 J: |0 J& p& h
<h4 id="321-警告框">3.2.1 警告框</h4>
; a7 m- B+ v V( @% f( t<pre><code class="language-javascript">alert("Hello")
" ^2 j1 n6 d, l% F- \( q9 O</code></pre>
: r, k4 S9 N# f<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>
) F( _5 S) w! p( S- N" I& p<h4 id="322-确认框">3.2.2 确认框</h4>9 f% p( P3 P( a/ y9 u
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>9 N I7 [$ g& N, |7 T/ Y, e! a* R
<pre><code class="language-javascript">> confirm("你确定吗?") // 点确认返回true
9 c3 W% x" C! itrue" B4 X4 c$ t3 U9 x( R @
> confirm("你确定吗?") // 点取消返回false
1 j+ f! ]: N# a: ~) _& Rfalse$ z* j' I1 h) i5 i
</code></pre>0 z0 {% _, K3 o
<h4 id="323-提示框">3.2.3 提示框</h4>3 O$ {$ Z4 R$ ~
<p><code>prompt("请输入","提示")</code></p>% z: v/ S# m* u3 D8 M- k! B7 c
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>* Y5 h& o/ w# i$ W- U
<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>
p' i! f' Z6 L# h3 W" f<p>如果直接点<code>取消</code>后端收到<code>null</code></p>" \* r, R7 f0 Z2 ^6 x: y. m( p
<h3 id="33-计时相关">3.3 计时相关</h3>
( d% w. ]+ z; ^+ g _: P2 ]<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>1 a3 E7 U- @+ x; g
<pre><code class="language-javascript">// 等于3秒钟弹窗
8 \# o. J7 v' m" n! vsetTimeout(function(){alert("Hello")}, 3000)
6 p$ F1 U; L: D7 n4 x5 Z6 D& Q* N" {: @" O$ A3 L4 V
var t = setTimeout(function(){alert("Hello")}, 3000)
[! |" }1 |) s4 n. A1 N- N) {! U2 t9 ?
// 取消setTimeout设置
8 E$ J$ J [% e6 l0 g/ BclearTimeout(t)
$ m0 j$ ^ z. V, A</code></pre>% x1 f X% ~/ N- ^2 I) S
<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>
! Y @! q# P( f: M3 L<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval() 间隔指定的毫秒数不停地执行指定的代码</h4>! o1 V6 T% h6 _
<pre><code class="language-javascript">每三秒弹出 "hello" :! E2 U6 U5 i0 z' _2 D; R# V2 J2 t
setInterval(function(){alert("Hello")},3000);& Z4 M( Y' J& a9 J+ P
</code></pre>
' r% e$ P1 l# n" i" p<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>" s) _0 z" p; A0 C4 ]7 |
<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);
( w- W4 w# m. N* N# Q//取消:
# y% a7 E6 b5 L0 L5 U2 |2 YclearInterval(t)% H$ {3 t! p% k3 j
</code></pre>
9 N$ E* s8 D* l) S9 C
5 i- j6 B, x7 f" ~$ | |
|