python之JavaScript

葛奇發表於 2019-8-13 20:37:00

<h2>JavaScript-ECMAScript</h2>
<h3>javascript介绍</h3>
<p>Web前端有三层：</p>
<ul>
<li>
<p>HTML：从语义的角度，描述页面<strong>结构</strong></p>
</li>
<li>
<p>CSS：从审美的角度，描述<strong>样式</strong>（美化页面）</p>
</li>
<li>
<p>JavaScript：从交互的角度，描述<strong>行为</strong>（提升用户体验）</p>
</li>
</ul>
<p>其中JavaScript基础又分为三个部分：</p>
<ul>
<li>
<p>ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。</p>
</li>
<li>
<p>DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。</p>
</li>
<li>
<p>BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。</p>
</li>
</ul>
<p>特点:</p>
<ul>
<li>
<p>简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。</p>
</li>
<li>
<p>解释执行（<strong>解释语言</strong>）：事先不编译、逐行执行、无需进行严格的变量声明。</p>
</li>
<li>
<p>基于对象：内置大量现成对象，编写少量程序可以完成目标</p>
</li>
</ul>
<h3>javascript语法</h3>
<ul>
<li>
<p>JavaScript对换行、缩进、空格不敏感。每一行语句末尾要加上分号，如果不加分号，压缩后将不能运行。</p>
</li>
<li>
<p>所有符号都是英文</p>
</li>
</ul>
<h5>js代码的引入</h5>
<p>在body标签中放入<code><script type="text/javascript"></script></code>标签:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text/javascript"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h5>变量和赋值<strong>变量</strong></h5>
<div class="cnblogs_code">
<pre>var a=100;</pre>
</div>
<p>命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是javascript保留字。</p>
<p>保留字：</p>
<pre>abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile</pre>
<p><strong>赋值</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = "3";
var b = 2;
a = b;
console.log(a); /*2*/
console.log(b); /*2*/</span></pre>
</div>
<h3>输入、输出信息</h3>
<p><strong>弹出警告框</strong></p>
<div class="cnblogs_code">
<pre>alert("这是一个警告！")</pre>
</div>
<p><strong>控制台输出console.log("")和输入框prompt()</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = prompt('请输入你要说的话：');
console.log(a);</span></pre>
</div>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203532290-1176902211.png"></p>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203544289-465568398.png"></p>
<h3>基础数据类型</h3>
<h4><strong>数值类型</strong></h4>
<p>在JavaScript中只要是数，就是number类型的。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a=100;
console.log(typeof a); //或者console.log(typeof (a))查看a变量的类型</span></pre>
</div>
<p>小数的保留：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var num=1.235;
var newNum = num.toFixed(2); //小数点后保留2位
console.log(newNum); //1.23</span></pre>
</div>
<h4><strong>字符串类型：string</strong></h4>
<p>定义：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = "abcd";
var b = '哈哈哈';
console.log(typeof a);//string
console.log(typeof b);//string</span></pre>
</div>
<p>方法：</p>
<p>方法<br>说明</p>
<p>.length #不加括号的是属性<br>返回长度</p>
<p>.trim() #得到一个新值<br>移除空白</p>
<p>.trimLeft()<br>移除左边的空白</p>
<p>.trimRight()<br>移除右边的空白</p>
<p>.concat(value, ...) #s1='hello';s.concat('xx');得到helloxx<br>拼接</p>
<p>.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串<br>返回第n个字符</p>
<p>.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1<br>子序列位置</p>
<p>.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了<br>根据索引获取子序列</p>
<p>.slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它<br>切片</p>
<p>.toLowerCase() #全部变小写<br>小写</p>
<p>.toUpperCase() #全部变大写<br>大写</p>
<p>.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数<br>分割</p>
<p>charAt()返回指定索引的位置：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = 'abcdef';
var b = a.charAt(2);
console.log(b); // c 索引超出范围返回空字符串</span></pre>
</div>
<p>concat 返回字符串值，表示两个或多个字符串拼接：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.concat('xxxx');
console.log(b); //abcdefxxxx</span></pre>
</div>
<p>match()字符串匹配和正则匹配：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.match('a');
console.log(b); // ["world", index: 6, input: "hello,world", groups: undefined]
var b = a.match('A');
console.log(b); // null

