03-初识JavaScript

芊慕纹绣减脂瘦身刘咏 發表於 2019-5-12 19:51:00

<h3>一. JavaScript简介（了解）</h3>
<h4>　　1. JavaScript的历史背景介绍</h4>
<p>　　　　布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。</p>
<p>　　　　一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。</p>
<p>　　　　同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512105356175-1602288461.png" alt=""></p>
<h4>　　2. JavaScript和ECMAScript的关系</h4>
<p>　　　　ECMAScript是一种由ECMA国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。</p>
<p>　　　　JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。</p>
<p>　　　　简单来说，<strong>ECMAScript不是一门语言，而是一个标准</strong>。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也就轻而易举了。</p>
<p>　　　　ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不能那么快去追上这个标准。</p>
<h4> 　　3. JavaScript入门易学性</h4>
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>JavaScript对初学者比较友好。</p>
</li>
<li>
<p>JavaScript是有界面效果的（比如C语言只有白底黑字）。</p>
</li>
<li>JavaScript不用关心其他的一些事情（比如内存的释放、指针等），更关心自己的业务。</li>
<li>
<p>JavaScript是<strong>弱变量类型</strong>的语言，变量只需要用var来声明。而Java中变量的声明，要根据变量的类型来定义。</p>
</li>
</ul>
</li>
</ul>
<p>　　　　比如Java中需要定义如下变量：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">int</span><span style="color: rgba(0, 0, 0, 1)"> a;
</span><span style="color: rgba(0, 0, 255, 1)">float</span><span style="color: rgba(0, 0, 0, 1)"> a;
String a;
...</span></pre>
</div>
<p>　　　　而JavaScript中，只用定义一个变量：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a;</pre>
</div>
<h4>　　4. JavaScript是前台语言</h4>
<p>　　　　JavaScript是前台语言，而不是后台语言。</p>
<p>　　　　JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称为“<strong>前台语言</strong>”。JavaScript就是一个简单的制作页面效果的语言，就是服务于页面的交互效果、美化、绚丽、不能操作数据库。</p>
<p><strong>　　　　后台语言</strong>是运行在服务器上的，比如python、PHP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。Node.js除外。</p>
<h4>　　5. JavaScript的组成</h4>
<p>　　　　JavaScript基础分为三个部分：</p>
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。</p>
</li>
<li>
<p><strong>DOM</strong>：操作<strong>网页上的元素</strong>的API。比如让盒子移动、变色、轮播图等。</p>
</li>
<li>
<p><strong>BOM</strong>：操作<strong>浏览器部分功能</strong>的API。比如让浏览器自动滚动。</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>　　　　PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。</p>
<h4>　　6. JavaScript的特点</h4>
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。</p>
</li>
<li>
<p>解释执行（<strong>解释语言</strong>）：事先不编译、逐行执行、无需进行严格的变量声明。</p>
</li>
<li>
<p>基于对象：内置大量现成对象，编写少量程序可以完成目标</p>
</li>
</ul>
</li>
</ul>
<h3> 二. 初识JavaScript代码</h3>
<p>　　在页面中，我们可以在body标签中放入<script type="text/javascript"></script>标签对儿。</p>
<div class="cnblogs_code">
<pre><script type="text/javascript">

