飞雪团队

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

前端之JavaScript

[复制链接]

7957

主题

8045

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
26201
发表于 2022-2-12 18:11:35 | 显示全部楼层 |阅读模式
2 C0 S& v: I# I# P
<h1 id="前端之javascript">前端之JavaScript</h1>
. T: M: |; B7 z0 z. S7 g<p></p><p></p>9 t2 J. n( K; y
<h2 id="1-javascript-发展历史">1. JavaScript 发展历史</h2>
5 Y, h1 v# {/ n- n" O<p>JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言,是一门多范式的语言,它支持面向对象程序设计,指令式编程,以及函数式编程。<br>' B6 `- n5 D: Q" A
它提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。<br>3 O. h; p# ]6 w0 Q
它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。<br>( n8 }6 q3 Q/ ?8 {
它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。</p>
3 x- j0 [, k# p, e4 x<h2 id="2-javascript基础语法">2. JavaScript基础语法</h2>
0 {9 [9 g$ J% X$ D<h3 id="21-注释">2.1 注释</h3>) ~: t5 S$ h; V5 U; q0 m8 U3 g. Q
<p>在<code>JavaScript</code>中单行注释使用<code>//</code>,多行注释<code>/**/</code></p>
* X" E, p& `- ^) j" V5 @# }<pre><code class="language-javascript">// 这是单行注释
  {6 Q1 C+ o: V8 H# d# x) y: s; w0 w" G6 N# ~. w8 t  E0 v2 `
/*
4 q3 P, |& C$ O& V* C5 @这是多行注释的第一行,
; o# f/ K( x1 p6 [这是第二行。
, X: W$ Y9 i7 U4 P% G*/
0 U; x% |7 I) i( _* e( }0 {) ?</code></pre>
7 G1 q# q' z3 D# q2 i- Q<h3 id="22-变量和常量">2.2 变量和常量</h3>
3 \0 Z' ?3 y" z" y9 E<p>在JavaScript中使用<code>var</code>和<code>let</code>定义变量:</p>$ I/ V: b8 f% ~: e1 `  t
<ul>
, Z3 A. A+ |! M# G5 d' ]<li>变量必须以字母开头</li>
) a5 v& F' _' `$ Q# B<li>变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)</li>$ K' X4 K0 [+ I1 O  f
<li>变量名称对大小写敏感(y 和 Y 是不同的变量)</li>
, q9 P8 h& `, n* h  b6 E</ul>
  i: S8 d; {! V  t% I/ O/ ?$ x8 h<p><code>var</code>定义的都为全局变量</p>; R$ B2 r8 O5 [8 T- `
<p><code>let</code>可以声明局部变量</p># X; o! @5 p, o; s
<p><strong>声明变量:</strong></p>
) Z- Q( b( a- E$ g/ B$ F# Z9 ^! @<pre><code class="language-javascript">// 定义单个变量
# x. J  f. c. V* S( ^6 B&gt; var name
5 ~  y8 ]  V4 b&gt; name = 'Hans'
( h$ x& ~) f  M" G//定义并赋值
! Y2 d" i% ~" ^7 e6 S&gt; var name = 'Hans'6 @% f9 q9 S$ ]4 u4 _8 h5 \( V
&gt; name3 _: c9 g7 }. h+ u6 _! k
'Hans'
4 h; T. K' w; I, @
2 n/ K$ Y: R/ P! _// 定义多个变量
; R: l6 O5 O2 u& u&gt; var name = "Hans", age = 186 p! z. W; H, h6 g" d* ^) z
&gt; name* J6 P7 `3 d& C3 y. \+ [
'Hans'
- \; v0 _3 X! b1 I&gt; age
5 D0 E( A- F- z" C3 @: X9 `# ?18
1 A- ?! R, V1 B- q# E2 P' S  u: d+ \6 \- I9 B
//多行使用反引号`` 类型python中的三引号+ G/ t/ O1 e! U. R; ~5 B
&gt; var text = `A young idler,, R! Y' W' G" X
an old beggar`
. e; r& m4 M7 V8 E7 V&gt; text
" Y. V2 ~/ x0 x3 i8 ]/ Z. y'A young idler,\nan old beggar', Q; y7 s$ x+ [% x# a0 I. o
</code></pre>
# y) w0 H5 {' c$ M<p><strong>声明常量:</strong></p>
9 g% [; \) o6 z  L  H1 H# Q<p>在<code>JavaScript</code>中使用<code>const</code>定义常量</p>
1 z7 h1 I6 ^5 \9 D0 t; e. ?<pre><code class="language-javascript">&gt; const pi = 3.14
* @/ T3 n  @* f&gt; pi
; C8 W, `  G& I3.14
5 Q9 G+ U, _( T4 |! `) z- ]&gt;  pi = 3.010 l5 n  S3 C9 ~
Uncaught TypeError: Assignment to constant variable.7 M5 _! P) ?6 P
    at &lt;anonymous&gt;:1:4
; ]( s# y' R# f2 T) u" C8 Z2 K7 N/ x( a( G8 f' V* `  g
</code></pre>3 F& C0 A1 ?% \" ]3 x
<h3 id="23-基本数据类型">2.3 基本数据类型</h3>3 G; N) d7 X. z- R
<p><strong>值类型(基本类型)</strong>:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(表示独一无二的值,ES6引入)。</p>: |7 E( y8 L8 v, `' L' t
<p><strong>引用数据类型</strong>:对象(Object)、数组(Array)、函数(Function)。</p>
' N' l0 |1 {# ?$ d- ^<h4 id="231-number类型">2.3.1 Number类型</h4>1 K2 [1 ?- \7 X$ [! T
<pre><code class="language-javascript">&gt; var a = 59 X" w( e) |' Y6 l
&gt; typeof a   //查看变量的类型  
- H/ H2 \+ z, R! l8 Vnumber% o. e! Y/ h( _& G+ \/ k

( E; i0 l8 F* @) X&gt; var b = 1.3, x! ~0 x! T! ]# Q+ k! F! U' E+ j
&gt; typeof b* R* g& \9 R- Q* }9 F! {
number
2 i! M8 H6 t# G4 d% X
8 z6 T, k- O. O7 q# H& v/ H# ?! ?// 不管整型还是浮点型打开出来的结果都是number类型3 O5 j4 w; W, q7 u, v# i
& T# D# ?# h: y2 q* _
/*
" Z+ L  P0 f7 i1 i( u2 T2 WNaN:Not A Number
3 u1 _& a8 ^) H; c1 PNaN属于数值类型 表示的意思是 不是一个数字9 M- ~9 X5 g% v2 E& {+ N4 y  {
*/
4 u) R# G# u5 Z8 o) m8 _; [
" I! j1 A! }0 u( }7 k. z+ }parseInt('2345')  // 转整型
2 d" H% y& M" ~9 G% ^" H2345  Y. a3 [/ L$ N) _% y$ @6 B& Q
parseInt('2345.5')7 b) C, r7 Z, D* e' u
2345  N. U& ?; ?* O% o
parseFloat('2345.5') // 转浮点型
& J5 b# j* a: r+ ~) T0 j3 Q2345.5$ `+ B) w# v6 s8 R1 s. w4 x% z
parseFloat('ABC')# I& l, n3 M( \5 K4 k% C9 G
NaN8 a, B/ I! x/ p4 b
parseInt('abc')
' e$ F/ r. B) {0 zNaN# A1 N" q% D) O( C& p# ]
</code></pre>
" G6 S( d; W9 h( v/ @3 h4 d, s<h4 id="232-string类型">2.3.2 String类型</h4>2 z: l9 g  c2 B3 M- `; G
<pre><code class="language-javascript">&gt; var name = 'Hans'
5 o! a+ u! \8 z* ]; h' i0 N& D0 Y&gt; typeof name6 z$ C& k- j" I& T) s
'string'/ v1 r* }5 z4 q2 z/ \& B

+ A) B, G5 u8 }, W' r//常用方法
0 r: R$ g% s- v/ k# u// 变量值长度
. }. u( }$ i9 M- |&gt; name.length+ i* P8 I( i7 [; X. i$ m4 L
4; S6 w$ L! d1 g0 ]* [" J% l
// trim() 移除空白/ A) c, v& g# W3 ?% Y
&gt; var a = '    ABC    '" r* i9 X/ ]- L9 ?. l% i# V
&gt; a
* ]/ D* k; Q$ ~/ h# V& o'    ABC    '! l' M0 Q' i, ~7 E/ \9 K& m. B
&gt; a.trim()
0 K+ P- D% [  m- g'ABC'6 w1 D% a+ u" `: `
//移除左边的空白- L/ H5 J0 A6 C& X
&gt; a.trimLeft(); e$ H+ r$ J$ t% n+ U$ R
'ABC    '2 ~, Q. `' O: b9 {
//移除右边的空白
( X, B+ e5 D4 ]&gt; a.trimRight()5 v0 Z3 |3 F0 M1 ^7 A7 ?( s
'    ABC'/ c# N! Y; p( S# q0 C+ a2 D% Q7 x# c8 V
: Q7 Q" J/ q: B  r3 X& h
//返回第n个字符,从0开始
0 }& t) R* b5 ]( H# H&gt; name
+ i5 m7 R! H6 Y* ~9 z! f'Hans'# T+ M' m9 ~3 U: |* A
&gt; name.charAt(3): b/ A: D7 O; `8 F
's'
* L, Z5 u( M% n9 ?" r&gt; name.charAt()
  w- g9 d+ c* q8 W' t'H'0 b! E: s' [0 ^: V9 ^
&gt; name.charAt(1)7 x4 [6 I4 J! `1 l. m
'a'
5 E) Y) W9 Z+ t% E2 D1 i) W: u* O; U8 w8 I
// 在javascript中推荐使用加号(+)拼接7 i1 f/ |1 B1 |1 u
&gt; name
3 q$ _2 z5 a* h* H% }' h( E'Hans'
. @9 M$ W* P9 j" N7 v4 r7 s% A1 E&gt; a$ t2 ?1 a: W& Y8 F
'    ABC    '
) r: k; ^) {6 W; k7 ?&gt; name + a
* O& P- p+ r4 Y4 P$ j7 q9 V'Hans    ABC    ') `- n% h8 V9 ^6 l3 ~
// 使用concat拼接
- n- o3 O. W3 ~* V* G& b& I&gt; name.concat(a)
" G$ S& L- l+ U( s( W'Hans    ABC    '
" _2 `: G. |/ z4 @- M' E! \
( O* ^- ?% \" [6 E8 g! }, o//indexOf(substring, start)子序列位置. v, p7 n7 @% f/ a. c

# v9 j- e* Z& W6 P2 o9 R  ]/ i&gt; text
" ^8 K' v# Y; s% m* j% c5 b2 U'A young idler,\nan old beggar'/ R" T5 b* f$ M9 v9 b0 b  m! C
&gt; text.indexOf('young',0)3 B* o4 ?& m# h2 }
2
8 w5 A% F5 c+ X- L9 E+ Z
+ r/ t( V3 ^1 i& q//.substring(from, to)        根据索引获取子序列. b2 p: N3 [9 `+ o
&gt; text.substring(0,)
4 N0 F- Q: n% p7 h7 u3 a* _  J3 A. E'A young idler,\nan old beggar'
2 |' `  @8 U$ Q- b: h! E&gt; text.substring(0,10)
1 q9 B: I1 e* |. H! e'A young id'
) Z4 `! O7 N! p6 ?- d; i) Q# X
" n* D& W. j( r& s* x& y// .slice(start, end)        切片, 从0开始顾头不顾尾
2 O) H! \1 `. Q0 P  U. S) w&gt; name.slice(0,3)5 q; V% J  o* }% T7 K% L
'Han') v- v. J- @! x" z& K
+ I' m; j2 y+ j# T
// 转小写! d! \) j5 h( f+ |5 f. a7 }* P- k
&gt; name% z) b' s3 n% i) B
'Hans'
- M5 X& _1 e* S9 g. Y4 Z) V1 c; b&gt; name.toLowerCase()
7 Q8 Z4 i3 L; }) K8 V'hans'! K$ J3 E+ W/ z2 k2 E( y
// 转大写% e* H2 R" I' R, A& t' D6 S* x
&gt; name.toUpperCase()
! o! `) A! l& c& o'HANS'
: T( d9 q7 m- c0 U
- H- z( O, B# P. U. z5 m// 分隔
/ W  q2 I* T/ a: @. ^, W; F&gt; name3 z4 o( a' b1 f- |: j+ \9 E, p
'Hans'6 s+ i0 G' n6 y, H+ M9 u1 `# J
&gt; name.split('a')( q( O& u4 c- h  q
(2)&nbsp;['H', 'ns']+ ^; b8 `! j: o+ M! Z7 u
</code></pre>
5 f) P+ _8 L5 @1 v  t' P8 Z7 D<h4 id="233-boolean布尔值">2.3.3 Boolean布尔值</h4>  P0 x. Z; D% |6 e7 h
<p>在<code>JavaScript</code>中布尔值<code>true</code>和<code>false</code> 都是小写</p>
8 z. F3 o- C  [: w1 o% e# `<p><code>""(空字符串)、0、null、undefined、NaN都是false。</code></p>
  p7 W* Z7 x( ?5 r<p><strong>null和undefined</strong></p>2 j/ T" W2 R( M1 U* D  O. z
<ul>
* C* x) G1 ~7 u8 ]<li>null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;</li>1 X& Z' H) ^" L  J
<li>undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。</li>
3 z0 ]- u( f. y5 f</ul>4 x9 D  X  j3 w( ]9 o% z
<h4 id="234-array数组">2.3.4 Array数组</h4>- A3 p" M) Z0 i4 o+ O3 K
<p>使用单独的变量名来存储一系列的值。类似<code>python</code>中的列表。</p>
& z6 q& l; Z' X0 ^$ n. c/ X4 k<pre><code class="language-javascript">&gt; var array1 = [1, 2, 3, 'a','b','c']
2 x3 s7 d4 ~1 N% u&gt; array1( ~4 k" r! m* G
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']/ v# m7 L5 {0 e, @
&gt; console.log(array1[2])  //console.log打印类似python中的print% y4 i: V0 W) L/ ^" w3 W
3, p# i- q, _& Q" t- F7 [5 c* @4 `
// length元素个数
( @& _5 y9 O& L- u! o; U8 R&gt; array1.length3 Z4 l4 q! v) A2 Q  [. I) [
69 q9 c+ j" _+ m+ C, B2 o+ i
// 在尾部增加元素,类型append
4 ?' V5 k1 D/ B&gt; array1.push('D')0 Y  x4 \! O" I; E- I' O7 _  X
7
3 `! }' b2 y# T&gt; array14 W+ V( N+ u' D' G) j
(7)&nbsp;[1, 2, 3, 'a', 'b', 'c', 'D']
1 a0 f4 i7 ^# O* _* M( I6 f) p* T// 在头部增加元素
; j+ @5 ?- N' l1 d7 i&gt; array1.unshift(0)
- W; Q+ c  J' `& O3 M8
; \& P8 K; \, {2 z4 H&gt; array1
% W; ]0 t$ o+ m# D9 d3 ^(8)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c', 'D']
. o8 ]8 K% `) W0 a5 l5 p& Q- J; ^! F3 x; j8 o) O2 e7 o* U
//取最后一个元素
# w7 G7 Q9 @# V1 B&gt; array1.pop()
, e8 O( e! p8 i( l: f; ~( J: K, j+ G'D'6 m0 V$ S% z( L7 x
&gt; array1
7 [0 n4 u  b+ @# g1 m. D, {' J, m(7)&nbsp;[0, 1, 2, 3, 'a', 'b', 'c']9 C! C- P! A$ s8 R' X3 B1 E
//取头部元素
/ c2 F2 f6 R; o) _# X+ a&gt; array1.shift()
; h* J$ i: O6 h9 v) q& F02 d$ `2 v4 Z/ ]) K9 Q
&gt; array1+ k, t* \0 M2 |3 P5 z
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']
! Y0 U# b# s4 B; B$ n, [9 C) g1 r5 `% H, X
//切片, 从0开始顾头不顾尾
% g' f7 O! z/ p! S7 E$ X$ B6 c&gt; array1.slice(3,6)! o5 W( D! n2 l
(3)&nbsp;['a', 'b', 'c']
7 F1 \7 j' k$ {+ n2 h// 反转7 I( W. G5 u9 }. \4 L  ~
&gt; array1.reverse(); g6 O+ f1 F, I% ?4 F$ a# V% C( R0 P
(6)&nbsp;['c', 'b', 'a', 3, 2, 1]
9 F+ z$ P9 O5 f// 将数组元素连接成字符串8 G; ?" `  T8 b9 q# p: K; E
&gt; array1.join() // 什么不都写默认使用逗号分隔
! }1 a& Q0 i& U1 n2 D1 ~'c,b,a,3,2,1'- [& ^! {7 y2 }- f/ W- A+ V# u6 R
&gt; array1.join('')
( t1 A) W: T# \/ b'cba321'" z% X+ g6 d4 G# a2 p9 q* o
&gt; array1.join('|')
: c# |6 j8 e+ P' c) t# \- X1 B) P. E'c|b|a|3|2|1'% H+ i6 V4 B% C! B2 f

/ q6 B: F" \5 q// 连接数组
/ k# ^! q$ p: L5 i2 h) _&gt; var array2 = ['A','B','C']/ S. f  m# p5 U8 B
&gt; array1.concat(array2)  \- D5 \4 D7 r
(9)&nbsp;['c', 'b', 'a', 3, 2, 1, 'A', 'B', 'C']% F2 }: @! c; k% f  |
3 |9 S) d1 R  w7 V
// 排序3 q/ ]2 k+ T; _7 |
&gt; array1.sort()2 g3 Z" k, k5 v
(6)&nbsp;[1, 2, 3, 'a', 'b', 'c']2 {- e% F; O- F
6 Q" }/ A/ t0 u) ~9 g& J
// 删除元素,并可以向数据组中添加新元素(可选)& c# R6 V5 {. t, o5 _/ c( N
&gt; array1.splice(3,3)  // 删除元素
2 B* q9 C! S% n+ u) \- l(3)&nbsp;['a', 'b', 'c']
  e0 ^- J7 X  ^5 L5 S&gt; array1; b- N  o3 o/ k- L
