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