飞雪团队

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 14450|回复: 0

前端之JavaScript

[复制链接]

8059

主题

8147

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
26507
发表于 2022-2-12 18:11:35 | 显示全部楼层 |阅读模式

2 ~% i' p7 E1 o6 `<h1 id="前端之javascript">前端之JavaScript</h1>
4 ]6 V, w4 Z$ |, F5 T, H<p></p><p></p>3 \" H5 J5 p" m7 W- E; [
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
8 j1 r8 t! n$ u<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>
( g4 M3 O! f- t& |. {/ k它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>
  [  E2 Q$ y/ t$ e. s1 D8 p它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>
; c5 u" E6 N$ U1 S3 ~- }6 W它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>; j# y5 B$ E+ j5 M  l
<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
2 P/ x6 b9 I! H) e1 t, r8 J<h3 id="21-注释">2.1 注释</h3>
* I" {% v0 G( p3 T: U( {3 w, a<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>
9 p7 g! @5 I' h* c! e( @<pre><code class="language-javascript">// 这是单行注释" T7 l! T5 g7 G, [

3 h$ T4 m3 R6 z1 ?) ]% n* Z1 u3 j+ T/*1 }' @- t6 B& ~* S4 x2 J
这是多行注释的第一行,& q; g7 t: A, @" g2 L
这是第二行。6 p3 C9 a' p9 D% U7 l6 s
*/8 D. Z) n1 \% h. s' |; s
</code></pre>
  A7 G2 I" P* X& J! g+ L<h3 id="22-变量和常量">2.2 变量和常量</h3>