// 正则
var a = 'abcd,dcba'
var r = a.match(/\w+/)
console.log(r)// ["abcd", index: 0, input: "abcd,dcba", groups: undefined]

// g表示匹配多次
var r = a.match(/\w+/g)
console.log(r)// ["abcd", "dcba"]</span></pre>
</div>
<p>replace(a,b)将字符串a替换为字符串b:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = 'abcdef';
var b = a.replace('c','xxxx');
console.log(b); //abxxxxdef</span></pre>
</div>
<p>indexOf()/search()查找字符的下标，如果找到返回字符的下标，找不到则返回-1：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.indexOf('c');
console.log(b); // 2</span></pre>
</div>
<p>slice(start,end)切片。左闭右开，分割数组，接收负参数：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.slice(-4,-1);
console.log(b); // cde</span></pre>
</div>
<p>substr(start,length) 返回一个字符串：从指定位置开始,取指定字符数:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.substr(3,2);
console.log(b); // de</span></pre>
</div>
<p>substring(indexStart,indexEnd) 切子字符串。顾头不顾尾:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.substring(1,3);
console.log(b); // bcd</span></pre>
</div>
<p>split('sep',n) 切割，根据n保留切割的数组长度：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = a.split('',2);
console.log(b); // ["a", "b"]</span></pre>
</div>
<h4><strong>布尔值boolean</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = false;
console.log(typeof b);// boolean</span></pre>
</div>
<h4><strong>空元素null</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = null;
console.log(b)// 空对象. object</span></pre>
</div>
<h4><strong>未定义undefined</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var d;
console.log(typeof d) // undefined</span></pre>
</div>
<h3>内置对象类型</h3>
<h4><strong>数组Array</strong></h4>
<p>创建：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var npc = ['ergou','datou','tiedan'];
var npc2 = new Array(); //使用构造函数的方式创建，使用new关键词对构造函数进行创建对象</span></pre>
</div>
<p>赋值：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = [];
arr = 123;
arr = '哈哈哈';
arr = '嘿嘿嘿';
console.log(arr); //</span></pre>
</div>
<p>方法：</p>
<p>方法<br>说明</p>
<p>.length<br>数组的大小</p>
<p>.push(ele)<br>尾部追加元素</p>
<p>.pop()<br>获取尾部的元素</p>
<p>.unshift(ele)<br>头部插入元素</p>
<p>.shift()<br>头部移除元素</p>
<p>.slice(start, end)<br>切片</p>
<p>.reverse() #在原数组上改的<br>反转</p>
<p>.join(seq)#a1.join('+')，seq是连接符<br>将数组元素连接成字符串</p>
<p>.concat(val, ...) #多个数组合并,得到一个新数组，原数组不变<br>连接数组</p>
<p>.sort()<br>排序</p>
<p>.forEach()<br>将数组的每个元素传递给回调函数</p>
<p>.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)。如果索引超过范围，会直接添加新元素<br>删除元素，并向数组添加新元素。</p>
<p>.map() #讲了函数再说<br>返回一个数组元素调用函数处理后的值的新数组</p>
<p>concat方法：列表的拼接：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = ['啦啦啦','xxx'];
var arr2 = arr.concat(arr1);
arr2 // ["123", "哈哈哈", "嘿嘿嘿", "啦啦啦", "xxx"]</span></pre>
</div>
<p>join方法：将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.join('');
arr1 // "123哈哈哈嘿嘿嘿"</span></pre>
</div>
<p>toString()方法：将数组转换成字符串</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.toString();
arr1 // "123,哈哈哈,嘿嘿嘿"</span></pre>
</div>
<p>slice(start,end)：切片(左闭右开)</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
var arr1 = arr.slice(1,2);
arr1 // ["哈哈哈"]</span></pre>
</div>
<p>pop方法：删除尾元素</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['张三','李四','王文','赵六'];
var item = arr.pop();
console.log(arr);//["张三", "李四"，"王文"]
console.log(item);//赵六</span></pre>
</div>
<p>push方法：向数组末尾添加一个元素或多个元素，并返回新的长度</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['张三','李四','王文','赵六'];
var newLength= arr.push('小马哥');//可以添加多个，以逗号隔开
console.log(newLength);//5
console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]</span></pre>
</div>
<p>reverse()方法：翻转数组</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['张三','李四','王文','赵六'];
arr.reverse()
arr // ["赵六", "王文", "李四", "张三"]</span></pre>
</div>
<p>sort()方法：排序</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var names = ['ergou','tiedan','datou'];
names.sort();
console.log(names);// ["datou", "ergou", "tiedan"]</span></pre>
</div>
<p>Array.isArray(被检测的值)：判断是否为数组</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b = 'qwe';
Array.isArray(b); // false</span></pre>
</div>
<p>shift()：删除并返回数组的第一个元素</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
arr.shift(); // '123'
arr // ["哈哈哈", "嘿嘿嘿"]</span></pre>
</div>
<p>unshift():向数组的开头添加一个或更多元素，并返回新的长度</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var arr = ['123','哈哈哈','嘿嘿嘿'];
arr.unshift('xxx','哒哒哒'); // 5
arr // ["xxx", "哒哒哒", "123", "哈哈哈", "嘿嘿嘿"]</span></pre>
</div>
<p>清空数组的几种方式</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var array = ;
array.splice(0);    //方式1：删除数组中所有项目
array.length = 0; //方式1：length属性可以赋值，在其它语言中length是只读
array = [];       //方式3：推荐</span></pre>
</div>
<p>sort的问题</p>
<pre>关于sort()需要注意：<br>      如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。<br>      如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：<br>      若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。<br>      若 a 等于 b，则返回 0。<br>      若 a 大于 b，则返回一个大于 0 的值。<br>示例：</pre>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">function sortNumber(a,b){
return a - b
}
var arr1 =
arr1.sort(sortNumber)</span></pre>
</div>
<h3>数据类型之间的转换</h3>
<h4><strong>parseInt():字符串转数字</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = '5'
var a = parseInt(a);
console.log(typeof(a))// "number"

