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