" u! S$ I) }7 r  F% n- E3 f<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>
3 [' u" S% ]2 w& h" P9 e+ Q8 x<ul>
" v, G5 c4 D; z# h- H+ F0 _<li>变量必须以字母开头</li>% h8 F7 ~( V# t: c
<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>
2 l; d2 N# B' E  e0 s; G<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>
2 A# J' g, `. x1 c4 l' H</ul>7 @9 U- l* p4 c  O1 Y
<p><code>var</code>定义的都为全局变量</p>$ ^+ C* {+ Q$ e2 \4 s! w
<p><code>let</code>可以声明局部变量</p>2 k4 K+ n! I5 B8 s2 k4 C) k! t/ |
<p><strong>声明变量:</strong></p>6 z4 a* L' x  J) N8 o
<pre><code class="language-javascript">// 定义单个变量# g& ?* k3 g0 _, e, B
&gt; var name
0 ~" J5 C) m$ M+ C&gt; name = 'Hans'* W$ Y7 C" w9 e
//定义并赋值" S) z9 u- u0 w& m$ z/ Q
&gt; var name = 'Hans'
8 v' \3 Y4 i7 v) A  m&gt; name$ e3 U$ m# k0 K) u2 F/ T
'Hans'
: p& E& l% u" }+ p% k" J. n3 {# u. p% c. O0 B8 H
// 定义多个变量
  e: p& [) Q9 g&gt; var name = "Hans", age = 18
9 U  j/ w& G* r8 o# T9 [&gt; name
4 x! i+ C$ r" h1 @$ A'Hans', P4 c6 @& V8 L2 L* O
&gt; age. H. X, H% s  `; M& |
184 B* F: ]- R# H* }* ?: \+ b8 ]
& J" c6 Y$ {/ {& N3 Z
//多行使用反引号`` 类型python中的三引号* g2 g; F* _" `# v" b
&gt; var text = `A young idler,: j/ C! [" A% I3 x8 X5 p" u
an old beggar`
4 m; c& G/ P( u5 x, p! `6 f&gt; text, q- T: q2 ?/ w: K4 {0 i/ @4 T4 q
'A young idler,\nan old beggar'
3 q+ t4 L8 }/ h6 x" j</code></pre>
6 L/ N7 B5 P/ G<p><strong>声明常量:</strong></p>
3 t5 B+ [- O( n9 [<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>
8 s$ E/ ^6 B$ \* v6 g( x9 \$ s<pre><code class="language-javascript">&gt; const pi = 3.14
; d: |3 n! g/ ^2 _; G  h&gt; pi
! I6 {$ P( T, @. Q( T' l3.14. u$ B0 Y) Z' ?1 j# D, G" \1 T6 D( x
&gt;  pi = 3.01
) Y  p/ g/ X" Y4 h% z- X. o3 fUncaught TypeError: Assignment to constant variable.* ?7 E- w3 o/ E& F8 k7 P
    at &lt;anonymous&gt;:1:4; ?2 q8 M1 m2 n$ D
2 f6 e  p/ T4 U) P' O/ |( j
</code></pre>
+ `( D  L2 ^" i# h<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
# B+ N" `/ |1 M<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>! t8 }, I4 R: W) [; t
<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>
. }5 q5 W& I: i) e4 u; @7 q0 B3 H<h4 id="231-number类型">2.3.1 Number类型</h4>5 f& M4 E- I$ H3 d. J
<pre><code class="language-javascript">&gt; var a = 5: F" O6 ?7 h$ }  g
&gt; typeof a   //查看变量的类型  
7 k/ Y- ]9 `- q) }1 K: cnumber
' J4 v: M2 {. I) s+ e4 l' p1 y" P! x% R8 F6 P" V* d/ s
&gt; var b = 1.3# R( z9 G: w7 a( p* i" z
&gt; typeof b& M  u5 @3 H: `
number
# u; S# F; @) \7 u! P" V1 b% A0 q5 o) G/ Q4 N
// 不管整型还是浮点型打开出来的结果都是number类型
( B2 h7 K+ @3 J  d6 x, N  V/ w0 c( f1 L0 d6 T( _
/*# h. B9 m. E  X: H# M
NaN:Not A Number* X. e  z! ~  X
NaN属于数值类型 表示的意思是 不是一个数字! V3 C& y* ]! W' v" @  Y8 d+ t
*/& C5 O  n8 u4 ]+ L6 F3 e

  ]2 k. U6 |! v5 H* vparseInt('2345')  // 转整型
7 o: v6 Z2 [, K2345
! Y1 l0 Q, y* X- fparseInt('2345.5')
  Q- B) ^4 P# k5 g, \2345
2 f- d% B1 ~) F- AparseFloat('2345.5') // 转浮点型8 ^3 |+ {  A5 s5 [4 i
2345.5" m7 [, L; P$ L  k9 r( x6 Y
parseFloat('ABC')
8 j8 p! x7 N# X) F" X& F8 p7 R9 hNaN. O4 [7 T) _* I% M  K
parseInt('abc')) H. q/ w* q* O& k- X# s1 k1 R% H: L2 m
NaN
8 O2 c. n6 R* C* ~</code></pre>" f# j4 t& B3 m5 @+ E
<h4 id="232-string类型">2.3.2 String类型</h4>
) K# z% m& d1 Y) m  q  K) l<pre><code class="language-javascript">&gt; var name = 'Hans'
; R  H1 b5 V; g& R' W&gt; typeof name
0 A# b$ |! T0 D2 a: n'string'
' |* k6 E) `% I& f$ n
! {% [# R# Z# g+ S6 S//常用方法8 F+ t6 x. V( C2 f1 R. s
// 变量值长度
" W. j) N. i2 Y$ ^6 R* v( @2 G3 L&gt; name.length, g; O6 e9 u$ S8 U" |# v
4
8 k2 @5 Z5 F) ~9 t: \$ b$ N// trim() 移除空白$ G7 n  |3 ~/ j& k7 P
&gt; var a = '    ABC    '3 w: S# {& k8 v6 Z* B/ ?
&gt; a8 f6 M5 E' A" O8 Q
'    ABC    '6 M8 W" I5 b- x9 O3 K
&gt; a.trim()2 x6 {  A* G! [' U$ N5 `
'ABC'& b& D9 c5 P6 l. y8 O
//移除左边的空白
/ M( ~4 ]  d! i# y&gt; a.trimLeft()/ j1 y7 j/ @% R  V  x- K6 g/ F
'ABC    '
; T3 W( T& V$ `//移除右边的空白: w. e( E/ l: k% l; O1 a
&gt; a.trimRight()# k* u4 p' Q) l
'    ABC'( v4 B8 o1 @2 z* `7 _$ Z
2 `* u' R9 [! l% }8 ]
//返回第n个字符,从0开始
: U* Z! b. o3 m) i&gt; name
8 K! `, V. x4 C# i( Q) W! s0 }'Hans'$ {; f' @4 s: }
&gt; name.charAt(3)
4 g0 |# A7 c/ x7 _% @0 h% f/ ~'s'
& M. P" T8 `$ M+ E' p8 L&gt; name.charAt()& n5 z( Q5 H& q) |( K) F
'H'
( K- W" `" d3 R5 n( N) E/ ]&gt; name.charAt(1)$ z) z# A5 R- a) Y0 N
'a'1 e2 S7 @7 h& B* h9 T  O

0 c& J  d8 r2 d& f// 在javascript中推荐使用加号(+)拼接( i6 Y* [. D4 v- M6 P9 d
&gt; name2 h6 s) E- S4 v# I
'Hans'
1 Z% z! Y% b6 ?" b. J0 d&gt; a
' H) l& Z$ ^# ~'    ABC    '3 t! d' l3 j; U+ u2 t
&gt; name + a
5 L4 c3 m  E3 m) f7 O'Hans    ABC    '- L9 Y1 j2 _$ Q# T$ o
// 使用concat拼接/ l! c2 m! f) W/ h2 x
&gt; name.concat(a)
1 T: z& H7 y8 d+ Q& L5 F" s'Hans    ABC    '7 ]9 V! q4 D/ @

- F  Z8 P  F' ^3 n, {# Q//indexOf(substring, start)子序列位置' f9 S1 h8 C+ s
2 g2 j, i3 A* R+ e) k
&gt; text
8 e/ i3 n& f3 _+ g6 D* _'A young idler,\nan old beggar'2 B+ U2 O+ V6 f* Q
&gt; text.indexOf('young',0)5 C- V& H% k0 e" H
2
2 E( n3 B' c+ ^' k: w
) U, \/ W3 j# G9 Q- O//.substring(from, to)        根据索引获取子序列& m% t$ n  [) R- v) D
&gt; text.substring(0,)
* a1 q; I: C% |, e: }'A young idler,\nan old beggar'
& y( ?+ M, s( S$ V&gt; text.substring(0,10)
* R% E# E% W: R! n'A young id'
! G, P, ^: I# s" S" m; U3 I% a' I0 A% i) c6 v
// .slice(start, end)        切片, 从0开始顾头不顾尾% _- o; x8 n) N
&gt; name.slice(0,3)2 t$ M' P6 G& l* G5 N
'Han'$ g/ O+ v0 l0 c

5 n8 p; q- Z, F2 y- |// 转小写7 Z1 M/ B( k# L! O4 s
&gt; name; F' j" v9 \  v
'Hans'9 A! o- W; f* l* q$ v- n- F
&gt; name.toLowerCase()
8 N, N6 l: u2 T6 u'hans'* b( x5 T' v4 J
// 转大写
+ |/ @, _6 \  I0 D4 y/ ^7 n&gt; name.toUpperCase()
1 r+ o/ h; ~. K+ L3 T% w, {, b'HANS'6 f" h/ Z5 L3 s5 y9 ?0 |+ b
& i' ~" ?  i: D$ S0 {1 K; [9 o2 A
// 分隔
( z2 s+ B  v, M& V( D( _) o$ c&gt; name
& v2 Z$ O* c* y3 E) V* N& t& @'Hans'; A0 J: l1 A8 S
&gt; name.split('a')
) _. n0 x: y2 o& j- F, a(2)&nbsp;['H', 'ns']+ A1 ~4 a5 ?8 i$ x1 T: s
</code></pre>
- J" ]- l) j( _, W9 n7 G<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>
5 N5 H% @5 Q4 H7 G8 `* x) E<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>! e7 o1 c" O$ j
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>
$ [+ o( w% d) H! s* L<p><strong>null和undefined</strong></p>; }: m4 @+ @) X" n! O( s! f. r
<ul>7 Y3 t4 O" w. e5 Q2 @# e
<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>6 j6 [' H  {" k, h8 U
<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>+ \6 a+ T; B6 s* M
</ul>
& M6 i' G* W; i! l" Z/ N/ O, a1 J: l, B<h4 id="234-array数组">2.3.4 Array数组</h4>9 T9 Z' T# t! W4 j
<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>. s. ^& ^+ j# k) q
<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c']
; ]$ I# ^- e- f, y. g% w) w2 {5 I&gt; array1
+ o) P) o* ~0 O  S! y  y(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']# S+ y; O- O. u$ {8 y3 v
&gt; console.log(array1[2])  //console.log打印类似python中的print0 l! k+ t( l' P% \8 F
3* @+ }* ^9 S& V; P# Q
// length元素个数+ L- p/ u0 J) X% p, d. @: U6 T
&gt; array1.length
% @6 ?+ b, P$ A' ~/ K6* j+ f2 @; d: `( z
// 在尾部增加元素,类型append
* p" f. z# V/ q0 W4 U&gt; array1.push('D')
' l& ~' l  w# f0 {5 @7" e- m2 f. {/ r  z
&gt; array1# E6 {/ ^0 k: n" @1 i
(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']! L( R( o" K) b& g) F( Q2 s9 b0 U6 }
// 在头部增加元素0 `, _+ W) a* }; Q4 \
&gt; array1.unshift(0)9 t7 g% z( U! u, T2 T# d
83 z' Q1 R$ S. o  Z
&gt; array1
. ^+ ?; M) Y: ?. \(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D'], p  l; O. h$ G7 X! y
7 ]) J7 e- ~) C, L) K8 c
//取最后一个元素, u& [/ D9 f! x/ @+ z
&gt; array1.pop()" S, ?4 D! U8 G; k, J, k9 r
'D'4 r1 h% r: s5 P9 B  a, m
&gt; array1
3 e/ T2 o0 z9 k; H" x0 b' Y: O6 j2 n8 [(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']4 T# O2 r# ]8 Q3 F
//取头部元素
: ?3 _" O4 o6 K; n1 {&gt; array1.shift()
' Z9 W8 k  R" ]. j6 g# E0* j; ~, ~! n$ |9 {7 C5 ^
&gt; array10 @" C2 @* ~1 Y" B+ z+ m
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']1 E$ u) P. z7 o+ j- E+ S0 b) |

0 V( L6 m1 F2 U! Q) }( g//切片, 从0开始顾头不顾尾6 p) O* R3 B/ K, C7 C5 H) N' ~
&gt; array1.slice(3,6)
" w0 m* t8 Y3 Y( X' E4 ]5 s7 i(3)&nbsp;['a', 'b', 'c']
$ c# }5 |) _5 x  Z: F// 反转' P/ n- M2 z3 T$ r/ P" O
&gt; array1.reverse()
: o; ^/ |) H# a3 s; m' Q(6)&nbsp;['c', 'b', 'a', 3, 2, 1]4 [" u, C9 O9 {) Z" d! C$ k
// 将数组元素连接成字符串
, ]1 c5 }; j0 [! \( w  i&gt; array1.join() // 什么不都写默认使用逗号分隔3 d1 n" ?+ S+ h$ y9 L
'c,b,a,3,2,1'3 ~* Y$ |1 h& Q/ U! a6 ]2 R
&gt; array1.join('')
* S/ Z2 z, d+ |4 b0 v. ^; g' X, P+ w'cba321'
% H8 D* ?& a9 e0 k0 u( D&gt; array1.join('|')2 q$ q3 u: ]) E: W$ l
'c|b|a|3|2|1'
$ Q$ l& ^! j8 N) Q4 A3 g% }1 l/ a- G' A* s4 o3 o, Q
// 连接数组
% M: q( R2 i- m3 ]& F3 a&gt; var array2 = ['A','B','C']
$ X2 m0 x. N6 r&gt; array1.concat(array2): k/ K) L  y" Z
(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']
! {- T0 v' g: p/ a& ]5 s" E" R7 ^9 Z" v
// 排序
% t$ ?8 E- h$ G; M, t& R&gt; array1.sort()
1 u. }- F; ]1 B(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']& F0 D# g9 A" ]7 L
$ Y: ]0 H0 C( l6 T; d. @
// 删除元素,并可以向数据组中添加新元素(可选)
8 w) S$ S* Z% p&gt; array1.splice(3,3)  // 删除元素7 ^: j  B# d* Z8 h& A
(3)&nbsp;['a', 'b', 'c']2 [4 T+ [+ h$ W  S# j) \" `
&gt; array1
) d% k, L# U2 M(3)&nbsp;[1, 2, 3]" k  @# ?. X! C
&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素7 E: a; H% u/ u: M' G' o: Q
[]
% }* B6 V9 V; r: L6 Q! `$ U! ^3 P+ _&gt; array14 \* L* _0 i4 N- {. O6 z
(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']: `) w0 B# a' S1 h; z) F- u

