Python JavaScript

体质能运动 發表於 2019-9-7 19:09:00

<h2 class="md-end-block md-heading md-focus">JavaScript</h2>
<h3 class="md-end-block md-heading md-focus">一 JavaScript是什么(html网页的动态效果):</h3>
　　JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直         接写在html文件中），采用的ECMAScript语法，属于编程语言。
注意：JavaScript跟Java没有半毛钱关系，纯粹是为了蹭当时红极一时java的热度.
<h3 class="md-end-block md-heading md-focus">二 JavaScript三种书写位置（css也是三种）</h3>
<h4 class="md-end-block md-heading md-focus">① 行间式（JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法）</h4>
<div class="cnblogs_code">
<pre>

<div onclick="alert('点击我完成页面交互')">点我</div></pre>
</div>
<h4 class="md-end-block md-heading md-focus">② 内联式（JS代码书写在script标签中）</h4>
<div class="cnblogs_code">
<pre>JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码 是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件， 那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法



<body>



<script>
 alert('该页面被加载！')
</script>
</body></pre>
</div>
<h4 class="md-end-block md-heading md-focus">③ 外联式（文件引入）</h4>
<div class="cnblogs_code">
<pre>JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）

#1.js文件夹下的my.js
alert('外联式js文件弹出框')

#2.根目录下的first.html


<body>



