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