6 [8 V9 M2 K( k) x  ~6 u3 A/*. f/ P3 b; [* L5 ]. E& T9 ?( L  h
splice(index,howmany,item1,.....,itemX)4 Z9 q7 X: T' S. V/ t8 p. V4 ]
index:必需,必须是数字。规定从何处添加/删除元素。7 @6 H' m# G- j8 ~& V" U( R
howmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。3 f7 o- Q' \% h+ f  m2 [
item1, ..., itemX        可选。要添加到数组的新元素
' q$ e- x$ x0 S2 o  t( `2 ?*/% z$ o- a! B0 h% g% j
# h% j9 @( L# x4 W0 z& Q  s
// forEach()        将数组的每个元素传递给回调函数
2 v2 f' L4 R8 E&gt; array1.forEach(function test(n){console.log(n)})0 @6 W/ I2 U4 E  i; O. }
1
1 z1 g7 N' P6 g 2' u1 }. Z( ~$ [' f7 Q" j
3
' m" E2 U+ d+ D& s A5 @5 H* {& E( X4 Q7 B& l& E6 g
B, H% @& m- a3 z1 ?
C2 q' p8 e  k0 r) s
// 返回一个数组元素调用函数处理后的值的新数组# t8 e' E- G, r$ R
&gt; array1.map(function(value){return value +1})
1 f+ e' u- }$ \4 F(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']
- |: U' x. p2 R- ^: g5 G& }</code></pre>
+ d% O6 C: h! {! z9 x+ I<h3 id="24-运算符">2.4 运算符</h3>& h& C- q1 `: M) M1 l
<h4 id="241-数学运算符">2.4.1 数学运算符</h4>2 ]7 q# n: c) P( n1 ?' s
<p><code>+ - * / % ++ --</code></p>* L. \& Q2 Z8 X# J
<pre><code class="language-javascript">&gt; var a = 6, ~, C8 o3 Q2 i$ i/ m
&gt; var b = 3  g6 e, S1 K; j  f0 ]( M: j
// 加
* Y5 Q( C( U6 H2 Q. c&gt; a + b- k' s5 C: b. }1 k9 g# R" i
9; I$ G; `* g1 y) \% W- W4 v5 W! V
// 减+ m& k8 E/ y: A( v0 g9 u
&gt; a - b' L+ q) y0 E: D! D, V
3
8 O3 U$ t* ~1 P" [( k// 乘0 ]* U8 k/ `7 D' n! }2 S4 @. m
&gt; a * b# O2 _/ k$ l. `7 M1 p' I
18
  j+ W" V6 t' N& j' X* M$ Y// 除
7 p& K1 ]0 P$ K* t0 D' T" z( _& I* ^&gt; a / b4 n' T' G) B4 g( X0 t7 ~
2
* j+ k* T- Z- B1 {2 ^. x// 取模(取余)
) _$ T& E" c5 P0 w' Y: y7 v+ s0 |&gt; a % b
  C2 }( K& w% |3 J5 w5 O/ }2 f0
