飞雪团队

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

前端之JavaScript

[复制链接]

6831

主题

6919

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
22823
发表于 2022-2-12 14:35:41 | 显示全部楼层 |阅读模式
  H- ~: `1 r0 U
<h1 id="前端之javascript">前端之JavaScript</h1>
3 H+ r  H, ^( U+ U3 B8 W4 a<p></p><p></p>/ Y/ A$ F: q" B2 Y$ [
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>5 f( k" q8 E: N6 A9 e7 d
<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>
/ W' b, p5 T3 ~  P" b/ v- O& W它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>9 w& r- |9 U4 D7 b" _* J8 L
它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>
3 L0 C2 I+ m! @0 p# H: |5 S5 d它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>6 Y- ]" _2 N. m, B& r
<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
* r/ e/ C4 z( E8 Z$ c* P- S<h3 id="21-注释">2.1 注释</h3>$ D- {# S0 u: h9 P! E5 Z
<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>
, q, @. S4 r1 K<pre><code class="language-javascript">// 这是单行注释
& C" J) m/ Q- {" \/ T* D5 P& d' E. i# [# f( F1 n" r: s
/*
5 u/ b) h4 B7 {4 i( m) p& X这是多行注释的第一行,
, o6 z) b7 A' H" `. H# A. b这是第二行。& Y0 q# V, v! _# M
*/* W) ~4 g% O$ g, W& v
</code></pre>5 g" L4 n# Y6 @* v1 C
<h3 id="22-变量和常量">2.2 变量和常量</h3>* x; q6 _7 t* d. P
<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>5 @! N# s: ~8 }5 A
<ul>. m# f: B: Z; @: d: E- N  n+ |
<li>变量必须以字母开头</li>
6 R7 M  z9 ?6 B- \<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>+ `$ {& g9 U& I7 y" e% _  ]) x* w
<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>6 I8 M, [! A2 [9 u1 a; L% I7 \/ n
</ul>8 e6 G+ z  T+ y! K* f( g' i
<p><code>var</code>定义的都为全局变量</p>. y+ c$ w) [" R4 e% l
<p><code>let</code>可以声明局部变量</p>
: s0 m" o2 |9 D<p><strong>声明变量:</strong></p>
1 E  `' A* A4 D' n- u$ y8 a# i<pre><code class="language-javascript">// 定义单个变量0 d- g2 Q: s8 F( ~3 p, V* o  p" N2 a" r
&gt; var name8 l5 y5 C/ V- {8 B, I0 n* z
&gt; name = 'Hans'
/ s, E) U* Q4 j# j! A//定义并赋值1 a, t' f* j% h
&gt; var name = 'Hans'
5 s. F$ S: ]6 D. c1 G9 q&gt; name
  E3 w3 O+ A, d& q. G4 O'Hans'% C# D" L. t" K6 y6 v

! H/ ^* X4 N; ^8 J. ~// 定义多个变量
- E' ?$ s: Q  M, e1 N7 P1 E&gt; var name = "Hans", age = 18
( B; h# r" h* R% F&gt; name$ M* z1 z" ]6 b$ f3 N; \( [5 M
'Hans'
5 h  E# _( J8 \3 t% Z&gt; age
0 q: D7 v3 v( S5 Y9 j+ v/ w8 R4 F18
2 @. ?4 ?' I" T+ l7 O% c; |$ ^$ c3 ~* s% y) T  y  n
//多行使用反引号`` 类型python中的三引号
. i( C* z8 _6 X+ |7 E; u&gt; var text = `A young idler,
  c" e2 A, `9 ^an old beggar`
9 s6 b% x) {: D9 J&gt; text. |5 Y; L' X* l9 W6 O
'A young idler,\nan old beggar'2 p6 I; u8 _! w
</code></pre>: ]5 n+ Z! Q) G) j  s9 p& g; O$ Q" N
<p><strong>声明常量:</strong></p>7 A9 ?  e! ~4 O! y: h
<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>
$ }4 q& u" L7 q<pre><code class="language-javascript">&gt; const pi = 3.14" P+ I" d- M$ A" A
&gt; pi
" y; t' i2 e; G! ]4 D3.14
8 q  w% g! V, U/ b+ i: M+ T&gt;  pi = 3.015 m- R- }' q! Y! m
Uncaught TypeError: Assignment to constant variable.0 \9 I1 }7 K# w3 T( C# ~( z+ h
    at &lt;anonymous&gt;:1:40 h8 k% O- i9 C& t' ]! p7 _- j
+ W/ u+ s' a) O1 I  E
</code></pre>; \- m, z4 _# b: b4 D% W* b
<h3 id="23-基本数据类型">2.3 基本数据类型</h3>
0 z8 y4 f& V9 C3 Z/ z<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>8 P4 l  F2 n7 m* ]6 F7 ]
<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>
+ N+ m- _& s0 Y' I1 N" G<h4 id="231-number类型">2.3.1 Number类型</h4>
9 G2 O5 _9 M2 ?+ e$ P<pre><code class="language-javascript">&gt; var a = 50 v1 z/ b9 F. H& Q& y
&gt; typeof a   //查看变量的类型  $ d' n8 \2 c9 r- L8 h! d( ~' b/ S) {  ^
number7 \* y( ~" y, c3 o

- ?- o, \3 t* d) x; R&gt; var b = 1.3
0 N3 e) q+ D' F$ I&gt; typeof b1 F5 E+ F! A% P
number5 d$ _0 u* a7 X$ _4 ^  Q

. |! x7 {/ ~% t// 不管整型还是浮点型打开出来的结果都是number类型( M! U! l$ k9 r2 e
) Q4 [& T- A$ q& }+ `9 r0 p; r* x
/*/ ~+ r' O# o# {- @; k2 F
NaN:Not A Number9 C9 {9 c" n2 B9 [6 B
NaN属于数值类型 表示的意思是 不是一个数字
& C' `$ o" v2 _2 S*/
; t9 E9 t$ s* H6 }3 }: ~/ M3 ]6 N$ g* g9 ^* `
parseInt('2345')  // 转整型
# }% J- x) Z8 Q. q! E23452 V% G" o1 N1 t3 k7 K) v3 G  C
parseInt('2345.5')
9 ^7 D8 J2 Z6 W7 h; N9 }* b9 y2345" n, h( n- Q9 |8 ^# N$ g+ A7 B$ z. e
parseFloat('2345.5') // 转浮点型
2 v9 g; |0 ^$ i2345.5
3 ?& X: N4 Z3 MparseFloat('ABC')
' z9 ?; B, T. `NaN
6 {, X# u/ S% H5 E4 I7 w' yparseInt('abc')! O  }7 S8 i5 |  [8 P/ o' G
NaN! p, J* J) L8 w4 k: g* X
</code></pre>- U* f' D( F+ I
<h4 id="232-string类型">2.3.2 String类型</h4>! y2 N8 J! \; h$ d  \
<pre><code class="language-javascript">&gt; var name = 'Hans'
8 F2 u) A. K1 I6 _  G8 M&gt; typeof name8 I1 ?+ p  K4 C+ P+ e) `& j
'string'( P7 `$ L, B: k/ e