//带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。
console.log(parseInt("2018你真帅！！"));

//自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7);
console.log(a);
var a = parseInt(5.8 + 4.7);
console.log(a);</span></pre>
</div>
<h4><strong>parseFloat():字符串转小数</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = parseFloat('5.8')+parseFloat('4.7');
a // 10.5
var a = parseFloat('5.8'+'4.8');
a // 5.84</span></pre>
</div>
<h4><strong>String()和.toString:转字符串</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var n1 = 123;
var str1 = String(n1);
typeof str1 //"string"

var num = 234;
num.toString()//"234"
typeof num.toString() // "string"</span></pre>
</div>
<h4><strong>Boolean():任何数据类型都可以转成布尔值</strong></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var b1 = '123';
Boolean(b1) // true
var b2 = -123;
Boolean(b2) // true
var b3 = Infinity;// 无穷大
Boolean(b3) // true
var b4 = 0;
Boolean(b4) // false
var b5 = NaN;
Boolean(b5) // false
var b6; // undefined
Boolean(b6) // false
var b7 = null;
Boolean(b7) // false</span></pre>
</div>
<h3>运算符</h3>
<h4><strong>赋值运算符</strong></h4>
<p>以var x = 12,y=5来演示示例</p>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203556895-1879578676.png"></p>
<h4><strong>比较运算符</strong></h4>
<p>var x = 5;</p>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203608928-1316863490.png"></p>
<h4><strong>算术运算符</strong></h4>
<p>var a = 5, b = 2</p>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203620879-851170091.png"></p>
<p>'+': 字符串可相加，数字也可相加，字符串和数字也可以相加。值得注意的是，如果字符串和数字相加会自动把结果转换成字符串。如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">console.log('吃了'+'么') //'吃了么'
console.log(12+3)    //15
console.log('吃了'+3) //'吃了3'</span></pre>
</div>
<p>'-'：字符串-数值=数值</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = '3';
var b = 2;
a-b // 1
b-a // -1</span></pre>
</div>
<h4><strong>逻辑运算符</strong></h4>
<p>&&与 ||或！非</p>
<h3>流程控制</h3>
<h4>if单分支：</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var ji = 20;
if(ji >= 20){
'大吉大利，今晚吃鸡'
}
// '大吉大利，今晚吃鸡'</span></pre>
</div>
<h4>if...else...:</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var ji = 19;
if(ji >= 20){
'大吉大利，今晚吃鸡'
}else{
'继续努力'
}
// '继续努力'</span></pre>
</div>
<h4>if...else if...else:</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">if (true) {
//执行操作
}else if(true){
//满足条件执行
}else if(true){
//满足条件执行
}else{
//满足条件执行
}</span></pre>
</div>
<h4>case语句：</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var gameScore = 'better';
switch(gameScore){
case 'good':
console.log('玩的好');
break;
case 'better':
console.log('玩的老牛逼了');
case 'best':
console.log('恭喜你成功吃鸡');
default:
console.log('很遗憾')
}</span></pre>
</div>
<h4>while 循环</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var i = 1;
while(i</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">=9</span><span style="color: rgba(255, 0, 0, 1)">){
console.log(i);
i </span><span style="color: rgba(0, 0, 255, 1)">= i+1;
</span><span style="color: rgba(255, 0, 0, 1)">}</span></pre>
</div>
<h4>do...while 循环</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var i = 3;
do{
console.log(i)
i++;
}while(i</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">10</span><span style="color: rgba(255, 0, 0, 1)">)</span></pre>
</div>
<h4>for循环</h4>
<div class="cnblogs_code">
<pre>for(var i=1; i<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">=10</span><span style="color: rgba(255, 0, 0, 1)">; i++){
console.log(i); // 1,2,3,4,5,6,7,8,9,10
}
var arr </span><span style="color: rgba(0, 0, 255, 1)">= ;
</span><span style="color: rgba(255, 0, 0, 1)">for(n in arr){
console.log(n); // 0,1,2,3
}</span></pre>
</div>
<h4>三元运算</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = 1;
var b = 2;
var c = a>b ? a:b;//如果a>b成立返回a,否则返回b
console.log(c); // 2</span></pre>
</div>
<h3>函数</h3>
<p><strong>定义：</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">function 函数名字(){

}</span></pre>
</div>
<p><strong>调用：</strong></p>
<pre>函数名();</pre>
<p>函数的参数和返回值：形参和实参</p>
<p>注意：实际参数和形式参数的个数，要相同；函数只能有一个返回值，如果要返回多个值，只要将其放在数组或对象中返回</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">console.log(sum(3,4));
// 函数：求和
function sum(a,b){
return a+b;
}</span></pre>
</div>
<p>伪数组：arguments</p>
<p>arguments代表的是实参。arguments只在函数中使用。</p>
<p>返回函数实参的个数：arguments.length</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">function fn(a,b,c) {
console.log(arguments);
console.log(fn.length);       //获取形参的个数
console.log(arguments.length);//获取实参的个数
console.log("----------------");
}
fn(2,4,6,8);
// Arguments(4)
// 3
// 4</span></pre>
</div>
<p>arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">function fn(a,b) {
arguments = 99;//将实参的第一个数改为99
arguments.push(8);//此方法不通过，因为无法增加元素
}</span></pre>
</div>
<h4>匿名函数</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">// 匿名函数方式，多和其他函数配合使用，后面我们就会用到了
var sum = function(a, b){//在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
return a + b;
}
sum(1, 2);</span></pre>
</div>
<h4>自执行函数</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">// 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){
return a + b;
})(1, 2);//python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)</span></pre>
</div>
<h3>json对象</h3>
<p>JSON.stringify()将对象转化为json字符串</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var obj = {"name":"dadada","age":12};
var str = JSON.stringify(obj);
typeof str
// "string"</span></pre>
</div>
<p>JSON.parse()将json字符串转化为对象</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var str = '{"name":"daddada","age":12}';
var obj = JSON.parse(str);
typeof obj,obj
// "object"</span></pre>
</div>
<p>遍历对象中的内容</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var a = {'name':'dadadda','age':12};
for (var i in a){
console.log(i,a);
}
//name dadadda
//age 12</span></pre>
</div>
<h3>日期：Date</h3>
<p>定义</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var dt = new Date();
dt
// Tue Aug 13 2019 15:20:03 GMT+0800 (中国标准时间)</span></pre>
</div>
<p>常用方法</p>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203633618-2053292336.png"></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">//创建日期对象
var dt = new Date();
dt//Tue Aug 13 2019 15:24:04 GMT+0800 (中国标准时间)