</script></pre>
</div>
<h4>　　1. 语法规则</h4>
<p>　　　　学习程序，是有规律可循的，就是程序是有相同的部分，这些部分就是一种规定，不能更改，我们称之为：语法。</p>
<ul>
<li style="list-style-type: none">
<ul>
<li>JavaScript对换行、缩进、空格不敏感。</li>
</ul>
</li>
</ul>
<p>      　　　　　备注：每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。</p>
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>所有的符号，都是英语的。比如<strong>括号</strong>、引号、分号。</p>
</li>
<li>
<p>JavaScript的注释：</p>
</li>
</ul>
</li>
</ul>
<p>　　　　　　单行注释：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 单行注释</span></pre>
</div>
<p>　　　　　　多行注释：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
我是多行注释
我是多行注释
我是多行注释
</span><span style="color: rgba(0, 128, 0, 1)">*/</span></pre>
</div>
<p>　　　　备注：pycharm中，单行注释的快捷键是Ctrl+/，多行注释的快捷键是Ctrl+Shift+/。</p>
<h4>　　2. JavaScript在网页中输出信息的写法</h4>
<h5>　　　　a. 弹出警告框：alert语句</h5>
<p>　　　　语法：alert("");</p>
<div class="cnblogs_code">
<pre><script type="text/javascript"><span style="color: rgba(0, 0, 0, 1)">
alert(</span>"小姐姐，你好啊！"<span style="color: rgba(0, 0, 0, 1)">)
</span></script></pre>
</div>
<p><strong>　　　　alert</strong>（英文翻译为“警报”）的用途：<strong>弹出“警告框”</strong>。</p>
<h5>　　　　b. 控制台输出：console.log("")</h5>
<p>　　　　console.log("") 表示在控制台中输出。console表示“控制台”，log表示“输出”。</p>
<p>　　　　控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。</p>
<h4>　　3. 用户输入语句</h4>
<p>　　　　prompt() 就是专门用来弹出能够让用户输入的对话框。</p>
<p>　　　　代码如下：</p>
<div class="cnblogs_code">
<pre><script type="text/javascript">
<span style="color: rgba(0, 0, 255, 1)">var</span> a = prompt("今日天气如何？"<span style="color: rgba(0, 0, 0, 1)">);
console.log(a);
</span></script></pre>
</div>
<p>　　　　上方代码中，用户输入的内容，将被传递到变量 a 里面。</p>
<p>　　　　效果如下：</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512130050194-1218941215.png" alt=""></p>
<p>　　　　f12打开控制台查看结果。</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512130433682-1352499205.png" alt=""></p>
<p><strong>　　　　</strong>prompt()语句中，用户不管输入什么内容，都是<strong>字符串。</strong></p>
<p><strong>　　　　</strong>alert和prompt的区别：</p>
<div class="cnblogs_code">
<pre>alert("从前有座山");             <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接使用，不需要变量</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a = prompt("请输入一个数字"); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 必须用一个变量，来接收用户输入的值</span></pre>
</div>
<h4>　　4. 直接量：数字和字符串</h4>
<p>　　　　“直接量”即<strong>常量</strong>，也称为“字面量”。看见什么，它就是什么。</p>
<p>　　　　简单的直接量有2种：数字、字符串。</p>
<p>　　　　（1）、数值的直接量的表达非常简单，写上去就行了，不需要任何的符号。例如：</p>
<div class="cnblogs_code">
<pre>alert(886);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">886是数字，所以不需要加引号。</span></pre>
</div>
<p>　　　　（2）、字符串也很简单，但一定要加上引号。可以是单词、句子等。例如：</p>
<div class="cnblogs_code">
<pre>alert("Hello"<span style="color: rgba(0, 0, 0, 1)">);
alert(</span>"Hello world");</pre>
</div>
<h4>　　5. 变量的定义和赋值</h4>
<p>　　　　var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，</p>
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>定义变量：var就是一个<strong>关键字</strong>，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。</p>
</li>
<li>
<p>变量的赋值：等号表示<strong>赋值</strong>，将等号右边的值，赋给左边的变量。</p>
</li>
<li>
<p>变量名：我们可以给变量任意的取名字。</p>
</li>
</ul>
</li>
</ul>
<p> 　　　　PS：<strong>在JavaScript中，永远都是用var来定义变量</strong>，这和C、Java等语言不同(有兴趣的同学可以看一下es6)</p>
<p>　　　　变量要先定义，才能使用。比如，我们不设置变量，直接输出：</p>
<div class="cnblogs_code">
<pre><script type="text/javascript"><span style="color: rgba(0, 0, 0, 1)">
console.log(a);
</span></script></pre>
</div>
<p>　　　　控制台将会报错：</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512131846793-377095345.png" alt=""></p>
<p>　　　　正确写法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 定义</span>
a = 100;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">赋值</span>
console.log(a);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出100</span></pre>
</div>
<p>　　　　有经验的程序员，会把定义和赋值写在一起：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 100; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义，并且赋值100</span>
console.log(a);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出100</span></pre>
</div>
<h4>　　6. 变量的命名规范</h4>
<p>　　　　变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。</p>
<p>　　　　下列的单词，叫做保留字，就是说不允许当做变量名（不用记）：</p>
<div class="cnblogs_code">
<pre>abstract、<span style="color: rgba(0, 0, 255, 1)">boolean</span>、<span style="color: rgba(0, 0, 255, 1)">byte</span>、<span style="color: rgba(0, 0, 255, 1)">char</span>、class、const、<span style="color: rgba(0, 0, 255, 1)">debugger</span>、<span style="color: rgba(0, 0, 255, 1)">double</span>、enum、export、extends、final、<span style="color: rgba(0, 0, 255, 1)">float</span><span style="color: rgba(0, 0, 0, 1)">、goto
implements、import、</span><span style="color: rgba(0, 0, 255, 1)">int</span>、interface、<span style="color: rgba(0, 0, 255, 1)">long</span>、native、package、private、protected、public、<span style="color: rgba(0, 0, 255, 1)">short</span>、static、super、<br>synchronized、throws、transient、volatile</pre>
</div>
<p>　　　　大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> A = 250; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">变量1</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a = 888; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">变量2</span></pre>
</div>
<h3>三. 数据类型</h3>
<p>　　数据类型包括：基本数据类型和引用数据类型</p>
<p>　　基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。</p>
<p>　　当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值</p>
<h4> 　　1. 基本数据类型</h4>
<p>　　　　在讲数据类型之前，我们要学习一个函数 <strong>typeof </strong>表示“<strong>获取变量的类型</strong>”，语法为：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">typeof</span> 变量名称</pre>
</div>
<p>　　　　<strong>3.1.1. number数值类型</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 123<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">typeof 检查当前变量是什么数据类型</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span> a)</pre>
</div>
<p><strong>　　　</strong>　在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。</p>
<p>　　　　<strong>3.1.2. string字符串类型</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = "abcde"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> b = "路飞"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> c = "123123"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> d = "哈哈哈哈哈"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> e = ""; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">空字符串</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span><span style="color: rgba(0, 0, 0, 1)"> a);
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span><span style="color: rgba(0, 0, 0, 1)"> b);
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span><span style="color: rgba(0, 0, 0, 1)"> c);
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span><span style="color: rgba(0, 0, 0, 1)"> d);
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span> e);</pre>
</div>
<p>　　　　<strong>3.1.3. boolean布尔类型</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> b1 = <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span> b1)</pre>
</div>
<p>　　　　<strong>3.1.4. null空对象类型</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> c1 = <span style="color: rgba(0, 0, 255, 1)">null</span>;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">空对象object</span>
console.log(c1)</pre>
</div>
<p>　　　　<strong>3.1.5. undefined未定义类型</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> d1;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">表示变量未定义</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span> d1)</pre>
</div>
<h4>　　2. 引用数据类型</h4>
<ul>
<li style="list-style-type: none">
<ul>
<li>Function</li>
<li>Object</li>
<li>Array</li>
<li>String</li>
<li>Date</li>
</ul>
</li>
</ul>
<p>　　　　后面课程会讲解。</p>
<h3>四. 运算符</h3>
<p>　　js中的运算符跟python中的运算符有点类似，但也有不同。所谓运算,在数学上，是一种行为，通过已知量的组合，获得新的量。</p>
<h4>　　1. 赋值运算符</h4>
<p>　　　　以var x = 12,y=5来演示示例：</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512145828164-898754959.png" alt="" width="845" height="307"></p>
<h4>　　2. 算术运算符</h4>
<p>　　　　var a = 5,b=2</p>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512151023851-839462446.png" alt="" width="821" height="426"></p>
<h4>　　3. 比较运算符</h4>
<p>　　　　var x = 5;</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190513170852885-1595545711.png" alt=""></p>
<p> </p>
<h4>　　4. 特殊情况</h4>
<p>　　　　字符串拼接+字符串运算特殊情况。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> firstName = '小'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> lastName = '姐姐'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> name = '伊拉克'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> am = '美军'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 字符串拼接</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> tempStr = "2003年3月20日," + name + "战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，" + am + "又一次取得的大规模压倒性军事胜利。"<span style="color: rgba(0, 0, 0, 1)">
console.log(tempStr);