(3)&nbsp;[1, 2, 3]
9 S: A# a' `! w6 y  c&gt; array1.splice(3,3,'A','B','C')  // 删除元素从添加新元素
* Q; ~! F7 X6 V7 F  `6 @[]/ i  m# W" o$ t( m0 e' W, B
&gt; array1
) p. Y! {1 ~" i( W+ N5 |; P. F(6)&nbsp;[1, 2, 3, 'A', 'B', 'C']
- J- P. K; P# e* G* n, k& Y0 n9 @2 C! u/ J
/*
/ q  Z& j- G# bsplice(index,howmany,item1,.....,itemX)8 U% o2 q! y5 |& |- I2 ]
index:必需,必须是数字。规定从何处添加/删除元素。
4 F3 K- h* F$ C9 y+ K3 [) G& Whowmany:  必需。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。6 d" v9 T. Y' d( J
item1, ..., itemX        可选。要添加到数组的新元素4 V6 V3 m. N$ C& U
*/
% L2 y- ]9 g) u  e) T1 g9 ]1 O
# m; q8 _5 u& i// forEach()        将数组的每个元素传递给回调函数) L/ l# l9 B8 d' l1 M  a
&gt; array1.forEach(function test(n){console.log(n)})0 P/ Z$ f0 E+ ?
1
5 F3 c; V" K: u- x8 A6 b 2# w) ^7 |/ `* O$ Q2 h6 D- A2 Z8 _
3" U! v, ^  X! D& d7 V2 p5 @
A7 O- [9 L! V) Y& M
B
5 U$ A' h5 c( q. S1 A7 |8 r; d) n C
5 j( V8 B3 J- v3 B3 K0 ^// 返回一个数组元素调用函数处理后的值的新数组2 G- ~: U6 K+ `5 d; n
&gt; array1.map(function(value){return value +1})8 y6 g* a- D( a0 [8 t
(6)&nbsp;[2, 3, 4, 'A1', 'B1', 'C1']6 u( c7 f2 J3 |) h( o% P" j) A
</code></pre>
4 h! i& }! L" X/ Q6 V<h3 id="24-运算符">2.4 运算符</h3>
, }' I) I8 P% ]( X<h4 id="241-数学运算符">2.4.1 数学运算符</h4>4 L) Y* o4 |: c6 E: x) D$ k- N
<p><code>+ - * / % ++ --</code></p>
4 Q$ H) D9 M) G- M% P. X' ]/ }0 s9 m<pre><code class="language-javascript">&gt; var a = 6
2 L+ L0 F' Q. o$ t' X&gt; var b = 3
* H0 n) q; J4 B  o4 z/ p9 V// 加. \  f  w9 e0 e" O" y2 d$ g
&gt; a + b
$ ?2 m! A7 [1 U) \/ c/ M% r' e; c9
, o' g1 H7 p# w8 P# K; r$ `// 减
$ o' K  S- h" Q! K' R# H0 t5 X&gt; a - b
! u* [- z& O7 v. s1 b4 a" e. G6 L, x3+ d# K" l  I$ i+ Z( R# {  C! a
// 乘
0 I3 q: t0 T, l* v8 B( h) u$ X' r&gt; a * b
8 O8 O- `; V& x, G18
$ m$ H7 ]5 K9 F( s, N// 除
: a! i" d9 P: J/ `&gt; a / b$ |4 V7 N1 Q$ d( \: E# _/ F  _7 ?
2
! B9 T& i+ A7 g' G; A+ n# L// 取模(取余)
4 e$ r5 m& H: F7 r. t% P" d&gt; a % b
! j, l) p3 \5 l! P9 B: F- B4 N0: H; L# ^3 D# M+ w0 R
// 自增1(先赋值再增1)
5 _5 k8 `6 l- N&gt; a++) Z1 r' |9 w, \1 j8 @5 x; `7 X! [! e
62 Q$ A* u% F% x8 [% u! e
&gt; a
3 O, T% ?+ `9 S+ W7
: _+ M/ G" \) _( D; I// 自减1(先赋值再减1)
% f9 \' d$ t- j- g; }5 C&gt; a--
- J5 b. w0 h- S- V7& Y1 V+ P$ v: u% ?: m3 U: z8 O1 N
&gt; a* E0 T- N" C, |4 n" ]( K8 n
6
( |8 M( }: P1 A$ U// 自增1(先增1再赋值)) j2 Z4 p7 k$ g* b3 ]; z) ?. v0 x; K9 b
&gt; ++a4 l, g  N/ i2 j! U/ `
7- J5 v& Q7 }# S* M
// 自减1(先减1再赋值)
" o) J+ O" g6 w3 ?2 k, ~&gt; --a
2 x% m. R; L& Z: {8 R  N6 `2 d  R, ^3 S6& N6 @& l( n0 J
&gt; a
- O+ Y; b0 d% v; u& s$ k; \6
7 N3 e9 h7 R8 R# D6 ^4 }8 H: j! j7 L  J. N" g! S
//a++会先赋值再进行自增1运算,而++a会先进行自增运算再赋值,--同理
: \% N3 v5 g, B: Y1 l</code></pre>8 d+ w/ a. g) |" c
<h4 id="242-比较运算符">2.4.2 比较运算符</h4>
2 k; k0 Z6 Y  L2 L; p! F! Y2 m<p><code>&gt; &gt;= &lt; &lt;= != == === !==</code></p>8 U7 T9 l# Q. ]' Z
<pre><code class="language-javascript">// 大于! Q6 q5 ]$ x5 k
&gt; a &gt; b4 |+ H; ^2 ~( |4 b8 U: L# r
true
* s  G, \1 v: n4 a" o5 z6 J, Z, \" ~. j// 大于等于
, z* e- B7 e4 @* F&gt; a &gt;= b
, F+ F( _! \, strue8 G0 `" I7 r3 z6 M( V, A( G& F
// 小于
' E5 X8 w6 c9 F; N0 v6 Y; G( L&gt; a &lt; b: B+ Y' d! f4 d9 q7 u6 ^8 n
false+ s: {( o3 e' P1 b
// 小于等于
/ ~, k- Q/ [1 e7 H&gt; a &lt;= b
7 }" F( f, W5 i0 g$ P7 J2 Nfalse1 }9 z0 b8 O0 n( c2 W0 d) S
// 弱不等于
5 K3 }" L* L. E& Q6 E&gt; a != b
: j: ^. H. B  ^2 s, Ctrue3 V5 x3 \; w9 O3 |4 P' \8 W1 v, @# r9 {
// 弱等于
2 k! i) q) C0 W2 Z&gt; 1 == '1'2 c( k! n5 J5 k8 ]+ w5 C
true
# T# t4 {% o- z4 Q' q, B// 强等于
( P% {- y, E4 _& W3 b( k9 h&gt; 1 === '1'* E# j) f& ~8 N& o
false
. o1 g+ o5 \% M7 {# N6 o& r// 强不等于- @0 ]' p& z- O: k8 j  A- i
&gt; 1 !== '1'' ?8 E+ n4 C% x# s- O# q: `
true; V1 G( F% c% ~( V. l* V
+ T& }* T" ^* h9 f+ ~( J( K6 Z+ I- [
/*
" z. y' u1 F5 g/ FJS是一门弱类型语言(会自动转换数据类型),所以用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误
! T( {7 @) q2 n# W8 U7 u*/
) ~# B  _% ?/ X</code></pre>! \( N( `# z2 J
<h4 id="243-逻辑运算符">2.4.3 逻辑运算符</h4>& t6 O- w. \: i2 R
<p><code>&amp;&amp; || !</code></p>
; z2 a+ f' C% n; p- W<pre><code class="language-javascript">&amp;&amp; 与7 w# s; T  J; l) \2 Z$ y; S9 t" d
|| or
# k( p0 Q  z5 u& y! 非
/ n6 k3 A- X) J8 Z* ^( \% j</code></pre>
9 L. k8 l, {) X& N2 l$ |<h4 id="244-赋值运算符">2.4.4 赋值运算符</h4>  m- C/ N5 H* b( W& R
<p><code>= += -= *= /=</code></p>& M; }0 ?$ I5 ]5 a; M
<pre><code class="language-javascript">// 赋值
6 {1 m0 V& y' `&gt; var x = 32 k/ j) a6 x8 R8 F
// 加等于
' L- y4 c% D5 i&gt; x += 21 O1 b* v# q) C6 D7 l
5
5 F2 n" j4 W5 h  b* I. E// 减等于
2 ^6 a  B4 S! Y' y&gt; x -= 1* \* Y# H! q! a) n0 o( B
49 y6 D# T3 ?0 x# q7 i* }! J
// 乘等于" T2 H* H( j: y
&gt; x *= 2
; Q3 U5 r0 Y; Q. L1 ], u: s8
, X' k" |1 S) @) d// 除等于
- |3 `! R* A9 R; d. l1 N  \&gt; x /= 2+ D1 X4 c, R; E
4: q1 F: ]( D7 ~6 o
</code></pre>" U7 O( t# @2 Z
<h3 id="25-流程控制">2.5 流程控制</h3>% O6 X4 `. \" T# h* |' A5 [
<h4 id="251-if">2.5.1 if</h4>) O# V0 q$ J& z% S; a
<pre><code class="language-javascript">1, if(条件){条件成立执行代码}7 g7 j5 W4 c% @# Y

6 {" Y5 D7 u. F&gt; var x = 3* g7 Y8 w# [& C$ I* K  {
&gt; if (x &gt; 2){console.log("OK")}3 c$ y* h! P6 ]
OK% t/ t$ U8 p6 }" }& Q( d& x6 t% l

7 V. \( b5 S! x2, if(条件){条件成立执行代码}
, ?3 ~: ]# |( \" p" j        else{条件不成立执行代码}
" p! g6 i$ Q' R  D0 X6 G! c) D5 o* U
&gt; if (x &gt; 4){console.log("OK")}else{"NO"}
6 K0 L8 b; `! p& P'NO'( a7 u9 H; n! ]! l! }- s

$ `# p0 @2 P3 z3, if(条件1){条件1成立执行代码}
) d$ \7 R: a% x$ B/ @6 g        else if(条件2){条件2成立执行代码}: l( v8 o# b- K
    else{上面条件都不成立执行代码}7 G' m- x& w% H
" g# v% q+ O0 x; H! k8 O( Q
&gt; if (x &gt; 4){console.log("OK")}else if(x &gt; 5){console.log("OK2")}else{console.log('Ha')}4 r$ T0 M- _# K# k3 u
Ha
4 {' [  E  f- c. U. k/ V</code></pre>
- e, D! e- H& h<h4 id="252-switch">2.5.2 switch</h4>
: Z( m/ X2 V  h. _! S& K<pre><code class="language-javascript">var day = new Date().getDay();
6 P2 V0 d: ]. o) V/ Z; i8 a& ~switch (day) {0 [) U2 K5 S! V8 K
  case 0:
4 m4 J0 N" s' @6 ]0 V  console.log("Sunday");: \( k9 C% M  e, B4 j% Z
  break;
; {6 S' Q, A) [0 h( o2 M  case 1:. k2 z( B' H% c
  console.log("Monday");& D4 t; V! c8 C9 P9 @- J: l* R
  break;. z4 ^* K$ ?% N. h" D* T
default:
* b; F0 X" G- o2 d! ]) _  console.log("不在范围")  y0 M, l" \( h: \
}( T5 `" {/ A- z# L. ~+ G( Y5 W
不在范围. r! z& ~+ J* U" p
</code></pre>5 a) ~4 X5 y) I) j7 R
<p>注意:<code>switch</code>中的<code>case</code>子句通常都会加<code>break</code>语句,否则程序会继续执行后续<code>case</code>中的语句。</p>8 m/ C# Q4 g! V+ a! Y6 u* a! p5 V
<h4 id="253-for">2.5.3 for</h4>' N7 ~+ u2 W2 @5 O: o
<pre><code class="language-python">// for 循环
9 A5 r2 W7 S, {* ]5 ^        for(起始值;循环条件;每次循环后执行的操作){, h( u3 M1 \& P. C6 V1 g. e' L" _- a
        for循环体代码
' c$ P/ P" O$ `    }3 m  w$ q+ w; g" `0 x3 `) w( G% p

( g( ^0 d. X, Y5 l! }- Sfor (var i = 0; i&lt;10; i++){
, H& A& o1 g4 i' w    console.log(i)5 h: ~" M4 ^) @! y
}$ k7 W# A+ d/ w! k  y
        0
( @, a" @) c: l) L  @: `        1
1 D1 g( w/ s1 ~3 ~1 F        2# I- J7 ^" o  }) W' @
        3" C" o7 d' w4 r6 O5 y  R
        4: x& e9 h3 M) u; e* k6 c  W) X+ O, i
        5
& Q& f- M' N5 l! F- P% c        6* s4 J: A  t- \9 h3 H# X  l/ r
        7. [% ~) i6 _/ L% }
        83 u) e9 @6 q" X' K$ A& F+ h
        92 f7 C3 `. D- k4 |
</code></pre>' }/ }& q3 m- v7 z8 |
<h4 id="254-while">2.5.4 while</h4>0 g: L/ R% l8 w( d* B
<pre><code class="language-javascript">// while 循环! A& v) y4 w& o2 R* B: z3 `
        while(循环条件){
3 c) z" n. M% ^8 F/ t$ d        循环体代码, J0 _: w; h7 l  H
    }' X; l7 S, _4 @* S/ R( \/ t, `

/ o- Q- ~! W: i1 G- v&gt; var i = 0
$ ^6 n2 L9 q1 _! k  K3 q" X&gt; while(i&lt;10){. v' [( W: R# l/ m  B" c& d
    console.log(i)
9 U( s1 F6 e" J    i++
: k# u+ C7 |% h& ]}( A$ [( H% e9 o+ k1 ^
0
  W' T! i& _, q% {' G4 Z/ l8 | 14 Q1 E  @$ F: ?% J# z  o
2& s5 r, Q! d# F
3
8 k. k1 s9 U, W. ^0 ?7 d 4
# g# b- M) S( p( @0 s 5, ]: C& ]( a4 ~: x% c# R
6" k( J2 ^, A3 j  S; T* b4 I
7/ }3 e# [% [5 r5 c4 ?3 _! N* w. ~$ T
87 C, X% `" V2 y; N0 p9 R1 B2 x* J3 s
9! t( V8 t$ U- ]3 T8 ~
</code></pre>
9 w/ x7 O$ t7 U. C* t3 [8 T* W<h4 id="255-break和continue">2.5.5 break和continue</h4>
. Q1 c; \; S. T) Q3 {<pre><code class="language-javascript">// break
1 R4 ^, _5 J- U& C5 J* m: j. cfor (var i = 0; i&lt;10; i++){2 b+ K9 |' @( _! n4 z, z
    if (i == 5){break}
4 k% ]- I3 u" z% g: b    console.log(i)
9 Z: i. ~' s0 D}
# A: b3 t: S( d 0
% }! P6 s- S$ J5 v$ F! } 1+ v! |2 O& C( q/ f, c" F( p
2
  g7 f. }! v. h7 b 34 _4 P+ r8 Y' M( D
4
* R* x# _; g! h// continue3 U8 U3 J& ], M( ^! p8 r& F+ u$ I
for (var i = 0; i&lt;10; i++){
/ J8 `8 m/ Q6 }7 T4 j2 R( }* o    if (i == 5){continue}6 p; S; C2 m* E% m* q8 p8 }- G
    console.log(i)
# D0 O5 r& N& Y9 J! f3 x. _; Z}
, C4 T9 ]0 `, b* q0 J 00 W' `9 }' N$ [, O" P
1
; h" w( x8 K+ K; x3 i 2
6 F- Y: n1 {# D2 Y3 H/ \ 3% u9 C, a7 P9 p6 @. b) C( t
49 K: V1 [& g1 D  C
6' H% B6 R7 U1 i; D  v
74 I. P/ C: ~: Z# H2 N
83 H; c  t; \! J0 ~  S
9  \: z1 L$ q/ g1 E" l

  e1 R$ O8 N- A1 v! j4 l</code></pre>
# m- i5 H2 \, e1 F% w, g7 G<h3 id="26-三元运算">2.6 三元运算</h3>
; R# n  O4 u/ M7 N+ B9 r3 r<pre><code class="language-javascript">&gt; a: c/ G. F3 Z& u; F* p
6
) r6 G$ f( y9 b&gt; b
7 J; ?& W+ \0 t' E" m3
) o) ~1 C# Y0 x4 m) t: ]- |, ^) A4 ?3 z/ Q3 I5 Y
//条件成立c为a的值,不成立c为b的值' [( w& ^6 ~. |/ j/ n7 w
&gt; var c = a &gt; b ? a : b
3 q- }8 ?- w! {3 ~* w( Y2 P&gt; c
3 A# C- w4 ]! i' j4 Q# F4 I# z6
/ @: [0 L  g$ K! d: J& T
: E# C( U8 W) Z- x# G' I// 三元运算可以嵌套* g( B) ]$ L/ }  ]
</code></pre>4 S1 {- m) t; e
<h3 id="27-函数">2.7 函数</h3>) ~; q& w! W- I' ?0 J
<pre><code class="language-javascript">1. 普通函数
1 l; z8 E, K5 e$ \3 V+ J&gt; function foo1(){
9 z" w+ e6 [/ W+ k: u" }% n    console.log("Hi")2 A' w* o) B0 X# L
}
2 ?) G" r8 ~7 G7 K; T9 j$ _, ]
' u/ o+ W5 E; `! G! V4 g&gt; foo1(), w# {1 Y8 \& Z: M) q+ p* p
        Hi7 O6 v; [1 V7 |* h
2. 带参数函数* _5 X' w8 x6 z4 l4 j
&gt; function foo1(name){0 B& c/ R/ _+ S- u
console.log("Hi",name)
, W2 V% Y) r7 k9 Y( o- P}
7 t. u  |( _* N+ X' l! G
% H7 h( d. t5 k( N3 E&gt; foo1("Hans")
# W6 j+ g7 P1 H+ S: l/ vHi Hans9 g2 R& }4 e$ U4 T( x5 w8 d: b- e9 y

! t8 E% p' ~! ]( T5 h0 g&gt; var name = "Hello"% S/ x5 P% ^( }  ?1 T2 \
&gt; foo1(name)
* I+ N! s: p; ]  l1 V: VHi Hello
0 B- c5 W5 i4 V- Q% H
  T5 S# C3 L, R# C6 W' i* Y3. 带返回值函数9 i0 d. V7 `) z- J3 d% O
&gt; function foo1(a,b){8 W5 o+ G6 r  J0 T' n8 G9 k
        return a + b   
  y" F) X. N- j* W1 ?8 j! p0 A}2 `& t& Q& }* f1 C3 l6 ?" b  U% P
&gt; foo1(1,2)1 K- h% K6 {  C
3
4 o. a& b3 `6 R. g3 @&gt; var a = foo1(10,20)  //接受函数返回值: @4 V5 i! ]5 U3 g
&gt; a  ?" ^& Y# l/ n6 t* K% F" }% d
30
% }+ C" ]: t1 ~+ a) {
( H1 i( V% o  G$ B5 V% |2 t0 h4. 匿名函数
$ ]) Q- J: _; ~6 U* j: t$ l- m&gt; var sum = function(a, b){: }: q$ n/ M; i' c( F
  return a + b;( o7 E. q, f& T  E4 x3 I
}
6 [, C; G) a7 N4 A&gt; sum(1,2)
4 E# u6 }' B" ]2 `" F$ Q0 _# a3* @" s/ `8 M7 ~( I& y
3 z1 Z+ n+ ~( @& Y6 P4 i* y( y8 W
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
0 \( m5 t, w4 ~4 p$ A2 x- v* |&gt; (function(a, b){9 |+ ]4 n: P2 x5 x6 H
  return a + b1 l# G6 n( q, `" {
})(10, 20)% u/ o& }; \- L( z/ V
30( s9 B8 a; T. i0 `6 z( I) e

, }+ ^3 L- Y; M5. 闭包函数
! S# U4 L6 ~/ s  e) H& C// 内部函数可以使用外部函数的参数,这个内部函数就是个闭包函数! \- ^! b: g  U9 f$ g  r8 o: Y. K
var city = "BJ"
9 n6 Q$ d9 z8 @* P1 s5 f2 \4 Ufunction f(){
2 @) z8 F  I0 G% @4 a# Q    var city = "SH"
8 @" n2 `" L3 [8 t5 g    function inner(){$ Q: O3 d% t2 s4 A* \. P
        console.log(city)$ m' {* `9 r0 U( H
    }5 G$ F/ ~& x8 v
    return inner* z8 A6 K% d; d6 I+ v
}
5 z9 t8 s0 t) j; U- ]9 ^. vvar ret = f()
. _. S5 E3 u" H1 B3 Lret()
5 e( M0 x" n9 \% X+ D! k执行结果:
& L% p1 O$ [: TSH
) \# S& h: n7 J  T+ P
; B0 ^- m* I9 g- b</code></pre>. t! x. p5 W% s4 x- K& _; p9 s" o' J
<p>ES6中允许使用“箭头”(=&gt;)定义函数。</p>% K- g7 ^5 p( k& ?# c
<pre><code class="language-javascript">var f = v =&gt; v;1 g: f3 p( D% `) @, i; _8 ~  f. U1 y
// 等同于
+ W8 e0 x0 ?( w: i; j, n6 l# Uvar f = function(v){0 `5 S8 |8 _8 e6 W
  return v;
3 g0 {1 H( E7 A' J}
7 n- @# c, |7 J' H" i' j9 I( j; w% o</code></pre>
- }' X3 V0 @+ V* g<p><code>arguments</code>参数 可以获取传入的所有数据</p>4 ^( Y* T% e" ~0 E
<pre><code class="language-javascript">function foo1(a,b){
! `& ^! S) k7 e: O7 \. n; x% K    console.log(arguments.length)  //参数的个数
" }8 R3 T" ~- |9 B& I    console.log(arguments[0]) // 第一个参数的值
) ?8 f5 q' j# K) \1 n; P        return a + b   - j0 Y/ m% ]% o9 v: z
}5 c- i* x) H0 `3 M( p
foo1(10,20)& t$ C2 {3 O" k3 U9 H
结果:, [' w( C5 \) s
2          //参数的个数 $ J% g6 l" H" |
10        // 第一个参数的值
+ t$ |8 r/ ]4 w/ I  S$ w/ ]. p# p30        // 返回相加的结果
7 P% M/ e) [6 s, T1 s* N</code></pre>, k# Z# Q! ^- P, [8 [
<p><strong>注意:</strong>函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回</p>* |/ j( l( Y" `, U! v' g
<h3 id="28-内置对象和方法">2.8 内置对象和方法</h3>
  |1 O! a+ L1 L! c2 L<p><code>JavaScript</code>中的所有事物都是对象:字符串、数字、数组、日期等。在<code>JavaScript</code>中,对象是拥有属性和方法的数据。</p>
) r% \( b0 e# t: n% C<h4 id="281-date对象">2.8.1 Date对象</h4>
: l- ]: l/ k. E& O+ q/ Y<pre><code class="language-javascript">&gt; var data_test = new Date()* h  P- h8 ]* t" D7 j
&gt; data_test
0 l8 a% \- B4 m" m0 SFri Feb 11 2022 21:44:43 GMT+0800 (中国标准时间)3 k. P* N4 F5 b" m( l, g0 T! o7 }
&gt; data_test.toLocaleString()# z" E% J" V' y# U. H4 x
'2022/2/11 下午9:44:43'
' Y% i" O% k3 U( U& I+ t0 ~
, u/ s" N( U" T1 {* f&gt; data_test.toLocaleDateString()* X" F7 D( ~3 H
'2022/2/11'
' T2 ^" M7 F4 M! s: T1 V
0 V8 P6 u# T$ H# x" O9 R+ {&gt; var data_test2  = new Date("2022/2/11 9:44:43"); F; q1 Z% s5 `( Q7 d5 E
&gt; data_test2.toLocaleString()
1 }/ L7 ?. X; g% I  v% e'2022/2/11 上午9:44:43'* ^+ i- N4 a: k. a

5 j9 q* Q. N4 w0 {6 K// 获取当前几号
3 N; q4 ^6 E7 H2 @# i&gt; data_test.getDate()5 H( S1 v2 V! u, P# v! K
11
; y3 h5 g! `5 J7 W: l1 L// 获取星期几,数字表示! _+ p$ W' W: S) ^) B; [% D% X( J: P
&gt; data_test.getDay()  
5 m: Z( l0 ]' @, a# h58 f2 D+ P1 Y0 Q# `
// 获取月份(0-11)+ V: L7 F) g8 @% Q( V' K
&gt; data_test.getMonth()
- y' P/ k; I$ p" a! |1
% ]' O- i, O# u; V6 c// 获取完整年份
/ h% @! ^+ s$ P0 Q&gt; data_test.getFullYear()
. g3 K4 w  [1 d* M: C* x& D" y2022
- j5 H  Q; N' ^) {& {5 B) l, x9 G3 B5 I// 获取时) e+ k9 G2 L6 a8 H' r- B9 `0 G
&gt; data_test.getHours()
( f" D9 L4 s/ B- e4 V21
7 w8 w) ~: L$ r/ X5 I// 获取分
  I) f% i9 f$ q# f; `&gt; data_test.getMinutes()
2 T; W& g% O7 \) D( L44
8 Y  q' v$ [, Z% `' W// 获取秒
0 |8 U: s# p5 T- E" B* S&gt; data_test.getSeconds()
6 _5 S3 t: M( J4 u( k+ p  `43
6 h+ B1 O6 O; R// 获取毫秒
; a2 u& ]! m& ^" W) x. r1 F&gt; data_test.getMilliseconds()
8 K" d' k/ [& d; k: _( q6 b! I! l$ A290
- p: M: [# {2 [; m. t0 O$ n; N# j// 获取时间戳
3 b. R1 l( F/ y: [% w- J&gt; data_test.getTime()2 ], I; S: |: ^  W# t+ g( }% o
1644587083290/ ^9 ]# F5 T% i& o  A
</code></pre>
9 `4 {: h8 O0 z, I/ Y6 m& f" A<h4 id="282-json对象">2.8.2 Json对象</h4>' H1 X; d4 N% ^4 i9 K" d
<pre><code class="language-javascript">JSON.stringify()  // 序列化, 把对象转换成JSON字符串2 d6 \9 L- G: h, a3 H
JSON.parse()  // 反序列化,把JSON字符串转换成对象2 O  _, h6 @2 d% v) Y2 R

1 T& t2 _; N6 J0 x& Y: u  Z// 序列化
: v+ b# N' @/ M- T- y" m&gt; var jstojson = JSON.stringify(person) % W; n& v  m0 n' ~
&gt; jstojson  
( e, |: c+ Z. e7 p& t) {'{"Name":"Hans","Age":18}'
6 d: S$ q2 l0 _! ?; X* d/ l& ~# Y" f1 J# A
// 反序列化
, r6 T1 m: Y9 A&gt; var x = JSON.parse(jstojson)1 k8 l2 s1 o( z( p
&gt; x
$ K# _' ?: h7 M, W% G7 z$ G{Name: 'Hans', Age: 18}
  I) U, ~/ [* L/ d&gt; x.Age+ z  G! _$ v1 v7 A  ?. d! g" O
18% ^$ _  ~" g( `" P- E) e
</code></pre>: h6 k% p( h6 ~- y! p/ q% H
<h4 id="283-regexp对象">2.8.3 RegExp对象</h4>
! d* ~  o$ l1 q& J% ^" G<p>正则</p>
" c1 H. i0 C/ c, u: k2 z<pre><code class="language-javascript">&gt; var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{4,7}");) F7 ]6 ^8 R3 n: {
&gt; reg1
' j' A5 _8 I/ z/^[a-zA-Z][a-zA-Z0-9]{4,7}/: y& [: N% o3 C* ^
&gt; reg1.test("Hans666")  {  ?, m- w4 ]9 T& Z
true( T* f& ^8 D% w5 v1 t$ k4 p

6 x& j9 [7 q1 J8 x. G8 _&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/  // 推荐这种写法使用 /正则/
0 K% x- b- z7 `&gt; reg2
8 |& J9 b/ d& S  X/ y/ D0 w/^[a-zA-Z][a-zA-Z0-9]{4,7}/
8 [' C! C7 E! y% S8 S% @&gt; reg2.test('Hasdfa')
& s: h$ r, I# U6 E) y+ v0 Utrue
, u7 G4 @2 q) H5 r* Q( A) O6 W* a2 @
  k3 C( a- O% K9 U# C' F2 i+ p0 _) g全局匹配:: b9 Q: m1 r' y7 K/ N
&gt; name
& R- U- z6 T2 L$ C8 ~+ b'Hello'
3 K2 J$ \4 _1 r7 N0 M5 F' p&gt; name.match(/l/)
0 k, ?5 Y( r- a; n/ c4 S$ b4 s['l', index: 2, input: 'Hello', groups: undefined]- F( R3 L5 u/ b

) a1 a5 B" u3 I8 G8 v&gt; name.match(/l/g)% [3 `2 o8 A% p" x" @
(2)&nbsp;['l', 'l']" l5 e- H4 G$ i1 B& G4 i0 e/ E
// 正则表达式的最后不加g则表示匹配成功就结束 加g表示全局匹配( a' a. V" r6 H# I% X

/ Q8 \( L0 T, R2 v$ d) j9 t全局匹配注意事项:
5 I* R: Y6 ~# m&gt; var reg2 = /^[a-zA-Z][a-zA-Z0-9]{4,7}/g3 k# K- }' N# M% q5 M) j0 v/ E
&gt; reg2.test('Hasdfa')7 k. X1 _8 a0 J* ~6 a( P) V+ _
true
, q, q, r/ X6 F&gt;reg2.lastIndex;
: h5 h/ k2 V# t( x* i63 i- t" I/ [# ~; C" }
&gt; reg2.test('Hasdfa')6 A( X2 @! N  B7 x
false
$ _$ n# l1 |) D( u+ n&gt; reg2.lastIndex;
: J8 @+ z9 P0 A0
/ F' l$ T% u7 `9 b) N" m&gt; reg2.test('Hasdfa')
1 X* Y  q+ w) a8 x9 U3 Qtrue
1 V$ @2 S0 }+ q. x5 A' u4 `3 M&gt; reg2.lastIndex;  J4 m/ s0 V4 o. l
6
' Y0 U* D% y% h$ q9 c2 F* ?# ]' Y  ^&gt; reg2.test('Hasdfa')
2 d0 s8 S" I- U( F: dfalse7 I7 ~3 G  x$ Y" o1 j
&gt; reg2.lastIndex;
1 B  J: n2 u5 g, [5 Y$ H! c0
& q, k8 K7 u; h% ~// 全局匹配会有一个lastindex属性: J$ V/ E/ l8 \/ P& r% |
&gt; reg2.test(). {) t6 Q6 i" m) s! r6 U
false7 u/ s% u) |% `' Z( S
&gt; reg2.test()
; M8 T7 I1 _  h  E/ g* D: mtrue4 ^% x+ Z1 b+ x" j
// 校验时不传参数默认传的是undefined6 t- k, m, U# p7 `, s8 z0 }* J  o
</code></pre>% a, v; H+ W; ]% C& Y  P, ?  M
<h4 id="284-自定义对象">2.8.4 自定义对象</h4>
& h  p- \* G) z( J, h$ h9 K<p>就相当于是<code>python</code>中的字典</p>
  g) a. ^) w6 w9 h5 k<pre><code class="language-javascript">&gt; var person = {'Name':"Hans", "Age":18}
9 b! S- V2 b8 s: h% _: K&gt; person+ H* Q9 K# {2 J( v
{Name: 'Hans', Age: 18}
6 s3 Y1 I2 G5 r$ U7 G* C&gt; person.Name
: A+ D- k7 X& W: |'Hans'% A5 e+ h& N; X1 G# \! t4 u
&gt; person["Name"]
! T4 E3 _# G/ I! Q  G  i! g'Hans'* k3 V7 m* \: J% a# V( i

2 N" K9 W  A) m// 也可以使用new Object创建
7 C; t' O  k" \9 W- F&gt; var person2 = new Object()5 ?2 V4 g# S9 }+ ]$ O3 [8 U
&gt; person2.name = "Hello"0 C% ]. O# D3 b
'Hello'
+ R+ A6 q! V6 h8 u& r&gt; person2.age = 203 ]+ F" o! c: v4 R7 U7 _: A6 Z$ R6 Z
20
5 A1 C1 F$ Q' P</code></pre>  Y) I& L" R1 o  u( [& A
<h2 id="3-javascript-bom和dom操作">3. JavaScript BOM和DOM操作</h2>9 ]5 y/ a" n4 H0 ?  d- b  }* n/ r6 q
<p>BOM(Browser Object Model)是指浏览器对象模型,使用js操作浏览器。</p>
+ B( k* L: B3 s! H<p>DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。使用js操作前端页面。</p>: ~3 r+ R/ }( X7 S' t' D
<h3 id="31-window-对象">3.1 window 对象</h3>$ @* w4 |. H9 g* Y
<p>所有浏览器都支持 window 对象。它表示浏览器窗口。</p>
7 Y, a  V- j+ `  o9 o, c! P<pre><code class="language-python">//览器窗口的内部高度3 V  T9 O& s- A  G' }
window.innerHeight 2 q: I; A  l' h
706
* I, O( A7 M; x//浏览器窗口的内部宽度. a; M, ]! ~% ?, j1 Q# ^7 M
window.innerWidth: y+ `' N( b3 A9 `" p% u$ A
1522
0 ~7 S* M3 q6 K// 打开新窗口$ [, H) Q7 f- `; ^
window.open('https://www.baidu.com')
7 l5 X2 c; k! {4 }4 B! l% YWindow&nbsp;{window: Window, self: Window, document: document, name: '', location: Location,&nbsp;…}
5 B$ X) ~& J6 a# I// 关闭当前窗口2 J7 O  q8 d4 @
window.close()
1 d3 R" {8 J% U5 Z8 Q//  后退一页
" o& W4 @5 J) e: Y% `window.history.back()
& G; L. W( }$ w; B& p// 前进一页
* A' x; p1 A/ Rwindow.history.forward() & O& Z9 V2 Y: n- O$ d
//Web浏览器全称
( @" M' Q6 v5 Y  U$ D& @window.navigator.appName
9 }0 N4 }! f" I- ?5 b'Netscape'
5 y2 a  i0 t, p, c( C1 ^// Web浏览器厂商和版本的详细字符串
0 u% M  r( d9 x* a9 s8 N& w6 }window.navigator.appVersion# {" d) `+ F# R9 s. \# o4 W
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
# i7 o4 f. I/ w: g. s4 N// 客户端绝大部分信息6 v$ r/ H) n3 N/ V9 j' G" X
window.navigator.userAgent' }5 }  o( @% k, p# o
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36'
8 q6 G0 D" p. Z0 I+ ]% ?// 浏览器运行所在的操作系统- i6 W, Z) S& \9 N4 \
window.navigator.platform  [1 o4 k- p7 a2 G( \7 X
'Win32'% |4 v# n. F1 `8 ?  e3 [5 V
% o5 D% V5 ?/ K9 A1 A6 V
//  获取URL8 n* D/ a3 C6 R$ ?- d
window.location.href
/ J& H3 X0 Z/ P$ `// 跳转到指定页面3 |; u' l  |: C& _' T! \
window.location.href='https://www.baidu.com'
& }1 I4 D; |  T7 T/ T  f" G// 重新加载页面+ e7 p' D" g+ `0 r: G4 N% R
window.location.reload() ( b# o7 T; e. p: w, j
</code></pre>
; Y: `3 U8 ]0 [& ~9 [( Q/ J<h3 id="32-弹出框">3.2 弹出框</h3>
, [/ x6 ~8 P* _& A<p>三种消息框:警告框、确认框、提示框。</p>; e% W( p( P6 f. H8 c5 z
<h4 id="321-警告框">3.2.1 警告框</h4>
* N6 v6 ^2 k$ T  {; p) G<pre><code class="language-javascript">alert("Hello")$ b0 R$ Q% Q" O+ z
</code></pre>" u1 A; J% c" V* p& i8 c
<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225243640-1572156192.png" ></p>
" c4 f. ]* m' p, M- q<h4 id="322-确认框">3.2.2 确认框</h4>
+ @' u: z3 Z, u<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225205414-770035518.png" ></p>
! Y9 ^2 r1 G; Y2 T  L$ a8 |<pre><code class="language-javascript">&gt; confirm("你确定吗?") // 点确认返回true6 N' V+ S- }8 t0 J  V" }/ P
true9 R) [& S' p$ [: S* a
&gt; confirm("你确定吗?")  // 点取消返回false
! T: q* o- ^( C* r* f- Wfalse0 |5 t5 p6 |  {1 H( E: h
</code></pre>
+ m* y% O) T5 B<h4 id="323-提示框">3.2.3 提示框</h4>  w" A6 Z0 D+ p. [1 l  U0 E/ }2 r) u
<p><code>prompt("请输入","提示")</code></p>
8 p, I3 V4 C5 M& H; K<p><img src="https://img2022.cnblogs.com/blog/723171/202202/723171-20220211225311668-600169621.png" ></p>
: Y1 b5 f/ A1 l6 D3 r) R$ ]<p>如果直接点<code>确定</code>后端得收到提示两个字,也可以删除输入自己想输入的内容、</p>
, I' U  O+ i: s<p>如果直接点<code>取消</code>后端收到<code>null</code></p>3 `1 R8 E- U" E7 K8 X. b: q: W
<h3 id="33-计时相关">3.3 计时相关</h3>
0 s$ e; C4 F8 D  q& b<p>在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。</p>
6 y& o. L8 S9 B4 W<pre><code class="language-javascript">// 等于3秒钟弹窗
$ o' M* a5 o  c& Z/ E: S- dsetTimeout(function(){alert("Hello")}, 3000)
1 T) y1 a+ n* i  Y2 _, z4 n% \, d  q2 T+ x4 d0 u
var t = setTimeout(function(){alert("Hello")}, 3000)
! p6 W8 f1 p, q2 O# _: j9 ]9 f, Z& L- V$ `
// 取消setTimeout设置
$ B- |, i( k  E/ r  R6 L, g/ j! }  r( bclearTimeout(t)& ]9 b+ s5 Z5 C- [) H
</code></pre>
/ H3 }7 R/ ]6 `* h<p><code>setTimeout() </code>方法会返回某个值。在上面的语句中,值被储存在名为 <code>t</code> 的变量中。假如你希望取消这个 <code>setTimeout()</code>,你可以使用这个变量名来指定它。</p>
' P9 }' W8 V; r7 s<h4 id="331-setinterval--间隔指定的毫秒数不停地执行指定的代码">3.3.1 setInterval()  间隔指定的毫秒数不停地执行指定的代码</h4>
4 V! d6 r# b9 O; f1 S; X<pre><code class="language-javascript">每三秒弹出 "hello" :$ |9 d& G6 C8 R$ z1 D
setInterval(function(){alert("Hello")},3000);
) q" r9 f0 ~5 B% }$ T/ X</code></pre>, q& H6 L  h1 j9 ]) e6 U
<p>取消使用<code>clearInterval() </code>方法.它用于停止 <code>setInterval() </code>方法执行的函数代码。</p>
( k; H5 I; h3 _# a9 B' n6 u<pre><code class="language-javascript">var t = setInterval(function(){alert("Hello")},3000);" o7 M: ?3 I( H  j9 s2 d
//取消:3 T- Y5 s9 y# ~! p, ?6 c  N
clearInterval(t)
1 w  Y" W/ I% M- x$ Z& s* K7 m1 {</code></pre>
* C# h9 c8 u/ [% b$ {2 Y; g, u6 A' \2 J$ `
回复

使用道具 举报

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

本版积分规则

手机版|飞雪团队

GMT+8, 2025-11-26 10:32 , Processed in 0.076308 second(s), 22 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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