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