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