</span><span style="color: rgba(0, 0, 255, 1)">var</span> fullName = firstName + " " +<span style="color: rgba(0, 0, 0, 1)"> lastName;
console.log(fullName);</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 不能对字符串进行+运算只能拼接</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a1 = '1'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a2 = '2'<span style="color: rgba(0, 0, 0, 1)">;
console.log(a1</span>+a2) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">12字符串类型</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> b1 = 'one'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> b2= 'two'<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> NaN ==== not a number 是number类型</span>
console.log(b1*b2)<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> NaN</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span>(b1*b2))<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> number</span></pre>
</div>
<h3>五. 数据类型转换</h3>
<h4>　　1. 将数值类型转换为字符串类型</h4>
<p>　　　　number -----> string</p>
<h5>　　　　a. 隐式转换</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> n1 = 123<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> n2 = '456'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> n3 = n1+<span style="color: rgba(0, 0, 0, 1)">n2;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 隐式转换</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span> n3);</pre>
</div>
<h5>　　　　b. 强制类型转换</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> n1 = 123<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 强制类型转换String(),toString()</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> str1 =<span style="color: rgba(0, 0, 0, 1)"> String(n1);
console.log(</span><span style="color: rgba(0, 0, 255, 1)">typeof</span><span style="color: rgba(0, 0, 0, 1)"> str1);

