飞雪团队

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

前端之JavaScript

[复制链接]

8126

主题

8214

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
26708
发表于 2022-2-12 18:11:35 | 显示全部楼层 |阅读模式
& h( b: A; A1 c# `& ^+ s$ d2 j, W6 R
<h1 id="前端之javascript">前端之JavaScript</h1>6 c& r) c+ V$ G
<p></p><p></p>: |& h) P% m' `2 n3 s
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
* n" T+ ~( q& }2 X9 \! ^- _2 r& z3 _<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>
7 Z8 u' b' T9 J- o% P- i它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>
, {! u2 I" D' a2 T它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>
: v" T8 ~# C0 ?, s: ?8 o: `它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>, r7 r! o$ [( v! {
<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
+ }" q5 F5 X" ~<h3 id="21-注释">2.1 注释</h3>
0 t& K$ |" O/ R7 N& c<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>6 O; Z# I' {" s$ p! k7 c
<pre><code class="language-javascript">// 这是单行注释) \& [9 a% ]$ J) d5 |

% H! U  M1 v" x  w/*
) }% X7 ~# H0 `这是多行注释的第一行,
/ m% i0 C' X9 |9 k2 i# x这是第二行。
# H7 j+ H$ {' U) b, ]4 N$ I! y/ Z*/
( |, I; E# S+ d' P  Z</code></pre>
( M4 m" G4 H/ L& U, K; |8 [" h<h3 id="22-变量和常量">2.2 变量和常量</h3>8 p) k5 I3 w, j  V. m  I8 b. M" [4 A
<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>
; Q4 P- S  c% p/ T<ul>
+ n, O7 c. @1 K# w9 [' ^  l5 z<li>变量必须以字母开头</li>/ b) \- s; f; _3 q& f' ]
<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>
" Q" q$ D& l$ R, V0 S<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>0 K& Y  V3 d& U* p8 B
</ul>
; K& A# y! @9 ^6 l- |<p><code>var</code>定义的都为全局变量</p>
+ d3 v8 `/ K9 l& ~<p><code>let</code>可以声明局部变量</p>8 p2 ]5 i; t  t: G9 Y
<p><strong>声明变量:</strong></p>9 `1 j& f3 G* j% s. i
<pre><code class="language-javascript">// 定义单个变量
& z: a' z+ k) k0 ?1 Y&gt; var name
3 g( Y4 u* P6 D1 F- x+ n" t8 U- D&gt; name = 'Hans'7 n1 h$ g9 A7 K: h9 d
//定义并赋值# M3 b; G0 \- z9 _% C+ P  H& `% t
&gt; var name = 'Hans'
- m) v" m; B$ s/ T1 R* z&gt; name3 b( }1 S3 M( e$ a% q# h
'Hans'6 w7 K# q% P* m

- k0 O/ h& b; ]/ Q& t5 n// 定义多个变量
! t6 d' ~6 I7 m$ U+ Q1 D- W&gt; var name = "Hans", age = 182 G1 Q' o# I& P1 V7 P; x
&gt; name5 ]$ D# X: P  l6 v
'Hans'
/ m( X/ Y( a7 s# E5 A& \: L' J! o&gt; age& H# q# X7 R1 j. I
18
9 h' ~( m7 {; b# M
9 ]# p; H. y; q  _5 L- I//多行使用反引号`` 类型python中的三引号
: D$ `% w: u; g; l$ z&gt; var text = `A young idler,* u" z9 b7 F% _, Y5 U
an old beggar`
4 e) p. w6 D: y5 W&gt; text
$ j' j* b3 P, l9 ]. y2 L( ?& h'A young idler,\nan old beggar'. v( i% ?+ R. e5 A# U
</code></pre>1 Y# _6 i' D5 T6 D/ x
<p><strong>声明常量:</strong></p>
6 [9 `: a1 {: U2 }/ A8 p' I% ^<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>! N$ ^8 X9 v! \/ ~
<pre><code class="language-javascript">&gt; const pi = 3.14
, z& Z3 s  h% o% N9 N1 n9 S&gt; pi# [8 x/ C: v! X1 P: g5 X1 g
3.146 Y6 |9 V/ o  V& h, ], [
&gt;  pi = 3.01
& V6 s( N" c/ f: e4 i+ [: m, s5 iUncaught TypeError: Assignment to constant variable.
* a; G" J, H; q% I    at &lt;anonymous&gt;:1:4- a9 U! K6 b% U. v/ c' C
2 L/ [! F5 T; [+ n% |9 _) V
</code></pre>
  ]  \/ F# H/ C: C* _<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
8 m3 g9 ~1 l! D: L* l% ~4 X<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>/ U% b. L. B$ z( Z: g
<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>4 B! L. s% R( P) J4 f& N; h
<h4 id="231-number类型">2.3.1 Number类型</h4>
- [2 ^% U  J4 S; u: L<pre><code class="language-javascript">&gt; var a = 5* `' D+ ?$ B/ p; _
&gt; typeof a   //查看变量的类型  
: X9 d# c  h+ ^& v: g0 inumber' Q1 z  `( W6 O; Z
3 G  K/ h6 M( n- b" [( i
&gt; var b = 1.36 z9 j9 f1 V2 g
&gt; typeof b
) s7 i( {0 O* X* Inumber
. w- O# |' h: d! l& d0 [" l8 ^0 J) i+ ~! W3 N3 a0 {
// 不管整型还是浮点型打开出来的结果都是number类型# t  m. Z* b1 |' e4 B) i# V

! \4 p& a; u- O  {9 ]4 Z* V) V6 ~' l/** h4 c* t4 [! b3 k4 p
NaN:Not A Number
- h  c9 [" |+ d$ SNaN属于数值类型 表示的意思是 不是一个数字
' l+ P8 _. G% q*/
0 G% b2 S+ Y0 M+ x5 ?
2 J% U  h4 \  }; v" g2 VparseInt('2345')  // 转整型4 l/ k+ A$ {; E4 {
23452 u; a# U5 F# o. f1 ]# s+ E* |
parseInt('2345.5')7 S8 n4 {: h9 H. b' F' S! R
2345
7 ]5 E+ Q9 [( w! M% d: y* U' HparseFloat('2345.5') // 转浮点型
- ]5 ]  E/ i" {$ F2345.5( R) n% N3 }5 q! _: n
parseFloat('ABC')
! o$ _& m+ y2 cNaN* e1 s4 U7 i3 M+ N/ G4 a* @
parseInt('abc')
1 g8 L& I1 Y: b# H! I3 |! t: {9 WNaN
, @+ T( C% G* I* D& d$ x2 y* t) Z</code></pre>
8 ^% [4 `) t4 W4 u+ S+ t<h4 id="232-string类型">2.3.2 String类型</h4>
# h6 b: e% m/ w9 ~6 d<pre><code class="language-javascript">&gt; var name = 'Hans'- K, O8 ?! @, b! _+ m0 a
&gt; typeof name4 W% j( f( G' J- {" d: v
'string'
& {8 e+ J6 |& v  u0 V" G. U4 k( `, ]0 d2 j/ X3 |
//常用方法( `! ]. Q- w. t
// 变量值长度' \- O4 @) O! k* a3 x
&gt; name.length3 b0 X" w0 f9 T9 F3 A8 b
4: k8 T5 n8 _) Q8 P1 n
// trim() 移除空白
- g: Z2 w$ J5 G5 t&gt; var a = '    ABC    '
# s0 \2 N) |6 z" }; j  c& [&gt; a
0 b* t2 ~  {9 v+ A'    ABC    '
, k% p5 u" l- _8 Q0 P&gt; a.trim()
3 V7 w0 G$ Y/ G, _'ABC'* D: G9 c( b. t
//移除左边的空白3 f: q; `) L! l" s
&gt; a.trimLeft()# g9 I2 E' U- M9 r6 L. i6 Y- V
'ABC    '0 E9 k. Q* ^* |
//移除右边的空白+ f! `3 M& F$ o( o) h2 D6 T  A
&gt; a.trimRight()6 j8 [0 c3 R, n) z; |$ _) Z
'    ABC'+ a9 K0 a) }2 Q+ b( Y. _% O

: m6 X: K# Z" d6 X" A) G//返回第n个字符,从0开始
& I  M8 b$ S! M. n4 n+ a1 \% _&gt; name
- ^$ N8 b0 \: S- n% v5 m! p# k'Hans'
0 R7 w, Y' y' @  d&gt; name.charAt(3)/ B9 D8 T+ A0 q4 T, I" D+ f$ t2 k
's'2 |3 [* H& o. R5 F1 o
&gt; name.charAt()
' a4 R/ W7 c0 v' K'H'
& Z; p; K+ u( \" V8 M9 b4 |&gt; name.charAt(1)
+ g* `" M1 Z3 X" \- j% Y4 h; _'a'9 W( E6 _+ d" q  h4 q
  J7 k4 B" a$ y
// 在javascript中推荐使用加号(+)拼接4 p, i( W- Z' N2 I7 t
&gt; name3 N0 f7 m  g; s* g- M* n: F
'Hans'8 B' p/ w  a2 ]% U6 Q
&gt; a1 o9 M9 S1 ]( M# B
'    ABC    ', t9 {  T7 x& q% r
&gt; name + a  c( s' Y- Z. T
'Hans    ABC    '
0 n; v6 X" a& S& }: a2 x5 s2 z  U// 使用concat拼接" g8 c4 C* |: e* I3 d* _- Y
&gt; name.concat(a)8 ?3 Y  E6 F& R0 ^# ?% |" c
'Hans    ABC    '
' n$ \' w  t( ~
9 u. [/ X* W0 ?+ k2 g//indexOf(substring, start)子序列位置
9 S( B+ h/ g* u* N# q
- v/ Q+ o8 Q, E- j& i: f$ C+ l&gt; text
, H$ g7 g: T# C) f& ?' U" H! j'A young idler,\nan old beggar'$ |6 Q, g! I2 I  D
&gt; text.indexOf('young',0)
% X6 x3 h6 {+ W- z( }" L2: s  ?( _) l! M8 k* c8 p
; q7 O: o" _) E5 h
//.substring(from, to)        根据索引获取子序列
% z! U+ Y+ o; a8 x' [* d&gt; text.substring(0,)0 j8 h7 B* c' K  \  A/ t0 V2 D& N
'A young idler,\nan old beggar'0 B9 |% Q' o5 Y& ?( d+ B
&gt; text.substring(0,10)
4 x. z) {! f1 C- R% s$ O! C'A young id'
- Y" a3 b# |# ?4 p" P3 P. f. R' \- w! ^9 F& {  T2 a6 D+ J
// .slice(start, end)        切片, 从0开始顾头不顾尾
4 R5 b, V% e/ a2 F, D2 o&gt; name.slice(0,3)
4 |% ]9 ~1 I! v/ ~* Q4 l'Han'& {3 f) A9 f$ s' ~  Z

( m1 I. a) h  W9 n, B// 转小写
. ?/ g2 k$ v2 r4 k% M&gt; name
/ u. Y/ u' H0 V% o. U'Hans'
' v6 e& Y) M! Y  G8 ]( T0 k&gt; name.toLowerCase()7 g" h$ B6 {; ~+ b& p; E% g' {* g
'hans'! N* t1 q( N; T. c( W/ ~6 r
// 转大写
8 S8 ]" w4 E$ i, ]1 u&gt; name.toUpperCase()8 h; O+ K) {" j& a/ Y) B& [: B
'HANS'1 y; }5 p" a8 s1 v1 o% a+ ~+ W+ j
, G& b1 O) ^- C, _2 Z2 [
// 分隔5 R( i4 Z5 s3 k2 m- v
&gt; name/ \7 `# s) @$ M) E
'Hans'
! \  d% e. W4 y: G) K  x$ z&gt; name.split('a')
8 e* o: x7 R6 P5 R* J4 x& C! a; j7 S(2)&nbsp;['H', 'ns']+ B1 {( k8 l7 q2 Y% R
</code></pre>
; h- S  D1 d. M9 b9 w) |* `<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>
: V; y6 o- s- c+ ~! x. Z4 [<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>
0 V6 ]; p( P+ D2 |: c6 s& A7 l5 ^<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>, y* Y+ p# V/ E, r; h) }/ R
<p><strong>null和undefined</strong></p>
0 c: z2 `. j5 e. j2 n<ul>
6 j2 |! h# p' w4 r. U2 Y<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>
: R; r+ j7 z! `+ G1 d/ E4 ~) e<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>
. t: }8 S2 t& d1 a/ c8 J, z</ul>8 s8 L" p* w1 o) C4 E
<h4 id="234-array数组">2.3.4 Array数组</h4>1 U6 Q9 x" @  R( F! {/ _
<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>- `) Y7 o8 r" R/ a
<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c'] : n( b8 ?' j1 M* p: X" b. R
&gt; array1
- _' f5 X6 X/ g  `' T2 s(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
1 k. D% R( g/ F0 D7 G&gt; console.log(array1[2])  //console.log打印类似python中的print
  B4 Y2 T. Y' V) U/ Z3
8 I" v' y; q" o3 k// length元素个数
0 `( k/ z; \* U3 Y8 ]&gt; array1.length
9 y0 U2 \; _! |8 M. P6; G1 v" E; v$ p& E: |+ j- m( a
// 在尾部增加元素,类型append7 E  M- _8 Y/ E4 x- w9 w# p
&gt; array1.push('D')
7 K5 \* Q9 m% |% r8 B7
; I5 s$ u( A% A&gt; array1
1 O6 y2 b) b# r; J(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']
  M; X+ c4 J- x. ~7 {( G1 N! {// 在头部增加元素( F) O: n, N8 \
&gt; array1.unshift(0)
) ]0 z, {& g9 L2 F: z! Z8- h6 w3 L* d' ^% X+ \$ l1 d
&gt; array12 S7 N) W) c+ f6 w6 r
(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D']
  y* T2 Q& Z4 k8 p  v/ `2 D, `: \" A6 i6 {
//取最后一个元素% H: k" `6 h" r# [0 D
&gt; array1.pop()
; `4 e1 H; J8 G'D'
, Q) R$ j$ p3 q: N" m) n/ ^. C/ W+ O&gt; array11 v8 W0 d' Y8 K
(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']7 v# Y1 m9 b! p! p
//取头部元素
9 q; F* |' a7 p) R" G6 f&gt; array1.shift()
' G6 [# l4 V! o* \% T) ~0
  L% S: \, m! L* ^$ x&gt; array18 K2 e" S$ g1 V2 m9 C0 P- l/ i
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
2 X# _# ~  Y" \0 l) J7 e/ Z
8 |' I. o" J! x' H! _( K& R, M//切片, 从0开始顾头不顾尾
! a3 E* I* O" n9 D&gt; array1.slice(3,6)& D# Y; t4 p" ^- h1 Y0 m; c; @
(3)&nbsp;['a', 'b', 'c']
! l3 p: Q4 c9 s0 [9 `" Q/ X// 反转- t3 C8 \5 a- v: [7 a
&gt; array1.reverse()2 G+ s( Y1 [5 e: y7 g5 t
(6)&nbsp;['c', 'b', 'a', 3, 2, 1]2 {, x- M2 Y" F5 h
// 将数组元素连接成字符串3 Z0 i. V) H) L- r( |
&gt; array1.join() // 什么不都写默认使用逗号分隔
$ Y5 c: m& p8 `( g. M'c,b,a,3,2,1'2 e3 l+ m# f$ G/ @( i$ z. A
&gt; array1.join(''): A& R1 F- {& A
'cba321'
% D5 B8 f8 R( L&gt; array1.join('|')2 Q8 e. S- s( W+ T  g& c% t
'c|b|a|3|2|1'" }$ _. P: X  f( Z& d

& C( P0 J# ]+ @- F' C6 x5 k// 连接数组
% }7 O5 n* d: W- Z&gt; var array2 = ['A','B','C']# e. j: u& `# u6 K
&gt; array1.concat(array2)4 M1 \3 M  j) ~# |5 e9 U! C
(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']
, _" Y' S& g0 a& w/ w  ~
, o6 Q8 @3 V' F( C// 排序  Y; _2 _! E& i2 c* E5 C+ m
&gt; array1.sort()5 O9 o, E" w! x6 L& o% o" ?7 q
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
+ X- d4 r# G6 J8 e7 q/ q4 I2 h% p/ }  E; K
// 删除元素,并可以向数据组中添加新元素(可选)
) f3 \8 S% E' D# N&gt; array1.splice(3,3)  // 删除元素
  a/ j$ C9 \/ x' K$ B+ w7 v5 d( K4 e$ _(3)&nbsp;['a', 'b', 'c']! w8 a) n# _6 e* I+ P( u3 g
&gt; array1
* h; V9 b6 F: D1 t% {(3)&nbsp;[1, 2, 3]
1 E' `- C- b. q&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素  G' ^3 h0 C& A
[]/ P) h0 _* U7 G; H  v
&gt; array1
7 I! D0 w) Z1 R0 O: {$ J2 {(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']
0 f# W* `  O+ `# k3 g2 B5 j& [
! o5 ^9 B7 G1 s$ d% l3 N5 }/*
' t( N3 Y1 b4 jsplice(index,howmany,item1,.....,itemX); v! R% U, x" j
index:必需,必须是数字。规定从何处添加/删除元素。0 t: h% k; R5 {' _- W: \0 i
howmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
' V/ _1 O5 L& N, P) @item1, ..., itemX        可选。要添加到数组的新元素
/ [0 K! q' w6 d  K1 j! |: E7 ?* [*/& d+ I$ z7 n1 x9 b" u

  v8 s- C  W4 V3 }: W! w) J// forEach()        将数组的每个元素传递给回调函数
& c7 b$ c  o* F+ m6 ^. u7 {% _% K&gt; array1.forEach(function test(n){console.log(n)})
+ @5 `( `* t5 U' {3 A6 p 18 _. a: z0 M7 {! Q* X# F7 ~& j6 h
2
+ K$ ^7 |- ]2 x$ e, T8 z 3
5 f0 F, C" }; S) i7 p A
4 p5 d& F3 I5 K1 i5 h B' T- \, S( M- E1 V* M- @
C% H. u+ ^( C8 E$ H8 C# ~3 W
// 返回一个数组元素调用函数处理后的值的新数组! n5 L5 s1 r$ b& S
&gt; array1.map(function(value){return value +1})
0 D, d% g+ ?9 Q/ k(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']7 K/ ^& {: I0 }* |' v9 X* F
</code></pre>' _; i% z" K; S# V* _. V$ x
<h3 id="24-运算符">2.4 运算符</h3>2 N- r) m$ l" Y2 N0 W
<h4 id="241-数学运算符">2.4.1 数学运算符</h4>
. k; ?3 a% w* P$ H5 F2 _2 }<p><code>+ - * / % ++ --</code></p>
" F! v2 j; \  d, e1 a( C<pre><code class="language-javascript">&gt; var a = 60 v5 s- O) g1 K# |
&gt; var b = 3. m" r0 Q  f7 Y2 D' p
// 加, ?5 Z- ], e' E
&gt; a + b
8 _5 O' d/ f3 @, {% _$ ~99 Y! S: z& I7 N+ K! G! w8 x
// 减! W+ i9 D1 R& W
&gt; a - b
/ [: O5 j" i$ b3
7 o8 p; |- M. Q// 乘! p4 G+ T1 V, }. Y/ X: |: s& ~
&gt; a * b1 n: W' C/ g* a  p
18  o# [1 D7 Z" H2 g; g) j
// 除
( Y$ @( o4 ?" I* w# S$ O/ R&gt; a / b
) j& }# k2 C7 D5 P2
9 E  g" o* O( p# i6 s// 取模(取余)
* o* }6 t8 O) D5 p&gt; a % b
+ o; a& z6 V0 _- _$ |: S( F0. d* @  Z8 a. {9 B/ N0 [; F3 A
// 自增1(先赋值再增1)# k7 e0 D. ?; j3 J: M
&gt; a++4 `: I1 ]- P: I: G
6
% Y  P4 w, V! ]* H&gt; a, ^2 n6 k, e; o% E
7
: c6 Z, y- G: n' B' _// 自减1(先赋值再减1)
3 F. r* k( C  e- d% y- E! c% ?3 ^&gt; a--
- D9 J9 w) c) g2 {7
# F4 D+ H  |; }5 W/ {4 ~&gt; a
: w! F- I1 C* q! k& ?8 l+ k64 g( Y+ g9 C# x6 S
// 自增1(先增1再赋值)) f" ?3 k, G) L1 t+ C( m3 G
&gt; ++a, _" H1 ^9 v4 Z* ~4 s7 k1 R& n, }
7
, [- p0 L6 ]' y# Y+ W8 n' _// 自减1(先减1再赋值)
* \7 a$ ]& o) }+ q&gt; --a7 c. I, E5 \, ^: C) a4 @6 f) n
6
3 Q. }" L; K7 I2 ?6 E3 v&gt; a) c. X9 A1 \! \4 f% l
6
1 u3 w5 `2 y7 Y0 U; x! b- d+ N
" U: K; \1 `! Q3 N0 w7 r0 _//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
1 ~4 S! C0 e3 o8 I& l. a</code></pre>
+ A1 g$ A  Z: Y" y<h4 id="242-比较运算符">2.4.2 比较运算符</h4>  R+ ~% A; G* Q1 L  h
<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>
; C0 H' h$ s+ n<pre><code class="language-javascript">// 大于
. L+ `  r+ j4 _6 r. _' A! w6 f&gt; a &gt; b' j, u* f( }9 T
true3 \5 K( V( ]6 g/ b2 ]' W
// 大于等于6 W# f9 L" h, B0 o) D4 T! c# Y( b
&gt; a &gt;= b5 l2 M. E" n; @3 D, M2 S
true
/ w4 b. H; h5 {5 d* `0 a// 小于- W1 ~" x* D& U. K+ p
&gt; a &lt; b
5 k( ]5 Y; L6 T4 Y0 @false
& ^6 x! s7 X% h5 B7 s" Z// 小于等于
! K% `) V6 j& c. [7 @9 M&gt; a &lt;= b
6 c" ^, m3 c4 l% Hfalse
6 W% D1 p' v! v/ d// 弱不等于4 K5 ~0 N& }% d% \) J
&gt; a != b6 A* y3 m+ p) S4 V
true* g, U& x* V' {( P% |' g! e1 _, I8 q1 M
// 弱等于5 I: P# G6 U: V& y# a
&gt; 1 == '1'6 N1 ]9 L6 v0 N# W& I& g, W% f
true
2 H4 w( x8 o6 A6 s// 强等于% E8 }- |  Y: [
&gt; 1 === '1'/ x3 G3 d+ S, e  R+ S- x: A
false
2 `9 i5 D/ p+ O# l: C// 强不等于) r& K9 y4 @2 ?2 a( A
&gt; 1 !== '1'
' U6 f: A* _2 E$ B! ^/ k, O! V. dtrue) U1 C# a' Q# u. I! [1 F6 L( j

5 X0 G# h1 J% z! R* U/*
4 x! f1 k2 g9 }' _. e+ U( K) g( LJS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
1 W. }. A4 v8 v! A, ^*/; L; r& D$ {  Q& S3 L) T- v- _
</code></pre>
6 q7 J0 Q0 g9 X' B- G6 ]& Q" a<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>
) w8 U( x# [8 A<p><code>&amp;&amp; || !</code></p>
8 c7 I5 B$ M8 j5 ?0 {3 X! o! d<pre><code class="language-javascript">&amp;&amp; 与1 d4 I& Z  T+ ]! W3 ~% Q
|| or
3 w0 ^& I) f) c8 g9 D. F+ f! 非: \9 S( D  j& O+ H
</code></pre>8 o0 C4 ]" \$ W+ f
<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>, ^% S5 |- L2 B) p* }5 t! X
<p><code>= += -= *= /=</code></p>  @6 l# N+ [: Z1 I# e
<pre><code class="language-javascript">// 赋值
7 P  r% k. I/ J" b8 N2 r1 s9 z& z&gt; var x = 3
2 H- }" J9 I5 Y7 w- E* I( N3 i// 加等于
, A1 h3 _! ^$ y2 T. g  O( z&gt; x += 2
3 \3 S! U- `3 Z$ _4 `5
, k/ C  W. |1 \' p3 Z6 O// 减等于
8 Q2 H1 y5 C( z/ M3 I7 a- N0 H&gt; x -= 18 L) g1 ^9 f7 L# K1 H* O; Z
4( t( f6 Q8 y6 Y) H, a
// 乘等于
/ A+ K3 w# t4 D3 q&gt; x *= 2; _& q8 b- p! E1 V, a. t
8
3 s9 F! A, |& X# d// 除等于9 g( c! J. q6 O7 X8 u' u
&gt; x /= 26 M; [- K3 _! H( R: Q
4
  A9 Y9 U) o$ _; v) |$ Q7 X</code></pre>  S+ O/ S1 g5 w/ X: g- p
<h3 id="25-流程控制">2.5 流程控制</h3>
0 b( \( ~, b2 ~% o: V, {<h4 id="251-if">2.5.1 if</h4>
' X/ P) K" H' _3 j<pre><code class="language-javascript">1, if(条件){条件成立执行代码}9 c8 ]$ R& @/ w4 F& L, Z2 o
) s0 Q0 v+ j3 v- y/ G
&gt; var x = 3
' l/ {$ U4 f9 ?+ F" ?1 V0 m  p&gt; if (x &gt; 2){console.log("OK")}! [- c( g$ S+ Z
OK5 K5 n8 o; s3 d# R8 i& e

# R7 r. K/ S* T* L& |2, if(条件){条件成立执行代码} 9 o+ t7 E3 i; Z% q9 t& N
        else{条件不成立执行代码}
' p) C9 N8 v& r8 f+ Q# b' L4 ^1 ^; _7 A0 P; m
&gt; if (x &gt; 4){console.log("OK")}else{"NO"}1 m7 x! ~9 o3 \  }6 v$ O
'NO'
) T+ y+ h# z! H+ Z( l/ @
, T. S9 F: {5 q. w& o9 s* S3, if(条件1){条件1成立执行代码} " s! m8 N5 m# w5 @' Q  ^  j. s
        else if(条件2){条件2成立执行代码}
8 ]) [, t) c  w+ S' ~0 H; o    else{上面条件都不成立执行代码}
5 k/ U+ f6 U7 S
4 A' C6 i/ b: S% V- K8 B! Z&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}
* z% _/ }) G, c& @% R/ S Ha
4 j  y8 @( _1 Y  V+ T. N</code></pre>. N2 s4 i: P7 s# X# e
<h4 id="252-switch">2.5.2 switch</h4>
( y, g4 N& x: E9 x, \$ ?<pre><code class="language-javascript">var day = new Date().getDay();: [  R+ A0 U$ `4 B) P
switch (day) {
2 F$ {+ c% c' p+ r2 b/ X  case 0:
. O5 n2 [' d( u* x  console.log("Sunday");
/ O% r; X! ^& ^8 j6 ?+ z3 f  break;6 s" g0 g1 C0 u, Y+ ?7 j3 S
  case 1:
9 U+ h# ?. j9 O1 U, b  _1 x8 _1 n  console.log("Monday");
# W6 T6 M6 \0 K) y  }. o, c/ x7 e  break;
. ~) W; n7 V6 K0 r2 [- W2 t, E2 Udefault:5 U: \3 c" X. L. m1 B% P
  console.log("不在范围")! ]& _5 h1 w' W) N4 c- r& v/ W. ^
}4 k. z7 s% ~6 _3 V$ |$ ^& `% v
不在范围6 F* _* g5 D6 I; G
</code></pre>- d/ S' k' ~7 R8 M8 u; ]! n8 f
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>
* Q) T; I& ?. p4 c: q<h4 id="253-for">2.5.3 for</h4>* U* S7 R/ {) ^5 k# u' }/ M2 m
<pre><code class="language-python">// for 循环
' z3 L1 ~# Q, P; x4 v- e        for(起始值;循环条件;每次循环后执行的操作){" g2 I+ F3 a0 |& `/ U8 Z7 H
        for循环体代码3 a! r9 {: _7 g; {; W5 q# w2 m
    }
5 R5 ?/ i, j5 @6 G8 d8 [# `1 L. b
for (var i = 0; i&lt;10; i++){
) [+ Q$ |" }+ ?7 B6 V    console.log(i)% _+ g/ m9 I9 J( C$ ^* O( v! Q% r" f
}4 z" k7 W' X. l  k! _
        0% E6 E  Q& `9 }) K) H: {
        1# }, G- n9 L5 Q" F* G( b
        2
0 w' n& E5 k- r/ f! h        3* D& s7 @) J" S8 h* d) p* K( t+ ?
        49 J- ?% L" @- s6 a' h
        5; [4 X; @# ]. q
        6( q. C2 W' A+ E. D( D* d
        7
. U5 L: A3 s& Q- p9 q9 d) Z        8
# p& e  ?$ q( U" m! `        9
' ~; {& ], L8 o" P) a</code></pre>
% H" o+ q$ K1 ^: h+ t; f1 V<h4 id="254-while">2.5.4 while</h4>
2 s' V. G/ I. I3 T<pre><code class="language-javascript">// while 循环
6 A! x6 w% F5 \7 n        while(循环条件){3 b3 x9 _4 d' ?" _* o8 ?3 J
        循环体代码6 q7 }7 W- _+ _6 S& {/ g5 J
    }: h/ A; ~! l! u
9 l5 X7 R0 {+ q# h
&gt; var i = 0. I) S8 g8 t6 o& f
&gt; while(i&lt;10){  b9 [3 @! g' ~
    console.log(i): N$ Q  S* T( g: ]5 m
    i++1 J5 {$ A: s* T+ B/ X) I
}2 x/ V* g3 J$ v
0" k; [& M( P/ ]8 Z
15 b4 w) R7 _! k: R8 D
2% s" y& y* @; y5 k
3! @. T# K' W  r; \  ^2 P" L/ e& i) f
4
1 K1 ~5 c% y+ u; R 5
( d8 y- Q2 c5 G5 q  t 63 Y& S# R$ r) k) ~$ y# r
7
8 i% b& e- `0 ]7 x 8
: {9 J4 i; K1 n) N+ O 98 E, D! c6 `; j# L0 t
</code></pre>6 U4 U+ A. @1 b! Y" s
<h4 id="255-break和continue">2.5.5 break和continue</h4>6 h/ x  [" n' Z3 u+ Z2 P
<pre><code class="language-javascript">// break
$ N: w: x5 d5 \3 yfor (var i = 0; i&lt;10; i++){
7 v  E  |. o  e: `    if (i == 5){break}/ Y, Z' |. \2 i
    console.log(i)0 w" E6 N1 G( g* ]& O& \
}" v+ ]% ]4 \) L1 X3 C
0
2 ]4 L' v1 T- h0 |6 i# D: q 1
2 A" z3 q- C& Y* z# N" k 2  o; H( k/ i3 I) R' ^  p; @4 r
3
% p6 {* l  R. @) l, }8 Z3 o6 ^2 P4 i 4
+ M: B' Y4 ^6 r/ G// continue
" ~1 y/ i1 B* v3 z1 W2 L- ^- afor (var i = 0; i&lt;10; i++){
; s7 `2 X% ?! U/ K3 i6 i% n2 Z( C    if (i == 5){continue}! V1 n3 T$ ~- @: h
    console.log(i)* z' o7 r' i6 @4 b
}
9 W# p/ t2 Z& e3 X 0
2 o" O/ K0 i7 J2 S. b  x/ c8 E 1' A% s# ^4 Z" m' k% |
2
; v& f0 U4 a, u: p 3
" y9 F7 V7 ]0 K* v5 l 4
7 ]9 Y6 L5 d6 c( S. {7 M  V8 U 6& I7 S$ S7 r8 f5 ~) r" o6 h
7
! E& Z! X) }) L; T; x5 G 8% H( J& O. t0 I5 J" U6 |$ N2 ?
9
, C8 h* d8 c, J" j; L
; S+ P* L( f& y# K</code></pre>  ?6 H5 a$ k  e+ K+ f
<h3 id="26-三元运算">2.6 三元运算</h3>
% B3 E. L' P4 a. g<pre><code class="language-javascript">&gt; a- p+ J: X4 M5 w
61 f1 D) U" s9 [
&gt; b3 z) @- Z( c1 V7 Y- y" @; x
3
, U! f3 {7 V5 R
3 o/ W3 }2 G$ j7 {! E, t- X- _//条件成立c为a的值,不成立c为b的值1 Z, v8 v& @  K. d
&gt; var c = a &gt; b ? a : b* y2 v7 g' {; u
&gt; c
! F  [+ `& J! i2 n! B6' |/ z8 {. c  J; N
: |( E, P( R/ ~
// 三元运算可以嵌套* n: u' J! m# L! }% x! Q( I
</code></pre>
1 J! R$ W1 _+ C. \( u# z<h3 id="27-函数">2.7 函数</h3>+ w, S3 W! {; c, Z1 I* U
<pre><code class="language-javascript">1. 普通函数
9 V8 d, R6 C# r# _&gt; function foo1(){
% [. l4 G' ~& l& J9 b    console.log("Hi")
; a& }  d+ [( Q3 R}' ], E" z0 ?7 c. c& u4 I

4 x* U3 x& q/ n  h: R( i) ~&gt; foo1()
4 c: x: Y5 Z3 U) i1 w1 c  k        Hi
" j! K. E) t& t# h2. 带参数函数3 h  v4 I# Z( U- k/ ~& O% I
&gt; function foo1(name){- t- C) e, v7 k; A- p1 p
console.log("Hi",name)
6 w) I2 T' y4 C6 O& s4 S}
4 ]: ?" _* m% s* h6 R- m, W* M+ d" ^' G1 s: B7 h  f
&gt; foo1("Hans")# v) G0 Z' h: L) h
Hi Hans- |! A3 ~+ c8 ?1 m% n7 U7 _. K

0 w$ ~, ^9 a# Y2 j( h&gt; var name = "Hello"
8 `4 D, x% J: @  F, f&gt; foo1(name)
( T) L% m9 }; d. I  J- ?$ s. g1 S7 {Hi Hello: n$ o4 O! M3 s" z; p
$ E3 Z/ v/ `; b, z* h
3. 带返回值函数' Y5 ]  q) e* }+ \  v/ [. G
&gt; function foo1(a,b){
6 m! }* T+ g, ?8 z* ?$ \' A6 j! L        return a + b   * Q& j8 g0 E( E, r
}) }0 E4 @  u8 v- i9 h6 |
&gt; foo1(1,2)
5 Y8 X: @; q  N) g* t4 b- x! P6 c3" {3 `1 n) M0 [; k# G9 k
&gt; var a = foo1(10,20)  //接受函数返回值
! {. }4 L* j6 E- E% I$ r&gt; a, W8 a( [" ]: B2 R+ B- i4 o
30
" _7 e( o6 ~+ \  ^; Q5 |" F0 e
, K8 a7 }+ w& u7 k* x* X4. 匿名函数/ N% [. V: S" W3 _
&gt; var sum = function(a, b){
6 g5 `! J0 b0 t3 J# v  return a + b;6 l, b, x0 [! s, p
}6 L0 _. M. b7 _4 }' P( v
&gt; sum(1,2)
7 h  e* @7 C- ^' D6 P/ O# U% t( h& R0 s  r3% Q' ?6 n3 S; c1 ^( m' \

, t, k9 ?3 \( K" Z1 I6 @// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
2 e) i5 Z4 U: T&gt; (function(a, b){
  v7 x1 E9 \8 T$ C  return a + b  I# `: F2 z* k; V
})(10, 20)
6 v$ p; W2 s  |% b" Z30
2 l. A% A, R9 R8 C/ ?- A% H% a* ~8 D
5. 闭包函数' c. q3 \& R0 F9 F  y8 F$ r' H
// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数
$ Z5 L# }5 G2 L0 U& {2 cvar city = "BJ"
% t- d' {: P  J. y. Kfunction f(){9 c) w) k. B% w& w
    var city = "SH"! F5 Z, B, [  G  J$ E$ c- v
    function inner(){3 v  J- k* a6 \0 a! |
        console.log(city)- o% L: S2 [, F5 E! I
    }
$ R* @& {' ~& }: m* G    return inner
) w! r5 r( Y/ \* U! b}
; j7 j1 s! K+ O( a( ]. F) A( Zvar ret = f()' B, L9 t3 f. k4 }. [) a
ret()9 L2 ?7 s, N, @
执行结果:% x# `, V5 [5 d0 Y8 J# x! k! E
SH
5 L& Y$ z; I$ Z3 ^6 ^
  e$ i- f7 z: |4 c</code></pre>
8 x: ?+ T* \" x4 L9 ]% d<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>
, w# c4 ^+ S; i- x7 a9 A" w( Y, ~& F<pre><code class="language-javascript">var f = v =&gt; v;
* q/ r1 }. l& Y2 ?8 v# H2 m// 等同于
+ A2 S" ]& _8 j0 C9 s4 Y* zvar f = function(v){0 X3 E! ^4 _: M, _% \3 }9 v# J: o* h
  return v;
+ |1 `4 I8 M1 D5 c9 g}
, @! R0 E. l% i2 }! [</code></pre># g$ C& X3 x) }0 [
<p><code>arguments</code>参数 可以获取传入的所有数据</p>
$ D$ T% s" z: r) `, q6 }<pre><code class="language-javascript">function foo1(a,b){! D0 R9 K! ?( m' ]/ ?' P! G, b1 c* T9 e
    console.log(arguments.length)  //参数的个数 " R0 A8 {7 d& [7 T: F
    console.log(arguments[0]) // 第一个参数的值
' o/ u" |. q7 t5 Z8 F        return a + b   . s3 _: |& {- {( E" g; z
}$ G$ q) d3 M. t  ^& [
foo1(10,20)  K- \2 d' r/ n$ R' D
结果:
% U( o/ t! z7 ~: `' p 2          //参数的个数 & e, N8 E' T  o6 h
10        // 第一个参数的值- `. I, h# U- Z8 j# b8 d' C
30        // 返回相加的结果4 I+ |- h  n$ E6 o
</code></pre>
9 g) w& X+ E+ ^- B- c8 U1 W<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>3 T5 @6 t# L' b" D, ~$ U6 q
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>
, t* r- p1 C. ~( f* N  x9 R$ V<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>
- d* \+ c( d: a1 w<h4 id="281-date对象">2.8.1 Date对象</h4>
& d. I  u! R3 |# X9 Z: r: A& ]<pre><code class="language-javascript">&gt; var data_test = new Date(), v5 \9 `* L* c% t* R6 r
&gt; data_test
. Z' p5 N6 F' U$ F7 ~7 E9 v+ N" QFri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)
8 P$ W0 n- H+ T9 s+ y' ^&gt; data_test.toLocaleString()
/ T/ t. [: a+ i, u' R# @$ B'2022/2/11 下午9:44:43'+ U* I/ j, l  G% A# _$ d; j% W' G3 U# S

# ?" A/ o' d) K&gt; data_test.toLocaleDateString()9 d& B3 z$ M0 [. m; @% V# b+ m
'2022/2/11'
! `. z0 T1 _* N+ u
4 S; e, O# H+ a/ j) q/ x$ x&gt; var data_test2  = new Date("2022/2/11 9:44:43")
6 Y) y  V8 }6 c, h; R&gt; data_test2.toLocaleString(), Z  _. t& o$ A/ m8 H& p' W
'2022/2/11 上午9:44:43'
4 `% @0 w- w( y6 H* G7 _$ x- U2 m
3 e7 c" c3 r8 f// 获取当前几号
! ]/ L4 D& P: w0 z: Z; a&gt; data_test.getDate()
$ F- s# t3 b, e11
9 s5 u+ c) ]: a, |. q( `! J// 获取星期几,数字表示' f2 W& M. j: E+ u/ ]
&gt; data_test.getDay()  
2 A$ I" r; D9 V1 W- Y  K- U) _53 y1 u9 y0 D  j  I8 K# i1 S9 O
// 获取月份(0-11)" }! T) Q) ^7 Y! z' a% ]
&gt; data_test.getMonth()0 U, c/ c9 g2 i& X# i5 B6 L
1( R5 X$ `! J: z+ k# V5 N
// 获取完整年份5 ]$ U- }+ N+ |
&gt; data_test.getFullYear(); C( P' P4 b0 c( M& I
20227 G3 X: g; l8 w* o& d+ \
// 获取时
0 a8 a4 Q6 M/ G6 T. W0 L8 j&gt; data_test.getHours()
, g) B3 P5 v  f0 \5 G6 E218 t( }9 F5 v' w: n0 e( L
// 获取分2 U% F5 m3 T# H. Y* k/ k, E
&gt; data_test.getMinutes(): H) ~' F: a, r' d9 Z( A+ T
441 P4 G4 n; g! q8 J
// 获取秒
+ B4 }& @7 }/ |&gt; data_test.getSeconds()" K5 m' c3 o+ U% r. ~# z0 h0 @- d
43
4 a2 q  l( `6 T! T9 O3 C" y// 获取毫秒
, E9 {% I! S; a&gt; data_test.getMilliseconds()
0 r4 K4 C: o  \. K! K290
+ M2 i: U+ P2 Z2 m// 获取时间戳
* d& [; g5 l" W3 O7 q% R; a! f&gt; data_test.getTime(). q/ z5 f% Y% @& y7 h/ P
1644587083290
8 P: @* j3 A0 x/ X9 I0 G9 j</code></pre>/ Y; Q* r9 @) l* k% O. @
<h4 id="282-json对象">2.8.2 Json对象</h4>
7 F5 c1 [. S3 R4 E( w<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串
5 n( @  U8 K( K5 Q: ~9 y% |& BJSON.parse()  // 反序列化,把JSON字符串转换成对象
# z: P. m$ @( H1 T& J4 ]; e6 O( L' F
// 序列化: ^! |! k7 [2 s) S# S
&gt; var jstojson = JSON.stringify(person) ! x2 \) j. s5 A0 W: I+ C
&gt; jstojson  5 g4 T( u" m+ b1 z  ?# ?
'{"Name":"Hans","Age":18}'2 j+ @, [) W; `( N/ Q! {4 {" i2 N
7 \; h% r9 w+ y9 Z$ P
// 反序列化
" G/ `4 G5 X7 G, _1 Q9 C5 Q&gt; var x = JSON.parse(jstojson)
: J: Y( Z$ c: c2 X8 X+ h+ Q&gt; x5 `2 c# U5 p  Z; p) W1 J, ]3 T( e' l
{Name: 'Hans', Age: 18}
& L9 H% B" D9 _0 b&gt; x.Age% _; K+ x8 p! U' r4 @- a* U* X0 S
18
" F* Y2 H9 O2 w* m3 p</code></pre>
* v; P! P& @- Q' w) {5 h<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>
8 j  k( [& P; }' P<p>正则</p>
3 c* T- g& ]0 G" q' r2 _<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");
4 t: t4 j4 v+ k; M; D+ M&gt; reg1; M1 v! H  k4 A3 X
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
, O# @0 }. H5 a) _; J- \0 o* H3 W3 H&gt; reg1.test("Hans666")! ~# a0 k1 X* u- L$ S
true! X) B, I$ J  S0 _

: x1 U) w; c9 D. `1 \&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/
3 K) ]6 H  S+ h5 {, b! ^9 B&gt; reg2" A+ g0 g8 |% V5 C; _: U
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
; f& @! p# i  l% e) r( L$ Z&gt; reg2.test('Hasdfa')
+ y1 ^- i  b+ E8 M! T+ Htrue2 B: n1 R7 B# l# N8 Z- z) y1 r

7 a, y" l6 F1 b5 Z, v全局匹配:4 [+ p/ b* p- l: a# {9 d) q5 [# {) W
&gt; name2 O) ]7 z1 o' d# X; A
'Hello'6 L0 O! Q8 w: Q+ \( |0 D
&gt; name.match(/l/)
7 m; I& C: _5 |" J% {['l', index: 2, input: 'Hello', groups: undefined]# Q9 _3 r$ c) Q8 ]3 Q
, B) N: p: g5 B1 c- K) f
&gt; name.match(/l/g)
; K5 Z. s( s1 R; h  f: R; `(2)&nbsp;['l', 'l']0 V8 J' I# q( V* J/ ?4 C
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配1 w) F" q, t0 v5 X

! t; ^$ b/ i/ t" y全局匹配注意事项:
2 w1 L# K+ r, p8 d&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g: M! ~/ g6 n$ b2 i: Y
&gt; reg2.test('Hasdfa')( B- a8 s" M$ z
true3 M2 i1 J. n, p& R3 U
&gt;reg2.lastIndex;
$ M% O# k1 r+ }+ F3 h+ k63 h; ]( Y$ B  L8 u0 |
&gt; reg2.test('Hasdfa')
8 @, b' R; h. O' [* Bfalse
: f3 {  k1 x0 a) N9 q' f- |&gt; reg2.lastIndex;
( J& K- c5 n  Z% R02 |2 M4 }% a$ Z8 s7 f) n" M
&gt; reg2.test('Hasdfa')
; T) s( {1 M2 K# y- ?$ x( ptrue8 R% k: _9 X% q% F0 G
&gt; reg2.lastIndex;
* y6 h( {- j5 o2 K5 ~0 ^0 ~6
" [' A1 U3 [4 s1 U2 H, G9 S&gt; reg2.test('Hasdfa')$ F. O! d2 x! M1 W  J4 m) Y
false5 M3 s% M& L$ ?/ [' m( c. e
&gt; reg2.lastIndex;
( e: O$ C# t6 R$ A( p5 G- G2 }0
* D, y2 L1 X( D+ |2 P// 全局匹配会有一个lastindex属性( P; q8 i5 g* M
&gt; reg2.test()
5 w7 U6 ~) ]" v% @% |! z; _false
4 p/ c7 [/ J" v- [&gt; reg2.test()
5 J4 G% q8 i0 _, g/ L0 Z; p8 k+ ttrue
, {0 j( ^# w) Y. ?$ L// 校验时不传参数默认传的是undefined
. h% b+ D& j8 I% ]1 p</code></pre>& H; z  g2 J1 P* \
<h4 id="284-自定义对象">2.8.4 自定义对象</h4>4 Q# h8 B6 o* ~# F1 ~/ Y
<p>就相当于是<code>python</code>中的字典</p>
( h3 E$ f0 Q  C* [2 l2 P8 b% p<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}. ?/ e  z* M& N. e# \$ L4 y
&gt; person
' s5 p/ ]0 N& J% E% Z5 I5 T{Name: 'Hans', Age: 18}
& F% {& G9 R$ j! w0 D7 [; g&gt; person.Name
. k( w) }  B: N- r( z6 `'Hans'' a/ A) f% z7 x( b9 i
&gt; person["Name"]: X( O. R$ A! G2 E
'Hans'
5 z" j( F( t  B9 i: a8 R
* Z4 l* K8 g( |1 w, l9 n4 `// 也可以使用new Object创建) S" Y7 A- d' q6 D( {4 Z$ C
&gt; var person2 = new Object()# n7 X' c7 T" [7 K0 r
&gt; person2.name = "Hello"
- l  \3 U3 g$ W6 C'Hello'/ k1 ]- M; K% f9 K1 T2 A  t' S5 P
&gt; person2.age = 20
- M9 M+ m( k+ y206 u' J1 w& u9 G7 y  j5 H0 D
</code></pre>
7 G4 X9 _1 `5 ]1 G( V<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>
5 R- N  `( ^: f  b# J, J4 H<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>* Q/ f; d- R" o  V; J
<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>) L7 E4 A8 H3 O. N+ n6 G! O
<h3 id="31-window-对象">3.1 window 对象</h3>
) c4 f8 c+ K; {* q) i<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>; x5 T6 o' e6 W: h  h- v
<pre><code class="language-python">//览器窗口的内部高度
8 A! Q7 I9 j8 e0 v+ e; Q3 Vwindow.innerHeight $ f( G, K$ O, A* |9 u+ K/ c
706
; R/ K# J. V# ]2 k//浏览器窗口的内部宽度
* u& y( S+ ~; D* P0 ~) ~window.innerWidth
0 o  K$ M: O* a+ [4 V, Z/ k7 ~1522* e1 C8 X! I7 B/ A- g# o% e3 z
// 打开新窗口; I- n# r8 J& v( I) B
window.open('https://www.baidu.com')
: e1 D* }7 h& q" _5 a& r  cWindow&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}
8 V- J3 n/ ?: ^! V2 e" |2 \// 关闭当前窗口
5 |/ L6 N  e9 o; cwindow.close()
  x, z, U8 M# n( x" O- J//  后退一页. T1 F, I1 j$ h, M, N( e- J, m
window.history.back()' i9 u  X$ @) y9 V+ X. j. r
// 前进一页8 A* b; T# u. n1 d
window.history.forward()
; Z2 ]9 C, a! N; c% N//Web浏览器全称
5 }0 V+ V* G: j: \: h1 uwindow.navigator.appName
2 U% W( o# @# _$ v'Netscape'; A( C2 R& c0 R/ L& Q$ h. u
// Web浏览器厂商和版本的详细字符串
6 f$ l! A* _, f. T. x8 kwindow.navigator.appVersion
8 x7 F1 _3 r/ }'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
/ h* U( c0 }& r' \9 S8 p8 h( I// 客户端绝大部分信息, A* Y4 c  U( T/ K
window.navigator.userAgent9 I1 n  o8 I; q+ U7 d2 P' j$ A6 ?
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
6 J7 c1 A$ c- N0 a3 f// 浏览器运行所在的操作系统
2 a& m( j( M, r9 k3 S; \" Gwindow.navigator.platform
2 y: E" S  v/ _  L'Win32'
: A% U& X! p1 |, [7 b& k& d7 ]4 F" \. A1 g. o$ W
//  获取URL. h' M' B0 {, h9 i0 o5 b: J6 I
window.location.href
9 g# M7 \( m9 ?- d  C3 g// 跳转到指定页面, y/ i" G4 l3 ?
window.location.href='https://www.baidu.com'+ `! {- D4 h9 Y5 K6 `
// 重新加载页面+ @3 A) t% F/ R4 @
window.location.reload() - D2 h* {: d+ ?
</code></pre>  c. Q7 C5 n1 z$ P. B
<h3 id="32-弹出框">3.2 弹出框</h3>
+ b  R$ Y" K1 ~/ {5 \% @/ f; r# B<p>三种消息框:警告框、确认框、提示框。</p>
$ Z9 b4 b1 j& _; N, o1 ?( H<h4 id="321-警告框">3.2.1 警告框</h4>' Q3 X9 }2 ~8 r2 W' J  v) B
<pre><code class="language-javascript">alert("Hello")$ N* `+ G3 j+ D/ R1 O8 D* L. u
</code></pre>! q& y7 c2 O  j, d' H
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>/ l6 n' ~. @' Z* Y
<h4 id="322-确认框">3.2.2 确认框</h4>
! M) H4 C. R! T! B, D, e3 y<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>5 U1 s' t5 j+ J3 {+ T* p8 C& J
<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true4 _1 B) b, I5 g3 a% F: p3 G( `2 B
true$ O( m. U8 Z/ m  x1 K1 l1 `4 x
&gt; confirm("你确定吗?")  // 点取消返回false
9 A% ?! ~# I, p& mfalse
9 ^8 o8 t! w3 K5 l% N% Z9 @6 ]</code></pre>
* f7 t4 O- A: t5 u3 ?1 \7 @; ?  ~<h4 id="323-提示框">3.2.3 提示框</h4>
' ~, l' t1 \0 R' g, A<p><code>prompt("请输入","提示")</code></p>
! N, k* @" {2 P( d3 Q1 s<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>; H7 y0 O0 M3 u, A0 s
<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>
* y: V5 e% n# x. S$ G; f<p>如果直接点<code>取消</code>后端收到<code>null</code></p>
. G. d' }, e# `! L' ^<h3 id="33-计时相关">3.3 计时相关</h3>' X0 H3 s" p0 U
<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>! ]. ~  o, g# |- ]) y5 ?
<pre><code class="language-javascript">// 等于3秒钟弹窗' v3 `* c( i4 s. _
setTimeout(function(){alert("Hello")}, 3000)  k& w" S7 J/ R- }9 D

  g  p1 J; t7 `+ Y- `var t = setTimeout(function(){alert("Hello")}, 3000)9 ]; S- h1 o/ ?# V, f

9 [4 Q# g9 K9 U" |& o// 取消setTimeout设置
  C0 |9 p, N1 R% GclearTimeout(t)" v/ I3 B8 z) u: K- O& J
</code></pre>
6 i9 S! c$ _  U<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>( ]5 T9 T0 u; `  B5 d$ H
<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>: J' R! E) h: a- @( v7 t
<pre><code class="language-javascript">每三秒弹出 "hello" :/ E8 b% h6 X9 f: L# q
setInterval(function(){alert("Hello")},3000);
7 M+ _3 O( Z9 y& K+ l</code></pre>
  ^+ y1 v% \# q: G& w0 Z) L+ x<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p># N$ E7 v) n2 r
<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);+ C! n  B% E! E4 Q( R: W
//取消:
& @0 `  Y5 j* ZclearInterval(t)$ }; {' p, O" m. s8 F
</code></pre>& j* g  |$ B$ |. [0 l5 O
. e9 t8 \2 F0 r: a( D' y: b+ p* Z" ^
回复

使用道具 举报

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

本版积分规则

手机版|飞雪团队

GMT+8, 2025-12-25 15:07 , Processed in 0.073180 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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