飞雪团队

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

前端之JavaScript

[复制链接]

8032

主题

8120

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
26426
发表于 2022-2-12 18:11:35 | 显示全部楼层 |阅读模式
3 w, |' d# e9 a% D  I' A/ q2 e
<h1 id="前端之javascript">前端之JavaScript</h1>( j5 F0 t0 \; e2 I" o( Z! K6 e  X8 v; y2 m
<p></p><p></p>
3 k  ?, G5 m0 l<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
6 j- r$ \3 t$ R# a0 X, E<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>- U7 `( r) e9 {7 D2 a) C
它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>7 X% p# f# @$ b9 {& U% N5 n1 x/ k/ i
它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>$ U3 [8 T3 b+ T' ^+ l
它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>
8 V* d! w! l! B* ~<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
# _3 M2 V' \) j( c1 o% b<h3 id="21-注释">2.1 注释</h3>
& X) a4 {: \4 G* |3 t<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>+ ], |% |/ z1 A9 Z0 n4 H# @
<pre><code class="language-javascript">// 这是单行注释
/ V$ c" }6 S3 p! V4 u  A% }' P& E! ~4 ?- w& @8 m1 x
/*4 ]) n4 l9 p- A  b! d6 r
这是多行注释的第一行,! C9 {0 \, b% P9 f
这是第二行。
0 I2 ?) G- k- y*/7 Y" s: ~# E4 H- G$ n; L
</code></pre># u- z! d) g- T, ]8 `
<h3 id="22-变量和常量">2.2 变量和常量</h3># v; Q$ j  c. Q& G$ m
<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>
$ `. j- P' l3 l8 F" ]4 n8 p/ X7 t<ul>1 F. G# Q& ?( @' k8 A$ D# ]* C8 V
<li>变量必须以字母开头</li>: k+ `1 u9 c( E
<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>4 `+ ]2 E: y$ c, ^0 H/ t
<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li># H9 L6 Y' W' M: @7 r1 @4 S$ i
</ul>
# J0 l  V! M3 M/ o+ E5 t<p><code>var</code>定义的都为全局变量</p>
9 e4 T  I& i( w* w% A3 ?  {<p><code>let</code>可以声明局部变量</p>" @- N& X( a8 K' I) A
<p><strong>声明变量:</strong></p>
5 `7 T# T0 g9 M# B( `; H) q<pre><code class="language-javascript">// 定义单个变量6 S* m. t* Z+ b; r6 A6 G% {- n
&gt; var name
  c" M; K" g- M! h+ L$ s  N&gt; name = 'Hans'# a+ s) w- Z; T1 R
//定义并赋值. a! G' ~5 L/ F
&gt; var name = 'Hans') v1 n0 d2 L* V4 U( r
&gt; name
) X1 b4 }) W6 J. o% c'Hans'! u. j+ x$ z- w& v# ~. E7 T
7 y" E: }" ^0 w% w- }: g* b% M' Y
// 定义多个变量
! H& `4 ^/ ?3 ~9 J/ x0 X&gt; var name = "Hans", age = 18
6 w2 E  ]$ ]5 x' a2 i/ {% g7 z&gt; name
+ T7 u& J; m8 [6 R$ O/ U'Hans'6 O# n# F, |, i& _1 t8 A; S
&gt; age) E, t8 R5 p0 l; _
18
9 |  [% T# Z& m4 m& {) R# i, }
( y' U$ w; B& E7 n1 v//多行使用反引号`` 类型python中的三引号8 v! m9 {- m/ ?5 {8 ~* X) B( @6 `  d+ z$ o
&gt; var text = `A young idler,( o5 i( |2 H$ M4 f  [
an old beggar`
: u% t+ U$ B) l: P6 d0 s. P) p&gt; text# d; D2 [5 P, e
'A young idler,\nan old beggar'7 n1 Z0 T7 R2 I0 l  z" j, o
</code></pre>; o/ x; J) i% E: Q% K* D
<p><strong>声明常量:</strong></p>
: M7 n  B& i! N) J9 c2 ?8 v<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>" V( F. q5 A7 I% f$ c2 o. J
<pre><code class="language-javascript">&gt; const pi = 3.14
. d5 s( M2 {  o. o* w1 n&gt; pi
. O$ Z0 z" N& ~. L2 F" L* a3.14/ X6 z" W: d0 ?  @
&gt;  pi = 3.01
, x7 C2 n. \6 GUncaught TypeError: Assignment to constant variable.. }$ A# e+ E) S0 @
    at &lt;anonymous&gt;:1:4
5 M3 C6 r# T( o& N% J0 K& z# z
" k0 q) y0 w  ~) ]( M- X* r9 G" w</code></pre>
% U+ ]( G! ^- o3 I: F+ g# ^5 \+ G( d<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
; ~; w, F* e  M: o+ j) O% @+ G<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>
0 G6 |, {" \; N# M<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>
& g  v+ T& I) A+ r. @<h4 id="231-number类型">2.3.1 Number类型</h4>2 [' B' N, h! l' L+ _  w
<pre><code class="language-javascript">&gt; var a = 5# v: G" D. f: Q2 @0 o. d3 z+ [) n- O' h
&gt; typeof a   //查看变量的类型  
, a5 U) V$ r3 s, A' E& ?8 y7 }number* r  K: |+ j: R7 S0 J
$ s/ n% R3 l# g- M; |4 p, ~% u3 d
&gt; var b = 1.3
: e1 z3 l0 w, m* t6 Y$ R&gt; typeof b/ z7 k( D; q) T# i$ a
number& H! S/ N, @  U4 b