//获取一个月中的某一天
dt.getDate(); //13

//返回本地时间
dt.toLocaleString() //"2019/8/13 下午3:24:04"
</span></pre>
</div>
<p>注意：以上getxxx的方法都是对时间的获取，如果要设置时间，使用setxxx,请参考链接：http://www.runoob.com/jsref/jsref-obj-date.html</p>
<h3>RegExp对象</h3>
<h4>创建正则对象方式</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var reg = RegExp('正则表达式')//注意,写在字符串中所有带\的元字符都会被转义,应该写作\\
var reg2 = /正则表达式///内部的元字符就不会转义了
reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false</span></pre>
</div>
<h4>字符串中应用正则</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">var exp = 'alex3714';

//只匹配从左到右的第一个
exp.match(/\d/);
//["3", index: 4, input: "alex3714", groups: undefined]0: "3"groups: undefinedindex: 4input: "alex3714"length: 1__proto__: Array(0)

//匹配所有符合规则的返回一个数组
var exp = 'alex3714';
exp.match(/\d/g);
//["3", "7", "1", "4"]

//只匹配小写a
var exp2 = 'Alex is a big sb';
exp2.match(/a/);
//["a", index: 8, input: "Alex is a big sb", groups: undefined]

//i表示不区分大小写 A也会被匹配出来
exp2.match(/a/i);
//["A", index: 0, input: "Alex is a big sb", groups: undefined]

