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