ES5-String
-
- 一、選擇排序
- 二、利用堆棧了解值傳遞與引用傳遞
- 三、JSON ：是一個跨平台跨語言的一種網絡資料傳輸格式。
- 四、嚴格模式
- 五、arguments ： 内置的僞數組對象（實參副本）
- 六、ES5新增的數組方法（都不會改變原數組）
-
- 1.indexOf（元素，[start]）：
- 2.lastIndexOf（元素，[start]）:
- 3.forEach（function(value,index,array){}） 周遊數組
- 4.map（function(value,index,array){return ...}）
- 5.filter（function(value,index,array){return 過濾條件}）
- 6.some（function(value,index,array){return ...}）
- 7.every（function(value,index,array){return ...}）
- 8.reduce（function(prev,next,index,array){return ...}）
- 七、String 字元串
-
- 1. 如何聲明字元串
- 2.屬性
- 3.方法 查 替 截 轉 （都不會改變原串）
-
- 查
-
- 1. indexOf（'字元串',start）
- 2.lastIndexOf（'字元串',start）
- 3.charAt（下标）
- 4.charCodeAt（下标）
- 替
-
- replace（舊串，新串）
- 截 截取字元串中指定範圍的子串
-
- 1.substring（start,end） 支援參數互換，不支援負數
- 2.slice（start,end）支援負數，不支援參數互換
- 3.substr（start,length）截取指定長度的字元串
- 轉
-
- 1.toUpperCase（） ： 小寫字母轉大寫字母
- 2.toLowerCase（） ： 大寫字母轉小寫字母
- 3.split（'切割符'，[length]） : 将字元串轉為數組
- 4.靜态方法
- 八、ASCII碼和字元串
- 案例
一、選擇排序
取一個元素與剩下所有的元素進行比較，複合條件，交換位置。
<script>
/*
取一個元素與剩下所有的元素進行比較，符合條件，交換位置。
選擇一個數與剩下的所有元素比較，符合條件，交換位置
*/
function fnSortSelect(){
arr = [3,9,5,12,4];
//一圈選擇一個數，
for(var i = 0;i < arr.length - 1;i ++){
//選擇的一個數與剩下的所有進行比較
for(var j = i;j < arr.length;j ++){
//符合條件
if(arr[i] < arr[j]){
//交換位置
var t = arr[j];
arr[j] = arr[i];
arr[i] = t;
}
}
}
// console.log(arr);
return arr;
}
</script>
二、利用堆棧了解值傳遞與引用傳遞
基本資料類型（隻有一個值，且值存放在棧空間中）的值都屬于值傳遞。
複合資料類型（多個值，值都存放在堆中，棧空間存放的是指向堆的位址）的值都都屬于引用傳遞。
<script>
/*
一個棧隻能存放一個資料
簡單資料類型（隻有一個資料）的變量都存放在棧裡面，是值傳遞。
符合資料類型（有多個資料）的變量的值都存放在堆裡面，棧裡面放的是值所在的堆的位址，是引用傳遞。
*/
//簡單資料類型
// var a = 3;
// var b = a;
// b = 4;
// console.log(a,b);//3 4
//複合資料類型
//數組
// var arr = [1,3,5];
// var list = arr;
// list[0] = 2;
// console.log(arr,list);//[2,3,5] [2,3,5]
//對象
// var obj = {id : 1,name : '蘋果',num : 9};
// var object = obj;
// obj.name = '桃';
// console.log(obj,object);//{id: 1, name: "桃", num: 9} {id: 1, name: "桃", num: 9}
// var a = 1;
// function fn1(a){
// a = 3;
// return a;
// }
// fn1(a);//1
var arr = [0];
function fn2(list){
list[0] = 1;
}
fn2(arr);
console.log(arr);//1
var arr = [1,2,3];
function fn3(list){
list = 5;
}
fn3(arr[1]);
console.log(arr);//1,2,3
</script>
三、JSON ：是一個跨平台跨語言的一種網絡資料傳輸格式。
[] ： 如果裡面有字元串，一定使用雙引号。
{} ： key必須加雙引号，value如果是字元串，必須加雙引号
注：在JSON中value的值不能是：undefined NaN function
infinity 一個JSON檔案裡隻能有一個json資料。
原生js環境 JSON
[1,2,'3'] [1,2,"3"]
{name : '張三'} {"name" : "張三"}
{'name' : "張三"}
{"name" : "張三"}
{eat : function(){return '吃';}}
四、嚴格模式
“use strict”; //必須放到作用域的開頭部分
什麼影響？
- 不能夠隐式聲明變量，必須添加關鍵字
- 函數的形參不允許重複
- 函數中形參值的變化不影響arguments中的值
- arguments中的callee方法不能再表示自己的函數（淘汰了）
- with（）：已禁用
- 新增關鍵字 eval arguments
- 取消了八進制
五、arguments ： 内置的僞數組對象（實參副本）
六、ES5新增的數組方法（都不會改變原數組）
1.indexOf（元素，[start]）：
查找元素在數組中第一次出現的下标位置。如果沒有找到，傳回-1；第二個參數，從哪個下标開始向後查找。
2.lastIndexOf（元素，[start]）:
從右向左查找元素在數組中第一次出現的下标位置。如果沒有找到，傳回-1；第二個參數，從哪個下标開始向前查找。
3.forEach（function(value,index,array){}） 周遊數組
ES5中操作數組的一種方法，主要功能是周遊數組，該語句需要一個回調函數作為參數，回調函數的形參依次為：value：周遊的數組内容，index：對應的索引，array：數組本身。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [
{
"user" : "張一山",
"age" : 28
},
{
"user" : "張二毛",
"age" : 29
},
{
"user" : "張三瘋",
"age" : 217
}
];
//一般函數寫法
arr.forEach(function(value){
console.log(value.user + ':' + value.age);
})
//回調函數寫法
arr.forEach((value,index)=> {
console.log(value.user + ':' + value.age);
console.log(index);
});
</script>
</body>
</html>
4.map（function(value,index,array){return …}）
周遊數組，傳回一個新數組（可以對數組中的每一個元素進行操作）
5.filter（function(value,index,array){return 過濾條件}）
過濾滿足條件的元素，傳回一個新數組
6.some（function(value,index,array){return …}）
判斷數組中的元素是否符合條件，隻要有一個符合條件，傳回true，同時結束循環。如果周遊完數組，發現都不符合條件，傳回false。
7.every（function(value,index,array){return …}）
判斷數組中的元素是否符合條件，如果周遊完數組，發現都符合條件，傳回true。如果有一個不符合條件，則傳回false，同時退出循環。
8.reduce（function(prev,next,index,array){return …}）
歸并。prev第一次循環的時候，取的是數組中第一個元素。next是依次從第二個元素開始周遊。從第二次循環開始，将prev與next運算後的結果再次賦給prev。
<script>
//1.indexof(value,start)
arr = [1,3,2,5,2,3,4,3,2];
//傳回3第一次出現時的下标
console.log(arr.indexOf(3));//1
//傳回從下标為2開始查找3第一次出現時的索引
console.log(arr.indexOf(3,2));//5
//2.lastIndexOf(value,start)
//從右向左查找，傳回3第一次出現時的下标
console.log(arr.lastIndexOf(3));//7
//從低二個參數所指的下标開始向左（前）查找，傳回3第一次出現時的下标
console.log(arr.lastIndexOf(3,2));//1
//3.forEach(function(value,index,array){})
// console.log(arr.forEach(function(value,index,array){}))
//周遊數組，沒有傳回值
arr.forEach(function(value,index,array){
console.log(value,index,array);
})
//4.map
//周遊數組，可以對數組中的每一個值進行操作。傳回一個新數組
console.log(arr.map(function(value){
return value * 2;
}))
//5.filter
//過濾數組，傳回滿足條件的新數組
console.log(arr.filter(function(value){
return value > 3;
}))
//6.some
//判斷數組中是否有滿足條件的值，隻要發現有一個滿足條件，就停止循環，傳回true。傳回值為true或false。
console.log(arr.some(function(val){
return val == 3;
}))
//7.every
//判斷數組中是否有滿足條件的值，隻要發現有一個不滿足條件，就停止循環，傳回true。傳回值為true或false。
console.log(arr.every(function(value){
return value == 3;
}))
//8.reduce
//第一次循環，prve取的是數組中的第一個元素。next依次從第二個元素開始周遊。從第二次循環開始，将Prve與next元素後的值再次賦給Prve。
var list = [1,2,3,4,5];
console.log(list.reduce(function(prve,next){
return prve * next;
}))
</script>
七、String 字元串
1. 如何聲明字元串
- 字面量 ’ ’ " "
- new String();
2.屬性
length 長度 字元串下标也是從0開始，最大下标是length - 1。
3.方法 查 替 截 轉 （都不會改變原串）
查
1. indexOf（‘字元串’,start）
查找字元串在父串中第一次出現時的下标位置。如果沒有找到，傳回-1；第二個參數，從哪個下标開始向後查找。
2.lastIndexOf（‘字元串’,start）
從右向左查找，查找字元串在父串中第一次出現時的下标位置。如果沒有找到，傳回-1；第二個參數，從哪個下标開始向前查找。
3.charAt（下标）
查找指定下标位置的字元
4.charCodeAt（下标）
查找指定下标位置字元的編碼值
<script>
var str = 'how do you do';
//1.indexOf('字元串'start);
console.log(str.indexOf('do'));//4
//2.lastIndexOf()
console.log(str.lastIndexOf('do'));//11
//3.charAt()
//查找指定下标位置的字元
console.log(str.charAt('4'));//d
//周遊字元串
for(var i = 0,len = str.length;i < len;i ++){
console.log(str.charAt(i));
}
//4.charCodeAt()
console.log(str.charCodeAt(4));//100
//靜态方法 String.fromCharCode()
console.log(String.fromCharCode(str.charCodeAt(4)));//d
</script>
替
replace（舊串，新串）
替換字元串，一次隻能替換一個
<script>
str = "how you are you";
//一次隻能替換一個
console.log(str.replace('y','b'));
console.log(str.replace('are','aree'))
//全部替換
while(str.indexOf('y') !== -1){
str = str.replace('y','t');
}
console.log(str);
</script>
截 截取字元串中指定範圍的子串
1.substring（start,end） 支援參數互換，不支援負數
2.slice（start,end）支援負數，不支援參數互換
3.substr（start,length）截取指定長度的字元串
<script>
str = 'good good study,day day up';
console.log(str.substring(5,6));
console.log(str.slice(5,6));
console.log(str.substr(5,6));
</script>
轉
1.toUpperCase（） ： 小寫字母轉大寫字母
2.toLowerCase（） ： 大寫字母轉小寫字母
3.split（‘切割符’，[length]） : 将字元串轉為數組
<script>
str = 'How Are You';
console.log(str.toUpperCase());
console.log(str.toLowerCase());
console.log(str.split(' '));
console.log(str.split(''));
</script>
4.靜态方法
String.fromCharCode（） 将編碼轉為字元
八、ASCII碼和字元串
中文在ASCII值中的範圍：十六進制
4E00 19968
9FA5 40869
20902 （回文數）
案例
<body>
<!-- 五、影響職業因素 -->
<table border = '1' cellspacing = '0' width = '300'>
<tr align = 'center'>
<td><b>影響職業因素</b></td>
</tr>
<tr align = 'center'>
<td>請輸入一個單詞：<input type="text" id = 'in_txt'></td>
</tr>
<tr align = 'center'>
<td>結果：<input type="text" id = 'out_txt'></td>
</tr>
<tr align = 'center'>
<td>
<input type="button" value="計算" id = 'cal'>
<input type="button" value="清空" id = 'clear'>
</td>
</tr>
</table>
<!-- 方法一 -->
<!-- <script>
//擷取對象
var o_in_txt = document.getElementById('in_txt');
var o_out_txt = document.getElementById('out_txt');
var o_cal = document.getElementById('cal');
var o_clear = document.getElementById('clear');
//點選事件
o_cal.onclick = function(){
//擷取輸入框的内容
var str = o_in_txt.value;
//把輸入框的内容轉為數字存放在字元串裡
var str_code = '';
for(var i = 0,len = str.length;i < len;i ++){
//轉為的數字都依次拼接到字元串裡，并用空格把每個數字隔開，這樣友善下面截取每個數字
str_code += str.charCodeAt(i) - 96 + ' ';
}
console.log(str_code);
//因為每個數字後面都有一個加号，而最後一個數字後又不需要加号，是以就把最後一個加号截掉。然後把字元串轉為以空格為分隔符分隔的數組，然後截取每一個數字,最後用+連接配接每一個數字。
str_code = str_code.substring(0,str_code.length-1).split(' ').join('+');
// str_code = str_code
console.log(str_code);
//計算和
var sum = eval(str_code);
//将數字和和都放到輸入框裡
o_out_txt.value = str_code + '=' + sum;
}
o_clear.onclick = function(){
o_in_txt.value = '';
o_out_txt.value = '';
}
</script> -->
<!-- 方法二 -->
<script>
//擷取對象
var o_in_txt = document.getElementById('in_txt');
var o_out_txt = document.getElementById('out_txt');
var o_cal = document.getElementById('cal');
var o_clear = document.getElementById('clear');
//點選事件
o_cal.onclick = function(){
//先把26個字母放到一個字元串裡,讓每一個字母和它在字元串裡的下标一一對應。
var word = ' abcdefghijklmnopqrstuvwxyz'
//放輸入的字元對應的數字
var str = '';
//擷取輸入框裡面的字元
var o_str = o_in_txt.value;
var sum = 0;
//判斷輸入框裡面的字元
for(var i = 0;i < o_str.length;i ++){
for(var j = 0;j < word.length;j ++){
//如果輸入框裡面的字元和word裡面的字元一緻，就把該字元在word裡面對應的位置放到str裡面。
if(o_str[i] === word[j]){
str += j + '+';
sum += j;
}
}
}
//最後一個數字後面不需要加号，截掉。
console.log(str.substring(0,str.length-1) + '=' + sum);
o_out_txt.value = str.substring(0,str.length-1) + '=' + sum;
}
o_clear.onclick = function(){
o_in_txt.value = '';
o_out_txt.value = '';
}
</script>
</body>
![【每日一練】59—寫一個中秋月餅的響應式卡片[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)