//不区分大小写并匹配所有
exp2.match(/a/ig);
//["A", "a"]0: "A"1: "a"length: 2__proto__: Array(0)

//不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
exp2.search(/a/i);
//0
exp2.search(/a/);
//8

//不区分大小写,根据正则切割,返回前n个结果
exp2.split(/a/i,2);
//["", "lex is "]
exp2.split(/a/i);
//["", "lex is ", " big sb"]

//i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值
exp2.replace(/a/gi,'sb');
//"sblex is sb big sb"</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">小问题1
var reg2 = /\d/g //正则表示要匹配多个值
reg2.test('a1b2c3')//多次test会的到true true true false 继续test会循环之前的结果</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">小问题2
var reg3 = /\w{5,10}/
reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则</span></pre>
</div>
<h3>数学相关：match</h3>
<h4>方法：</h4>
<p><img src="https://img2018.cnblogs.com/blog/1703508/201908/1703508-20190813203648530-2109476884.png"></p>
<h4>其他：</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">Math.abs(x)    //返回数的绝对值。
Math.pow(x,y) //返回 x 的 y 次幂。
Math.round(x) //把数四舍五入为最接近的整数。
Math.sqrt(x) //返回数的平方根。
Math.exp(x)    //返回 e 的指数。
Math.log(x)    //返回数的自然对数（底为e）。
Math.sin(x)    //返回数的正弦。
Math.tan(x)    //返回角的正切。</span></pre>
</div>
<h3>面向对象</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">//创建类
function Student(name,age){
this.name = name;
this.age = age;
}
//封装方法
Student.prototype.show = function(){
console.log(this.name,this.age)
}
//实例化
var stu = new Student('alex',84);
//查看属性
stu.name // alex
stu.age //84
//查看方法
stu.show()//alex 84</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/yaoqi17/p/11348394.html

頁: [1]

琼殿技术论坛's Archiver

python之JavaScript