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