: v6 T, Q( ~/ @- M" [// 自增1(先赋值再增1)
5 j- D* t+ F/ @# }0 ~- d; ?/ o&gt; a++
5 y5 g& V* h7 w6! `7 u- s6 P; m3 ~, ^" X
&gt; a' Y' A  B: o8 L0 [. D3 T$ M
7
( E9 F6 g6 z& I3 o: {// 自减1(先赋值再减1)8 o9 g3 q5 T$ e! F, E8 k4 ~' e) P9 Q; w
&gt; a--
* |2 K/ l7 r2 Q, K. l7
2 I% \* |& a+ d% J, N&gt; a6 Y) x/ l% ^( ?3 e7 [- b% b
6+ m' @8 j, K2 l) h2 ]; e' F
// 自增1(先增1再赋值)
7 t& C, D2 N" o&gt; ++a. ^. b7 A5 L( W, h2 w  C+ _+ ]3 {
7% S' H7 t$ G- L$ F6 c
// 自减1(先减1再赋值): J' g) i: b! u7 Y! ?4 t0 @2 l
&gt; --a
' e9 L/ I( s9 ~! T5 {4 I8 o. m6
" C/ _4 V& E7 U&gt; a5 a# ?! }, r( u. e0 i
6( N- W% b7 P9 a
8 F; H5 a1 [# V3 j0 X
//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
3 w" y! N- m: H</code></pre>! ]& ]; m/ r; X7 p; L/ F9 v4 P3 H
<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
6 l6 |3 q8 x& Q9 V; ~( B<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>
+ k2 a9 C$ J/ R" r" x: J<pre><code class="language-javascript">// 大于
+ `6 \, M  I  [! ?&gt; a &gt; b
" s0 t( F* f- X+ y6 Dtrue5 m8 V8 R0 a8 e5 Z5 S" h( s7 x
// 大于等于$ A9 j& O$ [9 c0 P3 t" d$ l/ P1 P3 m
&gt; a &gt;= b" \/ @. N& \# j; o" a- P
true
' v* _( l0 v' t# g( `- l// 小于
& e0 K& {" T- Z% U* J5 y2 m; K% }&gt; a &lt; b7 {/ Z; R3 Q8 L: p
false
4 Q! \4 {) I3 t# [3 h- @4 b// 小于等于% D3 {0 c) Q/ |' L$ a
&gt; a &lt;= b
( n. v- s6 Z) B2 Vfalse3 ]5 }) M6 ^  }7 V  e
// 弱不等于- ?9 S+ w& D$ v: ?
&gt; a != b
1 |2 o" v$ Y* c: |1 b/ r: ftrue
0 g* q+ q; B) u" t// 弱等于$ p# p- D- k' T2 T
&gt; 1 == '1'
6 V3 @. T, Y) X. v& N! F8 Ktrue
* [" I; H6 M' o$ L// 强等于
8 B+ @) J6 q* U9 k. C/ ?&gt; 1 === '1'$ y" K, g, h& [
false/ r6 z+ o/ w$ x" x% t5 V
// 强不等于/ m. K1 n5 o8 U. |: l' M6 }- K
&gt; 1 !== '1'
: Z3 q/ L8 W/ r* D% I5 q0 Htrue
  o  J3 z& Z6 k( d$ ~
3 L5 g# @5 y) r5 ?- ~! j& L6 s$ q/*
- v' l& E; n7 c; E/ GJS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
4 ^) ]0 s( E) o! O  d) \& n*/
- |* [8 d! q; H! l: Q9 C: z8 {</code></pre>
0 z9 c5 ~) P( B( q; `<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>
) ?  H: ?4 C; ]/ y/ s* }2 h<p><code>&amp;&amp; || !</code></p>
- z$ ^% g$ k8 a  x2 ]<pre><code class="language-javascript">&amp;&amp; 与! W1 |" k$ R- r! S6 m0 c8 ^$ r( M% a9 n* C
|| or
; b/ Q  V1 ~. g1 S8 G! 非" F- W1 ?5 H! k9 `1 E' f) X
</code></pre>
6 q. L- H: L0 }9 g, E<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>
2 {3 T, r' b* F- E! u) V; L<p><code>= += -= *= /=</code></p>
- ]" T1 N" u& \' y* Z% J/ ]<pre><code class="language-javascript">// 赋值7 M+ F) G) z$ K* _7 |6 X" }
&gt; var x = 3. N1 a/ n2 v! m& O' `4 Y: `
// 加等于4 P( b  h  o4 v; n: z8 U
&gt; x += 27 [% J; `/ J4 [4 U7 J
5
. F0 J( [( j/ d* q// 减等于, W; r$ s. A' ?" R) I2 W4 ^6 {, t
&gt; x -= 1' p  b+ r" t7 v. H8 v# r+ a3 ~0 C
4. S& b! f# u8 {
// 乘等于: {! P8 Q% j9 [; U4 T" S4 a
&gt; x *= 28 N, M* V. M9 \; z7 T7 F$ H
8
, b; V. L- C6 Y0 R: ]+ d8 Y// 除等于# z* P9 f$ I. {; |; s# o! U2 {
&gt; x /= 2
  J1 t! g% I7 ~8 F6 n' p7 k4: O2 u! m/ a/ a; s* C
</code></pre>& R5 A/ e  h0 _/ D; q. P; V
<h3 id="25-流程控制">2.5 流程控制</h3>1 c* ^$ n* o* D/ ^- k1 w
<h4 id="251-if">2.5.1 if</h4>+ q- t+ {6 E+ R* D
<pre><code class="language-javascript">1, if(条件){条件成立执行代码}
# G3 G. M+ Q8 {2 w' H  t7 f  a
6 \9 |/ c" F+ }! x6 o- p, G% C9 c; T&gt; var x = 3
) u3 Q* C! [! Q4 L* |&gt; if (x &gt; 2){console.log("OK")}
: P% w% u/ O* ~5 @ OK
; i( J) A: O$ H; Y; A% ]# {9 r- c; R# B1 t
2, if(条件){条件成立执行代码} / v  i/ m; `/ k5 v
        else{条件不成立执行代码}* ?4 D4 r0 W( g7 K( F

. `  d( J3 e- o0 M&gt; if (x &gt; 4){console.log("OK")}else{"NO"}
" R: R9 q7 A1 H: B'NO'
' u, x: W/ A4 z" E) @$ [6 g2 M7 t" Q$ \. h# G
3, if(条件1){条件1成立执行代码} ; U% U: G  r; H) s' `: A
        else if(条件2){条件2成立执行代码}* o, o$ V& k6 F; T" q
    else{上面条件都不成立执行代码}
0 r# i9 n: g- g$ J4 e4 z. ?) X/ B/ r3 {$ d. D
&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}6 ?8 j3 }- v2 Q; a8 n: }$ n& t" K
Ha/ ^4 k2 c9 F; q7 |. q
</code></pre>, U! a) Z# Q4 I
<h4 id="252-switch">2.5.2 switch</h4>
1 W# J: H, |* [/ N) B2 o  U<pre><code class="language-javascript">var day = new Date().getDay();
0 j8 I, s# U% k4 Hswitch (day) {) i5 T5 y1 ?4 J; M- f- Q
  case 0:: @. p) F& l4 R. |4 G
  console.log("Sunday");