</span><span style="color: rgba(0, 0, 255, 1)">var</span> num = 234<span style="color: rgba(0, 0, 0, 1)">;
console.log(num.toString())</span></pre>
</div>
<h4>　　2. 将字符串类型转换成数值类型</h4>
<p>　　　　string -----> number</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> strNum = "123.45dfsdfsd"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num =<span style="color: rgba(0, 0, 0, 1)"> Number(strNum);
console.log(num);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> NaN</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span> num);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> number</span>

<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> parseInt()可以解析一个字符串并且返回一个整数</span>
console.log(parseInt(strNum);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 123</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span>(parseInt(strNum)));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> number</span>

<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> parseFloat()可以解析一个字符串并且返回一个浮点数</span>
console.log(parseFloat(strNum);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 123.45</span>
console.log(<span style="color: rgba(0, 0, 255, 1)">typeof</span>(parseFloat(strNum)));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> number</span></pre>
</div>
<h4>　　3. 任何数据类型都可以转为布尔类型</h4>
<p> 　　　　* -----> boolean</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> num1 = 123<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num2 = 0<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num3 = -123<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 0, 255, 1)">var</span> a1 =<span style="color: rgba(0, 0, 0, 1)"> NaN;
</span><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> a2;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a3 = <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 数字非零即为真。</span>
console.log(Boolean(num1);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> true</span>
console.log(Boolean(num2);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> false</span>
console.log(Boolean(num3);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">true</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(Boolean(a1);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> false</span>
console.log(Boolean(a2);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> false</span>
console.log(Boolean(a3);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> false</span></pre>
</div>
<h3>六. 流程控制</h3>
<h4>　　1. if控制语句</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> age = 18<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 0, 255, 1)">if</span> (age >= 18<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"恭喜你，可以去会所了！"<span style="color: rgba(0, 0, 0, 1)">);
}
console.log(</span>111);</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> age = 18<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 0, 255, 1)">if</span> (age >= 18<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"恭喜你，可以去会所了！"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"好好上学吧！"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> age = 18<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 0, 255, 1)">if</span> (age >= 18<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"恭喜你，可以去会所了！"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span>(age<6<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"好好玩耍吧！"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"好好上学吧！"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<p>　　　　语法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span> (<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">满足条件执行</span>
}<span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">满足条件执行          </span>
}<span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">满足条件执行    </span>
}<span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">满足条件执行</span>
}</pre>
</div>
<h4>　　2. 逻辑运算符（与或非）</h4>
<div class="cnblogs_code">
<pre>与：&&<span style="color: rgba(0, 0, 0, 1)">
或：</span>||<span style="color: rgba(0, 0, 0, 1)">
非：</span>!</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> sex = "女"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> age = 18<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> hobby = "吹管乐"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> flag = <span style="color: rgba(0, 0, 255, 1)">false</span>; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否婚配</span>

<span style="color: rgba(0, 0, 255, 1)">if</span> (age == 18 && sex == "女"<span style="color: rgba(0, 0, 0, 1)">) {
console.log(</span>"妙龄少女"<span style="color: rgba(0, 0, 0, 1)">);
}
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (age == 18 || hobby == "吹管乐"<span style="color: rgba(0, 0, 0, 1)">) {
console.log(</span>"凑合吧"<span style="color: rgba(0, 0, 0, 1)">);
}
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">flag){
console.log(</span>"这是机会。"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h4>　　3. switch语句</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> age = 18<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">switch</span><span style="color: rgba(0, 0, 0, 1)"> (age) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">case表示一个条件满足这个条件就会走进来遇到break跳出。如果某个条件中不写 break，那么直到该程序遇到下一个break停止</span>
<span style="color: rgba(0, 0, 255, 1)">case</span> 18<span style="color: rgba(0, 0, 0, 1)">:
   console.log(</span>"可以去会所了。"<span style="color: rgba(0, 0, 0, 1)">);
   </span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">case</span> 60<span style="color: rgba(0, 0, 0, 1)">:
   console.log(</span>"您老还是回家吧！"<span style="color: rgba(0, 0, 0, 1)">);
   </span><span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">:
   console.log(</span>"好好学习。"<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<h4>　　4. while循环</h4>
<p>　　　　循环三步走：</p>
<p>　　　　　　1.初始化循环变量</p>
<p>　　　　　　2.判断循环条件</p>
<p>　　　　　　3.更新循环变量</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> i = 1; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化循环变量</span>

<span style="color: rgba(0, 0, 255, 1)">while</span>(i<=9){ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">判断循环条件</span>
<span style="color: rgba(0, 0, 0, 1)"> console.log(i);
i</span>++; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">更新循环条件等同于i=i+1</span>
}</pre>
</div>
<p>　　　　小练习：将1-100所有是2的倍数在控制台中打印。使用while循环实现。</p>
<h4>　　5. do___while</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不管有没有满足while中的条件do里面的代码都会走一次</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> i = 3;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化循环变量</span>
<span style="color: rgba(0, 0, 255, 1)">do</span><span style="color: rgba(0, 0, 0, 1)">{

console.log(i)
i</span>++;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">更新循环条件</span>
<span style="color: rgba(0, 0, 0, 1)">
}</span><span style="color: rgba(0, 0, 255, 1)">while</span> (i<10) <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">判断循环条件</span></pre>
</div>
<h4>　　6. for循环</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1;i<=10;i++<span style="color: rgba(0, 0, 0, 1)">){
console.log(i)
}</span></pre>
</div>
<p>　　　　课堂练习：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 打印1--100的偶数。</span>
<span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1;i<=100;i++<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(i%2==0<span style="color: rgba(0, 0, 0, 1)">){
   </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是偶数</span>
<span style="color: rgba(0, 0, 0, 1)">    console.log(i)
}
}</span></pre>
</div>
<p>　　　　双重for循环</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1; i <= 5; i++) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 行数</span>
   <span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> j = 0; j < 6; j++) {<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 每行的列数</span>
         document.write('*'<span style="color: rgba(0, 0, 0, 1)">)
   }
   document.write(</span>'<br>'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<p>　　　　效果：</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512173349405-1039052435.png" alt=""></p>
<p>　　　　小作业：</p>
<p>　　　　　　1.在浏览器中输出直角三角形</p>
<div class="cnblogs_code">
<pre>*
**
***
****
*****</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_19d3d58a-b586-436c-b146-f0bc0c998f94" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_19d3d58a-b586-436c-b146-f0bc0c998f94" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_19d3d58a-b586-436c-b146-f0bc0c998f94" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1; i <= 5; i++) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 行数</span>
<span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> j = 0; j < i; j++) {<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 每行的列数</span>
   document.write('*'<span style="color: rgba(0, 0, 0, 1)">)
}
document.write(</span>'<br>'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<span class="cnblogs_code_collapse">参考代码</span></div>
<p>　　　　　　2.在浏览器中输出等腰三角形</p>
<div class="cnblogs_code">
<pre> *
***
*****
*******
*********</pre>
</div>
<div class="cnblogs_code"><img id="code_img_closed_300e1cd1-6ef1-415b-925b-6a8bbaef2966" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_300e1cd1-6ef1-415b-925b-6a8bbaef2966" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_300e1cd1-6ef1-415b-925b-6a8bbaef2966" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 1; i <= 5; i++) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 行数</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">控制我们的空格数</span>
<span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> s = i; s < 5; s++<span style="color: rgba(0, 0, 0, 1)">) {
   document.write(</span>'&nbsp;'<span style="color: rgba(0, 0, 0, 1)">)
}
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> j = 1; j <= 2 * i - 1; j++<span style="color: rgba(0, 0, 0, 1)">) {
   document.write(</span>'*'<span style="color: rgba(0, 0, 0, 1)">)
}
document.write(</span>'<br>'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<span class="cnblogs_code_collapse">参考代码</span></div>
<h3>七. 常用内置对象</h3>
<p>　　所谓内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法</p>
<h4>　　1. 数组Array</h4>
<h5>　　　　a. 数组的创建方式</h5>
<ul>
<li style="list-style-type: none">
<ul>
<li>字面量方式创建（推荐大家使用这种方式，简单粗暴）</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ["alex", "egon", "yuan"];</pre>
</div>
<ul>
<li style="list-style-type: none">
<ul>
<li>使用构造函数（后面会讲）的方式创建使用new关键词对构造函数进行创建对象</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = <span style="color: rgba(0, 0, 255, 1)">new</span> Array();</pre>
</div>
<h4>　　2. 数组的赋值</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr =<span style="color: rgba(0, 0, 0, 1)"> [];
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">通过下标进行一一赋值</span>
arr = 123<span style="color: rgba(0, 0, 0, 1)">;
arr[</span>1] = '哈哈哈'<span style="color: rgba(0, 0, 0, 1)">;
arr[</span>2] = '嘿嘿嘿'</pre>
</div>
<h4>　　3. 数组的常用方法</h4>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512182308686-2088344543.png" alt="" width="775" height="474"></p>
<h5>　　　　3.1 数组的合并 concat()</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> north = ['北京','山东','天津'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> south = ['东莞','深圳','上海'<span style="color: rgba(0, 0, 0, 1)">];

</span><span style="color: rgba(0, 0, 255, 1)">var</span> newCity =<span style="color: rgba(0, 0, 0, 1)"> north.concat(south);
console.log(newCity)</span></pre>
</div>
<h5>　　　　3.2 join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> score = ;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str = score.join('|'<span style="color: rgba(0, 0, 0, 1)">);
console.log(str);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">98|78|76|100|0</span></pre>
</div>
<h5>　　　　3.3 将数组转换成字符串 toString()</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> score = ;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">toString() 直接转换为字符串每个元素之间使用逗号隔开</span>

<span style="color: rgba(0, 0, 255, 1)">var</span> str =<span style="color: rgba(0, 0, 0, 1)"> score.toString();
console.log(str);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">98,78,76,100,0</span></pre>
</div>
<h5>　　　　3.4 slice(start,end); 返回数组的一段，左闭右开</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ['张三','李四','王五','赵六'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> newArr= arr.slice(1,3<span style="color: rgba(0, 0, 0, 1)">);
console.log(newArr);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">["李四", "王五"]</span></pre>
</div>
<h5>　　　　3.5 pop 删除数组的最后一个元素并返回删除的元素</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ['张三', '李四', '王五', '赵六'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> item =<span style="color: rgba(0, 0, 0, 1)"> arr.pop();
console.log(arr);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">["张三", "李四"，"王五"]</span>
console.log(item);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">赵六</span></pre>
</div>
<h5>　　　　3.6 push() 向数组末尾添加一个元素或多个元素，并返回新的长度</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ['张三', '李四', '王五', '赵六'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> newLength = arr.push('铁蛋');<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可以添加多个，以逗号隔开</span>
console.log(newLength);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">5</span>
console.log(arr);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">["张三", "李四", "王五", "赵六", "铁蛋"]</span></pre>
</div>
<h5>　　　　3.7 reverse() 翻转数组</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> arr = ['张三', '李四', '王五', '赵六'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">反转数组</span>
<span style="color: rgba(0, 0, 0, 1)">arr.reverse();
console.log(arr);</span></pre>
</div>
<h5>　　　　3.8 sort对数组排序</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> names = ["alex", "yuan", "wusir", "egon"<span style="color: rgba(0, 0, 0, 1)">];
names.sort();
console.log(names);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["alex", "egon", "wusir", "yuan"]</span></pre>
</div>
<h5>　　　　3.9 判断是否为数组：isArray()</h5>
<div class="cnblogs_code">
<pre>布尔类型值 = Array.isArray(被检测的值);</pre>
</div>
<h5>　　　　3.10 shift() 删除数组第一个元素并返回该元素</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> names = ["alex", "yuan", "wusir", "egon"<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a =<span style="color: rgba(0, 0, 0, 1)"> names.shift();
console.log(a);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "alex"</span>
console.log(names);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["yuan", "wusir", "egon"]</span></pre>
</div>
<h5>　　　　3.11 unshift() 向数组的开头添加一个或更多元素，并返回新的长度</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> names = ["alex", "yuan", "wusir", "egon"<span style="color: rgba(0, 0, 0, 1)">];

</span><span style="color: rgba(0, 0, 255, 1)">var</span> newLength = names.unshift('铁蛋');<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可以添加多个，以逗号隔开</span>
console.log(newLength);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">5</span>
console.log(names); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">["铁蛋", "alex", "yuan", "wusir", "egon"]</span></pre>
</div>
<h4>　　4. 字段串String</h4>
<p>　　　　字符串方法</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512185211268-143867956.png" alt="" width="875" height="560"></p>
<h5>　　　　4.1 chartAt() 返回指定索引的位置的字符</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = 'alex'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> charset = str.charAt(2<span style="color: rgba(0, 0, 0, 1)">);
console.log(charset);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">e</span></pre>
</div>
<h5>　　　　4.2 concat 返回字符串值，表示两个或多个字符串的拼接</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str1 = 'al'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str2= 'ex'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str1.concat(str2,str2));</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">alexex</span></pre>
</div>
<h5>　　　　4.3 replace(a,b) 将字符串a替换成字符串b</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = '1234567755'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> newStr = a.replace("4567","****"<span style="color: rgba(0, 0, 0, 1)">);
console.log(newStr);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">123****755</span></pre>
</div>
<h5>　　　　4.4 indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = 'alex'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.indexOf(</span>'e'));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2</span>
console.log(str.indexOf('p'));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">-1</span></pre>
</div>
<h5>　　　　4.5 slice(start，end) 提取一个字符串的一部分，并返回一新的字符串。左闭右开分割字符串</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = 'egon'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.slice(</span>1,2)); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">g</span></pre>
</div>
<h5>　　　　4.6 split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，返回新数组（数组里的元素个数就是定义的个数）。</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span>str ='我的天呢,a是嘛,你在说什么呢?a哈哈哈'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.split(</span>'a'));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]</span>
console.log(str.split('a', 2));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> ["我的天呢,", "是嘛,你在说什么呢?"]</span></pre>
</div>
<h5>　　　　4.7 substr(start,length) 返回一个字符串中从指定位置开始到指定字符数的字符。</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span>str ='我的天呢,a是嘛,你在说什么呢?a哈哈哈'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.substr(</span>0,4));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">我的天呢</span></pre>
</div>
<h5>　　　　4.8 toLowerCase()转小写</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = 'XIAOMI'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.toLowerCase()); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">xiaomi</span></pre>
</div>
<h5>　　　　4.9 toUpperCase()转大写</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = 'xiaomi'<span style="color: rgba(0, 0, 0, 1)">;
console.log(str.toUpperCase());</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> XIAOMI</span></pre>
</div>
<h5>　　　　4.10 trim() 去除字符串两边的空白</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> name = " alex "<span style="color: rgba(0, 0, 0, 1)">;
console.log(name);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">" alex "</span>
console.log(name.trim()); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "alex"</span></pre>
</div>
<p>　　　　特别：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 四舍五入</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> num = 132.62522<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> newNum1 =<span style="color: rgba(0, 0, 0, 1)"> num.toFixed();
console.log(newNum1); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">133</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> newNum2 = num.toFixed(2<span style="color: rgba(0, 0, 0, 1)">);
console.log(newNum2); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">132.63</span></pre>
</div>
<h4>　　5. Date日期对象</h4>
<p>　　　　创建日期对象只有构造函数一种方式,使用new关键字</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建了一个date对象</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> myDate = <span style="color: rgba(0, 0, 255, 1)">new</span> Date();</pre>
</div>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512192502050-1762693943.png" alt="" width="887" height="415"></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建日期对象</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> myDate=<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();