$ Z" x1 q, C( B. V/ @8 \// 不管整型还是浮点型打开出来的结果都是number类型
3 U1 I4 g! `, D+ @0 t% M1 P* E
6 V  m, A: M- @$ n* i% P/*
) H0 }* x. q* _& KNaN:Not A Number
3 {, `( L+ S5 K9 XNaN属于数值类型 表示的意思是 不是一个数字
( _) M' \2 i& w3 O: @* e*/5 f9 z, b- d; W9 {

8 b$ S; a. z9 Q5 q" @5 [6 z* WparseInt('2345')  // 转整型; x7 H. A* u( _; Z. V* Z
23459 ^' ]( z6 C7 ]+ H$ E7 M' q
parseInt('2345.5')) s7 T  `1 z! n7 i" ]
2345
$ v1 X; M. F/ F4 h& q# ]parseFloat('2345.5') // 转浮点型! Q0 q/ c/ g  b5 q& J, U
2345.5
, W7 g( U- X) m% y! o  \# b- g0 lparseFloat('ABC')
4 i5 L4 \) N, r  U, |' R/ gNaN
; V8 s( t1 O' _  ]; W7 g: a+ yparseInt('abc')9 r5 c3 o% `. H! `4 a" ^, T
NaN+ E( _' p0 m" S6 c- Z
</code></pre>
3 D* t' N0 M- E( x8 j! w9 V) `+ L* ]<h4 id="232-string类型">2.3.2 String类型</h4>- {& r) z3 L2 w% g+ S' ~
<pre><code class="language-javascript">&gt; var name = 'Hans'
( n# \1 P: }% V/ n&gt; typeof name
" \2 |. A) D0 ^'string'4 a# g/ i3 ]! m" C  z

8 Z# D( x$ q& |0 \//常用方法
, M. E8 V& ?8 @" D// 变量值长度
3 R" H2 _/ ~  [+ M& k) m&gt; name.length4 Z; u" y3 t+ j( o+ K* \0 ?
4' e+ U3 F8 R; M  r; l
// trim() 移除空白/ E  Y& a! @: ?) u
&gt; var a = '    ABC    '
2 w) |+ A- ^( W) M+ m&gt; a7 Y, q" z0 V& F
'    ABC    '
7 Q  m+ D% L$ J: z&gt; a.trim()
, n& a; t6 H$ E* ~3 R5 a'ABC'0 {# ~; Q, A5 ]
//移除左边的空白9 L) P4 q+ H* g( {3 Y5 ~; ?. Z
&gt; a.trimLeft()
* C  v7 j* s$ M! m3 u'ABC    '
( |1 c( J1 s) Q5 A2 Y9 Z//移除右边的空白: i" A3 k6 b( O* K( o* z7 |8 d
&gt; a.trimRight()4 s+ ~8 b8 z, G) y. p
'    ABC'! [6 i$ ?) N+ D8 K, T0 p$ Y$ {
$ a  o5 c, Y3 \; S) p8 T) d* K, N
//返回第n个字符,从0开始
) B3 K5 \; G  }7 x* g& j&gt; name
* t6 L+ {. o# m4 S$ I7 F'Hans'
3 H3 C  E% o/ }( R' I! O&gt; name.charAt(3)5 m$ l, u2 Y9 e3 F7 H
's'
1 k6 h8 M* I" ^, B+ e&gt; name.charAt()' ^" O0 v9 X3 j' m) J# E/ W
'H'
0 }2 M* ~* c: s% R+ E&gt; name.charAt(1)2 t2 X! e" {" c
'a'. N* w9 @6 A& Y
) A% K- q: t' F7 S+ k# K
// 在javascript中推荐使用加号(+)拼接" O9 J+ ^$ J5 @2 e4 s
&gt; name; L  b" q( ^4 j6 @3 I* `: m
'Hans'
1 v9 T& S/ m% H" a9 [&gt; a
0 j2 h+ h  e% X  W- ]'    ABC    '
+ ^; l' ?- M# I2 Q. ]( \' i&gt; name + a
- _6 [9 f  p  _0 w% X'Hans    ABC    '
, C" O, c; w1 \) f9 d. k8 l// 使用concat拼接
7 i7 a* N; t! D&gt; name.concat(a)
% z9 i4 {/ o' h. S; |6 K'Hans    ABC    '
( f  X, g. d' x6 v5 k% ]0 s
, `  l: U/ J& _1 ~( X//indexOf(substring, start)子序列位置, E/ Q0 p1 \# P3 \8 Y1 g

1 j+ A( n* f" Z* L! e) n( n&gt; text
) z3 y6 A# D5 e1 j$ F' z& V'A young idler,\nan old beggar'' Q" o8 @9 O' q
&gt; text.indexOf('young',0)  Y0 m# \+ s, r# s
2
, W0 H. c' x9 v8 J& B) b  L9 `' g1 ^2 v$ A& I
//.substring(from, to)        根据索引获取子序列
1 ^& f7 L" r" s5 A+ c&gt; text.substring(0,)1 E! n9 q3 X5 P/ M- R8 h
'A young idler,\nan old beggar'
0 B2 c: W) v9 E" V' E5 D7 ]- q&gt; text.substring(0,10)
; ?. `6 M0 x8 |) z; H; T4 \- a'A young id'7 D$ o, X' t( w' Y. X
, G3 f1 m; @! d  S1 m
// .slice(start, end)        切片, 从0开始顾头不顾尾
. J4 ~+ d5 C: I& i! R% _&gt; name.slice(0,3)
% ^) k# Y% F( H, t, f8 S( K/ F'Han'' p! A/ [4 |+ q, ^- B9 x5 S
7 B. o# F+ e+ q
// 转小写5 T& K/ H: C, K
&gt; name8 L6 n& F% C! c
'Hans'9 S: }9 d; D" B
&gt; name.toLowerCase()# E0 B, r- P( `% a& U7 B
'hans'$ m$ y! J$ D5 n9 g) L
// 转大写3 J  u7 _7 V1 v3 v$ Q
&gt; name.toUpperCase()0 A# ^3 d2 x5 n  I/ g7 z' ?7 L
'HANS'
6 o- m, I7 W" ~' ]
, u% B/ l4 W% c: |- y! W// 分隔9 i$ W7 t: W+ n) V
&gt; name
: q' x" Q: e- X2 k'Hans'$ h) K* h' _# b5 J7 x+ H6 L
&gt; name.split('a')3 f& l3 I, n0 a& z2 Q6 ?4 T/ r" }/ G6 S
(2)&nbsp;['H', 'ns']3 @& G9 Z5 |! j, a; ]
</code></pre>
: N% s0 K* U; k( d9 A  E1 y<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>) q8 Y4 p8 D) m2 s6 c1 w
<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>. q: H8 L  f! s1 k) B
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>
. Z/ E: w8 B2 Y5 I5 i<p><strong>null和undefined</strong></p># c5 f+ J* r0 _0 H9 L# d, w) x+ f
<ul>0 R; f$ g* q/ u2 K; o
<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>9 v: G5 D! q! I. `
<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>; |' W* ^4 k& S) I
</ul>
* N* Q) q: v0 f<h4 id="234-array数组">2.3.4 Array数组</h4>
% p' b' V' G; t; {<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>
( h. Y- _6 l, Q6 ?& u" D8 K: V2 b7 h<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c']
3 k! a" r% J: a# |) D# f4 t5 p; w0 [&gt; array1- L# {5 K9 O4 h9 ~" H
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']2 k( `% w; Z1 @
&gt; console.log(array1[2])  //console.log打印类似python中的print) M) ?4 Y. {" I& b- n& ^; M
3
$ _' Q. c5 T6 K% u// length元素个数
9 A0 s: l, H: |9 A5 _# j&gt; array1.length
7 p) V" m) W5 k+ v: e3 @; }6& k8 n8 S7 D: N) z
// 在尾部增加元素,类型append
" [. D; F1 s+ v6 l: @+ g2 z/ [&gt; array1.push('D')* J. D- c$ G0 h' m( ?0 d
7: a! m0 e; X6 \3 @- ~- H2 t
&gt; array18 v+ I. L" s. X7 o( A  b
(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']
5 V7 a# Z9 i( b; }$ C// 在头部增加元素
  g7 \1 a( A5 [) u3 m0 ]&gt; array1.unshift(0)9 x. F; \8 M4 U+ c2 C7 D% |
8. C( ^! l% n1 R; s; V( b
&gt; array1
; P: a4 L) a5 \: b$ x- [(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D']0 ]& R  D/ N1 v) }

' w) Q' w: C9 ?: r( W% h//取最后一个元素: H* e( U" R$ ]2 z8 n
&gt; array1.pop()0 e) J# T. `: D1 w6 I- W
'D'. T5 X7 J" `1 f& R+ f; i. |3 r( X
&gt; array1$ m6 U' w: u# m! p4 F
(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']5 H8 s% }$ M2 a
//取头部元素% d/ |- h2 T+ o9 _7 Q0 N8 W
&gt; array1.shift()) q) ]1 M; ?! j: a3 _: Q* z
0
, @; n& e6 f# j6 D/ @% k( T&gt; array1
: E2 h' b" U2 X6 I(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
' s1 Y! Z! G8 f, Y3 O$ L7 y0 x
" Q2 o! e9 n; @0 F% F2 w//切片, 从0开始顾头不顾尾
+ g! C9 }, [& O' O  e! d+ y  H% b&gt; array1.slice(3,6)
  A& H) F8 G4 F(3)&nbsp;['a', 'b', 'c']6 S1 M! V1 ~  E3 P; g6 p; k8 Y
// 反转3 T. W) c/ {4 D2 y+ X, w7 k
&gt; array1.reverse()
5 r0 c( P( S9 M) f% v(6)&nbsp;['c', 'b', 'a', 3, 2, 1]4 y" s; u. k' P' Y. {+ d* j
// 将数组元素连接成字符串7 V  b* ^/ y% `% d
&gt; array1.join() // 什么不都写默认使用逗号分隔* v% W  I' n1 B! ?: T6 W
'c,b,a,3,2,1'
% [  W' d& i: T. @& m- D% q3 d&gt; array1.join('')7 s6 [/ c) h# m
'cba321'2 k3 m: I! V& f5 \
&gt; array1.join('|')8 N: S" X& Q& e! u1 A
'c|b|a|3|2|1'2 ?5 j" }* z7 v, b9 p; u$ ]2 z

* q4 y% R5 ], }; r  @9 L// 连接数组# e! j6 h/ {" }+ p4 Y. e
&gt; var array2 = ['A','B','C']  C& y- f! M6 U7 x. D" T
&gt; array1.concat(array2)% f1 w7 C8 l/ h7 W
(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']: d" f6 Z- a2 \: U* o$ Y

* c6 B) Y4 E" }9 o: \. b// 排序8 R( R9 A' M$ {* M
&gt; array1.sort()
/ I$ |/ S. C5 U) t9 x(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']# D. z" h& C/ I. W& _0 l, s% D

( N! i! Y1 n& E  B// 删除元素,并可以向数据组中添加新元素(可选); k. X6 p6 T# Q  B/ d0 O1 y( E4 g
&gt; array1.splice(3,3)  // 删除元素  ?# n! V# o% Z( p: i, @6 O
(3)&nbsp;['a', 'b', 'c']% G* K! C8 a, g  L) x/ t
&gt; array1
! M8 Z9 ^# u0 ]9 Z/ L1 e6 @(3)&nbsp;[1, 2, 3]; J9 h+ I( l+ G
&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素/ G% [8 A8 ~% t
[]& w4 Q" W; f( Z( P/ k
&gt; array1
5 g: M/ z5 b% [5 ?+ l6 t(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']' j" C) [2 A. y

& r  C5 _- a, N4 T1 D/*
  w: ?0 f. y1 R6 u6 jsplice(index,howmany,item1,.....,itemX)8 E! p7 T) |, }8 K: Q5 L
index:必需,必须是数字。规定从何处添加/删除元素。# H! }$ n! p$ j7 R
howmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
2 C9 Y" C0 Y2 b9 P, @: @/ V4 _item1, ..., itemX        可选。要添加到数组的新元素3 b& e7 k; n4 t! a* R
*/
5 h' w5 u* v6 q5 V$ n
) T* P9 n7 J( x4 ]) O+ T5 g+ g. A// forEach()        将数组的每个元素传递给回调函数
& a! h' d$ y- x" p9 c2 w" T&gt; array1.forEach(function test(n){console.log(n)})
. z6 `2 r" H8 V$ q3 q 1
4 b; B6 h  w/ Z0 Z5 A 2) ^* |0 }; x" G1 s: i5 s
3+ G0 X& w* t. {& s
A* m5 a) @' H4 C0 S8 p2 k! q
B
1 T9 M" t' B% _3 P2 Z4 J C1 M8 _+ f$ I3 H/ L! s
// 返回一个数组元素调用函数处理后的值的新数组
( s- L) S( Q+ d- x' d7 ^7 s1 ~9 f&gt; array1.map(function(value){return value +1})
; f9 y% V" W4 V(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']2 C7 l% o/ f( Z" A$ `
</code></pre>+ N  i9 _5 w" V
<h3 id="24-运算符">2.4 运算符</h3>
( O. C- G- X$ K  Z  K<h4 id="241-数学运算符">2.4.1 数学运算符</h4>4 \/ b& k; U! M  b& [) \* S. G6 t
<p><code>+ - * / % ++ --</code></p>
) h+ h# M$ @2 s+ l<pre><code class="language-javascript">&gt; var a = 6. u' N  k3 }  O! g+ t1 j
&gt; var b = 3
, |, _* l3 x5 _// 加
% e# |9 p" g6 s&gt; a + b
% q" c6 Q- B3 P9 s+ x% _$ r9  L+ ?! a' N* T3 r
// 减, G% R* _6 l: g
&gt; a - b
7 _5 K$ H# Y8 ]  H  _: m3
2 {6 ~4 g5 L% d$ [9 S# @// 乘2 p7 u2 _: r! x0 i
&gt; a * b
! L* w4 ^2 L. {: K# k182 r6 p( {7 f, S8 V1 A* L9 l) s4 Y
// 除
3 }" U; C! h& t, ~4 o&gt; a / b
2 H, J6 [; I$ I  c% f2% A9 J1 D  l. k* J, ^' m
// 取模(取余)
% R9 Z2 K; y6 r: g! s' c& C$ Y5 A&gt; a % b/ g9 N8 g6 d/ d! o7 x6 s; d5 Q
0& U5 ?- P/ t: L! _& C6 c
// 自增1(先赋值再增1)) [* o2 J. }9 [% o# S: B( A& g
&gt; a++' e7 Q/ j$ W, [+ K" [9 U4 R
6( l. \! m$ ]7 o+ c: d: {# i, s
&gt; a
# c# b! M# V) P3 w- F- z4 x7
- x/ h5 L0 R% C1 O- Z// 自减1(先赋值再减1)' g) X& \7 Z0 B1 _
&gt; a--
) M3 [8 ~+ K7 Y. s  E& s7
0 E+ D" ]0 D8 B" j1 O3 g' {; N&gt; a
- b+ Z% V4 }9 Q1 m6
5 `) d" G! P  E' Z4 \// 自增1(先增1再赋值)
0 t& Q/ E7 {/ F) P+ W9 y3 E; V$ v7 u&gt; ++a  h2 Y% J  R. _( x
7
; w+ y' }. @" K% L' p% c* E4 J// 自减1(先减1再赋值)
+ i  r" M) J7 J& j&gt; --a6 Z5 V9 K0 a! R9 f  q5 J! d
69 U  O- Q! w7 R7 f
&gt; a1 o: t# p, E' F: ^, S0 E) a9 H7 F
6
( w$ ~9 z. f1 M6 b( S3 P2 V  \0 _4 i0 L
//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
, ?  y$ P7 V& m2 E( l8 [- f</code></pre>
- t% \' ^% Y3 H7 u<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
5 X  l; p4 P  m<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>
# i$ z+ t  M1 L% T<pre><code class="language-javascript">// 大于5 u' B4 X9 C- ]! r
&gt; a &gt; b
0 s% M- x; q  z. |0 _/ {5 Q+ ctrue
: p2 z+ \  t8 ?: X2 W// 大于等于( p3 A* X" U; V3 B. S" G; a; m
&gt; a &gt;= b3 ~: C$ h6 r+ p% }8 R" q( _/ ~3 u
true; b; U0 q) A) s5 J: v  n
// 小于$ |1 D, z3 k1 i/ {
&gt; a &lt; b8 x6 S6 B* s) w2 j7 E4 N
false( @4 t$ m! B6 ]6 Q7 z) [' M
// 小于等于
; x* E1 M8 U3 {/ N: Q# l&gt; a &lt;= b. m* t" X7 ~, X& `( x* Q2 N
false
! b: A7 P; a" m0 ~$ }// 弱不等于
1 M5 e5 @, y$ W7 W, e) b7 c& m&gt; a != b
4 o  ?! ^" W+ M1 B# Etrue
$ G: {. ^1 x3 U6 }9 L// 弱等于# H6 a$ U% k& z, Z
&gt; 1 == '1'
) T8 B$ M0 L6 Z0 ?3 w7 ~0 etrue6 Z" N! s0 }9 `0 z! I. z
// 强等于/ i4 {7 e3 {: J# \, x) k
&gt; 1 === '1'
+ g! l, ]* l* J8 [' p" c% K  Dfalse
8 t/ N( ?" l6 Y$ A// 强不等于
4 U4 z* ^  T; H( Q2 g&gt; 1 !== '1'
2 m* g3 z0 l6 g5 z# n1 etrue% c2 k/ v  X$ A/ a* M

2 B/ S7 c: V% B" `* d/*
  `# ?6 Z: V/ nJS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误9 X( |* C, S0 v/ d
*/+ e) c( M: Q9 W3 v! Q$ v, M. v
</code></pre>
& d$ I, s! P; B7 h  W<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>* d# d/ n! Q' N7 U, g) f, b6 U' y; l
<p><code>&amp;&amp; || !</code></p>1 A5 R+ h' I1 T2 N
<pre><code class="language-javascript">&amp;&amp; 与7 f5 u$ ?( |# T$ V8 e: q, q+ P( v4 w- l
|| or 9 a* T! k7 X9 d1 S) j
! 非1 B# w  S6 i; W( U* [
</code></pre>8 n! t6 O. w0 l2 X. s
<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>
5 T8 g* q2 o  @& D4 @" c+ f6 A<p><code>= += -= *= /=</code></p>
7 j( q( E1 R: F( `! z+ }<pre><code class="language-javascript">// 赋值
( W, J" ]3 N2 A  A* o5 \% P" X&gt; var x = 3  i! k" [0 y4 X# u2 R; m2 x
// 加等于  Q, W+ X1 w) x. c
&gt; x += 2
1 K0 c* n- v; G5) t  f4 q" g( }5 v1 I$ l2 }
// 减等于! P7 N7 C5 l  s; _/ X/ X
&gt; x -= 1
. f0 s6 r4 z6 J4 H# o# R! v3 _4$ c' M+ O6 \4 H. G( J1 o( }4 l
// 乘等于2 C% m- R; _" \* [8 }
&gt; x *= 2
" ^: E. H+ {% x0 P: r8) }; i5 S, S; g$ v* `! W
// 除等于
% e" M& O- D' E. e6 @2 x0 H&gt; x /= 2* c/ j8 w7 `$ P! e4 ^
4
( J4 _" d2 \9 c* R" P3 T</code></pre>
3 a6 Z/ \' L" W4 J; V9 J4 ]+ Q- x<h3 id="25-流程控制">2.5 流程控制</h3>
7 x) E3 z4 [3 j# b; n% X& H<h4 id="251-if">2.5.1 if</h4>
6 e# h' j( }+ V) M3 f  c<pre><code class="language-javascript">1, if(条件){条件成立执行代码}2 M/ E$ ~' l* k
" x4 X: \* r0 P, j
&gt; var x = 3
( B. q& v) N* l+ X" _&gt; if (x &gt; 2){console.log("OK")}
; }6 }6 P# \! C0 e- R0 K6 r OK
2 @" o$ ^- q! E" l% Q: J' p
3 j! f4 m6 o; o# n' @5 |; t2, if(条件){条件成立执行代码}
8 @' k  ?" B. R, `8 T! a        else{条件不成立执行代码}
, m; \5 P& J+ {& c+ I
  ]8 p! V7 j$ d8 G: M9 h% ]&gt; if (x &gt; 4){console.log("OK")}else{"NO"}
( x6 l. O$ Y- C$ y* U2 z'NO'
1 ]: t( N7 p3 U2 a8 j" o' A8 X8 w: J; i
3, if(条件1){条件1成立执行代码}
8 p, u( q/ Y  {5 |3 V        else if(条件2){条件2成立执行代码}8 \$ Z" l! h( l# \: l, q( A
    else{上面条件都不成立执行代码}5 [9 x& \2 R  i- c. u

, S! w3 O9 D$ b) y7 i&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}
+ k3 k9 ^# M) z9 n5 u# X9 D Ha
) z3 a3 C1 d- r" B/ K</code></pre>2 C! |: V6 E; x  L2 \8 q
<h4 id="252-switch">2.5.2 switch</h4>- U+ Z0 y4 ^& a% T9 a9 g6 j1 e
<pre><code class="language-javascript">var day = new Date().getDay();
) E4 q2 L" [2 V, a! P+ \- H$ y: Yswitch (day) {
0 U" B% E# j7 H2 P  case 0:
" e4 t  M: ?  Q6 G" P7 C  console.log("Sunday");' x6 z" m5 P9 ~
  break;
8 e8 V& N6 M, j1 A$ J$ k) q  w  case 1:9 |7 `$ }6 s  j5 p! d8 O
  console.log("Monday");9 M1 U: Z9 f- F4 K0 P/ h4 C
  break;3 p. h* y- G4 P( R7 z, k8 n
default:2 h4 c$ t1 a* F# e$ j, f
  console.log("不在范围")2 R" A# l# Q/ t, g9 }' q
}; Y0 z& i' z( L' w1 q7 R8 N' ?4 }
不在范围" W5 {7 b, G% S! X! G" {
</code></pre>
0 ~4 s% z) h0 p<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>
; x2 W5 F. w) K7 [% u<h4 id="253-for">2.5.3 for</h4>8 U8 Z& S3 z0 h; o% j
<pre><code class="language-python">// for 循环
# ^" P( V' K9 Y  N+ M) f        for(起始值;循环条件;每次循环后执行的操作){
+ Y; ]2 f* _$ z4 E5 {        for循环体代码
. O5 b/ G, \1 `; X' F' x4 F    }
& i9 d8 y- N. |% v; U. v& a" V5 q- C; d
for (var i = 0; i&lt;10; i++){
8 y' v1 {  g# i9 k: y- |# u. W    console.log(i). d2 e$ p0 \! ~5 ]* ~& x
}
' [2 A% l5 u0 r6 b4 ]        0, v0 L, w' ]6 p+ A' W7 k7 \5 {5 D
        1
