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