1.數(shù)組
-
1.1 數(shù)組構(gòu)造
- 1.直接創(chuàng)建的方式 --> var arr = [1,2,3];
- 2.構(gòu)造函數(shù)方式 --> var b = new Array(); b[0] = 1; console.log(b);
- 數(shù)組為一個object對象 --> console.log(typeof b); // object
- 檢測一個變量是否為數(shù)組的兩種方法
- 1.使用 instanceof 測試b是否為數(shù)組對象的一個實例
- instanceof --> 返回boolean值
- console.log(b instanceof Array); // true
- 2.使用Array自帶方法isArray()
- 2.Array.isArray() --> 返回boolean值
- console.log(Array.isArray(b));
// body
<body>
<script>
// 1.直接創(chuàng)建的方式
var arr = [1,2,3];
// 2.構(gòu)造函數(shù)方式
var b = new Array();
b[0] = 1;
console.log(b);
// 數(shù)組是一個對象 Object
console.log(typeof b);
// 檢測一個object是否為數(shù)組
// 1.使用 instanceof 測試b是否為數(shù)組對象的一個實例
// instanceof --> 返回boolean值
console.log(b instanceof Array); // true
// 2.Array.isArray() --> 返回boolean值
console.log(Array.isArray(b));
</script>
</body>
-
1.2 數(shù)組添加 --> 改變數(shù)組原來的內(nèi)容
- 1.push() --> 在數(shù)組末尾進行添加
- 2.unshift --> 從數(shù)組起始進行添加
// body
<body>
<script>
// --> 改變數(shù)組原來的內(nèi)容
// push() --> 在數(shù)組末尾進行添加
var arr = [1,2,3];
arr.push(4);
console.log(arr);
// unshift --> 從數(shù)組起始進行添加
arr.unshift(0);
console.log(arr);
</script>
</body>
-
1.3 concat數(shù)組合并 --> 沒有改變數(shù)組的內(nèi)容，而是產(chǎn)生一個新數(shù)組
- 參數(shù)可以是數(shù)字，也可以是數(shù)組，在原數(shù)組末尾進行添加
// body
<body>
<script>
// --> 沒有改變數(shù)組的內(nèi)容，而是產(chǎn)生一個新數(shù)組
// 參數(shù)可以是數(shù)字，也可以是數(shù)組，在原數(shù)組末尾進行添加
var arr = [1,2,3];
var b = arr.concat(4);
console.log(arr);
console.log(b);
</script>
</body>
-
1.4 數(shù)組克隆
- 1.使用for循環(huán)+push進行克隆，或者逆序for循環(huán)+unshift方法
- 2.使用concat進行克隆
- 2.1 使用空數(shù)組進行數(shù)組添加
- 2.2 使用要添加的數(shù)組直接concat()空參
// body
<body>
<script>
// 數(shù)組克隆
var arr = [1,2,3];
var b = [];
// 1.使用for循環(huán)+push進行克隆，或者逆序for循環(huán)+unshift方法
for (var i = 0;i < arr.length;i++){
b.push(arr[i]);
}
console.log(b);
// 2.使用concat進行克隆
var c = [4,5,6];
// var d = c.concat([7,8]); // [4,5,6,7,8]
// console.log(d);
// 可以使用一個空數(shù)組添加c數(shù)組，或者使用c.concat();不寫參數(shù)
var d = [].concat(c);
console.log(d);
</script>
</body>
-
1.5 數(shù)組刪除
- 1.從末尾進行刪除 --> pop()，會返回從數(shù)組中刪掉的值，就是彈出
- 2.從頭部進行刪除 --> shift()，同樣會返回從數(shù)組中刪掉的值
// body
<body>
<script>
// 數(shù)組刪除
// 1.從末尾進行刪除 --> pop()
// 會返回從數(shù)組中刪掉的值，就是彈出
var arr = [1,2,3];
var a = arr.pop();
console.log(a);
// 2.從頭部進行刪除 --> shift()
// 同樣會返回從數(shù)組中刪掉的值
var arr2 = [1,2,3];
var a2 = arr.shift();
console.log(a2);
</script>
</body>
-
1.6 數(shù)組修改
- splice(index,number,item);
- index --> 下標
- number --> 修改多少個
- item --> 修改的項
// body
<body>
<script>
// splice(index,number,item);
// index --> 下標
// number --> 修改多少個
// item --> 修改的項
var arr = [1,2,3];
arr.splice(1,1,"a");
console.log(arr);
</script>
</body>
-
1.7 數(shù)組查詢和數(shù)組切片
- 數(shù)組查詢
- 1.通過下標查詢數(shù)組的值
- 2.通過值查詢數(shù)組中對應(yīng)的下標，只返回該值在數(shù)組中第一次出現(xiàn)的位置 --> indexOf()
- 數(shù)組切片
- slice(startIndex,endIndex) --> 不包含endIndex
- slice() 只傳一個參數(shù) --> 則從startIndex截取到數(shù)組最后，包括最后一個元素。
<body>
<script>
var arr = [1,2,3,4,4];
// 1.通過下標查詢數(shù)組的值
console.log(arr[0]); // 1
// 2.通過值查詢數(shù)組中對應(yīng)的下標，只返回該值在數(shù)組中第一次出現(xiàn)的位置 --> indexOf()
var a = arr.indexOf(4);
console.log(a); // 3
// slice(startIndex,endIndex) --> 不包含endIndex
var b = arr.slice(2,4); // [3,4]
console.log(b);
// slice() 只傳一個參數(shù) --> 則從startIndex截取到數(shù)組最后，包括最后一個元素。
// 也可以用slice() 來進行克隆
var c = arr.slice(2);
console.log(c); // [3,4,4]
</script>
</body>
-
1.8 Array的splice方法 --> 拼接
- 1.利用splice進行數(shù)組指定位置添加
- number傳0，添加的item占據(jù)index的位置
- 2.利用splice進行數(shù)組刪除
- 刪除時，不寫item值，只傳2個參數(shù)，從下標為index的地方開始刪number個元素
// body
<body>
<script>
// splice(index,number,item)
// 1.利用splice進行數(shù)組指定位置添加
// number傳0，添加的item占據(jù)index的位置
var arr = [1,2,3,4];
arr.splice(2,0,"hello");
console.log(arr);
// 2.利用splice進行數(shù)組刪除
// 刪除時，不寫item值，只傳2個參數(shù)，從下標為index的地方開始刪number個元素
var arr2 = [1,2,3,4,5];
arr2.splice(1,2);
console.log(arr2)
</script>
</body>
-
1.9 join，將數(shù)組拼接為字符串
- join() --> 將數(shù)組拼接為字符串，參數(shù)為分隔符，默認為","
// body
<body>
<script>
// join() --> 將數(shù)組拼接為字符串，參數(shù)為分隔符，默認為","
var arr = ["hello","world","good"];
var b = arr.join();
console.log(b); // hello,world,good
console.log(typeof b); // string
var c = arr.join("-");
console.log(c); // hello-world-good
</script>
</body>
-
1.10 數(shù)組排序
- arr.sort(function(a,b){return a-b}); --> 將數(shù)組正序排序
- 如果想要逆序排序，則方法體 return b-a
// body
<body>
<script>
var arr = [22,1,32,12,15];
var b = arr.sort();
console.log(b); // 只排一部分，不要直接這么寫
var arr2= [22,1,32,12,15];
var c = arr2.sort(function (a, b2) {
return a-b2; // 逆序使用b2-a
});
console.log(c);
</script>
</body>
-
1.11 數(shù)組求和
- 使用reduce(function(){})方法
- 根據(jù)方法體的不同，也可以用來計算階層和等
// body
<body>
<script>
var arr = [1,2,3,4,5];
var sum = arr.reduce(function (a,b) {
return a+b; // 如果想要求階層積，則使用 a*b
});
console.log(sum);
</script>
</body>
-
1.12 數(shù)組反轉(zhuǎn)
- arr.reverse() --> 將數(shù)組倒序排列
// body
<body>
<script>
var arr = [1,2,3,4,5];
var b = arr.reverse();
console.log(b);
</script>
</body>
-
1.13 二維數(shù)組
- 二維數(shù)組，即數(shù)組中嵌套數(shù)組
// body
<body>
<script>
// 二維數(shù)組
var arr = [[1,2],[3,4],"hello"];
console.log(arr[0]); // [1,2];
console.log(arr[0][0]); // 1
</script>
</body>
2.string-在js中string為基本類型
-
2.1 基本類型的方法，不會改變原來的值，不同于引用類型
-
2.2 獲取字符串長度
-
2.3 字符串合并
- str.concat(str1) --> 將兩個字符串合并，參數(shù)str1在str末尾拼接
-
2.4 字符串查詢
- charAt(index) --> 輸出對應(yīng)下標的字符
- indexOf(str); --> 返回str在字符串中第一次出現(xiàn)的下標位置的下標，如果不存在于字符串中，則返回-1
-
2.5 字符串截取
- slice()，方法參考數(shù)組中的slice()方法
- substr(startIndex,len) --> 截取的起始位置，截取的長度
- substring(startIndex,endIndex) --> 和slice()一樣
// body
<body>
<script>
// 基本類型的方法，不會改變原來的值，不同于引用類型
var str = "hello world";
// 1.獲取字符串長度
var len = str.length;
console.log(len); // 11 空格也算字符串
// 2.字符串合并
// concat(str1) --> 將兩個字符串合并，參數(shù)str1在str末尾拼接
var add = str.concat(" add");
console.log(add); // hello world add
// 3.字符串查詢
// charAt(index) --> 輸出對應(yīng)下標的字符
var char = str.charAt(0);
console.log(char); // h
// indexOf(str); --> 返回str在字符串中第一次出現(xiàn)的下標位置的下標，如果不存在于字符串中，則返回-1
var index = str.indexOf("world");
console.log(index); // 6
// 4.字符串截取
// slice()
var a = "hello world";
var b = a.slice(1,4);
console.log(b); // ell
// substr(startIndex,len) --> 截取的起始位置，截取的長度
var subStr = a.substr(1,4);
console.log(subStr); // ello
// substring(startIndex,endIndex) --> 和slice()一樣
var subString = a.substring(1,4); // ell
console.log(subString);
</script>
</body>
-
2.6 split()字符串分割
- split() --> 將字符串按分割符分割成數(shù)組
- 不寫參數(shù)則為一個長度為1的數(shù)組，其中元素為str
// body
<body>
<script>
// split() --> 將字符串按分割符分割成數(shù)組
// 不寫參數(shù)則為一個長度為1的數(shù)組，其中元素為str
var str = "hello world";
var arr = str.split(" ");
console.log(arr);
// 如果使用空字符串為分割符，則所有的字符都會被分開
var arr1 = str.split("");
console.log(arr1);
</script>
</body>
-
2.7 字符串的方法
- search(value) --> 返回搜索字符的下標，沒有搜索到則返回-1
- match(value) --> 將匹配的內(nèi)容返回一個數(shù)組，沒有匹配的則返回一個null
- replace(value,newValue) --> 將字符串中第一個value替換為newValue，如果要替換所有的value，則要使用正則
// body
<body>
<script>
// search(value) --> 返回搜索字符的下標，沒有搜索到則返回-1
var a = "hello hello world";
var b = a.search("h");
console.log(b); // 0
// match(value) --> 將匹配的內(nèi)容返回一個數(shù)組，沒有匹配的則返回一個null
var c = a.match("l");
console.log(c); // ["l", index: 2, input: "hello world"]
// replace(value,newValue) --> 將字符串中第一個value替換為newValue
// 如果要替換所有的value，則要使用正則
var d = a.replace("hello","good");
console.log(d); // good world
</script>
</body>
3.正則表達式
-
3.1 正則表達式，又稱規(guī)則表達式，規(guī)則字符串中字符出現(xiàn)規(guī)則的表達式
- 1.語法： /pattern/attributes
- 2.attributes 為g時，代表全局搜索
-
3.2 備選字符集[abc] --> 特點，必須且只能多選一
- [a-z] [A-Z] [0-9] 連續(xù)的備選字符，表示范圍
-
3.3 預(yù)定義字符集
- 定義：針對常用的備選字符集提供的簡化符號
- \d --> [0-9]
- \w --> [0-9a-zA-Z_]
- \s --> 空格，tab，即匹配空白
- . --> 除換行符外所有字符
// body
<body>
<script>
// 正則表達式，又稱規(guī)則表達式，規(guī)則字符串中字符出現(xiàn)規(guī)則的表達式
// 1.語法： /pattern/attributes
// attributes 為g時，代表全局搜索
var a = "hello world";
var RE = /l/g;
var b = a.replace(RE,"*");
console.log(b); // he**o wor*d
// 2.備選字符集[abc] --> 特點，必須且只能多選一
var a2 = "上海，上天，上去，上海都";
var RE2 = /上[海天]/g;
var b2 = a2.replace(RE2,"**");
console.log(b2); // **，**，上去，**都
var a3 = "1234322dd";
var RE3 = /[0-9]/g;
var b3 = a3.replace(RE3,"*");
console.log(b3); // *******dd
// [a-z] [A-Z] [0-9] 連續(xù)的備選字符，表示范圍
var a4 = "hello world";
var RE4 = /[a-z]/g;
var b4 = a4.replace(RE4,"*");
console.log(b4); // ***** *****
// 3.預(yù)定義字符集
// 定義：針對常用的備選字符集提供的簡化符號
// \d --> [0-9]
var a5 = "hello 123123";
var RE5 = /\d/g;
console.log(a5.replace(RE5,"*")); // hello ******
// \w --> [0-9a-zA-Z_]
var a6 = "Hello_World@123";
var RE6 = /\w/g;
console.log(a6.replace(RE6,"*")); // ***********@***
// \s --> 空格，tab，即匹配空白
// . --> 除換行符外所有字符
</script>
</body>
-
3.4 量詞 --> 規(guī)定字符出現(xiàn)的次數(shù)
- {m}，規(guī)定字符最少出現(xiàn)m次
- regEXp.test(str) --> 正則表達式匹配字符串，返回boolean值
- {a,b} --> 代表出現(xiàn)的次數(shù)在a-b這個范圍，最少a次，最多b次
- ? --> 出現(xiàn)0次或一次
- ^ --> 以什么開頭
- $ --> 以什么結(jié)尾
- 固定搭配：^正則表達式$ -->表示從開頭到結(jié)尾的完整匹配
- 排除 [^abc] --> 除了abc
// body
<body>
<input type="text" id="txt" />
<button id="btn">確定</button>
<input type="text" id="phoneNum" />
<button id="btn2">確定</button>
<script>
// 4.量詞 --> 規(guī)定字符出現(xiàn)的次數(shù)
// regEXp.test(str) --> 正則表達式匹配字符串，返回boolean值
var RE = /^\d{6}$/; // 這里如果是全局搜索g 則會一次true 一次false 暫時不知道原因
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function () {
var value = txt.value;
var result = RE.test(value);
console.log(value+":"+result);
};
// {a,b} --> 代表出現(xiàn)的次數(shù)在a-b這個范圍，最少a次，最多b次
// + --> 出現(xiàn)一次或多次
// ? --> 出現(xiàn)0次或一次
// * --> 出現(xiàn)0次或多次
var a2 = "hello 2323";
var RE2 = /\d+/g;
console.log(RE2.test(a2));
// 電話號碼匹配正則
// ^ --> 以什么開頭
// $ --> 以什么結(jié)尾
var phoneRE = /^1[3-9]\d{9}$/;
var phoneNum = "17671266824";
console.log("是否為手機號碼："+phoneRE.test(phoneNum));
var phone = document.getElementById("phoneNum");
var btn2 = document.getElementById("btn2");
btn2.onclick = function (ev) {
var value = phone.value;
var result = phoneRE.test(value);
console.log(value+"："+result);
};
// 指定匹配位置 ^ $
// 固定搭配：^正則表達式$ -->表示從開頭到結(jié)尾的完整匹配
// 指定位置 ^開始的值，$結(jié)束的位置
var str = " hello";
var RE3 = /^\s+/; // 將開始位置的空格清空
console.log(str.replace(RE3,""));
// 排除 [^abc] --> 除了abc
var str4 = "abc232";
var RE4 = /[^abc]/g;
console.log(str4.replace(RE4,"*"));
// 電話號碼匹配正則2
// 以 +08 或者 0086開頭，可有可無 (\+08|0086)?
// 可以有多個空格，或者沒有 \s*
// 第一位為1，第二位3-9，后面9位為數(shù)字
var RE5 = /^(\+08|0086)?\s*1[3-9]\d{9}$/;
</script>
</body>
-
3.5 字符串方法使用正則
- 字符串中，支持正則的方法，search()，match()，replace()，split()
- 正則自帶的方法 test()
- str.match(regExp) 返回匹配到的，組成一個數(shù)組
- replace 將正則匹配的，替換為指定字符串
- split 按符合正則匹配的分割字符串，返回數(shù)組
// body
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">過濾</button>
<script>
// 字符串中，支持正則的方法，search()，match()，replace()，split()
// 正則自帶的方法 test()
// str.match(regExp) 返回匹配到的，組成一個數(shù)組
var str = "hello 13213 121";
var RE = /\d+/g; // 這里不用全局g，則后面的121不會被取到
var arr = str.match(RE);
console.log(arr);
// replace 將正則匹配的，替換為指定字符串
var RE2 = /天貓|淘寶/g;
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
txt.value = value.replace(RE2,"**");
};
// split 按符合正則匹配的分割字符串，返回數(shù)組
var str3 = "hello world";
var RE3 = /l/;
console.log(str3.split(RE3));
</script>
</body>
// body
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button id="btn">過濾</button>
<script>
var RE = /<[^<>]*>/g;
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
txt.value = value.replace(RE,"");
}
</script>
</body>
// body
<body>
<input type="text" id="txt">
<p id="content"></p>
<button id="btn">驗證</button>
<script>
// 郵箱的規(guī)則，一串數(shù)字，字母或者下劃線@一串數(shù)字英文.一串英文
var RE = /^\w+@[a-z0-9]+\.[a-z]+/;
var txt = document.getElementById("txt");
var content = document.getElementById("content");
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
var value = txt.value;
var result = RE.test(value);
console.log(result);
if (result){
content.innerHTML = "郵箱正確："+value;
content.style.color = "green";
}
else{
content.innerHTML = "郵箱格式不合法："+value;
content.style.color = "red";
}
}
</script>
</body>