<script src="js/my.js">
 /* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
</script>
</body></pre>
</div>
总结：
<div class="cnblogs_code"><img id="code_img_closed_af88092f-36f3-4831-b149-ae8aa99c1f9e" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_af88092f-36f3-4831-b149-ae8aa99c1f9e" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_af88092f-36f3-4831-b149-ae8aa99c1f9e" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 #dd {
 width: 200px;
 height: 200px;
 background-color: orange;
 }
</style>

</head>
<body>



<div id="dd"></div>

</body>

<script>
dd.onclick = function () {
 alert('hello js')
}
</script>


<script src="js/js导入.js">
// 一个script标签拥有src引入外部js文件后，就相当于单标签，所以内部的代码会被自动屏蔽
dd.onclick = function () {// 不会起作用
 alert(666)
}
</script>
</html></pre>
</div>
三种引入总结</div>
 
<h3 class="md-end-block md-heading md-focus">三 JavaScript注释</h3>
<div class="cnblogs_code">
<pre>#1.js注释：
单行注释 /单行内容/

多行注释 /多行内容/</pre>
<pre> #2.js语言是以分号(;)作为语句的结束符 一般情况下不加分号也不会报错 </pre>
</div>
<h3 class="md-end-block md-heading md-focus">四  JavaScript基础语法</h3>
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
<h4 class="md-end-block md-heading md-focus">① 变量的定义（变量名是区分大小写的,var与python一样可覆盖赋值let不可以）</h4>
<div class="cnblogs_code">
<pre>ECMA6最新语法

#1.变量关键字var与let的区别：
var作用的是全局
let作业的是局部，可以保证变量的不被随意的修改（指的是是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。）
例：
var/let是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符
var num = 10; for (let i=0;i<arr.length;i++){...}</pre>
<pre> #2.在js中是有真正意义上的常量，声明常量关键字const const PI = 3.14;(常量声明时必须赋初值，且一旦赋值，不可改变) #3.变量的命名规范 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 #4.注意</pre>
     变量名是区分大小写的。
     推荐使用驼峰式命名规则。
     保留字不能用做变量名。
</div>
<h4 class="md-end-block md-heading md-focus">② 基本数据类型</h4>
#1.数值类型：number（js中将整型和浮点型统称为数值类型）
<div class="cnblogs_code">
<pre>var num = 10;
const PI = 3.14;
console.log(typeof(num), num);// 结果：number10

NaN：是数值类型但是表示的意思是不是一个数字</pre>
</div>
#2.字符串类型：string(单双引号定义)
<div class="cnblogs_code"><img id="code_img_closed_17ba1f7d-db69-42f7-acc1-d745529622c5" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_17ba1f7d-db69-42f7-acc1-d745529622c5" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_17ba1f7d-db69-42f7-acc1-d745529622c5" class="cnblogs_code_hide">
<pre>var s1 = "双引号可以表示字符串";
var s2 = '单引号可以表示字符串';
console.log(typeof(s1), s1);// 结果：string双引号可以表示字符串</pre>
</div>
字符串定义</div>
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907191209016-919678833.png" alt="">   
<div class="cnblogs_code"><img id="code_img_closed_b97379eb-01b0-490e-aff0-01ed7e81f58c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_b97379eb-01b0-490e-aff0-01ed7e81f58c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_b97379eb-01b0-490e-aff0-01ed7e81f58c" class="cnblogs_code_hide">
<pre> // 字符串
// 1）定义：
let ss = '123abc呵呵';
let res;
console.log(ss);
// 2）索引
res = ss;
console.log(res);
// 3）切片
res = ss.slice(3, 6);
console.log(res);
// 4）替换
res = ss.replace('abc', 'ABC');
console.log(res);
// 5）拆分: string => array
res = ss.split('');
console.log(res);
// 6) 拼接
res = ss + ss;
console.log(res);
// 7) 迭代
for (s of ss) {
 console.log(s);
}</pre>
</div>
事例 </div>
<div class="cnblogs_code"><img id="code_img_closed_0a5601c8-98ec-4243-8191-c4c14f49d354" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_0a5601c8-98ec-4243-8191-c4c14f49d354" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_0a5601c8-98ec-4243-8191-c4c14f49d354" class="cnblogs_code_hide">
<pre>#1.string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

#2.字符串拼接推荐使用加号
#3.万能占位符：${变量名}</pre>
</div>
字符串拼接占位符 substring与slice区别</div>
#字符串和数值类型补充
<div class="cnblogs_code">
<pre>parseInt("123")// 返回123
parseInt("ABC")// 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")// 返回123.456</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907202024365-1778541573.png" alt="">
 
 
 
#3.数组（类似于python中的列表）
<div class="cnblogs_code"><img id="code_img_closed_5ee5008e-31db-4484-8dac-34a0162f1fac" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_5ee5008e-31db-4484-8dac-34a0162f1fac" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_5ee5008e-31db-4484-8dac-34a0162f1fac" class="cnblogs_code_hide">
<pre>let arr = ;
console.log(arr, typeof(arr)); 'object'</pre>
</div>
数组定义</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907193206373-2139527622.png" alt="">
<div class="cnblogs_code"><img id="code_img_closed_cfb67bd3-3c92-4781-b81a-194f7066f10c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cfb67bd3-3c92-4781-b81a-194f7066f10c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cfb67bd3-3c92-4781-b81a-194f7066f10c" class="cnblogs_code_hide">
<pre> let arr = ;
res = arr.join('');// 默认,|''|'自定义符合'
 console.log(res);
// 迭代
for (a of arr) {
 console.log(a);
}
// 排序
// arr.sort();
// arr.reverse();
// console.log(arr);

// 增删改查
console.log(arr);
arr[4] = 555;
console.log(arr[4]);

arr.push(100);// 尾增
arr.unshift(200);// 头增
 console.log(arr);

arr.pop();// 尾删
arr.shift();// 头增
 console.log(arr);

// 重点：增删改
 console.log(arr);
// 开始操作的索引操作的长度操作后的结果(不定长0~n个)
arr.splice(2, 1, 222, 333, 444);
console.log(arr);

// 不定长参数
function f(...a) {
 console.log(a)
}
f(1, 2, 3, 4, 5, 6)</pre>
</div>
常用内置方法</div>
<div class="cnblogs_code">
<pre>遍历数组元素
var a = ;
for (var i=0;i<a.length;i++) {
console.log(a);
}</pre>
</div>
 
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907194000522-1247186090.png" alt="">
 
 
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907194017706-1593652277.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907200656377-1071430677.png" alt="">
 
 
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907200727357-1846019169.png" alt="">
 
 
 
 
 
 
 
#4.对象类型（相当于dict所有的key必须是字符串）
<div class="cnblogs_code"><img id="code_img_closed_c5b3d6c1-eb60-41c7-b3fb-fcfc02a65d25" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_c5b3d6c1-eb60-41c7-b3fb-fcfc02a65d25" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_c5b3d6c1-eb60-41c7-b3fb-fcfc02a65d25" class="cnblogs_code_hide">
<pre>// 增删改查
dic = {};
// 增
dic['name'] = 'owen';
dic.age = 18;
// 改
dic.age = 20;
// 对象的删除
delete dic.age;
console.log(dic);
// 查
 console.log(dic.name);

// 字典的迭代用 for in
for (k in dic) {
 console.log(k);
}</pre>
</div>
对象定义和常用方法</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907195259372-1912456088.png" alt="">
 
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907195619359-576637529.png" alt="">
 
 
  #data对象
<div class="cnblogs_code"><img id="code_img_closed_7e6863a2-1d83-4bbf-9baa-c71a1d0db1a3" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_7e6863a2-1d83-4bbf-9baa-c71a1d0db1a3" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_7e6863a2-1d83-4bbf-9baa-c71a1d0db1a3" class="cnblogs_code_hide">
<pre>#创建对象
//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());//毫秒并不直接显示

#常用方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)</pre>
</div>
data对象</div>
#5.布尔类型（小写：true和false）
<div class="cnblogs_code"><img id="code_img_closed_f5cdbd93-7803-4bb5-b773-56cfa04807e2" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f5cdbd93-7803-4bb5-b773-56cfa04807e2" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f5cdbd93-7803-4bb5-b773-56cfa04807e2" class="cnblogs_code_hide">
<pre>""(空字符串)、0、null、undefined、NaN都是false。

var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);// 结果：booleantrue

null和undefined区别：
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

ull表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。</pre>
</div>
View Code</div>
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif">③ 运算符</h4>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907202311363-1090938765.png" alt="">
 
 
#1.赋值运算符
 
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907202433350-104969245.png" alt="">
 
 
 注意：
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907202448456-137577180.png" alt="">
 
#2.比较运算符
 
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907202517514-1190070778.png" alt="">
 
 
 注意
<div class="cnblogs_code">
<pre>let aaa = 123;
let bbb = '123';

console.log(aaa == bbb);// == 只做数据比较 true
console.log(aaa === bbb);// === 做数据与类型比较 false </pre>
<pre>//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将 //数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误</pre>
<pre></pre>
</div>
#3.逻辑运算符
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907203013354-345164818.png" alt="">
 
 
 #4.三目运算符
<div class="cnblogs_code">
<pre>/ 得到结果 = 条件表达式 ? 条件成立结果 1: 条件不成立结果2;
// 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907203417362-2096785728.png" alt="">
 
 
 
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif">④ 分支结构</h4>
#if分支
<div class="cnblogs_code"><img id="code_img_closed_f7461671-b612-46d6-8fe3-77df60c3c013" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f7461671-b612-46d6-8fe3-77df60c3c013" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f7461671-b612-46d6-8fe3-77df60c3c013" class="cnblogs_code_hide">
<pre>#1.基础语法
if (条件表达式) {
代码块;
}

// 1. 当条件表达式结果为true，会执行代码块；反之不执行
// 2. 条件表达式可以为普通表达式
// 3. 0、undefined、null、""、NaN为假，其他均为真

#2.复杂语法

// 1.双分支
if (表达式1) {
代码块1;
} else {
代码块2;
}

// 2.多分支
if (表达式1) {

} else if (表达式2) {

}
...
else if (表达式2) {

} else {

}

事例1：
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}

事例2：
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}</pre>
</div>
View Code</div>
<div class="cnblogs_code"><img id="code_img_closed_2214630d-ccc5-4a57-ae24-f97274ada753" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_2214630d-ccc5-4a57-ae24-f97274ada753" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_2214630d-ccc5-4a57-ae24-f97274ada753" class="cnblogs_code_hide">
<pre>#if嵌套
if (表达式1) {
if (表达式2) {

}
}</pre>
</div>
View Code</div>
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif"><img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907205529376-234889331.png" alt=""></h4>
 
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif"> </h4>
 
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif">#switch匹配</h4>
<div class="cnblogs_code"><img id="code_img_closed_72a5b77a-552a-4786-8cd0-b17f47cc80f7" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_72a5b77a-552a-4786-8cd0-b17f47cc80f7" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_72a5b77a-552a-4786-8cd0-b17f47cc80f7" class="cnblogs_code_hide">
<pre>var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。</pre>
</div>
View Code</div>
 
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907204248457-284359685.png" alt="">
 
 
<h4 class="md-end-block md-heading md-focus" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif">⑤ 循环结构</h4>
#for循环
<div class="cnblogs_code"><img id="code_img_closed_f1719e4b-2138-4a04-870b-c063cde54914" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_f1719e4b-2138-4a04-870b-c063cde54914" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_f1719e4b-2138-4a04-870b-c063cde54914" class="cnblogs_code_hide">
<pre>for (循环变量①; 条件表达式②; 循环变量增量③) {
代码块④;
}
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：
for (var i = 0; i < 5; i++) {
console.log(i);
}

// 结果：
0
1
2
3
4</pre>
</div>
for循环</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907205502369-1253890608.png" alt="">
 
#for…in迭代器
<div class="cnblogs_code">
<pre>var arr =
for (num in arr) {
console.log(num);
}

// 结果：
0
1
2
3
4
// 1. break：结束本层循环
// 2. continue：结束本次循环进入下一次循环</pre>
</div>
#while循环
<div class="cnblogs_code">
<pre>while (条件表达式) {
代码块;
}
// 条件满足执行代码块，条件不满足跳出循环

// 案例：
var i = 0;
while (i < 5) {
console.log(i);
i++;
}

// 结果：
0
1
2
3
4</pre>
</div>
<h4 class="md-end-block md-heading" style="box-sizing: border-box; break-after: avoid-page; break-inside: avoid; font-size: 1.25em; margin-top: 1rem; margin-bottom: 1rem; position: relative; line-height: 1.4; cursor: text; white-space: pre-wrap; color: rgba(51, 51, 51, 1); font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif">⑦ 函数</h4>
<div class="cnblogs_code"><img id="code_img_closed_1a8531e9-889e-4a19-8421-99d04e0f8389" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_1a8531e9-889e-4a19-8421-99d04e0f8389" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_1a8531e9-889e-4a19-8421-99d04e0f8389" class="cnblogs_code_hide">
<pre>#1.有参无参函数定义及调用
function 函数名 (参数列表) {
函数体;
}

function 函数名 () {
函数体;
}

#调用
函数名(参数列表)

#2.匿名函数及调用
function () {
 // 没有名字的函数就是匿名函数
 }

// 需求需要一个函数地址，就可以传入一个匿名函数
function fn100(fn) {
 fn()
}
fn100( function () { console.log('传进去的匿名函数') } )

// 用变量接收匿名函数：第二种声明函数的方式
let f = function (a, b) {
 console.log('ffffffffff')
};
f();

#3.立即调用函数
// 立即执行函数书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);</pre>
</div>
函数</div>
#函数参数
<div class="cnblogs_code"><img id="code_img_closed_4b2d6a71-4082-412b-bde8-ea090f27158d" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_4b2d6a71-4082-412b-bde8-ea090f27158d" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_4b2d6a71-4082-412b-bde8-ea090f27158d" class="cnblogs_code_hide">
<pre>// 个数不需要统一
function fn (a, b, c) {
console.log(a, b, c)// 结果：100 undefined undefined
}
fn(100);// 并未给b，c传值

function fn (a) {
console.log(a)// 结果：100
}
fn(100, 200, 300);// 200，300被丢弃

// 可以任意位置具有默认值
function fn (a, b=20, c, d=40) {
console.log(a, b, c, d)// 100 200 300 40
}
fn(100, 200, 300);// 一定按照先后顺序依次传参

// 通过...语法接收多个值
function fn (a, ...b) {
console.log(a, b)// 100 
}
fn(100, 200, 300)
// ...变量必须出现在参数列表最后</pre>
</div>
View Code</div>
# 函数返回值（函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。）
<div class="cnblogs_code"><img id="code_img_closed_7fa01a88-4297-4306-8385-c9b225a04e2c" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_7fa01a88-4297-4306-8385-c9b225a04e2c" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_7fa01a88-4297-4306-8385-c9b225a04e2c" class="cnblogs_code_hide">
<pre>function fn () {
return 返回值;
}
// 1.可以空return操作，用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值</pre>
</div>
View Code</div>
#作用域（首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！）
<h3 style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">函数中的arguments参数</h3>
<div class="cnblogs_code">
<pre>function add(a,b){
console.log(a+b);
console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907212316696-71302940.png" alt="">
 
 ES6中允许使用“箭头”（=>）定义函数。
<div class="cnblogs_code"><img id="code_img_closed_3361f107-bcfc-42c1-add9-24b91e5c0e14" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_3361f107-bcfc-42c1-add9-24b91e5c0e14" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_3361f107-bcfc-42c1-add9-24b91e5c0e14" class="cnblogs_code_hide">
<pre>var f = v => v;
// 等同于
var f = function(v){
return v;
}

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2;//这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}</pre>
</div>
View Code</div>
 
 
<h3 style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">JSON对象（序列化和反序列化）</h3>
<div class="cnblogs_code">
<pre>var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);</pre>
</div>
<h3 style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">RegExp对象（正则）</h3>
<div class="cnblogs_code"><img id="code_img_closed_d76fca45-df03-4f70-b71c-e1b4eb5918ac" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_d76fca45-df03-4f70-b71c-e1b4eb5918ac" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_d76fca45-df03-4f70-b71c-e1b4eb5918ac" class="cnblogs_code_hide">
<pre>// 定义正则表达式两种方式
var reg1 = new RegExp("^{5,11}");
var reg2 = /^{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();</pre>
</div>
View Code</div>
<img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907212018659-1549900436.png" alt="">
 
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907212031889-1609005480.png" alt="">
 
 <img src="https://img2018.cnblogs.com/blog/1659201/201909/1659201-20190907212046942-894438162.png" alt="">
 
 
<img id="uploading_image_38798" src="https://common.cnblogs.com/images/loading.gif" alt="">
  
来源：https://www.cnblogs.com/tfzz/p/11482399.html

頁: [1]

琼殿技术论坛's Archiver

Python JavaScript