第一章 JavaScript實(shí)現(xiàn)
核心（ECMAScript）
文檔對象模型（DOM）
瀏覽器對象模型（BOM）
1.1 核心（ECMAScript）
由ECMA-262定義野宜，提供核心語言的功能
宿主環(huán)境包括：web瀏覽器、Node（一種服務(wù)大端的Javascript平臺）减江、Adobe Flash
能夠?qū)崿F(xiàn)ECMAScript的方法有：Javascript和Adobe ActionScript兩種
1.2 DOM級別
提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口
DOM1級別：DOM核心+DOM HTML 胧沫。目標(biāo)是映射文檔的結(jié)構(gòu)
DOM2級別：在DOM1的基礎(chǔ)之上拭抬，增加了如下模塊：
（1）DOM視圖（DOM views），定義了跟蹤不同文檔視圖的接口
（2）DOM事件：定義了元素事件和事件處理的接口
（3）DOM樣式：css樣式
（4）DOM遍歷和范圍：定義了遍歷和操作文檔的接口
1.2.1Dom獲取頁面元素的方式
（1）通過ID獲取頁面元素
（2）通過類名獲取頁面元素（返回的是數(shù)組沦疾，但不常用）
（3）通過標(biāo)簽獲取頁面元素（返回的是數(shù)組）
（4）h5提供的查選擇器querySelector
//標(biāo)簽獲取
document.querySelector('div'); //返回的是第一個(gè)標(biāo)簽名為div
//類名獲取
document.querySelector('.div'); //返回的是第一個(gè)類名為div
//Id獲取
document.querySelector('#div');
（5）h5提供的查詢選擇器querySelectorAll （最常用）
//標(biāo)簽獲取
document.querySelectorAll('div'); //返回的是所有標(biāo)簽名為div
//類名獲取
document.querySelectorAll('.div'); //返回的是所有標(biāo)類名為div
//Id獲取
document.querySelectorAll('#div');
1.2.2 獲取元素里的內(nèi)容操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
222
<span>span</span>
</div>
<script>
var div = document.querySelectorAll("div")[0]
console.log(div.innerHTML)// 222 <span>span</span>
console.log(div.textContent) //222 span
</script>
</body>
</html>
1.2.3獲取標(biāo)簽元素的屬性getAttribute称近、設(shè)置元素屬性setAttribute、removeAttribute
console.log(div.getAttribute("id"))
console.log(div.getAttribute("class"))
div.removeAttribute("b")
//通過覆蓋class的屬性值來達(dá)到切換的效果
var i = true
setInterval(function() {
if (i) {
myMlass = 'tow'
div.setAttribute('class', myMlass)
i = false
} else {
myMlass = 'one'
div.setAttribute('class', myMlass)
i = true
}
}, 1000)
//通過背景的屬性值來達(dá)到切換的效果
var i = true
setInterval(function() {
if (i) {
div.style.background = 'green'
} else {
div.style.background = 'yellow'
}
i = !i
}, 1000)
//通過添加和刪除的屬性值來達(dá)到切換的效果
var i = true
setInterval(function() {
if (i) {
div.classList.add('tow')
} else {
div.classList.remove('tow')
}
i = !i
}, 1000)
/ 三種背景顏色的切換
var num = 0
setInterval(function() {
num++
if (num == 1) {
div.classList.add("one")
} else if (num == 2) {
div.classList.remove("one")
div.classList.add("tow")
} else {
div.className = "" //清空所有的class屬性
}
if (num == 3) {
num = 0
}
}, 1000)
呼吸輪播圖
var sum = 0
var imgs = document.querySelectorAll('img')
var len = document.querySelectorAll('img').length;
setInterval(function() {
sum++
for (var i = 0; i < len; i++) {
if (sum % len == i) {
imgs[i].style.opacity = '1'
} else {
imgs[i].style.opacity = '0'
}
}
}, 2000)
除此之外哮塞，獲取class元素的一些屬性
（1）className會返回該元素里所有類刨秆，且返回的類型為字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="qq bb" id="myid">
222
<span>span</span>
</div>
<script>
var div = document.querySelectorAll("div")[0]
console.log(div.className) //qq bb
console.log(typeof div.className) //string類型
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="qq bb" id="myid">
222
<span>span</span>
</div>
<script>
var div = document.querySelectorAll("div")[0]
function delectClass(className, delectName) {
var arr = className.split(" ")
if (arr.indexOf(delectName) == -1) {
return className;
}
arr.splice(arr.indexOf(delectName), 1);
return arr.join(" ")
}
var bb = delectClass(div.className, "bb");
console.log("刪除后的值" + bb)//返回的是刪除后的值qq
</script>
</body>
（2）classList會返回該元素里所有類，且返回的類型為數(shù)組類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="qq bb" id="myid">
222
<span>span</span>
</div>
<script>
var div = document.querySelectorAll("div")[0]
console.log(div.classList) //["qq", "bb", value: "qq bb"]
console.log(typeof div.classList) //object類型中的數(shù)組
</script>
</body>
</html>
（3）textContent與innerHTML的區(qū)別和來聯(lián)系
var div = document.getElementsByTagName('div')[0]
console.log(div.textContent) //不會解析元素標(biāo)簽忆畅，只會打印標(biāo)簽里面的文本內(nèi)容
console.log(div.innerHTML) //會解析元素標(biāo)簽
1.2.4 獲取元素的內(nèi)聯(lián)樣式衡未、嵌入樣式和外部樣式。 getComputedStyle（“element”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: chartreuse;}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelectorAll("div")[0]
console.log(window.getComputedStyle(div).width)//200px
console.log(typeof window.getComputedStyle(div).width) //string
console.log(window.getComputedStyle(div).background)
</script>
</body>
</html>
1.3 瀏覽器對象模型（ＢＯＭ）
提供與瀏覽器交互的方法和接口家凯。開發(fā)人人員使用ＢＯＭ可以控制瀏覽器顯示的頁面以外的部分
二 在HTML中嵌套javascript代碼
2.1 標(biāo)簽的位置
javascript代碼在head和body中的區(qū)別：
head中的javascript代碼缓醋，必須等到全部javascript代碼都被下載、解析和執(zhí)行完成以后绊诲，才開始呈現(xiàn)頁面的內(nèi)容（瀏覽器在遇到<body>標(biāo)簽時(shí)才開始呈現(xiàn)內(nèi)容）送粱，這樣會導(dǎo)致瀏覽器在呈現(xiàn)頁面時(shí)出現(xiàn)明顯的延遲。
在body中的javascript代碼會在解析前掂之，頁面的內(nèi)容將完全呈現(xiàn)在瀏覽器中
2.2 延遲
只適用與外部腳本
defer是延遲屬性抗俄，即要等到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行脆丁，在HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會先于第二個(gè)延遲腳本執(zhí)行动雹，且它們都會先與DOMContentLoaded事件偎快。有的瀏覽器不支持該屬性，所以洽胶，延遲腳本放在頁面底部仍然是最佳選擇
2.3 異步腳本
async屬性與defer屬性類似晒夹，都是用于改變處理腳本的行為，都只適/用于外部文件姊氓。告訴瀏覽器立即下載文件丐怯。但，async并不保證按照它們的先后順序執(zhí)行
2.4文檔模式
文檔模式種類：混雜模式翔横、標(biāo)準(zhǔn)模式读跷、準(zhǔn)標(biāo)準(zhǔn)模式（IE后來提出的）
PS：標(biāo)準(zhǔn)模式與準(zhǔn)標(biāo)準(zhǔn)模式差異不大，所以大多時(shí)候都被籠統(tǒng)的稱為標(biāo)準(zhǔn)模式
2.5 noscript元素
用以在不支持JavaScript的瀏覽器中替代的內(nèi)容禾唁。這個(gè)元素可以包含能夠出現(xiàn)在文檔<body>中的任何HTML元素（script元素除外）
只有一下其中的任意情況才會被觸發(fā)：
（1）瀏覽器不支持腳本
（2）瀏覽器支持腳本效览，但被禁用
三 基本概念
3.1 語法
3.1.1 區(qū)分大小寫
ECMAScript中的一切（變量、函數(shù)名和操作符）都區(qū)分大小寫荡短。
3.1.2 嚴(yán)格模式
要在整個(gè)腳本中啟動嚴(yán)格模式丐枉，可以在頂部添加如下代碼：
“use strict”;
3.2 數(shù)據(jù)類型
基本數(shù)據(jù)類型：Undegined、Null掘托、Boolean瘦锹、Number、Stirng 基本數(shù)據(jù)類型的一系列操作不會改變本身的值
字符串不可變性: 在js當(dāng)中闪盔，操作字符串的時(shí)候弯院，并不是在原來的字符串上進(jìn)行修改，而是重新開辟內(nèi)存泪掀，生成新的字符串听绳，把變量重新指向新的字符串，原來的字符串并不會馬上消失异赫，而是等待垃圾回收機(jī)制進(jìn)行回收
復(fù)雜數(shù)據(jù)類型（引用數(shù)據(jù)類型）：object椅挣。比如有函數(shù)、數(shù)組祝辣、對象
// 基本數(shù)據(jù)類型傳參贴妻，傳的是副本
// 引用數(shù)據(jù)類型傳參切油，傳的是地址
var a = 10
function fn(a) {
a = 12
return ("函數(shù)內(nèi)的參數(shù)值：" + a)
}
console.log(fn(a))
console.log("函數(shù)外的值：" + a)
var arr = [1, 2, 6, 3, 4]
function max(arr) {
arr = [12] //開辟另一個(gè)空間
return "函數(shù)內(nèi)的數(shù)組元素：" + arr
}
console.log(max(arr))
console.log("函數(shù)外的數(shù)組元素：" + arr)
var arr = [1, 2, 6, 3, 4]
function max(arr) {
arr.push("我是最后的元素") //這是在原來的地址上進(jìn)行修改值的內(nèi)容
return "函數(shù)內(nèi)的數(shù)組元素：" + arr
}
console.log(max(arr))
console.log("函數(shù)外的數(shù)組元素：" + arr)
3.2.1 typeof操作符
typeof是一個(gè)操作符而不是函數(shù)蝙斜，因此可以是typeof(xxxx);也可以是typeof xxxx;
var mass1=undefined; alert("mass1的值"+(mass1==undefined));//返回值true var mass2 ;alert("mass2的值"+(mass2==undefined));//返回值true
說明這兩種情況效果的一樣的
var a
console.log(a === undefined) //true
console.log(typeof(a) === 'undefined') //true
3.2.2 NAN
非數(shù)值是一種特殊的數(shù)值
表示一個(gè)本來要返回一個(gè)數(shù)值卻沒有返回?cái)?shù)值的操作情況，可以直接返回NAN
alert(NaN==NaN);//返回的是false
isNaN函數(shù)判斷的是這個(gè)參數(shù)是否不是數(shù)值
alert("這個(gè)值是非數(shù)值："+isNaN(10));
有三種方法可以把非數(shù)值轉(zhuǎn)換成數(shù)值的函數(shù)：
Number()澎胡、parseInt()孕荠、parseFloat()
（1）Number可以用于任何數(shù)據(jù)類型
（2）parseInt
空格和函數(shù)轉(zhuǎn)換成數(shù)字時(shí)娩鹉，都會是NAN類型，只有字符串?dāng)?shù)字才能轉(zhuǎn)換成數(shù)字
var input = prompt('只能輸入數(shù)字：')
var str = Number(input)
if (isNaN(str)) {
console.log('請輸入數(shù)字Ｖ晌椤弯予！')
} else {
console.log('歡迎使用！个曙！')
}
注釋：
prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框锈嫩。
語法：
prompt(text,defaultText)
| 參數(shù) | 描述 |
|---|---|
| text | 可選。要在對話框中顯示的純文本（而不是 HTML 格式的文本）垦搬。 |
| defaultText | 可選呼寸。默認(rèn)的輸入文本。 |
說明
如果用戶單擊提示框的取消按鈕猴贰，則返回 null对雪。如果用戶單擊確認(rèn)按鈕，則返回輸入字段當(dāng)前顯示的文本米绕。
在用戶點(diǎn)擊確定按鈕或取消按鈕把對話框關(guān)閉之前瑟捣，它將阻止用戶對瀏覽器的所有輸入。在調(diào)用 prompt() 時(shí)栅干，將暫停對 JavaScript 代碼的執(zhí)行迈套，在用戶作出響應(yīng)之前，不會執(zhí)行下一條語句碱鳞。
3.2.3 轉(zhuǎn)換為字符
第一種方式：toString()方法
除了null和undefined的值沒有這個(gè)方法外交汤，像數(shù)值、布爾值劫笙、對象和字符串都有toString()方法
第二種方式：String()方法
因?yàn)閚ull和undefined的值沒有toString()方法芙扎，所以，在不知道要轉(zhuǎn)換的值是否有toString()方法填大，可以使用String()戒洼，因?yàn)镾tring()方法適用與所有值。
String()方法有以下規(guī)則：
（1）如果值有toString()允华，則調(diào)用toString()方法
（2）如果值是null圈浇，則返回“null”
（3）如果值是undefined，則返回“ undefined”
3.2.3 轉(zhuǎn)換為布爾值
Boolean()
把其他任意類型轉(zhuǎn)換為布爾
在js當(dāng)中靴寂，有哪些可以轉(zhuǎn)換為false
null,undefined,0,"",false,NaN
隱式轉(zhuǎn)換 !!數(shù)據(jù)
3.3 語句
3.3.1 for-in語句
例句：
for(var a in b){
.......
}
函數(shù)也是數(shù)據(jù)類型
3.4函數(shù)
只有函數(shù)才能形成局部作用域
3.4.1函數(shù)返回值
每一個(gè)函數(shù)都有一個(gè)默認(rèn)返回值磷蜀，undefined，所以百炬，一個(gè)函數(shù)寫
renturn 沒有返回值;
return xxx;
沒有retuen
三者是等價(jià)的褐隆，都會返回值undefined
function test() {
console.log('我是函數(shù)test');
}
function test1() {
console.log('我是函數(shù)test1');
return;
}
function test2() {
console.log('我是函數(shù)test2');
return undefined;
}
console.log(test())//我是函數(shù)test undefined
console.log(test1())//我是函數(shù)test1 undefined
console.log(test2())//我是函數(shù)test2 undefined
// Ps:函數(shù)默認(rèn)返回值undefined,所以沒有寫return和寫return但沒有返回值以及返回值undefined都是一樣的
（1）如果函數(shù)里沒有寫return關(guān)鍵字，函數(shù)執(zhí)行完畢之后剖踊，默認(rèn)返回undefined
（2）如果函數(shù)里寫有return關(guān)鍵字庶弃，但沒有跟任何值衫贬，函數(shù)執(zhí)行完畢之后，默認(rèn)返回undefined
（3）如果函數(shù)里寫有return關(guān)鍵字歇攻，且后面跟有值固惯，則函數(shù)執(zhí)行完畢之后，返回return后面的這個(gè)東西
注意：return 除了能夠返回函數(shù)的返回值外缴守，還可終止函數(shù)的執(zhí)行
function arr() {
console.log(1)
console.log(2)
return;
console.log(3)
}
arr()//只返執(zhí)行 console.log(1)和console.log(2)
3.4.2函數(shù)有無括號的區(qū)別
var test=function test() {
console.log('我是函數(shù)test');
}
console.log(test())
//返回
/* console.log('我是函數(shù)test');
undefined
*/
Ps: 如果函數(shù)里面沒有寫return關(guān)鍵字葬毫，函數(shù)執(zhí)行完畢之后，會默認(rèn)的到undefined
console.log(test)
// 返回
/*
function test() {
console.log('我是函數(shù)test');
}
*/
//Ps:函數(shù)名加括號,返回的是函數(shù)里面的值屡穗，而沒有括號的則是當(dāng)成了變量
3.4.3 函數(shù)傳參
function bigTow(arr) {
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2;
return arr;
}
}
var arr1 = [1, 2, 4, 3];
arr1 = bigTow(arr1);
console.log(arr1);
3.4.4 形參和實(shí)參
// 傳參
// 乘2的函數(shù)
function bigTow(arr) { //此處的參數(shù)是形參
return arr * 2;
}
// 比較大小的函數(shù)
function numMax(arr) { //此處的參數(shù)是形參
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
}
return max;
}
var arr1 = [1, 2, 4, 3];
var b = bigTow(numMax(arr1)) //此處的參數(shù)是實(shí)參
console.log('最大值：' + numMax(arr1))
console.log('最大值乘以2：' + b);
函數(shù)里面的參數(shù)都是形參供常，調(diào)用函數(shù)里面的參數(shù)是實(shí)參
3.4.5 匿名函數(shù)
匿名函數(shù)只是用一次，可以當(dāng)參數(shù)傳遞
// 匿名函數(shù)
function methad(a, b, fn) { //回調(diào)
return fn(a, b)
}
console.log(methad(2, 2, function(a, b) { //匿名函數(shù)傳參
return a + b
}))
3.4.6 自執(zhí)行函數(shù)
（1）無參
(function() {
console.log('無參閉包')
})()
（2）有參
// ------------自執(zhí)行函數(shù)（閉包）------------
(function(a, b) {
console.log(a * b)
})(2, 3)
3.4.7 作用域
在js中只有函數(shù)才有作用域
函數(shù)執(zhí)行順序是鸡捐，先找函數(shù)里面的變量栈暇，即就近原則。沒有時(shí)箍镜，則會向外層函數(shù)查找源祈。
3.4.8 變量提升
變量可以提升，函數(shù)也可以提升
先提升變量色迂，再提升函數(shù)
console.log(a);
var a = 1;
console.log(a);
function a() {
return false;
}
//-----變量提升
var a
function a() {
return false
}
console.log(a) //打印的是函數(shù)香缺，因?yàn)樽兞縜被函數(shù)a賦值
a = 1
console.log(a) //此時(shí)打印的是值1
3.4.9 閉包
閉包的作用：
第一：閉包可以解決函數(shù)外部無法訪問函數(shù)內(nèi)部變量的問題
如果我們要獲取函數(shù)fn()里的變量，該怎么辦呢歇僧？
function fn() {
var a = 10;
}
console.log(a) //報(bào)錯(cuò)图张，a沒有定義
此時(shí)我們可以通過 return a 返回出a,外面就可以獲取函數(shù)fn()里的變量a了
function fn() {
var a = 10;
return a
}
console.log(fn()) //a=10
第二：可以持久保持函數(shù)的變量
為什么呢？因?yàn)楹瘮?shù)一旦調(diào)用里面的內(nèi)容就會被銷毀诈悍，下一次調(diào)用又是一個(gè)新的函數(shù)祸轮，和上一個(gè)調(diào)用的不相關(guān)了
function fn(){
var num = 5;
num+=1;
alert(num);
}
fn(); //6
fn(); //6
function fn(){
var num = 0;
return function(){
num+=1;
alert(num);
};
}
var f = fn();
f(); //1
f(); //2
這里之所以執(zhí)行玩這個(gè)函數(shù)num沒有被銷毀是因?yàn)槟莻€(gè)匿名函數(shù)的問題，因?yàn)檫@個(gè)匿名函數(shù)用到了這個(gè)num侥钳，所以沒有被銷毀适袜，一直保持在內(nèi)存中，因此我們f()時(shí)num可以一直加舷夺。
過多的使用閉包導(dǎo)致內(nèi)存泄漏
3.5 數(shù)組的方法
3.5.1 concat數(shù)組連接
// ---------------數(shù)組的方法-------------
var arr1 = [1, 2, 3, 4]
var arr2 = [5, 6, 7, 8]
console.log(arr2.concat(arr1)) //數(shù)值arr2連接arr1 5, 6, 7, 8苦酱，1, 2, 3, 4
console.log(arr1) //1, 2, 3, 4
console.log(arr2) //5, 6, 7, 8
// Ps 說明數(shù)組的連接不會改變原來的數(shù)組值
concat是數(shù)組連接字符串或數(shù)組連接數(shù)組
3.5.2 join字符串分割
// --------join
var arr3 = [22, 3, 4, 5]
console.log(arr3.join('+')) //22+3+4+5
join是通過某種字符來連接數(shù)組的元素
3.5.3 shift刪除第一個(gè)數(shù)組元素
//----------shift刪除數(shù)組的第一個(gè)元素
var arr4 = [1, 2, 3, 4, 5, 6];
console.log('刪除第一個(gè)元素前的數(shù)組：' + arr4) //刪除第一個(gè)元素前的數(shù)組：1,2,3,4,5,6
console.log('刪除第一個(gè)元素為' + arr4.shift()) //刪除第一個(gè)元素為1
console.log('刪除第一個(gè)元素后的數(shù)組：' + arr4) //刪除第一個(gè)元素后的數(shù)組：2,3,4,5,6
// ps 能夠改變原來的數(shù)組
3.5.4 pop刪除最后一個(gè)數(shù)組元素
//----------pop刪除數(shù)組的第一個(gè)元素
var arr5 = [1, 2, 3, 4, 5, 6];
console.log('刪除最后一個(gè)元素前的數(shù)組：' + arr5) //刪O除最后一個(gè)元素前的數(shù)組：1,2,3,4,5,6
console.log('刪除最后一個(gè)元素為' + arr5.pop()) //刪除最后一個(gè)元素為6
console.log('刪除最后一個(gè)元素后的數(shù)組：' + arr5) //刪除最后一個(gè)元素后的數(shù)組：1,2,3,4,5
// ps 能夠改變原來的數(shù)組
3.5.5 indexOf查詢數(shù)組元素
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置
stringObject.indexOf(searchvalue,fromindex)
| 參數(shù) | 描述 |
|---|---|
| searchvalue | 必需。規(guī)定需檢索的字符串值给猾。 |
| fromindex | 可選的整數(shù)參數(shù)疫萤。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1敢伸。如省略該參數(shù)扯饶，則將從字符串的首字符開始檢索。 |
| 注意 | 注釋：indexOf() 方法對大小寫敏感！如果要檢索的字符串值沒有出現(xiàn)帝际，則該方法返回 -1。 |
實(shí)例1：
//-----------indexOf
var arr6 = [1, 2, 2, 3, 4, 5, 2, 7, 2]
var index = 0;
var arr = []
while ((index = arr6.indexOf(2, index)) != -1) {
arr.push(index)
index++
}
console.log('數(shù)組中2的下標(biāo)分別為：' + arr)
// Ps:indexOf查詢的是數(shù)組元素饶辙，元素存在時(shí)返回的是1蹲诀，不存在時(shí)返回-1
實(shí)例2：去重方法一
var array = [1, 2, 3, 4, 3, 1, 7, 8]
var arr = [] //創(chuàng)建一個(gè)空的數(shù)組
function deRepeat(array) {
for (var i = 0; i < array.length; i++) { //遍歷數(shù)組array
if ((arr.indexOf(array[i])) == -1) { //拿array[i]去arr中查找，如果不存在則存入
arr.push(array[i])
}
}
return arr
}
console.log('去重前的數(shù)組為：' + array) //去重前的數(shù)組為：1,2,3,4,3,1,7,8
console.log('去重時(shí)的數(shù)組為：' + deRepeat(array)) //去重時(shí)的數(shù)組為：1,2,3,4,7,8
console.log('去重后的數(shù)組為：' + array) //去重后的數(shù)組為：1,2,3,4,3,1,7,8
// 數(shù)組去重的方法二
var array = [1, 2, 3, 4, 2, 2, , 2, 3, 5, 6]
function deRepeat(array) {
for (var i = 0; i < array.length; i++) {
if (array.indexOf(array[i], i + 1) == -1) {
//--------------
} else {
array.splice(array[i], 1)
i-- //此處只刪除第一元素弃揽，所以脯爪，為了后面的還存在與之相同的元素，此處需要自減用來抵消for循環(huán)里的自加矿微，依舊是當(dāng)前元素與后面的元素比較
}
}
return array;
}
console.log('去重前的數(shù)組：' + array) //去重前的數(shù)組：1,2,3,4,2,2,,2,3,5,6
console.log('去重時(shí)的數(shù)組：' + deRepeat(array)) //去重時(shí)的數(shù)組：1,2,3,5,6
3.5.6 slice 截取數(shù)組的元素
//-------------slice
var arr7 = [1, 2, 3, 4, 5]
console.log('截取前的數(shù)組為：' + arr7) //截取前的數(shù)組為：1,2,3,4,5
console.log('截取時(shí)的數(shù)組為：' + arr7.slice(1, 3)) //截取時(shí)的數(shù)組為：2,3
console.log('截取后的數(shù)組為：' + arr7) //截取后的數(shù)組為：1,2,3,4,5
Ps:不會改變原來的數(shù)組元素痕慢，截取的時(shí)候不包括第二個(gè)參數(shù)，因?yàn)榈诙€(gè)參數(shù)代表的是下標(biāo)涌矢，左包右不包
3.5.7 splice 刪除數(shù)組的元素
splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目掖举，然后返回被刪除的項(xiàng)目
語法：
arrayObject.splice(index,howmany,item1,.....,itemX)
| 參數(shù) | 描述 |
|---|---|
| index | 必需。整數(shù)娜庇，規(guī)定添加/刪除項(xiàng)目的位置塔次，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置 |
| howmany | 必需。要刪除的項(xiàng)目數(shù)量名秀。如果設(shè)置為 0励负，則不會刪除項(xiàng)目。 |
| item1, ..., itemX | 可選匕得。向數(shù)組添加的新項(xiàng)目继榆。 |
說明
splice() 方法可刪除從 index 處開始的零個(gè)或多個(gè)元素，并且用參數(shù)列表中聲明的一個(gè)或多個(gè)值來替換那些被刪除的元素汁掠。
如果從 arrayObject 中刪除了元素略吨，則返回的是含有被刪除的元素的數(shù)組。
注釋：請注意考阱，splice() 方法與 slice() 方法的作用是不同的晋南，splice() 方法會直接對數(shù)組進(jìn)行修改。
3.5.7.1 刪除
// ------------splice
var arr8 = [1, 2, 3, 4, 5]
console.log('截取前的數(shù)組為：' + arr8) //截取前的數(shù)組為：1,2,3,4,5
console.log('刪除的數(shù)組元素為：' + arr8.splice(1, 3)) //刪除的數(shù)組元素為：2,3,4
console.log('截取后的數(shù)組為：' + arr8) //截取后的數(shù)組為：1,5
Ps:會改變原來的數(shù)組元素羔砾，截取的時(shí)候包括第二個(gè)參數(shù)负间，因?yàn)榈诙€(gè)參數(shù)代表的是長度
3.5.7.2 添加
// 添加數(shù)組元素
var arr9 = [1, 2, 3, 4, 5]
console.log('截取前的數(shù)組arr9為：' + arr9) //截取前的數(shù)組為：1,2,3,4,5
console.log('截取時(shí)的數(shù)組arr9為：' + arr9.splice(0, 0, 'a0', 2)) //截取時(shí)的數(shù)組為：
console.log('截取后的數(shù)組arr9為：' + arr9) //截取后的數(shù)組為：a0,2,1,2,3,4,5
3.5.7.3 字符串拆分成數(shù)組
var str = "ab cd ef";
var arr = str.split(" ");
console.log(str) // ab cd ef
console.log(arr) //["ab", "cd", "ef"]
3.5.7.4 數(shù)組拆分成字符串
//先轉(zhuǎn)為數(shù)組再反轉(zhuǎn)
function myReverse(str) {
var arr = str.split("")
var max = parseInt(arr.length / 2)
console.log("原來數(shù)組：[" + arr + "]")
for (var i = 0; i < max; i++) {
var temp = arr[i]
arr[i] = arr[arr.length - 1 - i]
arr[arr.length - 1 - i] = temp
}
return "反轉(zhuǎn)后的數(shù)組：[" + arr + "]"
}
var str = myReverse(prompt())
console.log(str)
3.5.8 filter的使用
var arrNew=this.datasArr.filter(item =>{
return item.areaName===regionName;
})
//item是遍歷數(shù)組datasArr的
3.6 定時(shí)器函數(shù)
// 循環(huán)定時(shí)器
var num = 10
function down() {
//此處的計(jì)數(shù)器不能聲明在函數(shù)中，因?yàn)槎〞r(shí)器每次調(diào)用函數(shù)時(shí)姜凄，都只是執(zhí)行函數(shù)一次政溃，所以計(jì)數(shù)器始終是初始值
console.log('此時(shí)為：' + num)
if (num == 1) {
clearInterval(setInter)
}
document.querySelector('body').innerHTML = '此時(shí)為：' + num; //這個(gè)方法可以把數(shù)據(jù)打印在頁面中，且可以清楚前一個(gè)頁面
num--
}
var setInter = setInterval(down, 1000)
// 一次性定時(shí)器
setTimeout(function() {
console.log('一次性定時(shí)')
}, 1000)
*/
倒計(jì)時(shí)
//---------倒計(jì)時(shí)-------
var div = document.getElementsByTagName('div')[0]
div.style.fontSize = '100px'
div.style.width = '100px'
div.style.height = '100px'
div.style.textAlign = 'center'
div.style.lineHeight = '100px'
div.style.marginLeft = '50%'
var i = 100
var timer = setInterval(function() {
div.innerHTML = i
i--
if (i < 0) {
clearInterval(timer)
}
}, 1000)
3.7 Math
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.pow(x,y) 求x的y次方
- Math.max(x,y,z,...) 求兩個(gè)或多個(gè)數(shù)字的最大值
- Math.min(x,y,z...) 求兩個(gè)或者多個(gè)數(shù)字的最小值
- Math.random() 獲得[0,1)之間的隨機(jī)數(shù)
- Math.PI js當(dāng)中的圓周率
3.8 Date
//時(shí)間戳的設(shè)置
function TIme(str) {
var time = Number(str)
var date = new Date(time)
var nian = date.getFullYear()
var yue = date.getMonth() + 1
var ri = date.getDate()
return `${nian}-${yue}-${ri}`
}
var date = new Date(); //獲取當(dāng)前系統(tǒng)的時(shí)間
// console.log('當(dāng)前系統(tǒng)的時(shí)間：' + date)
var date1 = new Date(2019, 9, 10) //月份是從0開始的态秧，所以此處的打印的月份是10月份
console.log('指定設(shè)置年份' + date1)
console.log('年份為：' + date.getFullYear())
console.log('當(dāng)前月份為:' + (date.getMonth() + 1)) //月份需要加1
console.log('當(dāng)前號數(shù)：' + date.getDate())
console.log('當(dāng)前時(shí)間：' + date.getHours())
console.log('當(dāng)前分鐘：' + date.getMinutes())
console.log('當(dāng)前秒：' + date.getSeconds())
console.log('當(dāng)前毫秒數(shù)為：' + date.getMilliseconds()) //1~1000
console.log('當(dāng)前時(shí)間戳為：' + date.getTime()) //獲取時(shí)間戳毫秒數(shù)
var ms = +new Date(); //獲取毫秒數(shù)
// console.log(ms);
ps:月份需要加1
3.9 字符串的方法
字符串中第一個(gè)字符的下標(biāo)是 0
3.9.1 charAt
var str = 'abcdefghijklmn';
//獲取字符串里指定位置的字符
console.log('第1個(gè)位置的字符：' + str.charAt(0)) //獲取指定位置的字符串董虱，下標(biāo)從0開始 返回a
3.9.2 concat
var str1 = '000'
var str2 = 'ABC'
console.log('連接時(shí)的字符串' + str1.concat(str2)) //連接時(shí)的字符串000ABC，不改變原來的值
console.log('連接后的字符串' + str1) //連接后的字符串000
3.9.3 截取
3.9.3.1 slice截取
從start開始，到end結(jié)束的字符愤诱，可以取到start云头，不能得到end
//截取字符串slice()
var str = 'abcdefghijklmn';
console.log('截取字符之前：' + str) //截取字符之前：abcdefghijklmn
console.log('截取小標(biāo)從0到下標(biāo)為2的字符：' + str.slice(0, 3)) //截取小標(biāo)從0到下標(biāo)為2的字符：abc
console.log('截取小標(biāo)從1到下標(biāo)為2的字符：' + str.slice(1, 3)) //截取小標(biāo)從1到下標(biāo)為2的字符：bc
console.log('截取字符之后：' + str) //截取字符之后：abcdefghijklmn
// PS：左包右不包
3.9.3.2 substring 截取
從start開始，到end結(jié)束的字符淫半，可以取到start溃槐，不能得到end
var str = 'abcdefghijklmn';
console.log("數(shù)組字符串：" + str)
console.log("str.substring(0, 2)：" + str.substring(0, 2)) //str.substring(0, 2)：ab
// PS: 得不到（不包含）第二個(gè)參數(shù)的位置
//---------slice截取、substring 截取的區(qū)別------------
str = "helloworld!";
console.log(str.slice(1, 5)); //ello
console.log(str.slice(5, 1)); //
console.log(str.substring(5, 1)); //ello
console.log(str.substring(1, 5)); //ello
3.9.3.2 substr 截取
意思是從start開始科吭，一共截取length的長度
var str = 'abcdefghijklmn';
console.log("數(shù)組字符串：" + str) //數(shù)組字符串：abcdefghijklmn
console.log("str.substr(0,3)：" + str.substr(0, 3)) //str.substr(0,3)：abc
// ps: 第二個(gè)參數(shù)是lenth（ 長度）