7 Z" s) g. A. k1 o//常用方法
+ g, K& O" k0 n) C( ]2 Y// 变量值长度
. l& [" p& |1 i( m/ h& n&gt; name.length# J* w; x$ U! h
4! E) c( b. O2 a( x
// trim() 移除空白
% F9 V- x2 f# V. I/ I&gt; var a = '    ABC    '. Y2 {& E* p# k* u; Z
&gt; a
, D4 l& D& F% I# V'    ABC    '& `) B; ]% j0 e* @$ H7 x
&gt; a.trim()
, r% }0 }3 c9 l. L  R; e* N'ABC'
$ Q' r" c& y& N, _# ~3 c//移除左边的空白
+ O  O; n! w; n* a! H&gt; a.trimLeft(); k3 C- {2 l& y0 t1 X& A$ b3 L4 J  E3 D
'ABC    '
) @; J, Z8 C. M9 c' \# p! Y* H//移除右边的空白
4 P8 Q3 g% y; y0 Q! p&gt; a.trimRight()
( R' m! [8 i  C* d9 H'    ABC'+ v3 d$ Q$ J0 Z) t# M* Z$ D
  K2 s. Z5 r* z
//返回第n个字符,从0开始6 t" w% G2 y$ F% E* V6 u9 L
&gt; name. I- V( `0 m1 ?4 c5 M" J  |
'Hans'
/ ^) b% d' L2 `3 @5 H&gt; name.charAt(3)
8 c! D% Q' y& ~3 r, P$ o's'
  r& k& O7 h& A  D0 O&gt; name.charAt()
4 a* Z; o" Q. f% c'H'
* n/ ]% D) X8 W4 o( b  ~: H&gt; name.charAt(1). ?; }+ S7 L9 C' \3 L7 Q
'a'
! Z2 D- _7 S" J5 y) c2 ^- u- K1 O% z5 g; s) W+ `" W  R
// 在javascript中推荐使用加号(+)拼接/ T) R; a  Q* `& H6 x- }
&gt; name9 ^  F( t- N* m4 \5 T
'Hans'
! T, t# B" }1 Y, g6 r. S0 |. H$ g&gt; a% B8 I7 l6 s* v& U# D5 N8 f4 r7 J
'    ABC    ') D7 t# y4 h5 C1 d- C
&gt; name + a
9 @3 `+ u: Y2 [/ ]  D'Hans    ABC    '8 O7 ~8 w/ G6 C/ O5 H# M, j; U8 p
// 使用concat拼接
- x- q& K7 @1 d3 L1 j&gt; name.concat(a)
. _5 G) Q  U/ E/ }2 G0 o, x" D& x* n; b'Hans    ABC    '& u1 M) v! D- D; M3 ^

4 h* W- s/ `7 Z$ g. }7 p! O//indexOf(substring, start)子序列位置& \5 m6 @) Z6 q4 R