% J  }( j6 @$ i9 z) ]        20 l8 C4 d2 o0 R6 i" O) @
        3
8 }, X+ |) B$ T: w! K1 V: _        4  f! n, F. ]( H
        5( a+ d. R, f9 O. ^  W5 J1 Y
        6
1 _! B0 r4 y5 R, U# S        7
1 v3 i( {) w3 I8 Q& L* b: Q* p        8
. K: t0 Q) m4 G( @        9  K/ m1 A* @, X# P0 |
</code></pre>
1 ~1 q! D4 |! t9 J$ T& ?<h4 id="254-while">2.5.4 while</h4>
7 e* k/ x  @# V9 H1 k0 I<pre><code class="language-javascript">// while 循环3 Q3 Z, e: a! K* B# ~
        while(循环条件){" g+ R. d& r; M0 ]( w$ E' a
        循环体代码
$ V$ L( J+ w$ N1 |8 J3 {! Q    }& B' K' l& n3 J3 c% _3 B
# J! |4 P8 z! @" N7 V7 L/ _3 J
&gt; var i = 0
) I4 ]+ O8 M% I9 T1 w&gt; while(i&lt;10){5 _8 l0 D' h" x- |( @* _! s6 Y
    console.log(i)
+ N+ p0 |9 p0 ?* }0 @# x    i++
2 r! C3 f5 V3 [" u1 }/ c9 t}9 _, T6 h- G. k+ [+ X, \
0
0 L. q* K, Y; i# j' l: R 1
! y% S: B' Y. O$ ]" M. b 24 t, n$ [5 O3 j* v, v& L
3
7 M, E2 ?& ?3 B7 f0 } 48 K2 F/ L9 f1 S) R1 n
5
, P5 z+ T: Z) y! S7 \" _, T; ?, r; R 6$ s3 [: b* N/ c, a$ q
7
4 L) j0 K7 a( w  M; y0 l 8* y9 F1 S/ u% n: a
9; B. j* I5 r5 [7 u7 i
</code></pre>
, f& ^& ?$ B5 o, A3 i  S<h4 id="255-break和continue">2.5.5 break和continue</h4>* A. Q; N  i. D
<pre><code class="language-javascript">// break" S+ r* c1 P$ D
for (var i = 0; i&lt;10; i++){
" G7 C; ^6 t6 v8 n: V" v+ o# H- c    if (i == 5){break}
) v, E! Y, f% q" K    console.log(i)! N6 a5 j/ ?) s! V& @
}; s# A3 F5 ]& {" c; c0 {
0
% q+ l; V$ h+ |) m7 n/ D 1
) M3 d( S4 f/ C 2
! U7 g  c- m' q$ O 3
# _7 |/ u- ?, s/ c+ E 4, t. _3 K3 j. U; c4 k- @8 ]
// continue
5 ?+ d+ w( q5 mfor (var i = 0; i&lt;10; i++){" g, J' f0 F! h0 u, q
    if (i == 5){continue}1 N0 H2 D% j& K4 {) y" |% b* E
    console.log(i)* Q6 b9 ~9 {& c5 h/ E
}
( M/ |* M0 l$ J4 I; } 01 b- }2 t7 |7 h
1! H. F( r9 w2 Z+ I
2
+ }3 v  |3 v9 i7 p) z3 O% { 3
" Y3 l1 h3 [7 p) ^  o4 A% i7 U( d0 b 4/ b7 O, V5 {1 k; u% a# Z6 H( `* K
6
* d" C  C. T" I6 T! ^ 7# x4 f3 ]- p' ^; `
8
; x* Z- u& F0 i% o: M+ @4 U; G 9
7 }9 i( l- B8 {% X
# e; c& F: i& R$ t2 V' z</code></pre>6 Z* \1 Q* g& d: |. d5 H
<h3 id="26-三元运算">2.6 三元运算</h3>
- I4 \$ F) z, }<pre><code class="language-javascript">&gt; a
1 c$ M2 p0 Q# N6 d3 ^5 k! E4 D62 S3 [4 M- }/ z% D1 W- `
&gt; b
8 P! ]) X$ U6 Z, P( ?" g38 k1 d5 \% Q3 U1 B. i) c

- v; l1 s4 a6 X: r" }  d5 }//条件成立c为a的值,不成立c为b的值$ D7 E% v2 E) x, X* q
&gt; var c = a &gt; b ? a : b
5 v0 o" ?% ?6 H& {+ {&gt; c
2 W* [3 C- I9 \. p66 h2 j  E! O2 ?. j0 w' M. P5 b
" I" |" k1 P3 r* b
// 三元运算可以嵌套, h: G2 D2 k0 _8 a% [
</code></pre>. M* F" `  C6 [6 r8 o8 P5 E
<h3 id="27-函数">2.7 函数</h3>! R2 l! M9 C- b. B5 _+ T
<pre><code class="language-javascript">1. 普通函数
5 }, Z  P7 R& |, z1 i, G&gt; function foo1(){8 k- c5 t! v5 `" _
    console.log("Hi")
2 |; W9 j' {5 `  U3 v* P}
5 w( M) f' ~$ _3 g" ~
4 C. K# G' e. M+ d&gt; foo1()
6 j" M4 X7 Z2 M: d2 f' ~: G! X) H$ ?        Hi) K: ~  c2 i& p5 c" H
2. 带参数函数# L( ]4 p4 U3 b& p. _' v  x
&gt; function foo1(name){3 v  j4 \: ^  x: {1 A  f
console.log("Hi",name)
% S0 Q6 p4 U5 S# B( B7 G}+ W0 h4 v2 G5 Y# G& Z

2 u1 c& p$ W% G8 @, \2 T7 O" S9 w+ c&gt; foo1("Hans")
  }* d2 `7 O* xHi Hans
, W- a7 j5 @4 _0 q6 d' f3 O& R* C, H2 z; d& e
&gt; var name = "Hello"
8 p  O' _0 \' a- O3 ]  [&gt; foo1(name)
7 w; O1 X4 B  K% F! K- gHi Hello. o9 j- V3 x. F% o  r. P3 R
/ k9 a+ U) R* m! a2 M' m
3. 带返回值函数; a& e$ M  l0 _+ C; k3 R
&gt; function foo1(a,b){) A: M& h5 k3 Y. a5 i% m+ T$ q
        return a + b   
4 H3 ~! S) x& ?, A( e}! \$ V7 X; H% {9 T$ N( G; J
&gt; foo1(1,2)
: P1 A9 ^2 H- @& v2 @! m# k+ r; B% B38 i# V2 e4 S6 X7 Z: p- f0 j
&gt; var a = foo1(10,20)  //接受函数返回值: i/ H( U/ y+ `7 h7 s9 a. G7 w
&gt; a
, Z/ Q- l  q" A) J302 C4 R# u& i6 I- o! n# r- P
  d; L& x# N4 T4 X0 m0 [3 P
4. 匿名函数+ P- f1 }6 s$ M7 p# a5 W7 r& @8 Z
&gt; var sum = function(a, b){6 A" j: U2 [. `. g
  return a + b;: X0 m( {0 v! w
}! W( e9 A/ f8 a; A; D8 ^
&gt; sum(1,2)
# m; j. G0 o. i7 G3 i+ c( ?3
  J* Z$ ]5 x/ d3 r# e% y
, F+ C# z7 J5 Q9 l- {1 V// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
5 J/ P7 V$ R5 {' D6 N  @&gt; (function(a, b){
) u( E9 v, M4 N. I5 n7 a  i. h+ c  return a + b
1 I! h# I% S1 @# m: {})(10, 20)7 y. v! U# U+ a) d2 K
308 ]& x4 O6 _8 N5 Q: c7 n
3 T* M7 X1 ~8 n; E4 j/ i
5. 闭包函数
$ B9 w2 N5 F+ ?, f// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数
% O5 k3 h4 z3 pvar city = "BJ"
4 _* V* f! O/ ^( Ufunction f(){
' C' K, P1 @- v7 i7 s' m    var city = "SH"9 |6 I) d2 R4 M* w1 L& B
    function inner(){
0 g6 N3 z0 m9 J" Q- S9 c6 E        console.log(city)
( s! }# c. |  O( X2 ?1 F+ t1 v    }# s) t1 J( |, ^" d2 C, @+ Y
    return inner0 W( ~4 x4 n' Y; g% Z. Y
}
* g' L- K7 o. ?" m# dvar ret = f()+ u" K! E/ ^/ b/ Z/ J5 l
ret()
5 ~5 ]% t; @7 f3 [2 P执行结果:
' g3 W5 B7 m( F# jSH
5 k& v9 [% H* m) Z: U; Z* w
( A6 C0 q( H$ T0 k7 |</code></pre>
8 p  U8 ]) O  M6 V8 V<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>, F) v7 R: Q/ T& i7 V
<pre><code class="language-javascript">var f = v =&gt; v;
% a" u! K% Y5 E& a& O) f+ \, O// 等同于
* K/ \5 Z( v! K, v& H+ ]* Pvar f = function(v){/ @1 m. u% A) X) {" i1 C
  return v;
1 G" L% i+ }. j1 e) s0 |% x' m}! {, e9 c; |4 K9 \2 y8 I9 H- g3 u7 d
</code></pre>
, Q4 U: U& U( K' b; J: F  q- @- @<p><code>arguments</code>参数 可以获取传入的所有数据</p>" ?( R2 k) R. o. X& P! q
<pre><code class="language-javascript">function foo1(a,b){2 P: e2 K7 [* }6 Q& V6 U
    console.log(arguments.length)  //参数的个数
5 ^6 b2 a- c5 T4 P6 Y    console.log(arguments[0]) // 第一个参数的值
# b0 L8 ]9 A6 n( P" A# S& d        return a + b   
5 v  D, P# [" A, @/ ]}* u/ u1 u& R1 v
foo1(10,20)
. Y3 g5 W3 L' x9 b, i结果:
, x; M* {" `2 s 2          //参数的个数
5 H" K* I6 P0 |' i) \- C  v- ]* N10        // 第一个参数的值* \4 o$ X! j& e! Z$ n8 A# A+ v
30        // 返回相加的结果$ _3 d5 A' k, E- x
</code></pre>
3 U- e$ @' T0 c% n" L$ ]* m<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>  [# _2 i9 P7 N% s& P6 O2 O' _
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>" ?+ _6 j9 j% f5 M4 q6 Q3 W! k" D5 R
<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>9 o) O7 u/ _6 W
<h4 id="281-date对象">2.8.1 Date对象</h4>; s, P! j# J& G) [8 b
<pre><code class="language-javascript">&gt; var data_test = new Date()
1 R9 t3 a" E9 @+ c5 p&gt; data_test$ I; \" d( {" y- C; f+ v
Fri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)1 V2 `! G0 M; T7 Z" ]& q
&gt; data_test.toLocaleString()8 b* T+ _. y6 S
'2022/2/11 下午9:44:43'
- C: D1 L7 `& v$ F* m  C( q" S& S2 G" u; A- G- n$ P  C
&gt; data_test.toLocaleDateString()
$ q% ]1 n/ m+ @/ ?% h* e4 l'2022/2/11'
, E4 d% i) C& @. W$ }
1 e! o/ i! X2 \9 y&gt; var data_test2  = new Date("2022/2/11 9:44:43")
# T4 W8 |4 q9 e/ a&gt; data_test2.toLocaleString()+ b4 O5 @' ?% L4 e% I+ i
'2022/2/11 上午9:44:43'3 c  ]& e+ }3 v: h" e4 D. S( N% Z. ^

3 E0 V0 s7 p% E/ v4 W// 获取当前几号
5 l& H/ B. X. F&gt; data_test.getDate(), @& k% M3 i6 x( C9 ?
11$ f/ @' W0 c" R5 K# d  c- [/ b
// 获取星期几,数字表示
! m" ?9 w! j$ z&gt; data_test.getDay()  - T5 h& i3 [. i( G# b6 K, w2 |
5
/ P( y  k2 s. z! ?// 获取月份(0-11)
0 I% H2 v& Y' X' q% ^&gt; data_test.getMonth()6 T* \. N, @2 l( n- J0 ^  j3 z
1
8 V  D; S! L" {, s% ~/ x% H// 获取完整年份
0 f* ?# E2 F! T2 F# M' d! h8 [8 ^&gt; data_test.getFullYear()
. Q: ^5 Y! q" a, ~/ z& w20220 l2 r: G- k# }5 u# V' R( i
// 获取时2 X4 m" i5 D5 j( O
&gt; data_test.getHours()
" c: F: M0 e0 S8 [% O5 r21# J" t2 d( m' |8 J  T5 x% r4 u
// 获取分. v1 Z. B1 L$ {6 I6 z2 ?
&gt; data_test.getMinutes()" d7 V3 _  C, P
44
# j' f$ [) @7 D: h  E// 获取秒
+ T! d0 o; y& M&gt; data_test.getSeconds()" y; z) W: K. Q: |' @) W+ _
43+ I& t- q; J' M; \
// 获取毫秒
2 `. Z" w6 u  ^6 O# Q' D&gt; data_test.getMilliseconds()
" ?  x( ?! v" I& @9 p2 k+ f  o* R290! [2 N8 Y1 r2 s
// 获取时间戳
) u0 Z3 ]. |- Z+ T7 i9 C0 |( z4 @&gt; data_test.getTime()
6 ?% }, M  ^* Q$ v" D* n7 H8 ?1644587083290
& u! i+ W5 c2 W7 G4 U% S</code></pre>
2 z; ~+ N$ f" c7 t/ S  t7 Q<h4 id="282-json对象">2.8.2 Json对象</h4>
% K- M) Q+ X0 h' Y. x<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串
( @9 a) N8 E9 e& l$ O+ RJSON.parse()  // 反序列化,把JSON字符串转换成对象8 U+ P8 C8 O4 @0 H1 r2 g# E

1 [/ D( i+ m; o; K, h  i// 序列化2 F" G8 T  }5 Q* T; v6 h" c
&gt; var jstojson = JSON.stringify(person)
/ a* z" n& }+ y& E* W: y&gt; jstojson  
8 p9 c4 a8 m/ O# V  i'{"Name":"Hans","Age":18}'
0 B+ X0 Y+ X* y# l5 d) R* q. W* h5 O% f" w& z( D8 o! |, q" ]
// 反序列化+ T! F& z; P; A
&gt; var x = JSON.parse(jstojson)' t. f, O& H( z2 q+ R" E# E
&gt; x
( l8 l0 p  f  @. e& U{Name: 'Hans', Age: 18}( R! m+ F" U8 H5 v( Y$ B
&gt; x.Age& q7 K- u1 v4 b$ b7 F9 H
18
6 _6 p+ v% j, l/ H1 h7 |/ ?</code></pre>
! ]) R# c  q% u5 z# P<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>8 @# Q2 g1 O. y3 l) y6 O* Y) a
<p>正则</p>
# f) J; _* c0 Q2 i" o<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");2 P* T2 ?1 ^  }
&gt; reg10 a4 g7 l% n- z2 J& s1 N: g; Y9 r
/^[a-zA-Z][a-zA-Z0-9]{4,7}/% H1 p8 Z3 j& X
&gt; reg1.test("Hans666")
, r+ O  c$ u' Z1 y) v, n4 Qtrue
# }3 ]5 F; U8 H2 R/ H1 _% F6 Z2 T& k' q9 E# S
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/, ^# i4 ]7 g; c, c
&gt; reg2% b/ _$ s* r% ]& @+ X+ J
/^[a-zA-Z][a-zA-Z0-9]{4,7}/$ H# ^; K% |. J. }4 N+ L5 v' `
&gt; reg2.test('Hasdfa')
( i  c* [+ d) m, _  R) x2 ?true  c, t: K. Q3 X9 \3 h# b% T, X$ v
$ X# q, R0 m6 b  o
全局匹配:
4 u; p; P) e; l* g" R% Z1 p&gt; name
, B8 b! N& M: }$ i7 ]- L7 E8 X'Hello'' f2 j) @& c0 k/ V% U
&gt; name.match(/l/)$ E$ F6 x0 J8 C- F
['l', index: 2, input: 'Hello', groups: undefined]
9 Z) Z) f  D0 \( M2 N/ c& `* s, W! U8 C- v( D$ }
&gt; name.match(/l/g)
6 f+ [  c% d3 k7 l$ f(2)&nbsp;['l', 'l']
2 _  k0 R- |9 m1 V) @: f// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配. j8 J$ c6 I- g. C, M& f4 U

/ [# B) v* e( x4 `( s6 H! @全局匹配注意事项:; G( k1 U7 ]$ h: Q7 E
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g' e; B6 D3 U* c; x/ l2 t  x7 ]0 p
&gt; reg2.test('Hasdfa')0 S8 I+ X8 d* K/ s) t3 e' _2 {
true# h5 W! v% }: i+ f
&gt;reg2.lastIndex;) V) {' i2 i# m' ^
6) w) Q' e$ m* h3 C* u: O
&gt; reg2.test('Hasdfa')9 A; `( w, [- {( w! L+ P6 |5 x
false
8 W5 Z6 J1 G6 V( V: l&gt; reg2.lastIndex;+ ^% j" r( o/ R& N3 j3 i
04 i# k" y) V, U5 J* ^6 w  [
&gt; reg2.test('Hasdfa')3 T, R0 w  x: O4 m' A
true2 ?3 Z7 ?8 @8 g7 n* }( ]  r3 G1 Y
&gt; reg2.lastIndex;
/ P* L9 s% S8 c( z6
3 u4 o  S" f0 _! g&gt; reg2.test('Hasdfa')) ]  h; p' c6 Y2 d/ ]& A
false
& a) D: e; R' q  T&gt; reg2.lastIndex;( w9 v/ F. T7 M, p% A: a
0# p8 }. W4 d2 K$ z
// 全局匹配会有一个lastindex属性& ^6 W2 h: ]- i# F# ^
&gt; reg2.test()2 H9 T' J9 U3 m1 A& u8 u
false# z1 }; t) x: @9 Q/ l( `8 A4 c
&gt; reg2.test()
: i' z' S( i4 Gtrue
0 R  @9 Z+ r; ^( h0 H  R// 校验时不传参数默认传的是undefined
; b- F2 m2 h" V# d( s" p</code></pre>
3 J7 |. \, \) ~* K6 q<h4 id="284-自定义对象">2.8.4 自定义对象</h4>
& T9 t/ _/ {4 s  _* h& q<p>就相当于是<code>python</code>中的字典</p>
5 l( K6 `* n3 f0 ?, z<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}1 B- o$ T7 c6 Z( [2 U! `
&gt; person4 `5 a4 J+ G# ]# d
{Name: 'Hans', Age: 18}
. {1 Z% {/ n# a+ b7 o  ]: c&gt; person.Name; A$ l6 v" N+ c0 @1 e) @
'Hans'" m0 `3 g+ ^: K) L5 X
&gt; person["Name"]
+ W* Z& t: m+ w. N1 H9 w'Hans'
/ W+ N; _: C3 O& D: w$ ]# G7 a, q) C( i" M1 L) n, F  W! R8 a9 I- m
// 也可以使用new Object创建$ C0 Y$ J% D6 A$ Q8 I/ k
&gt; var person2 = new Object()
/ ^2 O. f3 F+ K& S/ P+ Y: C&gt; person2.name = "Hello"
3 B5 z. j3 K5 u( U; R3 A'Hello'# g# B! b9 L: Y$ E1 J
&gt; person2.age = 20  V' h1 z: f& \! _0 Q9 s7 K: U
20
3 z" H, Y8 H0 C* u! D4 d; @; |1 c</code></pre>5 r- @8 I  E3 w4 _5 Q6 w. h3 y
<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>% x, t4 W8 L$ _
<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>! N* X5 F, i/ n' b7 f& x2 a- e
<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>
! b( a+ W! |( x0 l3 g2 v<h3 id="31-window-对象">3.1 window 对象</h3>
7 I9 i- b$ g; u" f6 f  u1 }. o/ |: i1 c<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>7 b; H( u( y1 s* z  G+ T" D
<pre><code class="language-python">//览器窗口的内部高度
- g( m8 ]; E. Y. \# `& w# Iwindow.innerHeight
5 T+ S- O/ a8 J# z8 ?! q* T0 V706, t# a) T, u& `$ k# ]$ X
//浏览器窗口的内部宽度
" U/ }$ K1 s' S- C7 h0 A4 ]- mwindow.innerWidth
% f. U/ ]' F9 M9 C! D1522" w* C* Q0 }  K# x( F4 W. D# V
// 打开新窗口
, R! j; G  a/ C8 a% f, A/ uwindow.open('https://www.baidu.com')/ C  U. n' C& G7 M+ A$ U
Window&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}( i' y, f( e1 H; G% f
// 关闭当前窗口
; e# L! w9 O; f$ s/ V$ jwindow.close() ) f& q7 J' s# Y$ N1 y
//  后退一页
9 o! k2 U. @4 K3 B# kwindow.history.back(): w. F5 R- P, ~: \9 A( Q5 |. Z) P
// 前进一页, c% V9 z; K0 h/ K
window.history.forward()
0 v3 z" M; v* z# I7 g//Web浏览器全称; T" N* ^7 w/ \$ o3 m
window.navigator.appName7 H4 r( V5 I# n
'Netscape'1 X0 l3 h/ S: g
// Web浏览器厂商和版本的详细字符串
/ _: U' R- u4 Q- t( E1 p9 Owindow.navigator.appVersion# N8 Y' R) _' g6 O! p$ \2 A
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
5 q9 w( E8 w; L; F$ a// 客户端绝大部分信息
1 \8 u  p( I- \% i% ywindow.navigator.userAgent4 I! \. h5 U( W+ }5 U0 Z: ?
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'6 T6 V! k' E+ i
// 浏览器运行所在的操作系统
. U& h/ i. y& f% _window.navigator.platform
. _4 ^' e" a1 ~1 L9 k) Y'Win32'
6 ^. f) X. F8 O; p" Q8 |) G" j" M! E+ M8 ^( y# D
//  获取URL
1 J1 z5 O8 F/ F) F: ~window.location.href
# W3 r4 u9 d6 F8 j* _- D// 跳转到指定页面0 B$ L9 t5 l$ G  j
window.location.href='https://www.baidu.com'
! a. B* e/ U1 |2 t" u// 重新加载页面
( M# R2 z7 Z9 t- r2 W) O: gwindow.location.reload()
3 u2 E* G1 i. }: L</code></pre>6 o& T0 b3 T; r, Y
<h3 id="32-弹出框">3.2 弹出框</h3>
1 ^) n/ {- i( F! J! K# D; X: X<p>三种消息框:警告框、确认框、提示框。</p>" {3 J: z6 N& Y& P# ?
<h4 id="321-警告框">3.2.1 警告框</h4>- t% w% C2 w* k0 U! R4 p+ _
<pre><code class="language-javascript">alert("Hello"); M3 W( O! X( [  @
</code></pre>
6 n3 _. F2 o/ T# a0 r- Q7 A<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>' w% r% b3 Y5 K, R/ U% r
<h4 id="322-确认框">3.2.2 确认框</h4>
) F8 r$ Q1 r7 X# \0 I  V3 N<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>: x, q* o2 @% y- J
<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true
5 K: _9 u* f* f; Z" W3 _true" n3 m' ]  `8 p7 p" O6 x6 v* A/ [# ?
&gt; confirm("你确定吗?")  // 点取消返回false, ~% V  r6 |1 v+ }( k& ?5 c
false3 _3 H1 R" ]+ \; D  C7 o5 N+ [8 h
</code></pre>
8 X; }- A5 q, T+ S<h4 id="323-提示框">3.2.3 提示框</h4>
$ j0 k" b' h% m- ~+ r4 f" P2 [<p><code>prompt("请输入","提示")</code></p>& a. q0 O6 y0 S8 Y8 l
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>' f) R/ v! b2 ]) A% n" t
<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>0 M, M# W. H: ]' h: c% I& D
<p>如果直接点<code>取消</code>后端收到<code>null</code></p>
# N/ K3 ?% q2 A+ h<h3 id="33-计时相关">3.3 计时相关</h3>7 b3 x5 Q+ F9 {
<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>
( \& u" Q9 j4 ]<pre><code class="language-javascript">// 等于3秒钟弹窗% v* q; B5 G" P8 d0 C7 b& ]# U
setTimeout(function(){alert("Hello")}, 3000)7 Z2 D. ~' M4 C2 f9 O. u

' D& V0 U, `/ R% A4 i+ ]( Dvar t = setTimeout(function(){alert("Hello")}, 3000)
3 M4 w; u* r+ y+ D; T8 F) f" P1 l' N& F' Z
// 取消setTimeout设置, J' \, t: D1 o
clearTimeout(t)
- x" G) \' j9 j8 K$ S- a6 G% v</code></pre>& s/ K9 x) X' O" C/ A% L. e9 U! D5 m
<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>) j4 c2 _# z6 R9 c9 I9 c+ `
<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>- z/ q  e  a2 e% H7 \. t
<pre><code class="language-javascript">每三秒弹出 "hello" :
! a5 Z- T# D1 e& O& qsetInterval(function(){alert("Hello")},3000);. C: S0 `2 N9 y
</code></pre>9 m0 L4 m/ t5 n$ O
<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>
* K. G0 V2 q% y5 c. B/ Q<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);
! r+ ^9 B9 K! F" ^) T* {//取消:3 b- a) j" {/ p& J- ~; n
clearInterval(t)
' f( ^1 ]& _" |. L6 n2 c, i</code></pre>
, f/ G) l4 P( G$ D. v$ E& f  H
5 l5 N# i& Q: L  q
回复

使用道具 举报

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

本版积分规则

手机版|飞雪团队

GMT+8, 2025-12-4 09:48 , Processed in 0.070653 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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