JavaScript
<h1 id="javascript之语法">JavaScript之语法</h1><h2 id="一概述">一、概述</h2>
<p>面向对象的编程语言，也称为浏览器解释型语言。</p>
<p>嵌入到HTML中交给浏览器去解释和执行。</p>
<h3 id="1-组成">1. 组成</h3>
<ul>
<li>核心语法（ECMAScript5）</li>
<li>BOM（Browser Object Model）浏览器对象模型，提供操作窗口的方法</li>
<li>DOM（Document Object Model）文档对象模型，提供操作页面元素的方法</li>
<li>Ajax 前后端交互的技术，异步页面刷新（json交互）</li>
<li>jQuery（JS工具）</li>
</ul>
<h2 id="二基本使用">二、基本使用</h2>
<h3 id="1-引入js">1. 引入JS</h3>
<ul>
<li>
<p>元素绑定事件方式书写JS代码</p>
<p>事件：用户的行为或元素的状态。例：<code>onclick</code>(单击)</p>
<p>事件处理：事件发生后的响应</p>
<p>语法：将事件的名称以标签属性的方式绑定到元素上</p>
</li>
<li>
<p>内嵌</p>
<p>例：<code><div onclick="">xx</div></code></p>
</li>
</ul>
<blockquote>
<p>借助<code><script></script></code>嵌入JS代码，可以书写任意多次，书写在任意位置。不同的书写位置会影响代码执行的结果。书写位置即为JS代码执行的位置</p>
</blockquote>
<ul>
<li>
<p>外链</p>
<p>创建外部的js文件（***.js），引入方式：在HTML中使用<code><script></script></code></p>
<p>注意：script标签只能内嵌或外链二选一</p>
</li>
</ul>
<p>JS基础语句：</p>
<p><code>alert("");</code>警告框</p>
<p><code>console.log("","");</code>控制台输出</p>
<p><code>prompt("");</code>带输入框的弹框</p>
<p><code>document.write();</code>网页写入（如果写入的内容为标签语法，则解析后呈现），<code>wrtie()</code>表示动态写入内容，可以识别标签语法；如果通过元素绑定事件方式执行写入，会造成页面重写。</p>
<h3 id="2-语法规范">2. 语法规范</h3>
<ul>
<li>严格区分大小写；</li>
<li>语句可以使用<code>;</code>作为结束的标志，也可以不写</li>
<li>注释：<code>//</code>单行； <code>/* */</code>多行</li>
</ul>
<h2 id="三变量">三、变量</h2>
<h3 id="1-变量">1. 变量</h3>
<p>变量用于存储在程序运行过程中可以随时修改的数据</p>
<p>关键字：<code>var</code></p>
<pre><code class="language-javascript">// 定义
var a ; // 声明变量
a = 100 ; // 给变量赋值
var b = 200; //声明的同时赋值
var c,d,n; // 同时声明多个变量
c = 10;
d = 20;
var k = 100, m = 1000; //同时声明并赋值多个变量
</code></pre>
<blockquote>
<p>注意：</p>
<p>变零使用var关键字声明，但未赋值，默认为<code>undefined</code></p>
<p>省略var关键字给变量赋值，变量可以正常使用，但是影响变量的作用域</p>
<p>变量如果未声明、未赋值，直接使用则会报错</p>
</blockquote>
<h3 id="2常量">2.常量</h3>
<p>常量用于存储一经定义就不能修改的数据。</p>
<p>使用const关键字创建常量，必须声明并赋值。</p>
<p>命名规范：</p>
<ul>
<li>变量名、常量名、函数名、方法名自定义，可以由数字、字母、下划线和<code>$</code>组成，禁止以数字开头，禁止与关键字冲突。尽量见名知意，多个单词组成采用小驼峰命名。</li>
<li>尽量使用小写字母表示，特殊情况区分。常量名一般采用全大写字母表示，与变量区分</li>
</ul>
<h3 id="3-练习">3. 练习</h3>
<p>定义变量，常量，计算圆的周长和面积，并保留n位小数</p>
<blockquote>
<p>提示：<code>toFixed(n)</code>保留n位小数</p>
</blockquote>
<pre><code class="language-javascript">var r = 6;
const PI = 3.14;
var l = 2 * PI * r;
var s = PI * (r ** 2);
console.log("该圆周长为：",l.toFixed(2));
console.log("该圆面积为：",s.toFixed(2));
</code></pre>
<h2 id="四数据类型">四、数据类型</h2>
<p>检测数据类型：<code>typeof num /typeof (num)</code></p>
<h3 id="1值类型">1.值类型</h3>
<p>基础数据类型</p>
<h4 id="11-数值型">1.1 数值型</h4>
<p>(1) <code>number</code></p>
<ul>
<li>
<p>整数</p>
<pre><code class="language-javascript">var a = 100;
// 八进制以0位前缀
var b = 015;
// 十六进制以0x为前缀
var c = 0x15;
</code></pre>
<p>不管使用哪一种进制表示，最终在控制台都以十进制输出</p>
</li>
<li>
<p>小数</p>
<pre><code class="language-javascript">var n = 1.56
// 科学计数法：var k = 1.56e3; 1.56*(10 ** 3)
//e表示以10位底，3表示次方数
1.56 * 10 (3)
</code></pre>
</li>
</ul>
<p>(2)<code>string</code></p>
<p>字符串，使用引号表示</p>
<pre><code class="language-javascript">var s1 = 'chancey';
console.log(typeof s1 ,s1)
</code></pre>
<p>(3) <code>boolean</code></p>
<p>只有<code>true / false</code>两个值，可以转换成数值类型，true为1，false为0</p>
<p>(4) <code>ubdefined</code></p>
<p>两种方式</p>
<p>特殊值，声明未赋值的时候，默认值为<code>undefined</code></p>
<pre><code class="language-javascript">var age;
console.log(s)
console.log(typeof age);
</code></pre>
<p>(5) <code>null</code></p>
<pre><code class="language-javascript">var num = null;
console.log(num,typeof num)
</code></pre>
<p>一般用于解除对象的引用。</p>
<h3 id="2-对象">2. 对象</h3>
<p>引用数据类型</p>
<p>对象是由属性和方法组成，使用<code>.语法</code>访问</p>
<p>函数、数组、字符串、日期、自定义对象</p>
<h2 id="五数据类型转换">五、数据类型转换</h2>
<h3 id="1自动类型转换">1.自动类型转换</h3>
<h4 id="11-数学运算符">1.1 数学运算符</h4>
<p><code>+ - * / %</code></p>
<pre><code class="language-javascript">var r1 = 100 + 10;
var r2 = 5 + "20";
var r3 = 50 + 2 + "1";
console.log(r1,r2,r3);
var r4 = "1" + 2 + 50;
console.log(r4);
var r5 = "100" + true;
var r6 = "100" + undefined;
var r7 = "100" + null;
console.log(r5,r6,r7)
var res2 = "hello" - 10;
console.log(res2);
var res3 = "100" - true;
var res4 = "100a" - true;
console.log(res3,res4)
var res5 = "100" + true;
var res6 = "100" - undefined;
var res7 = "100" - null;
console.log(res5,res6,res7)
</code></pre>
<h4 id="12-运算规则">1.2 运算规则</h4>
<p>字符串与其他类型做+运算，将非字符串自动转为字符串做拼接，结果仍为字符串</p>
<p>其他情况下一律将操作数转number参与数学运算。如果转换number失败则变成NAN参与数学计算，结果一律为NaN</p>
<h3 id="2强制类型转换">2.强制类型转换</h3>
<p>(1) 转字符串 <code>.toString()</code>将变量装换为字符串并返回</p>
<pre><code class="language-javascript">//强制类型转换
var n1 = 100;
var n2 = true;
var n3 = null;
//将其转换为字符串
var s1 = n1.toString();
var s2 = n2.toString();
// var s1 = n3.toString(); //对象不能直接转换
console.log(n1,typeof n1,s1,typeof s1)
console.log(n2,typeof n2,s2,typeof s2)
// console.log(n3.s3,typeof s3)
var n4 = undefined;
console.log(n4,typeof n4)
var s4 = undefined.toString()
</code></pre>
<blockquote>
<p>null为对象类型无法转换为字符串</p>
<p>undefined特殊，同样不能转换</p>
</blockquote>
<p>(2) 转换number</p>
<ul>
<li>整体转number <code>Number(n)</code></li>
</ul>
<pre><code class="language-javascript">console.log(Number("100"));
console.log(Number("100a"),Number("hello"));
console.log(Number(undefined),Number(null));
</code></pre>
<ul>
<li>
<p>解析整数或解析number部分</p>
<p><code>parseInt(n)</code>解析整数部分</p>
<p><code>parseFloat(n)</code>解析整数加小数</p>
<p>解析过程：现将数据转换为字符串；从前向后逐位对每一个字符转number，转换失败则停止向后解析，直接返回结果</p>
<pre><code class="language-javascript">console.log(parseInt("100"));
console.log(parseInt(35.5)); //取整数
console.log(parseInt("35.5a"));
console.log(parseInt("a35.5"));
console.log(parseInt(true));
console.log(parseFloat(35.5))
</code></pre>
</li>
</ul>
<p>(3) 转布尔</p>
<p><code>Boolean(n)</code></p>
<pre><code class="language-javascript">console.log(Boolean(0))
console.log(Boolean(1))
console.log(Boolean(100))
console.log(Boolean('100'))
console.log(Boolean(0.0))
console.log(Boolean(""))
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(NaN))
</code></pre>
<blockquote>
<p>除0或者空字符串外，其余都为真，即<code>true</code>(0包括<code>undefined / null / NaN</code>非空字符串也为真)</p>
</blockquote>
<h2 id="六运算符">六、运算符</h2>
<h3 id="1赋值运算符">1.赋值运算符</h3>
<p><code>=</code></p>
<h3 id="2-算数运算符">2. 算数运算符</h3>
<p><code>+ - * / %</code></p>
<h3 id="3-复合运算符">3. 复合运算符</h3>
<p><code>+= -= *= /= %=</code></p>
<pre><code class="language-javascript">
</code></pre>
<h3 id="4-自增自减">4. 自增自减</h3>
<p><code>++ --</code></p>
<p>作用：在变量自身值的基础上+1/-1</p>
<ul>
<li>单独与变量结合，做前缀或后缀都可以，包含自动类型转换，在自身number值的基础上+1</li>
<li>与其他运算符结合使用，做前缀表示先自增，做后缀表示后自增</li>
</ul>
<pre><code class="language-javascript">// 自增自减运算符
var a = 10;
a ++; // 等同于 a += 1;
++ a;
console.log(a);
var b = "10";
b += 1;
console.log(b)
// ++包含自动类型转换，在自身number值的基础上+1
b ++;
console.log(b)
var c = 10;
var r1 = c++; // 先将c值赋给r1,则r1为10，c还要自增，则c为11
console.log(c,r1)
var r2 = ++c; // c先自增，则c为12，然后将12赋值给r2，则r为12
console.log(c,r2)
var n = 5;
var r = n++ + ++n + n++ + ++n + n
console.log(r,n)
</code></pre>
<p><img src="http://wx2.sinaimg.cn/mw690/007WoGSoly1g5z9io3wpyj30oz0drwfm.jpg" alt="" loading="lazy"></p>
<h3 id="5-比较运算符">5. 比较运算符</h3>
<p><code>> < <= >= == === != !==</code></p>
<p>(1) 比较运算符的结果永远是布尔值</p>
<p>(2) 运算规则：</p>
<pre><code class="language-javascript">console.log("10" > "2"); // 同为字符串的时候，逐位比较unicode编码值
console.log("15" > "151");
console.log("hello" > "apple");
console.log(r4 = "10" > 2);
console.log(100 > true); // 100>1
console.log(100 > undefined); //100>NaN
console.log(100 > null);
console.log('hello' > 100);
console.log('hello' > undefined); //NaN>NaN
console.log(true > false); //1>0
</code></pre>
<blockquote>
<p>同为字符串进行比较，不会转换数据类型，逐位比较每位字符的Unicode码值；</p>
<p>其他情况下，一律将操作数转换为number进行比较。如果转换失败则变成NaN参与比较运算，结果一律为false</p>
</blockquote>
<p>(3) 相等和全等</p>
<p>相等：包含自动转换类型，只要值相等就成立</p>
<p>全等：不会转换类型，要求数据类型一致并且值相等才会成立</p>
<p>不等：不考虑数据类型，只要值不相等就成立</p>
<p>不全等：数据类型不同或值不等，都不成立</p>
<pre><code class="language-java">console.log('10' == 10 , '10' === 10) //true false 松散比较和严格比较
console.log('10' != 10 , '10' !== 10) //false true
</code></pre>
<h3 id="6-逻辑运算符">6. 逻辑运算符</h3>
<p>逻辑运算的结果为布尔值</p>
<p>(1) 与<code>&&</code></p>
<p>全1则1</p>
<p>(2) 或<code>||</code></p>
<p>有1则1</p>
<p>(3) 非<code>!</code></p>
<p>对已有结果取反，切换布尔值。除“零”值以外，其他值都为真</p>
<pre><code class="language-javascript">console.log(10>5 && 2>3) // false
console.log(10>5 && 2<3) // true
console.log(10>5 || 2>3) // true
console.log(10>5 || 2<3) // true
console.log(! 2>3) // false
console.log(! 2<3) // true
console.log(!2) // false
console.log(!0) // true
console.log(!(3>5)) //true
</code></pre>
<p>比较运算优先级：非<code>!</code>>与<code>&&</code>>或<code>||</code></p>
<p>练习：</p>
<p>定义变量表示年份，判断是否为闰年</p>
<pre><code class="language-javascript">var year = 2019;
r = year%400==0 || year%4==0 && year%100!=0;
console.log(r)
</code></pre>
<h3 id="7-位运算符">7. 位运算符</h3>
<p>位运算符是指直接对数据的二进制操作</p>
<p>(1)位与<code>&</code></p>
<p>全1则1</p>
<pre><code class="language-javascript">console.log(3 & 5)
</code></pre>
<p><img src="http://wx4.sinaimg.cn/mw690/007WoGSoly1g5zc6d3mgyj309405574b.jpg" alt="" loading="lazy"></p>
<p>(2)位或<code>|</code></p>
<p><img src="http://wx2.sinaimg.cn/mw690/007WoGSoly1g5zca646j8j308004v748.jpg" alt="" loading="lazy"></p>
<p>(3)异或<code>^</code></p>
<p>相同为0，不同为1</p>
<pre><code class="language-javascript">//两个变量交换值
var a = 3,b = 5;
a = a ^ b;
b = a ^ b;
a = a ^ b;
console.log(a,b)
</code></pre>
<h3 id="8三目运算符">8.三目运算符</h3>
<p>语法：<code>表达式1 ？ 表达式2 ： 表达式3；</code></p>
<p>过程：判断表达式1是否成立，成立则执行或返回表达式2的结果，不成立则返回表达式3的结果</p>
<pre><code class="language-javascript">var money = 1000;
console.log( money >= 1000 ? '存款' : '余额');
var score = 85;
console.log(score >= 90 ? "A" : score >= 80 ? "B" : "C");
</code></pre>
<p>练习：</p>
<p>输入用户的成绩，判断区间范围</p>
<pre><code class="language-javascript">score = prompt("请输入您的成绩")
a = (score >= 80 ? '优秀' : score >= 60 ? '合格' : "不合格")
document.write("您的成绩",a)
</code></pre>
<p>输入用户的身高(m)和体重(kg)，计算bmi，（bmi = 体重 / （身高*身高）），保留两位小数，判断身体指数，（bmi >= 23.9 偏胖bmi >=18.5 健康 bmi < 18.5 偏瘦）</p>
<pre><code class="language-javascript">m = prompt("请输入身高(单位：m)")
kg = prompt("请输入体重(单位：kg)")
bmi = (kg / (m * m)).toFixed(1)
a = bmi >= 23.9 ? "偏胖" : bmi >= 18.5 ? "健康" : "偏瘦"
document.write("您的健康指数为：",a)
</code></pre>
<h2 id="七流程控制">七、流程控制</h2>
<h3 id="1-判断">1. 判断</h3>
<p>分支语句</p>
<h4 id="11-if">1.1 if</h4>
<p>语法：</p>
<pre><code class="language-javascript">//单分支
if (判断条件){
条件成立的执行体
}else{
条件不成立的执行体
}
//多重分支
if (判断条件){
条件成立的执行体
}else if(){
前边条件成立的执行体
}else if(){
前边条件成立的执行体
}else{
以上条件均不成立的执行体
}
</code></pre>
<blockquote>
<p>如果if()之后没有{}，则if只控制if后边的一行代码</p>
</blockquote>
<pre><code class="language-javascript">//单分支
var a = 10;
if(a > 0){
document.write(a,"<br>")
}
if(a < 0) //不跟{}
console.log("a < 0");
console.log("---------");
//多重分支
var b = 10;
if(b < 2){
document.write("成立");
}else{
document.write("不成立");
}
var b = 10;
if(b > 2){
document.write("成立");
}else if(b > 5){
document.write("不成立");
}else{
document.write("哈哈")
}
</code></pre>
<p>练习：</p>
<pre><code class="language-javascript">// 判断成绩
var s = prompt("请输入成绩");
if(s >= 80){
document.write("成绩优秀");
}else if(s >= 60){
document.write("成绩合格");
}else{
document.write("成绩不合格");
}
// 判断当日是今年的第几天
var year = prompt("请输入年份");
var month = prompt("请输入月份");
var day = prompt("请输入日份");
var sum = 0;
var day = Number(day)
// 闰年判断
var isRun = year%4 == 0 && year%100 != 0 || year%400 ==0
if(month == 1){
sum += day;
}else if(month == 2){
sum = 31 + day;
}else if(month == 3){
sum = 31 + 28 + day;
}else if(month == 4){
sum = 31 + 28 + 31 + day;
}else if(month == 5){
sum = 31 + 28 + 31 + 30 + day;
}else if(month == 6){
sum = 31 + 28 + 31 + 30 + 31 + day;
}else if(month == 7){
sum = 31 + 28 + 31 + 30 + 31 + 30 + day;
}else if(month == 8){
sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + day;
}else if(month == 9){
sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + day;
}else if(month == 10){
sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + day;
}else if(month == 11){
sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + 30 + day;
}else if(month == 12){
sum = 31 + 28 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + 30 + 31 + day;
}
if(isRun && month > 2){
sum ++
}
document.write("今天是",year,'年',month,'月',day,'日','<br/>',"今天是今年的第",sum,"天")
</code></pre>
<h4 id="12-switch">1.2 switch</h4>
<p>用于值的全等匹配</p>
<p>语法：</p>
<pre><code class="language-javascript">switch(a){
//依次列举所有可能的值
case 值1:
//匹配全等时执行的代码段
break; //结束匹配
case 值2:
//代码语句
break
default:
//所有case匹配失败以后，执行的默认操作
}
</code></pre>
<pre><code class="language-javascript">var a = 3;
switch(a){
case 1:
document.write("a===1");
break;
case 2:
document.write("a===2");
break;
case 3:
document.write("匹配成功");
break;
default:
document.write("匹配失败");
}
</code></pre>
<blockquote>
<p>特殊用法：</p>
<p>省略break，会从当前匹配到case开始向后执行所有的代码语句；</p>
<p>多个case共用代码段</p>
<pre><code class="language-javascript">case 1:
case 2:
//代码段
break;
</code></pre>
</blockquote>
<p>使用switch改版日期计算</p>
<pre><code class="language-javascript">var year = prompt("请输入年份");
var month = prompt("请输入月份");
var day = prompt("请输入日份");
var sum = 0;
var day = Number(day)
// 闰年判断
var isRun = year%4 == 0 && year%100 != 0 || year%400 ==0
switch(month - 1){
case 11:
sum += 30;
case 10:
sum += 31;
case 9:
sum += 30;
case 8:
sum += 31;
case 7:
sum += 31;
case 6:
sum += 30;
case 5:
sum += 31;
case 4:
sum += 30;
case 3:
sum += 31;
case 2:
sum += 28;
if(isRun && month > 2){
sum ++
}
case 1:
sum += 31;
}
document.write("今天是",year,'年',month,'月',day,'日','<br/>',"今天是今年的第",sum,"天")
</code></pre>
<h3 id="2-循环">2. 循环</h3>
<h4 id="21-while">2.1 while</h4>
<p>语法：</p>
<pre><code class="language-javascript">var i = 1; //定义循环变量
while(i<101){
//定义循环条件
i++//更新循环变量
}
</code></pre>
<p>练习</p>
<pre><code class="language-javascript">//打印1-100之间的整数
var i = 0;
while(i<101){
document.write(i,'&emsp;');
i ++;
}
// 求1-100之间整数的和
var a = 0;
var i = 0;
while(i<101){
// document.write(i,'&emsp;');
a += i;
i ++;
}
document.write(a)
// 输出1-100之间所有3的倍数
var i = 0;
while(i<101){
i ++;
if(i % 3 == 0){
document.write(i,"&emsp;")
}
}
</code></pre>
<h4 id="22-do-while">2.2 do-while</h4>
<p>语法：</p>
<pre><code class="language-javascript">do{
//循环体
//更新循环变量
}while(循环条件);
</code></pre>
<blockquote>
<p>while循环先判断条件成立才执行循环，do-while循环先循环一次，然后开始判断条件执行</p>
</blockquote>
<pre><code class="language-javascript">// 循环让用户输入，直至输入exit结束循环
do{
var input = prompt();
}while(input != "exit");
</code></pre>
<h4 id="23-for">2.3 for</h4>
<p>语法：</p>
<pre><code class="language-javascript">for(定义循环变量;循环条件;更新循环变量){
//循环体
}
</code></pre>
<pre><code class="language-javascript">//打印1-100之间的整数
for(var i = 10 ; i < 101 ; i ++){
document.write(i,"&emsp;")
}
// 求1-100之间整数的和
var sum = 0;
for(var i = 1 ; i < 101 ; i ++){
sum += i;
}
document.write(sum)
// 输出1-100之间所有3的倍数
for(var i = 1 ; i < 101 ; i ++){
if (i % 3 == 0){
document.write(i,'&emsp;')
}
}
</code></pre>
<h4 id="24-循环控制">2.4 循环控制</h4>
<p><code>break</code>跳出循环</p>
<p><code>continue</code>结束本次循环，开始下次循环</p>
<pre><code class="language-javascript">// 循环让用户输入，直至输入exit结束循环
while(true){
input = prompt("");
if(input == "exit"){
break;
}
}
</code></pre>
<h4 id="25-循环嵌套">2.5 循环嵌套</h4>
<pre><code class="language-javascript">// 计算星期几
var year = prompt("请输入年");
var month = prompt("请输入月");
var day = prompt("请输入日");
var sum = 0;
var idRun = year%4 == 0 && year%100 != 0 || year% 400 == 0;
//整年天数的累加
for(var i = 1990 ; i < year - 1 ; i++){
sum += 365;
if(i%4 == 0 && i%100 != 0 || i%400 == 0){
sum++;
}
}
//当前整月天数的累加
for(var j = 1 ; j < month ; j++){
switch(i){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
sum += 31;
break;
case 4:
case 6:
case 9:
case 11:
sum += 30;
break;
case 2:
sum += 28;
if(isRun){
sum ++;
}
}
}
//当前月天数的累加
sum += day;
// 计算当前星期几
var week = sum % 7;
var show = "";
switch(week){
case 0:
// show = "日";
week = "日";
break;
case 1:
week = "一";
break;
case 2:
week = "二";
break;
case 3:
week = "三";
break;
case 4:
week = "四";
break;
case 5:
week = "五";
break;
case 6:
week = "六";
break;
}
console.log('今年是星期',week)
</code></pre>
<pre><code class="language-javascript">// 九九乘法表，要求在控制台输出
for(var i = 1 ; i < 10 ; i++){
var show = "";
for(var j = 1 ; j <= i ; j++){
show += i + "*" + j + "=" + i*j + '\t';
// 拼接每行中所有的表达式
}
console.log(show)
}
</code></pre>
<h2 id="八函数">八、函数</h2>
<p>保存代码或封装功能</p>
<h3 id="1-定义">1. 定义</h3>
<p>使用<code>function</code>关键字声明函数</p>
<pre><code class="language-javascript">function 函数名(参数列表){
//函数体
return 返回值;
}
</code></pre>
<h3 id="2-函数调用">2. 函数调用</h3>
<p><code>函数名（参数）</code></p>
<pre><code class="language-javascript">// 无参数
function f1() {
console.log("f1 被调用");
}
f1();
// 带参数
function f2(a,b) {
console.log(a,b,a*b);
// arguments 只能在函数体中访问，保存实际参数
console.log(arguments);
}
f2(2,5) // 实参和形参个数一致
f2(2,5,3) // 实参多于形参 只取前边的实参
f2(2) // 实参少于形参 返回NaN
// 允许实参和形参个数不匹配
</code></pre>
<h3 id="3-作用域">3. 作用域</h3>
<p>作用域分为全局作用域函数作用域</p>
<p>(1)全局变量（全局函数）：全局作用域下创建的变量或者函数，在任意地方都能访问和使用。所有省略var关键字创建的变量都是全局变量。</p>
<p>(2)局部变量：函数作用域中使用var关键字创建的变量都为局部变量</p>
<pre><code class="language-javascript">var a = 100;
function f1(){
console.log("函数内部访问",a) // 在函数内部访问外部变量
}
console.log("外部访问",a) // 在函数外部访问外部变量
f1();
function f2(){
f1();
var b = 200;
console.log("f2:",b) //在函数内部访问内部变量
}
f2();
// console.log(b) // 报错，局部变量无法在函数外部访问
// 以上代码可以看出，全局变量可以在函数内部和外部都访问
var age = 30;
function fn(){
var age = 18;
username = "张三"; // 无var关键字，则为全局变量
console.log(age); //就近原则。内部访问就是内部的值
}
fn();
console.log(username); //创建时并没有var关键字，所以可以正常访问
</code></pre>
<h3 id="4-匿名函数">4. 匿名函数</h3>
<p><code>function()()</code>前边的括号是函数自身，后边的实参</p>
<pre><code class="language-javascript">// 匿名函数
(function (a){
console.log(a)
})(1000)
//定义变量保存匿名函数,变量名即为函数名
var fun = function (){};
fun();
console.log(fun)
</code></pre>
<p>内存回收，用完即销毁</p>
<ul>
<li>匿名函数自执行，否建局部作用域。(函数自身)(实参)</li>
<li>定义变量接收匿名函数，变量名即为函数名</li>
</ul>
<h2 id="九数组">九、数组</h2>
<p>一组数据</p>
<h3 id="1-创建">1. 创建</h3>
<p><code>var a = </code>字面量方式创建</p>
<p><code>var b = new Array(1,2,3)</code>new关键字创建，如果只有一个参数，则代表预分配的长度</p>
<h3 id="2-操作">2. 操作</h3>
<p>数组会自动为每一位元素分配下标，从0开始</p>
<h3 id="3数组属性">3.数组属性</h3>
<p><code>length</code>：数组长度</p>
<h3 id="4数组遍历">4.数组遍历</h3>
<pre><code class="language-javascript">// 遍历数组
var arr5 = ;
for (var i = 0 ; i < arr5.length ; i++){
console.log(arr5);
}
for (var i = arr5.length -1 ; i >= 0 ; i--){
console.log(arr5);
}
// for-in，还可以用来遍历对象
for (var i in arr5){
console.log(i,arr5)
}
</code></pre>
<p>练习：</p>
<pre><code class="language-javascript">// 1.循环接收用户输入，存储到数组中，直至输入"exit"结束循环，控制台输出数组
function addData(){
var arr = [];
while (true){
var input = prompt(" ");
if (input == "exit"){
break; // 跳出循环
}
arr = input; //添加元素
}
bianLi(arr);
}
function bianLi(arr){// 遍历数组
for (var i in arr){
document.write(arr,"<br/>")
}
}
addData() // 调用
// 2.定义包含若干number值的数组，求数组中的最大值
function findMax(){ //假设最大的值为arr,将其赋值给其他变量，然后依次更改最大值
var arr = ;
var max = arr;
for (var i in arr){
if(arr > max){
max = arr
}
}
document.write("最大值为：",max)
}
findMax();
</code></pre>
<h3 id="5-数组方法">5. 数组方法</h3>
<h4 id="51-push">5.1 push</h4>
<p><code>push(data);</code></p>
<p>在数组的末尾添加一个或多个元素</p>
<p>返回添加后的数组长度</p>
<pre><code class="language-javascript">var arr = ;
r1 = arr.push(10,20); //一次性在数组末尾添加两个元素
</code></pre>
<h4 id="52-pop">5.2 pop</h4>
<p><code>pop();</code></p>
<p>溢出数组的末尾元素</p>
<p>返回被删除的元素</p>
<pre><code class="language-javascript">var arr = ;
document.write(arr,"<br/>")
arr.pop(); //只删除末尾元素
document.write(arr)
</code></pre>
<h4 id="53-unshift">5.3 unshift</h4>
<p><code>unshift(data);</code></p>
<p>在数组的头部添加一个或多个元素</p>
<pre><code class="language-javascript">var arr = ;
arr.unshift("a","b") // 将ab整体添加到头部，即['a','b',1,2,3]
console.log(arr)
arr.unshift("c")
arr.unshift("d") // 分别添加，每次添加到头部，即['d','c','a','b',1,2,3]
</code></pre>
<h4 id="54-shift">5.4 shift</h4>
<p><code>shift();</code></p>
<p>移除数组的头部元素</p>
<pre><code class="language-javascript">var arr = ;
arr.shift()
console.log(arr)
</code></pre>
<h4 id="55-tostring">5.5 toString</h4>
<p><code>toString();</code></p>
<p>将数组转换为字符串，返回转换后的结果</p>
<h4 id="56-join">5.6 join</h4>
<p><code>join(param);</code></p>
<p>将数组转换为字符串，参数用于指定数组元素之间的连接符，默认使用逗号</p>
<pre><code class="language-javascript">var s1 = arr.toString();
console.log(s1,arr);
var s2 = arr.join("-");
console.log(s2,arr);
var s3 = arr.join("");
console.log(s3,arr)
</code></pre>
<h4 id="57-reverse">5.7 reverse</h4>
<p><code>reverse();</code></p>
<p>翻转数组（倒序重排），对当前数组结构的调整。</p>
<h4 id="58-sort">5.8 sort</h4>
<p><code>sort();</code></p>
<pre><code class="language-javascript">res = arr.sort(); //默认按照Unicode编码升序排列
console.log(res);
</code></pre>
<h4 id="59-foreach">5.9 forEach</h4>
<p><code>forEach(function (){})</code></p>
<p>数组自带的遍历方法</p>
<pre><code class="language-javascript">// 数组自带的遍历的方法
var arr =
arr.forEach(function (elem,index){
console.log(elem,index);
});
</code></pre>
<h3 id="6-二维数组">6. 二维数组</h3>
<pre><code class="language-javascript">var arr = [,,];
arr //3
</code></pre>
<pre><code class="language-javascript">// 遍历二维数组
</code></pre>
<h2 id="十字符串">十、字符串</h2>
<h3 id="1-创建-1">1. 创建</h3>
<p>创建字符串有两种方法</p>
<p><code>var s = 'hello';</code></p>
<p><code>var s = new String("world");</code></p>
<pre><code class="language-javascript">// 遍历字符串
for (var i in s1){
console.log(s1);
}
for (var i = 0 ; i < s1.length ; i++){
console.log(s1);
}
</code></pre>
<h3 id="2-特点">2. 特点</h3>
<p>字符串采用数组结构存储，自动为每一位字符分配下标，可以使用下标访问每位存储</p>
<h3 id="3-属性">3. 属性</h3>
<p><code>length:字符串长度</code></p>
<h3 id="4方法">4.方法</h3>
<h4 id="1-大小写">(1) 大小写</h4>
<p><code>toUpperCase()</code>转换大写</p>
<p><code>toLowerCase()</code>转换小写</p>
<pre><code class="language-javascript">var s3 = "Apple";
var r1 = s3.toUpperCase();
var r2 = s3.toLowerCase();
console.log(s3)
console.log(r1)
console.log(r2)
</code></pre>
<h4 id="2-下标">(2) 下标</h4>
<p>根据下标获取指定的字符或字符编码</p>
<p><code>charAt(index)</code></p>
<p><code>charCodeAt(index)</code></p>
<pre><code class="language-javascript">var r1 = s1.charAt(1); // 下标为1的字符
console.log(r1)
var r2 = s1.charCodeAt(1); // 下标为1的字符编码
console.log(r2)
</code></pre>
<blockquote>
<p>参数可以省略，默认为0</p>
</blockquote>
<h4 id="3-查下标">(3) 查下标</h4>
<p><code>indexOf("",fromIndex)</code></p>
<p><code>lastIndexOf("",fromIndex)</code></p>
<p>参数：</p>
<p>指定查找字符串；</p>
<p>fromIndex设置起始下标；</p>
<pre><code class="language-javascript">str = 'hello world';
var r3 = s1.indexOf('o',2);
var r4 = s1.lastIndexOf('l',3);
console.log(r3)
console.log(r4)
</code></pre>
<blockquote>
<p>查找方式：</p>
<p>indexOf从指定的下标开始向后查找字符，找到即返回</p>
<p>lastIndexOf从指定下标开始向前查找字符，找到即返回</p>
<p>如果为-1则表示查找失败</p>
</blockquote>
<h4 id="4-截取">(4) 截取</h4>
<p><code>substring(startIndex,endIndex)</code></p>
<p>截取start~end-1范围内的字符串，结束下标可以省略。</p>
<pre><code class="language-javascript">// 截取字符串
var r5 = s1.substring(2,4);
var r6 = s1.substring(2);
console.log(r5);
console.log(r6);
</code></pre>
<h4 id="5-分割">(5) 分割</h4>
<p><code>split(param)</code></p>
<p>参数为指定分隔符，返回数组，存放分割结果。</p>
<pre><code class="language-javascript">var s1 = "2020-10-10";
var r1 = s1.split("-");
console.log(r1);
var r2 = s1.split('/');
console.log(r2)
</code></pre>
<blockquote>
<p>注意：</p>
<p>参数必须为字符串中存在的字符，否则分割无效。</p>
</blockquote>
<pre><code class="language-javascript">// "101=5&201=10&301=8"
s2 = "101=5&201=10&301=8";
var r3 = s2.split("&");
for (i in r3){
var r4 = r3.split("=");
console.log(r4,r4);
}
</code></pre>
<h4 id="6-模式匹配">(6) 模式匹配</h4>
<p>正则表达式（RegExp）</p>
<p>指定的字符串格式</p>
<p>语法：<code>var reg1 = /字符格式/修饰符;</code></p>
<p>修饰符：<code>i(ignorecase)</code>忽略大小写，<code>g(global)</code>全局匹配。</p>
<p>例如：</p>
<pre><code class="language-javascript">// 固定查找内容
var reg1 = /知乎/g;
// 固定查找格式
var reg2 = /\d{6,11}/g;
</code></pre>
<p><code>match()</code>查找</p>
<p><code>replace()</code>替换</p>
<pre><code class="language-javascript">var s = "上知乎，搜知乎，问知乎，答知乎";
console.log(s.match("知乎"));
var reg = /知乎/;
console.log(s.match(/知乎/)); // 懒惰匹配
console.log(s.match(/知乎/g)); // 贪婪匹配
// 查找并替换
r1 = s.replace("知乎","新浪");
r2 = s.replace(/知乎/g,"新浪");
console.log(r1,"",r2);
</code></pre>
<h4 id="练习">练习</h4>
<p>指定邮箱字符串，提取用户名和服务商</p>
<pre><code class="language-javascript">function mail(){
var email = prompt("请输入邮箱");
var number = email.indexOf("@");
var username = email.substring(0,number);
var server = email.substring(number + 1);
document.write("用户名：",username,"<br/>服务商：",server);
}
</code></pre>
<p>从身份证号提取年月日</p>
<pre><code class="language-javascript">function id(){
var credId = prompt("请输入身份证号码");
var year = credId.substring(6,10);
var month = credId.substring(10,12);
var day = credId.substring(12,14);
document.write(year,month,day);
}
</code></pre>
<h2 id="十一其他对象">十一、其他对象</h2>
<h3 id="1regexp">1.RegExp</h3>
<p>创建：</p>
<p>属性：</p>
<p><code>lastIndex</code>表示下一次匹配的起始下标</p>
<p>方法：</p>
<p><code>test(str)</code>验证字符串中是否存在满足正则表达式格式的内容，返回布尔值</p>
<p>全局匹配光标位置不同</p>
<pre><code class="language-javascript">// 创建正则表达式
var reg1 = /\d{6}/; // 匹配6位数字
var reg2 = /\d{6}/g; // 全局
var s = "a123456789";
var r1 = reg1.test(s);
var r2 = reg1.test(s);
var r3 = reg1.test(s);
// console.log(r1,r2,r3);
console.log(reg2.lastIndex); // 查看起始索引，即开始匹配的位置
var r4 = reg2.test(s);
console.log(reg2.lastIndex);
var r5 = reg2.test(s);
console.log(reg2.lastIndex);
var r6 = reg2.test(s);
console.log(r4,r5,r6);
console.log(reg2.lastIndex); // 查看起始索引，即开始匹配的位置
var r4 = reg2.test(s);
reg2.lastIndex = 0; //手动指定索引位置
console.log(reg2.lastIndex);
var r5 = reg2.test(s);
reg2.lastIndex = 0;
console.log(reg2.lastIndex);
var r6 = reg2.test(s);
console.log(r4,r5,r6);
</code></pre>
<h3 id="2-math">2. Math</h3>
<pre><code class="language-javascript">// Math对象的属性:数学常量
console.log(Math.PI,Math.E); //圆周率，对数
// 方法
console.log(Math.random()); //生成0-1之间的随机小时
console.log(Math.ceil(4.1)); //向上取整：舍弃小数位，整数+1
console.log(Math.floor(4.99)); //向下取整：舍弃小数位，保留整数
console.log(Math.round(4.5)) //四舍五入
</code></pre>
<h3 id="3date">3.Date</h3>
<pre><code class="language-javascript">// 提取时间分量
var year = date.getFullYear(); // 获取年
var month = date.getMonth() + 1; // 返回0-11对应12个月，所以这里必须加1
var day = date.getDate();// 获取日期
var week = date.getDay(); // 获取星期
var hour = date.getHours(); // 获取小时
var mintue = date.getMinutes(); // 获取分
var second = date.getSeconds(); //获取秒
console.log(year,month,day,'星期',week,hour,":",mintue,":",second);
// 转换日期对象的显示格式
var timeStr = date.toLocaleString(); // 转字符串
console.log(timeStr);
// 获取年月日
var str1 = date.toLocaleDateString();
var str2 = date.toLocaleTimeString();
console.log(str1,str2)
</code></pre>
<h2 id="十二例">十二、例</h2>
<p>循环接收用户输入，保存到数组中，exit结束，使用数组相关方法实现</p>
<pre><code class="language-javascript">function addData(){
var arr = [];
while (true){
var input = prompt("请输入");
if (input == "exit"){
break;
}
arr.push(input);
}
console.log(arr);
}
</code></pre>
<p>模拟验证码</p>
<pre><code class="language-javascript">// 模拟验证码
function createCode(length){
// 模拟数据源
var arr = ["a","c","h","q",4,5,"n",8,"c",9,2,"e",6,0,"y"]
var code = "";
for (var i = 1 ; i <= length ; i++){
// 创建随机下标
var index = parseInt( (Math.random()) * arr.length );
// 拼接
code += arr
}
return code;
}
function validate(){
// 1.生成验证码
var code = createCode(4);
// 2.提示输入
var input = prompt("验证码为"+code);
// 3.验证
if(code.toLowerCase() == input.toLowerCase()){
alert("正确");
}else{
alert("错误");
}
}
</code></pre><br><br>
来源：https://www.cnblogs.com/chancey/p/11381867.html
頁:
[1]