JavaScript教程
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>js简介<ul><li>js基础知识</li><li>注释</li></ul></li><li>变量与常量</li><li>数据类型<ul><li>数值number</li><li>字符串string<ul><li>字符串的诸多方法</li><li>字符串格式化输出</li></ul></li><li>布尔值boolean<ul><li>null和undefined</li></ul></li><li>对象object</li></ul></li><li>自定义对象(字典)</li><li>日期对象</li><li>JSON序列化</li><li>数组</li><li>运算符<ul><li>算数运算符</li><li>比较运算符</li><li>逻辑运算符</li><li>赋值运算符</li></ul></li><li>流程控制<ul><li>switch</li></ul></li><li>for循环</li><li>函数<ul><li>箭头函数</li><li>名称空间</li></ul></li><li>正则表达式</li><li>格式化输出时间</li></ul></div><p></p><h2 id="js简介">js简介</h2>
<p>虽然名字叫JavaScript但是与Java一毛钱关系都没有</p>
<p>JavaScript 是脚本语言 是一种轻量级的编程语言。</p>
<h3 id="js基础知识">js基础知识</h3>
<pre><code class="language-css">引入js文件方式
body内最底部通过script标签src属性引入外部js资源(最常用)
<script src="myscript.js"></script>
注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行
</code></pre>
<h3 id="注释">注释</h3>
<pre><code class="language-js">// 单行注释
/*
多行注释
多行注释
*/
</code></pre>
<p>JavaScript中的语句要以分号；为结束符</p>
<h2 id="变量与常量">变量与常量</h2>
<p>声明变量使用 <mark>var 变量名</mark>; 的格式来进行声明</p>
<p>或者使用 <mark>let 变量名</mark> 来声明</p>
<pre><code class="language-js">var name = "moon";
var age = 18;
let name = 'zhangwuji'
let age = 22
注意：
变量名是区分大小写的。
推荐使用驼峰式命名规则
</code></pre>
<p><mark>const声明常量</mark></p>
<pre><code class="language-js">const PI = 3.1415;
声明常量后不可以直接更改
PI = 3
// TypeError: "PI" is read-only
</code></pre>
<h2 id="数据类型">数据类型</h2>
<h3 id="数值number">数值number</h3>
<p>JavaScript不区分整型和浮点型，就只有一种数字类型。</p>
<pre><code class="language-js">var a = 11
var b =12.22
console.log(typeof(a)) //number
console.log(typeof(b)) //number
</code></pre>
<h3 id="字符串string">字符串string</h3>
<pre><code class="language-js">var a = "Hello"
var b = "world;
var c = a + b;
console.log(c);// 得到Helloworld
</code></pre>
<p>拼接字符串一般直接可以使用使用“+”</p>
<h4 id="字符串的诸多方法">字符串的诸多方法</h4>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>.length</td>
<td>返回字符串长度</td>
</tr>
<tr>
<td>.trim()</td>
<td>移除左右两边空格</td>
</tr>
<tr>
<td>.trimLeft()</td>
<td>移除左边的空白</td>
</tr>
<tr>
<td>.trimRight()</td>
<td>移除右边的空白</td>
</tr>
<tr>
<td>.charAt(n)</td>
<td>返回第n个字符</td>
</tr>
<tr>
<td>.concat(value, ...)</td>
<td>按照指定字符拼接</td>
</tr>
<tr>
<td>.indexOf(substring, start)</td>
<td>子序列位置索引位置</td>
</tr>
<tr>
<td>.substring(from, to)</td>
<td>根据索引获取子序列</td>
</tr>
<tr>
<td>.slice(start, end)</td>
<td>切片start开始为止 end 结束为止 根据索引</td>
</tr>
<tr>
<td>.toLowerCase()</td>
<td>小写</td>
</tr>
<tr>
<td>.toUpperCase()</td>
<td>大写</td>
</tr>
<tr>
<td>.split(delimiter, limit)</td>
<td>按照指定内容分割 limit=分割数量</td>
</tr>
</tbody>
</table>
<pre><code class="language-js">var name = ' moon '
var gender = 'male'
1.name.length// 13 返回字符长度
2.name.trim() // ' moon ' 去除字符串左右两边空格（区别于Python，JS只能去除空格）
3、name.trimLeft()// ' moon ' 去除字符串左边空格
4、name.trimRight()// ' moon ' 去除字符串右边空格
5、name.charAt(5)// 'g' 类似于Python的索引取值
6、name.concat(gender)// 'kang kangmale' 拼接，针对字符的拼接还可以用‘+’号
7、name.indexOf('ng')// 4 根据输入的字符获取字符对应索引的位置
8、name.substring(1,5)//' moon ' 类似于Pyhon的切片操作
9、name.slice(1,5) // ' moon ' 类似于Pyhon的切片操作
10、name.toUpperCase()// 'KANG KANG' 将字符串所有英文字母转大写
11、name.toUpperCase()// 'kang kang' 将字符串所有英文字母转小写
13、name.split(' ')//(6) ['', '', 'kang', 'kang', '', ''] 按指定字符·分割字符串， 第二个参数可控制获取分割后的字符串的个数
/*
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)个字符结束(不包含该位置字符)
*/
</code></pre>
<h4 id="字符串格式化输出">字符串格式化输出</h4>
<pre><code class="language-txt">var name = "moon", time = "today";
`Hello ${name}, how are you ${time}`
使用数字1右边的`号包裹然后${变量名}作为占位符输出
</code></pre>
<h3 id="布尔值boolean">布尔值boolean</h3>
<pre><code class="language-js">区别于Python,在python中是True，False
js代码中true和false都是小写
var a = true;
var b = false;
</code></pre>
<p><mark>""(空字符串)、0、null、undefined、NaN都是false。</mark></p>
<h4 id="null和undefined">null和undefined</h4>
<p>null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;<br>
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。</p>
<h3 id="对象object">对象object</h3>
<p>JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。<br>
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。<br>
对象只是带有属性和方法的特殊数据类型。</p>
<h2 id="自定义对象字典">自定义对象(字典)</h2>
<pre><code class="language-js">创建字典
var d1 = {'name':'moon','age':18}
d1['name']
可以通过中括号取值
d1.name
也可以通过点的方式去值 因为这是一个对象
for (let i in d1){
console.log(i,d1)
}
i是字典的每一个键di 算是通过键去值
通过new创建
var d2 = new object()
//创建了一个空字典
d2.name = 'jason'
//直接可以添加键值对
</code></pre>
<h2 id="日期对象">日期对象</h2>
<pre><code class="language-js">let d3 = new Date()
//创建了一个时间对象
d3.toLocaleString()
// 2020/5/14 下午2：31:05 格式化时间
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）正常应该+1处理
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
</code></pre>
<h2 id="json序列化">JSON序列化</h2>
<pre><code class="language-js">在python中序列化
dumps 序列化
loads 反序列化
在js代码中
let d1 = {'name':'moon','age':18 }
JSON.stringify(d1) 序列化 变为json格式
JSON.parse(d1) 反序列化 将json格式转为字典
</code></pre>
<h2 id="数组">数组</h2>
<p>数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。</p>
<pre><code class="language-js">var a = ;
console.log(a);// 输出"ABC"
//也支持索引
</code></pre>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>.length</td>
<td>数组内元素的个数</td>
</tr>
<tr>
<td>.push(ele)</td>
<td>尾部追加元素</td>
</tr>
<tr>
<td>.pop()</td>
<td>获取尾部的元素</td>
</tr>
<tr>
<td>.unshift(ele)</td>
<td>头部插入元素</td>
</tr>
<tr>
<td>.shift()</td>
<td>头部移除元素</td>
</tr>
<tr>
<td>.slice(start, end)</td>
<td>切片起始位置 结束为止</td>
</tr>
<tr>
<td>.reverse()</td>
<td>反转将数组从右到左显示</td>
</tr>
<tr>
<td>.join(seq)</td>
<td>将数组元素按照指定的字符 连接成字符串</td>
</tr>
<tr>
<td>.concat(val, ...)</td>
<td>将两个 数组 合并到一起</td>
</tr>
<tr>
<td>.sort()</td>
<td>将数组 从小 到大排序</td>
</tr>
<tr>
<td>.forEach()</td>
<td>将数组的每个元素传递给回调函数</td>
</tr>
<tr>
<td>.splice()</td>
<td>删除元素，并向数组添加新元素。</td>
</tr>
<tr>
<td>.map()</td>
<td>返回一个数组元素调用函数处理后的值的新数组</td>
</tr>
</tbody>
</table>
<pre><code class="language-js">let a =
let b = ['ABC','DEF']
1、a.length// 3 返回数组内部数据的数量
2、a.push(4) // 在数组尾部添加值
3、a.pop()// 弹出数值尾部的值
4、a.unshift(1)// 在数值头部插入数值，可一次插入多个
5、a.shift// 移出数组头部数据，一次只能移除一个
6、a.slice(1,3)// 数组切片取值，设置起始和结束位置的索引
7、a.reverse()// 反转元组内数据
8、a.join()//'3,2,1,1,5' 将数组内数据转成字符类型
9、a.concat(b)//(7) 拼接数组
10、a.sort()// 将数组内数值由小到大排序
//按照字符编码的顺序进行排序
11 l1.forEach()
l1.forEach(function(value{console.log(value)},l1)
// l1里面的每一个数据 当作行参 传入函数体代码
l1.forEach(function(value,index,arr{console.log(value,index,arr)},l1)
//value = 列表中 每一个数据index = 每一个数据的索引值 arr= 数据来源
12 a.splice(a,b)
//a索引开始为止 b索引结束为止 移除相关元素
a.splice(a,b,c)
//先把索引a到索引b的位置元素删除，然后在添加c元素
13、a.map(function(value){console.log(value)},a)
// a里面的每一个数据 当作行参 传入函数体代码
a.map(function(value){return value*2},a)
// a里面的每一个数据 当作行参 传入函数体代码
map(lamdba x:x>10,a)
</code></pre>
<h2 id="运算符">运算符</h2>
<h3 id="算数运算符">算数运算符</h3>
<pre><code class="language-js">+ - * / % ++ --
var x=10;
var res1=x++;
//加号在后面就 先做赋值后自增
var res2=++x;
//加号在前面就 先自增在赋值
res1;10
res2;12
++表示自增1
--表示自减1
这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
</code></pre>
<h3 id="比较运算符">比较运算符</h3>
<pre><code class="language-js">1=='1' true
(值相等 弱等于)
1 === '1' false
(强等 不等于)
!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
</code></pre>
<h3 id="逻辑运算符">逻辑运算符</h3>
<pre><code class="language-js"> &&(与) ||(或) !(非)
5&&'5' // '5'哪个为假显示哪个 都为真显示最后的
0||1 // 1 哪个为真显示哪个
</code></pre>
<h3 id="赋值运算符">赋值运算符</h3>
<pre><code class="language-js">= += -= *= /=
</code></pre>
<h2 id="流程控制">流程控制</h2>
<pre><code class="language-js">if (a>5)
{console.log('yes')}
else
{console.log('no')}
if a>5:
print('yes')
else:
print('no')
//对比python代码 起始就是把 条件加上了小括号 把:号换成了大括号
var a = 10;
if (a > 5){
console.log("a > 5");
}
else if (a < 5)
{console.log("a < 5");}
else {
console.log("a = 5");
}
</code></pre>
<h3 id="switch">switch</h3>
<pre><code class="language-js">var num = 2;
switch (num) {
case 0:
console.log('喝酒')
break
case 1:
console.log('唱歌')
break
case 2:
console.log('洗浴')
break
case 3:
console.log('大保健')
break
default:
console.log('所有条件都不满足时执行')
}
default所有条件都不满足时执行
提前定义好可能出现的条件和解决方式 然后 匹配解决方式
每次出发必须加break 不然会一直执行
</code></pre>
<h2 id="for循环">for循环</h2>
<pre><code class="language-js">打印0-9数字
for(let i=0;i<10;i++){
console.log(i)
}
for(起始条件;循环条件；循环时执行的操作)
循环打印出数字里面的每一个元素
var l1 =
for (let i=0;i<l1.length;i++)
{
console.log(l1)
}
while(i<100){
console.log(i);
i++;
}
三元运算符 python res = 1 if 1>2 else 3
条件成立取前面的值 条件不成立取后面的值
js中三元运算符 res = 1>2?1:3
条件成立取问号后面的数字
条件不成立取冒号后面的数字
</code></pre>
<h2 id="函数">函数</h2>
<pre><code class="language-js">定义函数的关键词 function
语法结构
function 函数名(行参,行参){函数体代码}
function func1 (){
console.log('hello')
}
func1() 调用方法跟python一样
有参函数
function func2 (1,2,3,4,5){
console.log(1,2)
}
如何参数传多了也不会报错 传少了也不会报错
关键字 arguments
function func2 (1,2,3,4,5){
if (arguments.length!==2){
console.log('传参错误')
}
else{
console.log('正常执行')
}
}
可以通过arguments方法来控制传参的数量
因为arguments可以获取到所有的参数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
返回值方法跟python相同也是return
如果返回多个数据，只能拿到最后一个
传少了就是undefined代替
</code></pre>
<h3 id="箭头函数">箭头函数</h3>
<pre><code class="language-js">var func1 = v =>v;
等于
var func1 = function(v){
returun v
}
var func1 = 行参 => 返回值;
>箭头左边的是行参 右边是返回值
var func1 = (a,b) => a+b;
主要用于处理简单逻辑
类似于python中的匿名函数
</code></pre>
<h3 id="名称空间">名称空间</h3>
<pre><code class="language-js">函数内的名称空间顺序和python一样
</code></pre>
<h2 id="正则表达式">正则表达式</h2>
<pre><code class="language-js">定义正则两种方式
var reg1 = new RegExp("^{5,11}");
var reg2 = /^{5,9}$/;
1.全局模式的规律
lastIndex
2.test匹配数据不传默认传undefined
可以直接使用/正则表达式/
</code></pre>
<h2 id="格式化输出时间">格式化输出时间</h2>
<pre><code class="language-js">var dictday = {
'0':'星期日',
'1':'星期一',
'2':'星期二',
'3':'星期三',
'4':'星期四',
'5':'星期五',
'6':'星期六',
}
// “2017-12-27 11:11
var time = new Date();
function showtime(){
year = time.getFullYear()
month = time.getMonth()
date = time.getDate()
hours = time.getHours()
minutes = time.getMinutes()
day = time.getDay()
showwkke = dictday
console.log(showwkke)
console.log(`${year}-${month+1}-${date} ${hours}:${minutes}${showwkke}`)
}
</code></pre><br><br>
来源：https://www.cnblogs.com/moongodnnn/p/16953732.html
頁:
[1]