console.log(myDate.getDate());
console.log(myDate.toLocaleString());</span></pre>
</div>
<h4>　　6. Math内置对象</h4>
<p>　　　　常用内置对象</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512193956198-2116217858.png" alt=""></p>
<h5>　　　　6.1 Math.ceil() 向上取整，'天花板函数'</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = 1.234<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">天花板函数表示大于等于 x，并且与它最接近的整数是2</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> a =<span style="color: rgba(0, 0, 0, 1)"> Math.ceil(x);
console.log(a);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2</span></pre>
</div>
<h5>　　　　6.2 Math.floor 向下取整，'地板函数'</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = 1.234<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 小于等于 x，并且与它最接近的整数 1</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> b =<span style="color: rgba(0, 0, 0, 1)"> Math.floor(x);
console.log(b);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">1</span></pre>
</div>
<h5>　　　　6.3 求两个数的最大值和最小值</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">求两个数的最大值最小值</span>
console.log(Math.max(2,5));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">5</span>
console.log(Math.min(2,5));<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2</span></pre>
</div>
<h5>　　　　6.4 随机数 Math.random()</h5>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> ran =<span style="color: rgba(0, 0, 0, 1)"> Math.random();
console.log(ran);[</span>0,1]之间的随机小数</pre>
</div>
<p>　　　　如果让你取100-200之间的随机数，怎么做？</p>
<p>　　　　背过公式：min - max之间的随机数： min+Math.random()*(max-min)</p>
<p>　　以上是咱们介绍的JS常用对象的方法，如果想参考更多内容，请参考链接：http://www.runoob.com/jsref/jsref-tutorial.html</p>
<h3> 八. 函数</h3>
<p>　　函数：就是将一些语句进行<strong>封装</strong>，然后通过<strong>调用</strong>的形式，执行这些语句。</p>
<p><strong>　　函数的作用：</strong></p>
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。</p>
</li>
<li>
<p>简化编程，让编程模块化。</p>
</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>console.log("hello world"<span style="color: rgba(0, 0, 0, 1)">);
sayHello(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用函数</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">定义函数：</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sayHello(){
console.log(</span>"hello"<span style="color: rgba(0, 0, 0, 1)">);
console.log(</span>"hello world"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h4>　　1. 第一步定义函数</h4>
<p>　　　　函数定义的语法：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> 函数名字(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数体内容</span>
}</pre>
</div>
<p>　　　　解释如下：</p>
<ul>
<li style="list-style-type: none">
<ul>
<li style="list-style-type: none">
<ul>
<li>
<p>function：是一个关键字。中文是“函数”、“功能”。</p>
</li>
<li>
<p>函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。</p>
</li>
<li>
<p>参数：后面有一对小括号，里面是放参数用的。</p>
</li>
<li>
<p>大括号里面，是这个函数的语句。</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>　　2. 函数的调用</h4>
<p>　　　　函数调用的语法：</p>
<div class="cnblogs_code">
<pre>函数名字();</pre>
</div>
<h4>　　3. 函数的参数</h4>
<p>　　　　函数的参数包括形参和实参</p>
<p>　　　　注意：实际参数和形式参数的个数，要相同。</p>
<p>　　　　例子：</p>
<div class="cnblogs_code">
<pre>sum(3, 4<span style="color: rgba(0, 0, 0, 1)">);
sum(</span>"3", 4<span style="color: rgba(0, 0, 0, 1)">);
sum(</span>"Hello", "World"<span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数：求和</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sum(a, b) {
console.log(a, b);
console.log(arguments);
console.log(a </span>+<span style="color: rgba(0, 0, 0, 1)"> b);
}</span></pre>
</div>
<h4>　　4. 函数的返回值</h4>
<p>　　　　例子：</p>
<div class="cnblogs_code">
<pre>console.log(sum(3, 4<span style="color: rgba(0, 0, 0, 1)">));

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数：求和</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sum(a, b) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> a +<span style="color: rgba(0, 0, 0, 1)"> b;
}</span></pre>
</div>
<h3>九. 伪数组 arguments</h3>
<p>　　arguments代表的是实参。有个讲究的地方是：arguments<strong>只在函数中使用</strong>。</p>
<p>　　（1）返回函数<strong>实参</strong>的个数：arguments.length</p>
<p>　　例子：</p>
<div class="cnblogs_code">
<pre>fn(2,4<span style="color: rgba(0, 0, 0, 1)">);
fn(</span>2,4,6<span style="color: rgba(0, 0, 0, 1)">);
fn(</span>2,4,6,8<span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> fn(a,b,c) {
console.log(arguments);
console.log(fn.length);       </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取形参的个数</span>
console.log(arguments.length);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取实参的个数</span>
<span style="color: rgba(0, 0, 0, 1)">
console.log(</span>"----------------"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<p>　　结果：</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1115972/201905/1115972-20190512213423123-1122958047.png" alt=""></p>
<p>　　（2）之所以说arguments是伪数组，是因为：<strong>arguments可以修改元素，但不能改变数组的长短</strong>。举例：</p>
<div class="cnblogs_code">
<pre>fn(2,4<span style="color: rgba(0, 0, 0, 1)">);
fn(</span>2,4,6<span style="color: rgba(0, 0, 0, 1)">);
fn(</span>2,4,6,8<span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> fn(a,b) {
arguments[</span>0] = 99;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将实参的第一个数改为99</span>
arguments.push(8);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">此方法不通过，因为无法增加元素,会报错</span>
}</pre>
</div>
<p>　　清空数组的几种方式：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> array = ;

array.splice(</span>0);    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">方式1：删除数组中所有项目</span>
array.length = 0; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">方式2：length属性可以赋值，在其它语言中length是只读</span>
array = [];       <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">方式3：推荐</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/Michael--chen/p/10853406.html

頁: [1]

琼殿技术论坛's Archiver

03-初识JavaScript