4 u4 q7 d. V9 A$ }2 Z6 q  break;
" ?# y4 \4 d7 c9 F' g+ L6 S* a  case 1:, ?/ h* W# {' x% t2 |; Z; T
  console.log("Monday");
2 c- U& d) q% b, a* Q7 D  break;
$ |7 B( V. l# N; C7 }default:
# R+ r9 U( ~8 R* T( X  console.log("不在范围")
+ @: v8 b5 v5 T9 q; R  l! {}5 d% @# `1 Y5 B. R8 w0 {9 ^1 ?
不在范围& [# O* d. Q& C  {0 _0 f
</code></pre>
' o# [# r1 O; P+ }2 K2 Q<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>; r4 M6 c. ^; q: s
<h4 id="253-for">2.5.3 for</h4>
8 f5 c4 }* l; ?! }! r/ z<pre><code class="language-python">// for 循环5 B( ^( _4 w1 D1 f* _; b$ I
        for(起始值;循环条件;每次循环后执行的操作){. T+ s# M$ u6 ]3 b
        for循环体代码
* n4 l, g, |6 ~4 l9 S: |% W$ X7 \    }
% Z7 a0 K, K% X8 K/ W
# C- x& v6 g; j8 A* H- N8 W( |- ufor (var i = 0; i&lt;10; i++){
5 V' r' L6 C. f    console.log(i)
* w4 i, z4 r. ?  n- |}2 K8 U' S9 X6 I# I: F
        0
5 K5 t! M# m6 N+ s; I. p( ^        1
' ^1 B' S% b8 ]+ B7 ^1 @& U1 R        2* o! W7 n3 h/ S
        3
9 Q9 q( R1 {- w2 ?2 \2 I        40 S' y! T: m/ L- {7 R
        5' F( N( m/ r7 W7 H  \- z( n4 p
        6
$ L7 F" {. Z( f* t        7
; N/ k/ X" ~7 \5 T# A        8' M# }+ U. ^2 c( i' m: ]: q$ M
        9) e/ T8 D# X9 {: Z
</code></pre>4 Q) ?" U5 M6 c5 A. V( |
<h4 id="254-while">2.5.4 while</h4>/ M' Q: X3 M9 H/ O+ J
<pre><code class="language-javascript">// while 循环) R- N( t, m/ L8 {/ j/ n$ n
        while(循环条件){/ [) [" {; Q2 t
        循环体代码
' I& m% I7 N; k# m# s  B( X8 I7 @1 M    }
- B% ^' x, G/ {/ h2 R8 k6 H
7 `: {# A$ d, j4 N% B&gt; var i = 0
) k' }0 W$ [* N7 e) U3 T&gt; while(i&lt;10){$ t; Y- ?7 }& e" V. E
    console.log(i)3 N6 F. B7 y) f4 F/ f
    i++4 z; e* \. F+ o; g7 t8 }" X) Y
}9 q' p: H$ o8 ]7 [& a
08 A1 Z/ s, S( B. N
1
4 h3 C4 J# ]: I 23 x, N1 j, c. m* Y% w" w: l6 `
3$ n9 n. @, G. \2 k' O% l
4, O3 @1 z, i  ^) S
5
/ d1 e. k6 {  O4 T5 \9 j# h) { 6
# `+ `# S+ S% E" |9 R 75 P) Y* b3 a: z4 E. A$ a! h
8' ]4 i+ }) [1 k0 V) W) A/ b' O) H! H
9, E9 @3 y" _' q% Y6 `2 |
</code></pre># R2 H* T7 O2 w. b
<h4 id="255-break和continue">2.5.5 break和continue</h4>; e( y+ R9 _: `0 d+ ~4 _
<pre><code class="language-javascript">// break9 l2 w, z. C4 F5 q& c" E5 }
for (var i = 0; i&lt;10; i++){0 Q* u! I6 m: z( [4 a$ N6 a6 r( L
    if (i == 5){break}3 Y7 z$ V8 z4 X* I4 _
    console.log(i)7 R* V/ U1 X+ b7 Z
}  k0 d: m1 j6 p- O
0
6 g! L/ E5 F7 ~  a3 c% S% g 1
: g7 K) ]" W8 c( I 2' _. p7 z6 b' C2 ~9 j( Z
38 d2 f; [5 n% y7 ]) C( }* K) f
40 n' N, F6 V: Q
// continue5 P3 c. e4 v4 ]! v8 M( B9 p8 n
for (var i = 0; i&lt;10; i++){
' t: D1 j3 }" J) B9 B    if (i == 5){continue}5 Z0 [) Y. H7 F% ~
    console.log(i)+ w3 c( w. Z  h, P) `- v% M; M
}6 d7 T0 h3 _) P1 B% ]' ~, Z
0  w4 v( k- O" U1 e  }9 ~
1
' ^7 a8 Q: i# T! N 2* K* J# r) w* ?0 j! w; |" {' x' D
30 t( m; l; ~0 S& G) S2 z4 b; l8 X
40 c9 z9 m* L: q' Q: H) N* W+ g) ?! P
6
! E  ^7 l1 S! O) f 73 x5 ?1 _2 ]' g, L, B+ o- O: H
8- j# O5 p- R& d9 ]$ b; T
91 n2 B1 I# m1 Q) ~9 G" z$ ?