: O$ Q4 ~9 z7 x7 a, g&gt; text
$ t4 y2 }/ S8 _9 h'A young idler,\nan old beggar'  e+ J; `# [" h" A/ S
&gt; text.indexOf('young',0)
0 N" r8 P& x0 Z1 a. s) W3 L29 U& E) l0 |' P/ P: Y$ k/ X

1 j0 M+ f  }) w- }. O5 B//.substring(from, to)        根据索引获取子序列7 K: p, p+ {9 `0 \4 K% }) j
&gt; text.substring(0,)3 i# M* F8 Y* ?, _& z0 h( r
'A young idler,\nan old beggar'# \6 T8 e& B" B& W3 ?, A, t& R
&gt; text.substring(0,10): G  v# x7 e8 q5 ]
'A young id'1 [+ Z" a7 B) t3 z* ~$ V* y

6 a2 D4 D3 B4 I8 d0 i0 D// .slice(start, end)        切片, 从0开始顾头不顾尾
# U5 y. Q! {3 z3 ~&gt; name.slice(0,3)
3 ^  K  l8 F. c% g'Han'
% y8 t6 K6 y5 w" N
& Q, f' M: B- ~+ M// 转小写$ t6 y, X! m+ X
&gt; name
1 o( ]9 F% s$ I'Hans'
2 y( @" H* J. Q% K' t5 r&gt; name.toLowerCase(); g- }0 I/ v  K& \
'hans'
/ _* q% r3 S& N& O8 P// 转大写
3 |0 U: ~& M% X: b( i6 S&gt; name.toUpperCase(), l9 w+ [$ r4 X9 H2 h
'HANS'' e+ C! T, z% ?2 t. D/ G
$ t# `6 H. z3 O! _$ S6 Q
// 分隔
9 J+ d$ |( y  Y8 o$ s% E$ {&gt; name8 N! y5 f; A2 {
'Hans'$ P0 l9 y0 ]6 ?# p! A3 S: k) {% }
&gt; name.split('a')
% _5 s1 N$ Z! O( i- d, b(2)&nbsp;['H', 'ns']
8 ^) E" I; o$ w  \- Q3 [  {</code></pre>
1 s* @6 P- T  i6 X<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>
! y- c$ X' r1 p5 o+ S& B+ J; i<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>3 V( V6 t: Q) M* C( n5 z
<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>
% K2 t( e4 ?" k; Z<p><strong>null和undefined</strong></p>7 H. ^6 [; ~$ C' O' c5 T* Y" S: H) p
<ul>' Z- ?3 {0 o. S5 @' L! A  Z$ a1 \
<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>
" {4 C) J: [4 ]2 e<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>  l8 {) [& Q7 x/ R
</ul>
2 k+ r0 p% z* m9 J8 x<h4 id="234-array数组">2.3.4 Array数组</h4>
* C7 ?3 f# e5 x) W1 Z6 P<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>
+ e; ?5 l) I* n5 }7 Q% z( b. H<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c']
& P; Q# r( p) M* o5 G&gt; array1
! p0 o5 Q+ u$ i  g# u(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']0 H' n% Y$ x. j
&gt; console.log(array1[2])  //console.log打印类似python中的print) _+ b! ?/ v& ^6 b0 C9 W
3
# m* F/ W4 S& D// length元素个数7 F7 Z2 N2 u  r8 C, d
&gt; array1.length
* D, S& m: R- r" Z6
9 H" z4 ?: S  X* B- R// 在尾部增加元素,类型append9 G: D7 o. F( p% d
&gt; array1.push('D')
0 |( b1 K3 h& S0 _( u: X' c' @7! {. C6 V; C) m% h, d; A
&gt; array15 N/ K0 s9 t1 W$ c, A9 X) B
(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']
8 C8 R$ n' U/ E) U7 @; t3 i" E4 W// 在头部增加元素
  S/ ~) s9 L0 H# s&gt; array1.unshift(0)6 l" ~0 e1 o& C" \
8! D7 i8 @* ^* k" j7 K
&gt; array1
  p8 [* J  r# \2 C6 k(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D']
6 l3 V4 ?9 y/ M0 p7 L1 f: F
9 Q, y  V# \7 E) O& a" h4 e5 @//取最后一个元素
+ r+ B# n4 a3 n( a. z5 D5 d&gt; array1.pop(); g' ~8 U/ ~* P" g
'D'
; B( a, Y) b; z( ^: ^, p% k5 m! D&gt; array1: X% k1 V- O% C: m4 ~; }+ X. b
(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']0 A' |3 h0 ]8 B: T+ q
//取头部元素
; V7 J* \4 I0 f: L6 F- x7 a6 j&gt; array1.shift()( z# e7 \8 K: U( D# f1 m
01 P+ d6 B3 S# ?& m: _  M
&gt; array1- d  K, r$ q7 H7 n2 g+ j5 M% p
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
( u/ D9 Q- b' i$ x2 _5 S. F/ h6 Y9 i( G5 C1 b$ w
//切片, 从0开始顾头不顾尾2 D: j, v& [3 B* l, I% S% B0 d6 |
&gt; array1.slice(3,6)
- ^; q! w( b5 s5 o(3)&nbsp;['a', 'b', 'c']
$ q9 A; ~5 M3 S* D// 反转
, Y+ e4 p6 D4 n; d&gt; array1.reverse()
# T8 ]6 N( V" i: e(6)&nbsp;['c', 'b', 'a', 3, 2, 1]* p& Q: v$ K  J* A6 R- ]5 H
// 将数组元素连接成字符串
3 ~& ?2 Z6 l% L( c&gt; array1.join() // 什么不都写默认使用逗号分隔( V0 {! D4 s6 o/ ~
'c,b,a,3,2,1'
$ k6 ]: `- x) C6 x&gt; array1.join('')
. O1 @' [6 m) N( y  z'cba321'3 u, @5 P5 h: s9 l* C' w! ^
&gt; array1.join('|')3 y+ T3 C2 t4 w7 n
'c|b|a|3|2|1'
2 Y  }8 C& Z! X2 h; I0 C! m9 _5 K# \# W: @1 b* Y5 E- l3 A  w- G
// 连接数组
  X1 \7 C2 ~( i8 x% W3 i, ?&gt; var array2 = ['A','B','C']
# ]/ N. J8 u' o5 n&gt; array1.concat(array2). W9 W  P7 [+ L& Q2 [+ L
(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']7 v9 f1 r% d  Z! i
, r1 n' X& P8 M! D1 g+ g1 o" r
// 排序
# j' l& e5 J- w/ d/ V) n$ e# G&gt; array1.sort()0 ?( r$ C) \* C1 m" V
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
$ e" v9 q$ }( Z; A. i9 P, X2 Q# `# |' O) Y3 m8 E2 V
// 删除元素,并可以向数据组中添加新元素(可选)
* K0 h! l4 U& c* E; ]9 X8 I( C&gt; array1.splice(3,3)  // 删除元素; h$ Y% x8 Q1 J& s$ }7 V
(3)&nbsp;['a', 'b', 'c']3 J8 t; A9 _5 x  L% k
&gt; array1: m1 T5 P7 K' H3 t) {
(3)&nbsp;[1, 2, 3]- N9 l7 L+ e& h, a3 k* j; k, Q2 a
&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素
2 t5 d0 K7 u8 R1 e3 @[]6 n+ ]' Y3 _' w
&gt; array1
3 g) e% [: [9 l3 t* U9 s(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']
& K8 x' U5 ]* ]' M: u2 l. \1 C# R; v4 O# S# F
/*
& s% e1 y6 e" _$ z7 M  j. psplice(index,howmany,item1,.....,itemX)! r2 J; \3 ?( L
index:必需,必须是数字。规定从何处添加/删除元素。) J+ }. R( `0 l7 G8 Q$ ?* R
howmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
, q0 L6 e; r; Q8 [. a! p8 H  \item1, ..., itemX        可选。要添加到数组的新元素
  k. Q4 t2 g7 F% f5 k( v*/8 m! B. q! p& R

. |& m* Z3 K# [4 l// forEach()        将数组的每个元素传递给回调函数
( f1 H8 Y: W0 n6 G8 V* `; F&gt; array1.forEach(function test(n){console.log(n)})
' g( h1 u/ ]- ~8 ?  c4 [ 1
+ m7 H8 ]! C; S! V& a/ @ 2
# |4 A4 ^, z/ r& W' u) v; y 35 p& _, L/ _9 H" \" x1 n
A' T5 G- X! [# e- h
B
" g+ U# ?; N+ x8 a5 M) { C
' O3 ~' I0 X' h, v8 f// 返回一个数组元素调用函数处理后的值的新数组
1 S% J, {- ~" Z3 R&gt; array1.map(function(value){return value +1}): |% h) I2 ^- M  M
(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']& |8 B+ i5 U# A' `% e1 a
</code></pre>
+ H# L. ~( t, c) b* V<h3 id="24-运算符">2.4 运算符</h3>
9 D! j: m5 ~% o/ G% x* A) Q<h4 id="241-数学运算符">2.4.1 数学运算符</h4>3 o- X$ J% ]/ r$ p% V) }6 n
<p><code>+ - * / % ++ --</code></p>
! I5 {$ \; `0 C<pre><code class="language-javascript">&gt; var a = 6
1 m& w* j; P8 ^0 H&gt; var b = 3: }: K% t( @  ]% J+ |* j
// 加2 g! P1 J0 t; ~; M' E
&gt; a + b
1 s( O' @) |& q/ Q7 W90 P- ], U5 d" `0 Z% h
// 减
7 e: ?" F) o* g4 Z$ ?5 F" ~&gt; a - b
, ]1 [  c4 ]2 d5 _1 d4 A7 h" `$ w3* x2 h- ]( w( Y; j" u4 R3 ?( Y
// 乘) G4 t5 X% P+ z) W$ G6 ^7 a
&gt; a * b& n  y, B$ p' w. v: a
183 D) }6 j$ o8 P4 ^, m  j
// 除1 u: F4 L# Z6 \: w& e. B) k
&gt; a / b
1 }' }+ Z3 F' Q( A  v+ i( O/ ]2+ K" O3 U3 v/ i, u- l
// 取模(取余)
0 {6 o' q- R7 r5 i2 V&gt; a % b
: |6 T3 i- T0 z, T/ _& P7 ~0+ A5 J- }% s6 C
// 自增1(先赋值再增1)* v9 u0 ?! V0 K. v+ [! B
&gt; a+++ d6 ?+ [2 o( g
68 C* h4 p6 Z$ r7 O! v! [# E0 S" W/ n
&gt; a8 U! c" v$ e) t) v
77 P+ A3 U5 y- a: C% t
// 自减1(先赋值再减1)
" L$ u' E; t1 u, h2 l, D&gt; a--$ `$ r* q$ m- L, J& `6 G
7
' L& o! @$ i' E" s+ e8 r&gt; a9 m+ y. {" {" t
6
* w, T0 s6 @6 u$ a# r, z// 自增1(先增1再赋值)- t/ y* ?! G* z' @! P5 s! J! h; r+ h9 E
&gt; ++a9 n0 y& H* V* A; @  y, y- Q
79 B. ^( `8 A8 D% W
// 自减1(先减1再赋值)
& d$ p$ g7 a7 v' w, k* x+ k&gt; --a
9 t' I& [: ?9 n6 o63 }' V" [, t7 Z# l" A1 E4 J2 s
&gt; a
3 o9 M$ W+ V( v* a6
  t- N& n. x0 S: b* k. I7 R( N* L8 D9 ~' f: F
//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
$ W$ Z- @* M% P4 [/ s  _* t$ r</code></pre>
3 A; H( T8 C! N6 d<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
& k2 B% B& k7 R2 {  x8 \<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>
$ O, j! C% ~  e<pre><code class="language-javascript">// 大于
3 s& p5 ^) m2 s0 h5 ]&gt; a &gt; b
$ a2 b( y3 t+ U; q4 a5 ftrue4 l- }1 \, [9 W# \  D8 F: R
// 大于等于/ W% F7 I- ?* n" B$ T
&gt; a &gt;= b" n$ ]% g0 O# a, R; m0 t
true
( L& ^, i' V& j; _4 ~// 小于
7 U7 @6 Z& \) }&gt; a &lt; b0 Y, Z8 E; c9 J0 r
false4 l  K  S1 x) b- r* F
// 小于等于
* L8 `9 d: m) i% ~  _' y/ K" U- y&gt; a &lt;= b
% b$ H" u! f+ p% e- S2 yfalse
. ~( y3 H/ I7 l/ G* r( O$ f' y// 弱不等于8 X& M. T4 ~% T0 S" }" a, g* V
&gt; a != b2 h: C6 d& M, K( }" o6 [
true
: c, m+ J5 b2 t: {# @+ N// 弱等于, m% X; V# I" i! G5 B, a
&gt; 1 == '1'
; d0 D! |/ T/ h; }true1 C6 r0 m8 a, R& O; V/ c
// 强等于1 s5 D& ^& B* D/ a1 F: H
&gt; 1 === '1'
, C9 a- @3 E# B# o0 b5 Q' dfalse
. C3 j6 U8 X2 c9 ]// 强不等于( j. Q/ `% a9 O  m) {
&gt; 1 !== '1'9 A$ w' `& f9 T
true8 F& A2 H6 o& J8 q
; k5 Y: L2 n3 S9 a2 t9 j$ Z
/*' J7 _  e# X( \! ]- ]
JS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
$ Q/ N: p- X  f$ v, R; p3 C*/
/ y9 n% C: u6 h</code></pre>8 T% U4 B8 [; @) q9 ~
<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>" A8 W, ^, e6 D1 z8 z" w+ G
<p><code>&amp;&amp; || !</code></p>, y" W+ c: S/ C* |
<pre><code class="language-javascript">&amp;&amp; 与
; g9 o: w' m+ C8 I# J|| or
0 M0 o; q8 x7 t# ]. H8 H! 非
3 X# U* ~9 j( b  n</code></pre>
+ \5 O  a" z" V  i2 B<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>) H# Z& y4 _0 V7 x+ @% r
<p><code>= += -= *= /=</code></p>' R* Q1 l% Q& O
<pre><code class="language-javascript">// 赋值
+ u, K. `1 ?1 c/ X! _3 F" o1 l1 ~&gt; var x = 3
7 L. E( a' E9 a8 C// 加等于+ v( P! q8 D6 G' @# g9 ]
&gt; x += 2
1 J% {6 a5 L. W; D! M5
3 K: W) \: m2 k: ]7 {. \// 减等于6 L4 z7 `4 r4 c/ \9 u
&gt; x -= 12 T; `* Z7 ?' V& e5 [
47 L5 h8 r0 f* `- g4 B; Q1 f/ B
// 乘等于* n' p: i" B- z1 [4 Z
&gt; x *= 2  w7 v. d2 z, ^7 u2 ]4 c
8# I: c, @2 N4 j9 Q& I+ V- h! L
// 除等于
3 U3 k( u3 f( z7 s3 q% B! l, [! s! T&gt; x /= 20 Y1 _' h- W7 |1 _  X, k+ r
4
  W; i7 p& }: y2 x</code></pre>/ q7 D& z: ^0 n* ?2 H8 d- Z: y8 s
<h3 id="25-流程控制">2.5 流程控制</h3>
. R7 ~' e9 N/ e" C' z4 T/ {) S- a<h4 id="251-if">2.5.1 if</h4>
6 {& d9 d8 g3 P6 j<pre><code class="language-javascript">1, if(条件){条件成立执行代码}
/ M3 j* T0 K# ~+ m  J4 S+ L: p2 z+ \! J
&gt; var x = 3) W' Q1 \8 w. `. E
&gt; if (x &gt; 2){console.log("OK")}: W; G) p/ v* T
OK& i7 |5 P+ a8 ]: _5 z( z
4 r9 m6 P" Z1 W3 s& _* [' F
2, if(条件){条件成立执行代码}
5 g" ?) J% r0 O% V- R. x8 z        else{条件不成立执行代码}7 @8 @* S) m8 L0 c) H
, K) v8 j( k' R
&gt; if (x &gt; 4){console.log("OK")}else{"NO"}
; ]% s$ p; R! W( Q# U( }7 H'NO'
* }' J- [7 S( s/ s% {" D' ^0 k- z& N" v7 y/ ^3 x% s/ G3 N" F
3, if(条件1){条件1成立执行代码} 7 c8 K& a7 y! i( U" i. J8 Q
        else if(条件2){条件2成立执行代码}0 w- B" V5 k& l  y* `: O
    else{上面条件都不成立执行代码}
" h  C4 |- S" X7 j2 L1 h  i* B' P- L( ]/ q) M' r2 Q, E4 l
&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}
& X3 m7 j( Q4 _ Ha
' H3 n( n" h& X' g</code></pre>$ l- E# ?  O7 Y0 C0 G$ x
<h4 id="252-switch">2.5.2 switch</h4>  M* R: D( O% }! m  g1 J; s3 V
<pre><code class="language-javascript">var day = new Date().getDay();
& z+ D1 ]& `4 sswitch (day) {
5 M( G0 p; ^# U3 T) g' J  case 0:$ W, t0 l' t7 w& {7 ]: n( M
  console.log("Sunday");, _5 ^- S$ |! W
  break;  \! T; R0 g7 l7 f2 v4 U4 D# O, U
  case 1:% g( ]+ [: u, l) A! B1 W  n- [' X( I
  console.log("Monday");
1 [+ W. W( ]% T  break;# I6 |; c' E2 S  h& S
default:% P( W( T! i3 x, p/ f
  console.log("不在范围")
5 \4 h4 F" E# t% b7 [}0 k& \. i4 x0 H& z, m6 ~; {
不在范围
! T% t8 B2 U, J( f  D+ r1 G# U6 S- |</code></pre>8 A, x- c9 r) h: A
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>
9 v! i2 Q" ]  A( J<h4 id="253-for">2.5.3 for</h4>
- [* b7 S4 g" s" H. |<pre><code class="language-python">// for 循环
& u$ J6 ^& o1 m$ @& S: `( g( S; G        for(起始值;循环条件;每次循环后执行的操作){
2 Q4 w8 `1 D1 A* w& y1 C        for循环体代码1 @. |6 O* v3 O1 k& s. l& g
    }
7 U1 f/ }6 Q& s0 y. s5 g* b, u
* O5 X& @- ]+ V+ V$ t( k: W6 I# K- bfor (var i = 0; i&lt;10; i++){
2 T0 I# i- _9 D. G3 h- S    console.log(i)0 s% O: ~+ K) V1 h2 Q7 Y
}
9 v+ U' J3 V: c! H! f4 y8 k) x  u        0
/ d5 a5 I! R; u2 u        1
8 p; S/ ^2 O% Y* x& j3 {3 V' \% C' |        2/ ?* d$ l3 `9 P/ N0 B
        3
9 [" b3 A& b5 b1 H6 f        4
' Y4 P5 L3 z: q' x7 W/ C& @        5) D+ D9 U9 i- z
        6
) @6 V' t' R  w- F* k        7) V& @, f. \% R/ g  S
        83 y; y/ Z6 I. @/ H$ I
        9
' d$ d& r1 D( M7 K! q</code></pre>0 E) r. ^6 R  P. F) m
<h4 id="254-while">2.5.4 while</h4>
& y# U# Q- E" i8 n* B3 |<pre><code class="language-javascript">// while 循环9 d: C5 C3 I3 X' S, ^0 i0 a
        while(循环条件){+ @. l& E! L9 Z3 W! d5 K
        循环体代码  t' s  v: K( c$ B' U* z* c
    }
5 T( T: }4 k6 C1 k$ {! Q  u  D# `. Y/ s+ ]' _
&gt; var i = 0  s- T- I" i4 L1 D4 [" V3 y
&gt; while(i&lt;10){
8 L) X& m4 ^$ |8 Z% g3 E    console.log(i)
* i; b7 \' k! r    i++$ I& m2 B0 \$ C; S
}* l/ l/ _  q+ I8 S1 W8 F' S0 S: f
0( M( w% U4 f& d
1# j! j' l' L1 o; n3 a
2
. w5 `0 b! U9 {" o" H! Y 3
8 w" h! X; F  V% N! A 4
  H/ S$ |$ U$ p$ o 5" |) o5 `" ?- Z6 I. h" y
6& Y2 h! b; W7 Q: O; i
7
$ `- ~- `( B$ F' q$ ~( q2 _9 `1 i 8
: X. j% l! l0 ]2 R( c1 B 9
; ]4 q# p  P& X% w</code></pre>( e0 ]- v. a* ?1 ]4 o# e) K1 l
<h4 id="255-break和continue">2.5.5 break和continue</h4>$ ?7 _# Z8 N" g
<pre><code class="language-javascript">// break
. ]! P' K) q$ h! V1 }$ d8 Pfor (var i = 0; i&lt;10; i++){  |8 S) w; Y, W4 Q5 I
    if (i == 5){break}/ C! v# ]6 m( z4 G7 V! Q6 C$ Q+ J
    console.log(i)
' ^4 t) B! r. h% u}
( X, g3 g$ _2 f 0  z0 l3 H* l# J& r+ \) Y( u& K2 j1 a
1
" ?* f' c3 ?$ C7 P% D  }3 \- B 2
9 @2 f- A! n+ }' k5 h0 T 34 e3 E6 I1 g3 `/ W, {7 U* s; }/ X- u
4
6 z, K& {% L4 G// continue
% h; x% c: ~- G" g7 J$ t1 L" rfor (var i = 0; i&lt;10; i++){
; h& m# y) B# n" w: Y- j( p. e" u0 L    if (i == 5){continue}3 G" E2 O# o" K1 ?# K! @0 w
    console.log(i)2 N+ ^8 c: R3 c7 i5 ?: H
}7 @# C# f9 f: O4 F$ Y
00 z0 V& C7 h' Q/ G
1
6 p9 o9 p( ]5 D 2
$ }- L2 f$ A! D, H 30 n1 z6 i! D( m) b
4; h, Y' s9 _  `4 t3 @, z
6" w# }5 k. x: v8 }
7
$ W2 U) ^5 j' T: d* i 8
$ W" y+ h/ A' r+ e0 L1 ^) P 9% j! Z0 n, p& n
2 @0 M3 U& m8 l& G
</code></pre>7 m7 `: W$ g( F
<h3 id="26-三元运算">2.6 三元运算</h3># o% g8 y, B7 Q+ {
<pre><code class="language-javascript">&gt; a
: s$ u4 A3 O6 Q7 L6
4 l) E/ P* R( W0 o& ]7 r; s&gt; b
, J% v; v; U% p) B1 ?5 j3' f% ~# \! @/ {: i* M8 Q
& _" N! }/ v' \: i% c" _7 x$ f
//条件成立c为a的值,不成立c为b的值, \% g  T/ m5 w: \
&gt; var c = a &gt; b ? a : b& T- I2 g. H  g5 A2 o, F# J
&gt; c
1 y% A6 X) g: }1 m6 O7 F6 F6
9 |1 E, z$ _0 G' q' M4 P% e' |+ J2 f9 ~$ W( g4 m
// 三元运算可以嵌套
% h. V7 W. I  S6 Z/ k</code></pre>
- w. Y7 }, _/ [0 P3 K<h3 id="27-函数">2.7 函数</h3>
3 \3 P6 ?9 r" x. p9 E: P( s+ E0 c<pre><code class="language-javascript">1. 普通函数: a* d: ~2 [% ~- L( E
&gt; function foo1(){
7 \; `+ x5 @, N$ B) {9 D    console.log("Hi")- w! U7 l1 q5 F0 S
}
1 k; T3 \) t6 b& P' T( Q
4 e$ `9 r, E8 S8 `&gt; foo1()9 L0 d$ H6 l2 n3 _
        Hi
2 ]* I8 d  d! u1 n. O2. 带参数函数
5 l2 ~1 P' j+ i. r/ q  D% `% S&gt; function foo1(name){* K) O: O+ m+ V2 u& D9 G7 U
console.log("Hi",name)% X+ l( D6 o8 s) Y0 f
}5 m8 f5 F! L7 T: Q3 G

# v* j$ [5 u* A1 `8 E* i&gt; foo1("Hans")2 S3 u- p' {8 b& _7 f3 F3 w4 j. k
Hi Hans
$ a, p, v1 y2 D
' t- r$ b% f/ [&gt; var name = "Hello"
  ~0 n7 _4 ^8 ~4 u1 {&gt; foo1(name)- y' C, S5 m7 i' w: C
Hi Hello
/ j: i. M8 G% H0 G  C
7 \2 o" {/ M0 m$ }3. 带返回值函数
3 j) I" G; o' k' f&gt; function foo1(a,b){0 f, t( W0 U0 J8 d7 L) U; Y' q2 p5 c
        return a + b   
5 }# {7 X2 ^5 T& H/ ]2 O% L# m}$ y$ n# d  n' B# M1 T- e
&gt; foo1(1,2)$ G& }; j" T, s' D* t* d0 e' m
3# N" H- @2 E  r9 ^+ r. f# D
&gt; var a = foo1(10,20)  //接受函数返回值* @- w8 w5 F: S
&gt; a- u6 Y+ b+ A  p: c- ^
302 x8 y9 o- c( H; {. l

# X, \) a# W1 s' h  A4. 匿名函数, v. ?4 |  b% X9 b2 H7 R: ]3 ^
&gt; var sum = function(a, b){! I+ F) l+ H4 X  k9 U, b+ a
  return a + b;5 f  f4 Q# d) @" M: T$ J
}
) l. C5 Y! s1 u) T: X&gt; sum(1,2)
' X! v0 ~( Y9 T- @7 ?3 o3: V6 a& L: ?, ^% R- T
5 `! `) c/ v2 Z! ~- C8 i7 R
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱! U; B* {8 X3 t2 ^/ V
&gt; (function(a, b){
' `; g0 y0 u, [0 `* `" H  return a + b
7 t( E9 E. g8 E})(10, 20)
: }" U  I+ j; Y, e6 b! |30; ?) `/ J8 _  e9 h( k* M
8 E, ?9 O% |& e3 n, X0 v
5. 闭包函数& p, p' E3 H: L' ]- M" P. v( B! f$ C
// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数# G  m4 ?3 V8 Y$ s+ P9 ]* p
var city = "BJ"( K' v6 Z" n  S. @& w
function f(){
  {$ w: y5 @' y# R  i( l& B    var city = "SH"$ T7 {* W" s2 s8 U
    function inner(){
: O1 g; e- q( w        console.log(city), H0 ?2 P; K# L1 n7 C7 z
    }
# e% v9 E8 f1 ^* x$ G4 J4 _+ S; u+ ~    return inner
9 n' P! H3 C  ?' i( g" M5 V7 S}
8 [  h, O/ n/ E% F- Jvar ret = f()
7 V0 f& {* o. ]# @* Z0 Bret(). E7 _' H* w9 d8 Y6 ~7 t. F
执行结果:
" u4 X1 Z1 g5 e& y" zSH. ?" S+ \$ A! {. ?% p
0 c. H; ~$ x; V8 M
</code></pre>/ ]) L% r4 ]) K5 H0 W1 g  A. `9 |
<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>
! R, W; b/ h( J$ j<pre><code class="language-javascript">var f = v =&gt; v;* A# F! H9 a: O6 D! g
// 等同于/ r! f1 p; D% ~# O6 p
var f = function(v){/ R) l  U8 u0 s/ D
  return v;
+ n$ w: F. J- I# ?}2 n9 r$ L; v; o  m. v
</code></pre>0 v3 b8 }( j0 M& C
<p><code>arguments</code>参数 可以获取传入的所有数据</p>
9 G; M. `( L, t<pre><code class="language-javascript">function foo1(a,b){
" C% C! Q4 x5 e; C, i2 e    console.log(arguments.length)  //参数的个数
% @% e5 L0 ^3 ?6 \+ J- n  I    console.log(arguments[0]) // 第一个参数的值
8 ]. q- v( D3 u2 w        return a + b   
- b$ F" a+ q& R) r}4 B) X. w- n7 t* ?5 d/ Q
foo1(10,20). p5 q& n9 K3 Q
结果:
' w9 Y& s5 R9 v; r& H4 d 2          //参数的个数 9 t% F  }& ~  r. r
10        // 第一个参数的值
6 e' F/ q/ a* p5 I& J% g0 p. @30        // 返回相加的结果
# |0 V, Z/ G, J</code></pre>+ h* ~! {# v, s$ @
<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>7 n, o4 ^" ^; \. @) T; l* p
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>2 C8 k- U! I/ l5 b
<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>
% d3 G0 |0 u; M$ P  d<h4 id="281-date对象">2.8.1 Date对象</h4># X6 n" m: M0 a& O8 {( U0 I
<pre><code class="language-javascript">&gt; var data_test = new Date()
. L* K! w; h8 C4 p" o0 `* ?, Y! ?&gt; data_test
; Y* @) {! Y' ~7 fFri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)% S3 o/ Y7 t# f# j
&gt; data_test.toLocaleString()
5 L4 U$ @$ k" X" e* M5 C'2022/2/11 下午9:44:43'& v4 K3 Z, }2 I' D- t
1 z6 A, w: i; e$ r
&gt; data_test.toLocaleDateString()
3 f0 ]& L0 i- J/ T* k; L'2022/2/11'
, c3 S" m# k% q; L+ I% Q# E, }" y8 \* T6 M
&gt; var data_test2  = new Date("2022/2/11 9:44:43")
' w' g  P8 |1 t- u9 A; C&gt; data_test2.toLocaleString()0 @; |5 e! }' O  A) N1 P
'2022/2/11 上午9:44:43'! P, ?6 b7 B6 v" d0 g! f6 c
6 {) g8 [. L: J3 c
// 获取当前几号
/ D$ g+ c, d3 j, e+ A1 k# I( A3 x2 q&gt; data_test.getDate()) J7 t/ ~% Z  m  D
11
1 h  e4 \/ F% V2 f* r! @7 F3 \% z+ J// 获取星期几,数字表示
/ _8 k+ S; ?0 z6 K/ ?1 t) U&gt; data_test.getDay()    ~" G% n* [( m1 g; ~" Z
5
( c9 _, s! j. N  D( Q6 f// 获取月份(0-11)% L7 v4 }; K3 F  R# F
&gt; data_test.getMonth()8 N/ Q" u9 B8 K. J. N3 h! c; n/ {
1
( X$ `0 c) Q9 K$ U// 获取完整年份2 i( ~  |# r/ i* k
&gt; data_test.getFullYear()
7 u* B7 H: A  q! f0 `2 m$ m' p) L20226 d1 ^; U. m* O- q3 G9 C- }  A) I
// 获取时: J; O% A5 t8 E3 _( G: ~' h
&gt; data_test.getHours()+ {" ], F) p2 l9 y4 `
21+ i2 w# K0 n) ~& F
// 获取分
% f2 E, W4 y; R& l8 W- D5 ]6 B* _2 {0 l&gt; data_test.getMinutes()
+ }) n0 H; v/ H7 W- j44
2 j, a$ Y0 J  x$ ?1 T1 E# g6 `- v// 获取秒
' B' r7 \9 E/ p' [( p7 L* i&gt; data_test.getSeconds()- l, V) d/ y# d: K- v0 [6 k* `. w; z
43
6 L5 y8 ~; J% [) Q* s// 获取毫秒
3 d3 I  Z( E! C&gt; data_test.getMilliseconds()
1 R( g/ t) T+ x$ z) B290
7 K8 D: w* j! k' `; ]( w6 U7 k// 获取时间戳
, z3 Y. Z3 l% a% G1 {$ g&gt; data_test.getTime()
) v) `0 m, g% U3 t% G1644587083290  w! Z4 w7 ~6 d3 q
</code></pre>
$ M% l; x4 b1 d2 @# H$ X, O+ r, P<h4 id="282-json对象">2.8.2 Json对象</h4>
* }( d/ J( T1 X<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串
3 Z" X8 v1 U0 _JSON.parse()  // 反序列化,把JSON字符串转换成对象
6 D8 O* z2 V% T& M) n2 R- i  v
9 k+ k8 z1 f0 R9 u# p& M// 序列化1 K) f& u  A! T, j
&gt; var jstojson = JSON.stringify(person) 4 U: f9 n: u# S# _1 v' b: m
&gt; jstojson  * ~, [/ o3 z8 m' n- A
'{"Name":"Hans","Age":18}'
, p% A7 N( f" l+ s& n' P9 |6 ?( T) M' z" q* [
// 反序列化" }; J! r. S& B& {' M
&gt; var x = JSON.parse(jstojson)' {5 G2 Z& m: H
&gt; x
) {7 o* F. k. u& L/ H  i{Name: 'Hans', Age: 18}
3 e" Q1 ^* c! f+ u&gt; x.Age) S5 i" }& r' \# d3 X: n
187 W- I4 @' Q4 `. l. z2 j2 m1 |' A
</code></pre>
* C% k$ T2 g7 {$ c, y' D7 z' Z<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>) b2 @; f9 o( U( I9 f5 E$ J4 E
<p>正则</p>( ^. n! \* {3 }  S+ B
<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");
- ~1 m+ N4 d6 S: E: U  m1 g6 B&gt; reg1
: M" g: o: P$ ^* I/^[a-zA-Z][a-zA-Z0-9]{4,7}/* y2 C1 g. _5 |6 H6 O4 V1 p
&gt; reg1.test("Hans666")! ~7 z# N" P( n( Y% b# s+ u
true, I" m6 ]0 W' o' A5 j+ V
- E' [3 [9 l  s) z. H
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/5 H) Q: @  k8 G' _
&gt; reg26 B$ L) I- f2 T- w
/^[a-zA-Z][a-zA-Z0-9]{4,7}/
" H3 p/ X- g, j3 _4 Z&gt; reg2.test('Hasdfa')
7 G, [$ M' s" ytrue+ ]' D& v8 t3 O+ [( b' @

$ z! E+ L! \+ y2 ~* w: G$ n% X全局匹配:; T) F9 t0 t! J4 M
&gt; name
# x% v6 f* M' Z'Hello'$ E  ?& m) m6 l& s4 D  i
&gt; name.match(/l/)/ ?; b: {. p3 y( e8 s( I0 ^
['l', index: 2, input: 'Hello', groups: undefined]. d& t, d  Y+ l% P
  Z+ @9 }- [+ D/ G* S
&gt; name.match(/l/g)
& D9 P9 _' b/ O7 z; F/ ]8 V, }(2)&nbsp;['l', 'l']* e4 h. I- {( T
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配% A1 c5 ]/ p* C7 v* w2 J4 W5 n* R
+ R+ ?1 g8 |1 N- R
全局匹配注意事项:; R! x  d8 ~, L+ \; t9 c
&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g6 b+ Q& [3 |; Z3 D% ^4 i
&gt; reg2.test('Hasdfa')7 c2 t1 c( @5 }7 L1 U+ I6 y
true+ s' z0 z% Q& A' R/ e& F: J1 X. V
&gt;reg2.lastIndex;
& p: q& t2 o3 c- n+ u/ ^6
0 m$ @7 Z8 V6 r8 g* w&gt; reg2.test('Hasdfa')
$ I+ N  I. N" zfalse
  c9 O- D1 |7 F! \, \* W5 C9 u# K7 Z&gt; reg2.lastIndex;
: y( z0 T5 {" o4 {06 i! G6 U- M/ F
&gt; reg2.test('Hasdfa')
$ k7 r+ Z* \: W$ F9 Q: jtrue) X( {- m3 b4 ^" H3 [& O. ]+ P* e
&gt; reg2.lastIndex;
. l8 K3 y, u) ^! y8 x' f6- ?  O/ E8 [5 U2 x
&gt; reg2.test('Hasdfa'), w+ M7 y% ?" [+ X3 y9 {. N( j1 ?9 T' k
false
' t; ^/ w/ @- H& B. y# ^3 v% ^! B&gt; reg2.lastIndex;
5 Z. ~7 @" F1 r& N$ t+ M- ], y0
+ O+ E. w$ G8 \6 L' [// 全局匹配会有一个lastindex属性4 u" x1 Y+ K  ~% k4 {' H8 O
&gt; reg2.test()/ V. T: q6 `" q! @0 `! A; S( l
false. n. @3 `8 L: k6 {+ K; o- U; L
&gt; reg2.test()
$ v* L6 o! a, J6 Htrue' T  O! y/ b- \; n8 |9 J% U" ^* G. o
// 校验时不传参数默认传的是undefined% \: B' X( C7 e
</code></pre>* b" n& x/ F4 V- x) D
<h4 id="284-自定义对象">2.8.4 自定义对象</h4>; q( Q! F6 G% z4 H/ M* l1 }; \
<p>就相当于是<code>python</code>中的字典</p>/ Q: P, a5 P0 C; b/ p
<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}5 p( u& A5 x+ P" U
&gt; person) S+ b- |: t; S/ ~; G, L/ b0 _7 E
{Name: 'Hans', Age: 18}* g8 U3 ]4 E7 j3 x9 F, [
&gt; person.Name4 ?: W# E8 ^+ s! t: {5 x3 Z
'Hans'
4 l: r8 V) s+ x$ N: w&gt; person["Name"]- q6 s; l! ?1 y, c' v
'Hans'/ e' ~+ ~: }. j6 L4 G" H4 ~# K

+ S) `- |/ U6 H4 A2 X& |// 也可以使用new Object创建6 C( J  W+ f4 {9 i, [$ p0 i, a, \
&gt; var person2 = new Object()
  X+ G" T/ M1 l* p3 {9 `&gt; person2.name = "Hello"( C  C, G* ~* u1 O
'Hello'" x5 H1 B9 B( l: U9 V; n
&gt; person2.age = 20
. a" W& q3 f1 N2 }+ n* W20, f9 f# T2 Z- y
</code></pre>
5 s( E, i! q: a- b6 K3 I, l<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>* V8 x1 G* Q: [! [3 O7 ~/ h. W2 B
<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>
+ V3 B8 m8 l# J4 s3 X% W. E<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>. w% q+ ^! U9 s$ J0 t# p2 n
<h3 id="31-window-对象">3.1 window 对象</h3>
( W6 y; G+ Y7 S* x, y$ f" n' a! P3 I<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
6 `5 B+ d3 D- F<pre><code class="language-python">//览器窗口的内部高度
- e* f3 {# j6 ]4 _% l' |window.innerHeight ! O9 s" r! d$ {/ V4 X. {
706
" N, ?% P) ?  f' d//浏览器窗口的内部宽度& V4 W, K( V  u# a' H
window.innerWidth
! D9 S7 {6 Y7 d; h' [1 s1522
2 p* W8 i' M" ]7 d1 R// 打开新窗口
( d0 N$ \8 H% b$ ^2 Y9 i" e5 K8 Twindow.open('https://www.baidu.com')
& I7 N3 t& M, Y& o; W. m$ gWindow&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}
& P* q( A4 o3 u, K5 l5 [// 关闭当前窗口0 q: S# o  Q3 F( E6 A' h& u, S
window.close() , A& [. r5 g, G- l4 x0 N
//  后退一页
" s* ]( A: C+ ~6 a" Ewindow.history.back()7 |/ g) D. o; Q0 v; D8 l
// 前进一页
  {% r3 c6 c/ H; ^  ywindow.history.forward() : y) U. J1 f6 J' ?  J* I
//Web浏览器全称, G3 ^8 Q. {( r) L
window.navigator.appName" L1 e( r, c) |- `
'Netscape'
3 c( z' ^7 B5 M* b9 @// Web浏览器厂商和版本的详细字符串
1 U4 x" P; F& H# v6 fwindow.navigator.appVersion3 o# i) E; n' T* Y, f! S" R7 ~
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36': H8 h, n; u# o3 M" N: {
// 客户端绝大部分信息
0 T0 d7 Y3 r3 u- X4 Z) V0 Fwindow.navigator.userAgent4 `6 h3 s  z3 Y# V/ s
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
2 V; W+ n- I3 T// 浏览器运行所在的操作系统
  ~8 J$ O) H6 S0 I0 b0 j% `% hwindow.navigator.platform
2 W/ R; X# s3 Q'Win32'# N8 k% W3 B0 m& Z5 t- d. e
4 E; X7 P8 W$ H3 b5 G
//  获取URL
0 m$ S: w+ k7 T7 u- n7 twindow.location.href
& ]' D) [( Q' D( V* Q+ j5 u// 跳转到指定页面
1 y  ]3 ~- J+ l& B7 Z: q+ p  gwindow.location.href='https://www.baidu.com'' m2 y4 d! ^8 y5 y6 E
// 重新加载页面; T! ]' \. @* [+ b$ j5 n& |; O
window.location.reload() ) o) b7 K6 ~; H: Z2 Y4 s1 ~
</code></pre>
$ w1 @# ^2 l6 {, M! q. _<h3 id="32-弹出框">3.2 弹出框</h3>+ O" W3 a, d# l" v) a
<p>三种消息框:警告框、确认框、提示框。</p>- L3 W  o5 c, u! i% [, R. h
<h4 id="321-警告框">3.2.1 警告框</h4>& O; k+ T/ }+ P2 r# C% J
<pre><code class="language-javascript">alert("Hello")) I$ b$ [8 y, V! w: [4 j
</code></pre>
4 y/ m* a  Z' J+ T3 S<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>
. M4 F2 k2 @' m3 b<h4 id="322-确认框">3.2.2 确认框</h4>) o% W2 P9 ]* y3 z
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>
; a6 F2 q9 [1 r<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true
$ n; v, A7 z5 R* }# ]9 G: ytrue  ?" q% |* @5 Q
&gt; confirm("你确定吗?")  // 点取消返回false
& d3 x2 |2 _$ {. Dfalse: E2 a% \  {* J1 v( P$ T: `
</code></pre>5 B2 B* R  u8 p4 w
<h4 id="323-提示框">3.2.3 提示框</h4>
; h6 z' ~' ?8 N5 p" m+ w<p><code>prompt("请输入","提示")</code></p>  c8 z! a" `; D
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>
+ C& `0 [# u0 ~. [<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>. G( j; R% ?5 w8 q
<p>如果直接点<code>取消</code>后端收到<code>null</code></p>7 j8 R# n( d/ \
<h3 id="33-计时相关">3.3 计时相关</h3>
- z. D: a3 E* z; o) c<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>
7 l/ v# M7 S  {; l1 N2 |<pre><code class="language-javascript">// 等于3秒钟弹窗5 k+ }% I5 \0 J5 [' B, P2 t/ ?5 `  a3 ~
setTimeout(function(){alert("Hello")}, 3000)
7 O+ u/ I  r, N; k! j6 z) o; A: a9 V+ K$ h5 C5 U
var t = setTimeout(function(){alert("Hello")}, 3000). k% H0 U9 Q6 ]1 J

, K5 Q8 |, t3 s# g+ V// 取消setTimeout设置3 b1 t+ w( A: I) C( B
clearTimeout(t)0 ^+ b, p* f6 P$ _% F+ x" K
</code></pre>
1 D2 |7 i, P7 g7 {, e<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>& C% e" d; M, j5 X$ f  h
<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>
: P. }: V; n) |0 o- S<pre><code class="language-javascript">每三秒弹出 "hello" :
0 I/ X7 p! ?; G# B. n; FsetInterval(function(){alert("Hello")},3000);( W/ `4 v3 T% U9 R# G
</code></pre>" B: {7 V5 Y2 y1 s+ i2 l
<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>$ @% F- w% l  T& ~6 c/ E
<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);  O' K) G! m+ [
//取消:& E, B& I* N. L2 q- ~$ P. V8 L! \; u: c
clearInterval(t)
9 a" Z" \1 F* ~1 t</code></pre>
9 P( r+ d( i0 j+ j1 |6 A+ N3 \
1 Q, J- l5 I# n( e- U
回复

使用道具 举报

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

本版积分规则

手机版|飞雪团队

GMT+8, 2025-7-1 10:12 , Processed in 0.068603 second(s), 21 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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