9 C3 ?- S  x' r</code></pre>8 C5 K  M2 s# F4 R
<h3 id="26-三元运算">2.6 三元运算</h3>
' R) ~1 j- K, K$ `' J<pre><code class="language-javascript">&gt; a1 w5 o5 N& Y# g0 o$ C
6- ^5 {. p* \# V/ D- E
&gt; b* b/ E: ^7 P3 P3 D* ]
3; y: b3 i$ C4 v3 l* o
4 a& Q% }- z0 h$ U! g) ?! K: ^
//条件成立c为a的值,不成立c为b的值8 o0 e3 X! Q. n1 d8 j" f
&gt; var c = a &gt; b ? a : b
: ], j0 @) R/ ?8 Y+ Y. r&gt; c
+ Z2 O/ K& a7 j( \+ p6
( @0 p5 l0 ^" H' O- m, t- K) K2 ]  ^0 r. b
// 三元运算可以嵌套) g& R% C7 L2 |  R$ T
</code></pre>  p$ {. W* J  L
<h3 id="27-函数">2.7 函数</h3>
  ^" T" Q  X7 E1 a- u, s<pre><code class="language-javascript">1. 普通函数8 I1 e$ H6 m3 W( k/ @3 T
&gt; function foo1(){/ Q% v+ U0 z  t
    console.log("Hi")
% x2 }: R3 H8 i5 D}
( M6 z+ [2 }" k1 L5 [. ^4 s  X
' P5 v) Q( j, T% o7 ^&gt; foo1()6 x+ C4 b$ k% b- F
        Hi
$ O+ q% R+ G5 l+ [7 G2. 带参数函数
# T. |# Q. l7 J1 V&gt; function foo1(name){6 c6 l, n" b* o/ W& g( C9 {! Z
console.log("Hi",name)
0 }/ ?, B/ D( R  h$ c: f6 a}
5 \% }0 z" Q. L2 M) i- O# K6 n0 H3 I& Q" F! a& L
&gt; foo1("Hans")
: C7 Z& I5 q* V% Z( D3 ^Hi Hans2 Z- a5 i; _; I! W5 d9 V7 y* K
6 }+ \: a( l! \' x# U9 W8 m" }
&gt; var name = "Hello"
. w+ \$ k; J. n8 s" E&gt; foo1(name)5 x, u! i: y8 f
Hi Hello
* G' f8 S4 l) g5 E+ G# @8 H+ C8 _* V/ [2 c/ l7 d
3. 带返回值函数7 q: G: R1 X0 C; \
&gt; function foo1(a,b){! o: i- m' k4 P' X6 ]% N
        return a + b   1 Z0 \$ [. L- b, n& w; N  {
}! z- v; \+ s; x3 \; H4 t% K
&gt; foo1(1,2): ~# @1 h! x3 |4 U+ [! u
3; x7 q; ~6 l* m4 e
&gt; var a = foo1(10,20)  //接受函数返回值; ]$ e) S+ Z8 N7 o: m
&gt; a( J: R, d; `  q3 i: |# H
30& h/ y7 W9 v9 n9 a* p% p- B% s* o
! r! U' a1 W7 X9 v; ~2 J
4. 匿名函数
9 P+ X1 w; C% P& u* h" B6 ]' B' y&gt; var sum = function(a, b){9 G7 @& \6 B- m
  return a + b;
& a  R- S1 A8 _}
2 [5 Q; q7 a( @: J8 {7 _&gt; sum(1,2)
1 y! @5 F4 U5 l' n3 ^4 d39 N. p% ?7 f: y6 z
% Z% M# a7 c3 c4 L" B& F+ U: D
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱! S( o* i+ k- W, ?0 V' L
&gt; (function(a, b){, D9 V9 ~. W: a- k' L0 S) _, b
  return a + b
7 x+ |& C$ O6 P: k# G1 a/ t$ {2 j) N: U})(10, 20). D! T( k$ X6 F- X
30
! u' [  E: Y; J2 n' V. z/ F, ^( g  Q
5. 闭包函数8 b; K& L8 t0 W; n) s
// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数
4 D( E. w4 X) I# jvar city = "BJ"
2 c6 ?3 `0 A+ W/ F  L; Zfunction f(){6 r. ]9 S' k+ M
    var city = "SH"
' _8 `* B2 A  K! N- Q) J! b    function inner(){
" u9 C  T8 H: i. ?  y9 n: A        console.log(city)  o3 t$ }" f5 H* ]4 M
    }0 ^" M! b& B6 Q2 u
    return inner
, r& `( o6 }1 [  X}. K! K8 O/ R; q3 b3 y+ _& [- Q/ Q! _
var ret = f(); r. F4 D& a6 ^# M! `3 d
ret()
/ K( c  I. r$ V( a0 r0 N7 u0 b执行结果:
* w0 f9 j) F  S7 zSH7 D0 e- t, y8 f. V; Y$ o

4 O* N& Y" a4 U2 h5 e</code></pre>
9 b9 i' g4 F  B) c5 V) v<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>( x+ \3 t- k/ J2 e1 c( F
<pre><code class="language-javascript">var f = v =&gt; v;
, x" M& ?$ U( u7 C6 P// 等同于
; h6 q: U% w" r0 v8 xvar f = function(v){
. p- v9 {! Q( U  return v;# W# \9 {# |5 M
}
. y" x& n, T' z4 j' h; R& b</code></pre>
( p! j8 k7 [. r& s" x: H% C& K<p><code>arguments</code>参数 可以获取传入的所有数据</p>
  p  n9 v. A3 E( [* o) t; W7 j<pre><code class="language-javascript">function foo1(a,b){$ Y! ?) S" S1 U/ v/ y" U; ~' \
    console.log(arguments.length)  //参数的个数 0 o8 O4 k% ?! m4 O
    console.log(arguments[0]) // 第一个参数的值2 [- B8 E* T) J" l# H6 l" h7 Z0 Y
        return a + b   ; T$ d. z. a- h: k* |/ r
}9 C7 H4 [7 w# y8 `6 z" ?( h
foo1(10,20)
/ {8 h* y' D- b2 L结果:
* q; E! P: m! N" y6 i* J$ F8 P 2          //参数的个数 + V, ?( |: s2 J7 |4 v' r) b
10        // 第一个参数的值4 E" f: k9 ~3 M1 n& A5 W
30        // 返回相加的结果& K* i; |8 }8 U
</code></pre>
& |0 v  A8 d) e& C<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>1 O: j5 W& g) Q7 C: O. i
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>
: K6 b) |# i0 x# B) M6 o  V  O$ d' l<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>8 e- R9 E9 n( A/ k
<h4 id="281-date对象">2.8.1 Date对象</h4>
2 j1 l' s+ O5 `6 O<pre><code class="language-javascript">&gt; var data_test = new Date()2 Z2 i. U: n3 ?4 p& w& K
&gt; data_test
. `# {* ]' Z; n# @7 x9 @9 dFri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)$ U; P5 d8 f" D4 k1 O& g
&gt; data_test.toLocaleString()
7 A# W! Z$ v. `& ^9 [1 P'2022/2/11 下午9:44:43'
9 D! Q" H( F4 K9 b0 Q, K! X% d9 Q- n: l& p
&gt; data_test.toLocaleDateString()
' o; O  z  T/ x: V'2022/2/11'' ]! k& d" C) z2 u
( G/ t4 p7 p5 P2 e
&gt; var data_test2  = new Date("2022/2/11 9:44:43")  h+ R+ X8 e$ t0 E6 `! ]! b! }" b
&gt; data_test2.toLocaleString()
8 Z' f' ]! w: Q* J* x'2022/2/11 上午9:44:43'. a3 n7 s3 Z! F0 O4 v

) I$ D4 X9 f7 T9 F7 }! P4 G// 获取当前几号
  E. u. y( y8 Q! x3 R! y) E5 D0 F&gt; data_test.getDate()
0 w: z2 b/ M& d6 w8 G" `1 C116 Q1 N7 D% q. ?( I
// 获取星期几,数字表示
  _/ H$ a2 s- G6 l5 _&gt; data_test.getDay()  2 b5 E. }$ P3 g: E
54 Q, w& T/ M5 f% r7 C5 @# K2 {
// 获取月份(0-11)
: R) W! x' E  V/ ~* _2 k&gt; data_test.getMonth()
: @7 R; E* m: |4 t  ]) t; k: ^1* S  `! h# b4 N" V+ w
// 获取完整年份
7 f9 }) f. k, p4 `/ z3 E&gt; data_test.getFullYear()3 c  n; `/ A2 g5 p
2022
/ x3 H& |! l2 H  Z9 s// 获取时
: p# R6 A2 V( r' i' x2 w; I* i&gt; data_test.getHours()
5 s/ i: L; q0 T: M6 s21
: {0 e# [: C" J) V// 获取分
/ M( {: ?. Q4 A9 L, |&gt; data_test.getMinutes()$ Q8 G) n+ _. l$ J
44& u+ `, b8 P8 I  F  r
// 获取秒  U" A/ g; b9 f* C8 x! b+ x% P
&gt; data_test.getSeconds()
5 c" L7 @3 p& E  |2 V& T43/ ~3 r' D7 `! c/ w
// 获取毫秒% d2 G: `$ f$ G$ [/ p* ~! _
&gt; data_test.getMilliseconds()
+ H* {# F3 i: Y2 X, g1 l( |290
+ [7 L+ s$ v: `// 获取时间戳
7 x9 M# \. X4 p4 d, ?4 Q2 @&gt; data_test.getTime()/ N, B/ [& j' k+ l& k) Q: E! Z& c4 j
1644587083290
! M8 W" s! H$ K</code></pre>
& q4 U2 a- z; m8 R6 w<h4 id="282-json对象">2.8.2 Json对象</h4>
3 X& U3 S% E5 b* i& }! B  v<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串$ e/ T$ \0 Y4 g, G9 _% y( a, B
JSON.parse()  // 反序列化,把JSON字符串转换成对象
- o+ {/ p' ]7 e0 [. G9 u+ v, l, |4 E! y- `
// 序列化/ O# d# W$ y7 O
&gt; var jstojson = JSON.stringify(person)
% P3 {4 w! b" e  S# ~3 {&gt; jstojson  9 B- L  O# r- s) \" Y, J
'{"Name":"Hans","Age":18}'
4 m) V8 B: ^" F1 d! N: ]" \! X6 z) x; \8 y, V1 {* }5 R6 N. |% w+ }
// 反序列化
5 b* j$ G7 }" x' H7 O&gt; var x = JSON.parse(jstojson)
* b2 L1 n1 r  y+ N) p/ M&gt; x
) i% R/ Z$ U3 q* \{Name: 'Hans', Age: 18}
: Z& w0 C- t& k7 r. W$ A4 }&gt; x.Age
+ I7 N9 N+ ?8 p/ Y0 j18
7 q7 o& u* `$ r/ [. d</code></pre>
* `( \5 ?) a1 o<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>
5 _" B. s0 ^/ N; D; u# p<p>正则</p>( e' L" h% Q2 S
<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");
% Q2 k3 m# q5 c! o0 a3 y&gt; reg1* X3 o* ~2 u- a9 I% ^
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
/ ]: @! q) x: P&gt; reg1.test("Hans666")# i+ V) ?5 \$ r! E
true( ]0 P8 B  S. ]+ ]
) E' t$ F) j, R/ s2 p0 ]+ o; c
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/7 D& t1 U& ]! w" q
&gt; reg2
- f6 m2 a7 Y* @; e% ~* J/^[a-zA-Z][a-zA-Z0-9]{4,7}/; {8 [% K5 K- e
&gt; reg2.test('Hasdfa')/ m3 R5 N: o. C8 v4 X2 v
true
9 D: r5 a5 j- n& J$ O7 u7 ]3 D' U, G  b' c, `" g$ V
全局匹配:/ S5 W  E8 k/ \( Q
&gt; name* h6 P8 Z; P! l/ K8 w
'Hello') X! q+ L. M% Y& o) R2 g
&gt; name.match(/l/)
& [9 A. P+ M& m( G& Z( V  u['l', index: 2, input: 'Hello', groups: undefined]
& _% r# y" F' s: p
1 I8 h' |# V  j0 g4 w% N&gt; name.match(/l/g)- d: N5 v# t4 q
(2)&nbsp;['l', 'l']2 R/ `' N4 r3 |; M7 s2 f7 i
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配, Y% G* H( c% o5 k
% d/ c$ W- S6 ?7 P, i
全局匹配注意事项:! }: p- }' C4 E8 {
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g, b. {& k& M, a4 U3 p# p
&gt; reg2.test('Hasdfa')
/ ]9 Z3 ]8 V' f9 k, a6 }true0 O# @2 n: {7 g4 t5 s  a8 t/ n; b0 r
&gt;reg2.lastIndex;
( w+ R8 s( A* U5 Z& ^* C/ `3 G( d6
: ~7 d3 F1 G' g&gt; reg2.test('Hasdfa')7 Z7 n- o# v, k/ H
false
: B* w! V- J$ O; q. e2 x2 @0 b; A4 `&gt; reg2.lastIndex;
0 G& ^8 U- u$ v& E' U! \0
! S: q! J2 Y2 z' G7 @6 E4 ?+ V- w&gt; reg2.test('Hasdfa')
- \$ a4 x! B3 ~0 I$ otrue  T! y/ E* H+ y6 Y* x% `
&gt; reg2.lastIndex;
: c/ a4 \8 s& O7 H6
6 ^( m# \8 y; F5 W0 L; _&gt; reg2.test('Hasdfa')3 w* _' x8 h4 |1 E# a6 L' t
false
2 Z2 ~3 j3 u5 q: l; P% C&gt; reg2.lastIndex;9 P5 E8 Z) p1 g) o
0& ?& B3 n# J3 D3 ?3 g8 h
// 全局匹配会有一个lastindex属性
, Z% a4 p2 n2 R! k&gt; reg2.test()! A' p" S, Z3 Z9 g+ t# b5 Z
false
8 C3 P2 p! m5 J# \( v# [&gt; reg2.test()/ h# A. c" z. Z
true0 G" P5 H4 L' w
// 校验时不传参数默认传的是undefined2 g  R8 U2 p% u
</code></pre>
3 p5 w$ |  _' e; X3 j6 C<h4 id="284-自定义对象">2.8.4 自定义对象</h4>
( v! H& W, H6 k5 \8 v<p>就相当于是<code>python</code>中的字典</p>& |8 k( f- e/ e: f$ r, y! x
<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}+ c1 c: _. i1 H3 U- D; y( A
&gt; person
" m' n  h% z' L, ^! u1 R3 R{Name: 'Hans', Age: 18}! m0 L5 L5 h* O2 _! e: W3 V
&gt; person.Name
' Y; G& l7 q3 I: m4 b'Hans'
1 x- J" G% c2 _- G/ C$ ?- r1 M9 m8 h&gt; person["Name"]; w! R& I! z1 q3 S5 J# M" z
'Hans'
) K  r8 k" r6 l$ S2 b# V) ~& A0 }$ m3 C; ]
// 也可以使用new Object创建
% T1 w* i8 s5 J1 k8 B& x$ {&gt; var person2 = new Object()
& [+ }' h- G7 W9 _3 W% X. h2 v1 V&gt; person2.name = "Hello"5 z* Z' Z8 J  M+ d
'Hello'
+ R1 R. i+ K) l/ w- u&gt; person2.age = 20
1 ~6 B$ h. K) K: L20
% _7 W/ b+ f7 S3 D& y5 M" u  R</code></pre>
2 A3 r* ^% q* I  |<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>
5 c& Q9 P/ U5 y<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>
+ z" @% B% K2 Y& d9 V<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>
+ v' G. X4 d, W3 j2 W; A<h3 id="31-window-对象">3.1 window 对象</h3>3 |* T5 k: |! C6 i; d+ K6 s- W
<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
8 d7 U. l, C9 m/ r: b7 K5 Y; O) c<pre><code class="language-python">//览器窗口的内部高度
9 h  F6 I# a2 E' O7 @. O/ [window.innerHeight
3 s3 p  J3 n; g* c9 [: h706
# U  M; v4 @! n( H) D. Q9 a//浏览器窗口的内部宽度
2 q& k; K5 K7 }window.innerWidth
5 N* R. I" r2 \' ]/ c5 N& f1522* ~: D3 r. a7 M1 h8 p* o1 _
// 打开新窗口1 M* O% O0 M& {) z. a- t
window.open('https://www.baidu.com')& W1 J9 ]7 C! G4 y( R, ]0 {) R
Window&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}) Y2 s6 }: x/ M" `, l# x, C) l
// 关闭当前窗口$ N: Q9 [# d# G  \5 u+ U+ k
window.close() 8 q2 @' }6 C/ }6 I+ `* X5 i" x
//  后退一页
7 M- X( Z2 [8 ?0 u8 b/ N. l, uwindow.history.back()
0 X) z# ?1 U6 `; P& ]// 前进一页6 w5 v" U! {2 n' ^/ l2 i; d
window.history.forward() , K( S: S; R6 |* ~' Q+ |/ j
//Web浏览器全称5 k1 q3 e$ T3 U2 z2 P& z& H. \
window.navigator.appName
/ |: J3 e5 d6 q8 N. B/ B'Netscape'" L9 `2 H3 s+ `: F- a
// Web浏览器厂商和版本的详细字符串/ f, M; B; e1 I% A) S. n. P
window.navigator.appVersion: O' v3 Y* f: L- k/ c. o1 `
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'7 w# H/ B' m- n: y
// 客户端绝大部分信息
2 S7 ~/ M! N# b% Dwindow.navigator.userAgent
+ c2 c& M6 v( S% g% _'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
1 F6 c+ X/ P% w( A1 U// 浏览器运行所在的操作系统; S$ b0 P5 ]* S& G7 s
window.navigator.platform: `* r* p+ p" {  u, a' ]: s
'Win32'
8 b- l6 r7 @; d& T7 A( W; O; ?
) v4 O' A( U2 x8 h4 v6 p" U//  获取URL
( N6 S# ]% e4 k; g6 ^1 }" z, ywindow.location.href
7 q' n( G- V! J( l4 B// 跳转到指定页面
9 P* W5 C2 l( s% @. Ewindow.location.href='https://www.baidu.com'
3 c# Z8 O9 @2 W// 重新加载页面: K6 _) H& [9 b9 C5 A
window.location.reload() - s4 Y8 `* Z; \% a& i- _
</code></pre>% U" v$ M8 q/ w6 B
<h3 id="32-弹出框">3.2 弹出框</h3>6 l% @* j! A6 k+ J
<p>三种消息框:警告框、确认框、提示框。</p>$ m1 y0 A7 M# `, z, @! d
<h4 id="321-警告框">3.2.1 警告框</h4>
# T+ N, v! R5 T/ N2 r  X3 X% ~- D<pre><code class="language-javascript">alert("Hello")
7 r: ~, V8 A# r* r1 ^" h7 e</code></pre>
4 @" e5 B7 q" g( }8 z<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>. P* Q  k' f! a- Y& P
<h4 id="322-确认框">3.2.2 确认框</h4>
6 E+ r( |& n: c) n, r: g" B<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>
  J7 A, {$ m8 t% Y1 f( o<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true
0 i$ r5 r" [( S* {3 htrue
: d$ S; Z$ H/ M3 T&gt; confirm("你确定吗?")  // 点取消返回false
7 K$ Q- G7 D/ @5 {7 C0 u( e* Q* Pfalse$ n) i6 M6 a, J
</code></pre>* G! P1 z( W( v
<h4 id="323-提示框">3.2.3 提示框</h4>1 H/ W: C3 L$ K2 m) U) v, |$ \
<p><code>prompt("请输入","提示")</code></p>
, S. A  x2 d) }5 E# ~1 N* w<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>1 G6 J% M5 E4 J4 M; U
<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>
. |, u8 A% d0 T: Z3 J<p>如果直接点<code>取消</code>后端收到<code>null</code></p>
0 h" _& s2 Z9 A8 m( }0 M; F) H<h3 id="33-计时相关">3.3 计时相关</h3>
% V4 y9 h+ [5 T1 g$ r<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>
8 a- D- t$ o& ]; F, ?1 b<pre><code class="language-javascript">// 等于3秒钟弹窗
* F% l) }9 @) C5 B+ tsetTimeout(function(){alert("Hello")}, 3000)) v3 h( |5 \- \

+ d+ Z. {0 ~7 @7 ]var t = setTimeout(function(){alert("Hello")}, 3000)! f! S% _' k  Q$ k/ A7 N( s. d

$ M; F# A' N! k. R( e// 取消setTimeout设置
0 S5 i9 H) L$ |+ |# d) c+ lclearTimeout(t)0 \3 S/ z% v; O0 ]5 b
</code></pre>
8 d8 T) y- ^9 H<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>  e+ ]- P- b7 M/ p7 ^$ T+ U
<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>% N* \. F) _$ u
<pre><code class="language-javascript">每三秒弹出 "hello" :
+ X7 z) M, B* d4 j6 h; l3 a! |( YsetInterval(function(){alert("Hello")},3000);+ t# J8 _( Q3 A3 _, s
</code></pre>7 u& B) z+ e" {* x
<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>
8 T0 c5 _# L+ r<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);
% V# c0 _8 a" a" _3 v6 `//取消:. r7 u1 O, q% Q& e/ U; s
clearInterval(t)" H* b3 P, j7 |. d: l# Y( ^
</code></pre>
& Y# k1 F; Z4 a" f
* D3 L) A) K: W& w, `) [9 Y
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|飞雪团队

GMT+8, 2025-12-15 00:48 , Processed in 0.080372 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表