當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 数组和函数
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 数组和函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript 數組和函數
- 學習目標
- JavaScript數組
- 什么是數組?
- 創建數組
- 數組存儲
- 訪問數組元素
- 數組遍歷
- 刪除數組元素
- 案例01
- 案例02
- 添加數組元素
- 案例03
- 案例04
- JavaScript 函數（高級）
- 函數參數
- 通用方法：刪除第n個：
- 通用方法：在第N個數前插入
- 變量的作用域
- 函數參數數組Arguments
- 案例06
- 函數返回值
- JavaScript數組API
- concat()
- fill()
- join()&toString()
- push()
- pop()
- unshift()
- reverse()
- slice()
- splice()
- forEach()
- every()
- some()
- filter()
- find()
- map()
- reduce()
- for循環
學習目標
JavaScript數組
什么是數組?
數組是使用單獨的變量名來存儲一系列的多個值。如：可以用數組來保存一個會員用戶的用戶名、帳號、密碼、電話號碼等等。
創建數組
創建一個數組，有2種方法
使用new Array(“張三”,“zhangshan”)創建數組
//創建名字為user的數組，里面有四個值 var user = new Array("張三","zhangshan","123456","13594876584"); //或者 var user = new Array(); user[0] = "張三"; user[1] = "zhangshan"; user[2] = "123456"; user[3] = "13594876584";使用方括號var user = [“張三”,“zhangshan”]
//創建名字為user的數組，里面有四個值 var user = ["張三","zhangshan","123456","13594876584"];數組存儲
-
棧內存 - 用于存儲局部變量，數據使用完（程序退出局部變量作用域后），所占內存自動釋放。
-
堆內存 - 用于存儲數組和對象，通過new建立的實例都存放在堆內存中。
-
訪問數組元素
通過指定數組名以及索引號碼，可以訪問某個特定的元素，如：[0] 是數組的第一個元素。[1] 是數組的第二個元素
//創建名字為user的數組，里面有四個值 var user = new Array("張三","zhangshan","123456","13594876584");//訪問數組很簡單，只需要使用方括號加下標 alert(user[0]); //會彈窗輸出“張三”//修改數組值 user[0] = "李四";//把數組中第1個元素的值修改為“李四” user[1] = "lisi";//把數組中第2個元素的值修改為“lisi” user[2] = "789";//把數組中第3個元素的值修改為“789” user[3] = "13569845684";//把數組中第4個元素的值修改為“13569845684”數組遍歷
數組的遍歷通常使用for循環，for循環 for / in簡寫的循環。通過數組的length屬性獲取數組的長度
//創建名字為user的數組，里面有四個值 var user = new Array("張三","zhangshan","123456","13594876584");for (var i in user) {document.write(user[i]+"<br/>"); }//user.length:獲取User數組的長度（個數） for (var i=0;i<user.length;i++) {document.write(user[i]+"<br/>"); }刪除數組元素
數組的長度在數組被初始化的時候確定，如需刪除數組中的元素，應該把需要刪除的元素移到數組的末尾，然后將數組的長度減1
案例01
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創建一個空的數組var num = new Array();//用循環給數組初始化10個數據（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//刪除最后一個數num.length = 9;for(a in num){document.write(num[a]+" ");}</script> </html>如需刪除中間的元素，需要把該元素后面的所以元素往前移動一個位置，然后將數組長度減1。
案例02
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創建一個空的數組$num = new Array();//用循環給數組初始化10個數據（1···10）for ($i = 0;$i < 10;$i++) {$num[$i] = $i + 1;}//刪除第3個數，需要把第3個數后面的輸全部往前移動一位for($i = 2,$temp = 0;$i < 10;$i++){$num[$i] = $num[$i+1];}$num.length = 9;//輸出顯示刪除后的結果for($a in $num){document.write($num[$a]+" ");}</script> </html>添加數組元素
如果是在數組末尾添加數組元素，操作很簡單，只需要增加一個下標就可以了
案例03
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創建一個空的數組num = new Array();//用循環給數組初始化10個數據（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//在數組末尾添加一個數據num[10] = 100;//輸出顯示刪除后的結果for(a in num){document.write(num[a]+" ");}</script> </html>如果要在數組中間插入數據，那就需要使用循環，從需要加入數據的位置開始，講后面的數據往后移動一位，然后在該位置上插入數據。
案例04
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創建一個空的數組num = new Array();//用循環給數組初始化10個數據（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//在數組第5個位置添加一個數據for (i = 10;i > 5;i--) {num[i] = i - 1;}num[4] = 500;//輸出顯示刪除后的結果for(a in num){document.write(num[a]+" ");}</script> </html>JavaScript 函數（高級）
函數參數
函數名后面的括號里面寫的就是參數。參數的作用就是用于函數內部和函數外部數據的傳遞。也就是說：可以通過參數把函數外面的數據傳入函數內部，并在內部使用，而且不會改變外部數據的值。
參數其實也就是變量。
語法：
function functionName(parameter1, parameter2, parameter3) {// 要執行的代碼…… }參數的個數不限
function getNumber1(number){alert(number); } function getNumber2(n1,n2){alert(n1 + n2); }參數只能在函數內部使用，不可以在函數外使用函數內的參數和變量。如：
function getNumber3($number){$number = 100; } document.write($number); // 報錯會出現如下錯誤提示
[
通用方法：刪除第n個：
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');//刪除第N個數據 function deletes(n) {for(var i = n - 1; i < arr.length-1; i++) {arr[i] = arr[i + 1]}arr.length -= 1; } deletes(4); document.write(arr);通用方法：在第N個數前插入
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas'); //[前面]插入數據 function add(n,data) {if(n > arr.length) {arr[arr.length] = data;} else {for(var i = arr.length; i >= n - 1; i--) {arr[i] = arr[i - 1]}arr[n - 1] = data;} } add(3,999); document.write(arr);變量的作用域
變量的位置不同，分為全局變量和局部變量
- 全局變量 - 作用范圍是所有代碼塊，也就是說在任何一個位置都可以直接訪問全局變量
- 局部變量 - 作用范圍是某一個代碼塊內部，也就是說只能在當前代碼塊內部使用。
函數參數數組Arguments
參數數組又叫可變參數，可以接受任意多個參數，而且創建函數的適合不需要指定參數的個數，再使用函數的時候確定參數個數即可。
案例06
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">x = sumAll(1, 123, 500, 115, 44, 88);function sumAll() {var sum = 0;for(var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}document.write(x)</script> </html>結果：871
函數返回值
有時，我們會希望函數將值返回調用它的地方。
通過使用 return 語句就可以實現。
在使用 return 語句時，函數會停止執行，并返回指定的值。
//定義函數 function myFunction() {var x = 5;return x;//在這里返回一個值，并且結束函數console.log(x);//這條語句不會執行 }//使用函數 var ret = myFunction()//使用函數的時候會獲得函數的返回值，并保存在ret變量里JavaScript數組API
concat()
連接兩個或多個數組
array1.concat(array2, array3, ... , arrayX);案例07
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12");$arr2 = new Array("a","bb","ccc");$arr3 = new Array("哈哈","嘿嘿");$result = $arr1.concat($arr2,$arr3);document.write($result);</script> </html>效果展示
fill()
用一個固定值替換數組的元素
array.fill(value, start, end);注意: IE 11 及更早版本不支持 fill() 方法。
案例08
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$arr1.fill('XXXX',1,5);document.write($arr1);</script> </html>效果展示
join()&toString()
數組變成字符串
案例09
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$r = $arr1.join();$b = $arr1.toString();document.write($r);document.write("<br/>");document.write($b);</script> </html>效果展示
把字符串分割為字符串數組string.split(separator,limit)
push()
向數組末尾添加一個或多個元素，并返回新的長度
array.push(item1, item2, ..., itemX);案例10
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$r = $arr1.push("你是誰");document.write($arr1);document.write("<br/>");document.write($r);</script> </html>效果展示
pop()
刪除數組的最后一個元素并返回刪除的元素
案例11
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$r = $arr1.pop();document.write($arr1);document.write("<br/>");document.write($r);</script> </html>效果展示
unshift()
向數向數組的開頭添加一個或更多元素，并返回新的長度
array.unshift(item1,item2, ..., itemX)案例12
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$r = $arr1.unshift("多啦阿曼","分化");document.write($arr1);document.write("<br/>");document.write($r);</script> </html>效果展示
刪除并返回數組的第一個元素
案例13
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$r = $arr1.shift();document.write($arr1);document.write("<br/>");document.write($r);</script> </html>效果展示
reverse()
反轉數組的元素順序
案例
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">$arr1 = new Array("10","12","哈哈");$arr1.reverse();document.write($arr1);</script> </html>slice()
提取數組部分元素
array.slice(start, end);參數 Values
| start | 可選。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2) 表示提取原數組中的倒數第二個元素到最后一個元素（包含最后一個元素）。 |
| end | 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。 |
返回值
| Array | 返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。 |
splice()
添加/刪除項目，然后返回被刪除的項目
該方法會改變原始數組。
arrayObject.splice(index,howmany,item1,.....,itemX);參數
| index | 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。 |
| howmany | 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。 |
| item1, …, itemX | 可選。向數組添加的新項目。 |
forEach()
調用數組的每個元素
注意: forEach() 對于空數組是不會執行回調函數的。
array.forEach(function(currentValue, index, arr), thisValue)參數
| function(currentValue, index, arr) | 必需。 數組中每個元素需要調用的函數。 函數參數:currentValue必需。當前元素index可選。當前元素的索引值。arr可選。當前元素所屬的數組對象。 |
| thisValue | 可選。傳遞給函數的值一般用 “this” 值。 如果這個參數為空， “undefined” 會傳遞給 “this” 值 |
every()
檢測數組所有元素是否都符合指定條件
every() 方法使用指定函數檢測數組中的所有元素：
- 如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
- 如果所有元素都滿足條件，則返回 true。
注意： every() 不會對空數組進行檢測。
注意： every() 不會改變原始數組。
array.every(function(currentValue,index,arr), thisValue)參數
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬于的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例
// every:判斷數組中每一個元素是否都符合要求 result = arr.every(function(value,index,array){if(value < 10){return true;}return false; }); console.log(result);some()
檢測數組中的元素至少有一個滿足指定條件
some() 方法會依次執行數組的每個元素：
- 如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執行檢測。
- 如果沒有滿足條件的元素，則返回false。
注意： some() 不會對空數組進行檢測。
注意： some() 不會改變原始數組。
array.some(function(currentValue,index,arr),thisValue)參數
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬于的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例
// some:判斷數組中每一個元素是否都符合要求 result = arr.some(function(value,index,array){if(value < 10){return true;}return false; }); console.log(result);filter()
檢查指定數組中符合條件的所有元素
注意： filter() 不會對空數組進行檢測。
注意： filter() 不會改變原始數組。
array.filter(function(currentValue,index,arr), thisValue)參數
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬于的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值為 “undefined” |
案例：
// filter:判斷數組中每一個元素是否都符合要求 result = arr.filter(function(value,index,array){if(value < 10){return value;} }); console.log(result);find()
返回符合條件的數組的第一個元素的值。
find() 方法為數組中的每個元素都調用一次函數執行：
- 當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。
- 如果沒有符合條件的元素返回 undefined
注意: find() 對于空數組，函數是不會執行的。
注意: find() 并沒有改變數組的原始值。
array.find(function(currentValue, index, arr),thisValue)參數
| function(currentValue, index,arr) | 必需。數組每個元素需要執行的函數。 函數參數:currentValue必需。當前元素index可選。當前元素的索引值arr可選。當前元素所屬的數組對象 |
| thisValue | 可選。 傳遞給函數的值一般用 “this” 值。 如果這個參數為空， “undefined” 會傳遞給 “this” 值 |
案例：
// find:判斷數組中每一個元素是否都符合要求 result = arr.find(function(value,index,array){if(value < 10){return value;} }); console.log(result);map()
返回原始數組元素調用函數處理后的新數組
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。
array.map(function(currentValue,index,arr), thisValue)參數
| function(currentValue, index,arr) | 必須。函數，數組中的每個元素都會執行這個函數 函數參數:currentValue必須。當前元素的值index可選。當前元素的索引值arr可選。當前元素屬于的數組對象 |
| thisValue | 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。 如果省略了 thisValue，或者傳入 null、undefined，那么回調函數的 this 為全局對象。 |
案例:
// map:對數組中的元素統一處理 result = arr.map(function(value,index,array){return value * value; }); console.log(result);reduce()
reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函數，用于函數的 compose。
注意: reduce() 對于空數組是不會執行回調函數的。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)參數：
| function(total,currentValue, index,arr) | 必需。用于執行每個數組元素的函數。 total必需。初始值, 或者計算結束后的返回值。 currentValue必需。當前元素。 currentIndex可選。當前元素的索引arr可選。當前元素所屬的數組對象。 |
| initialValue | 可選。傳遞給函數的初始值 |
如：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><p>點擊按鈕后對數組元素進行四舍五入并計算總和。</p><button onclick="myFunction()">點我</button><p>數組元素之和: <span id="demo"></span></p><script>var numbers = [15.5, 2.3, 1.1, 4.7];function getSum(total, num) {return total + Math.round(num);}function myFunction(item) {document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);}</script></body> </html>for循環
// 數組的遍歷 arr = [1,2,3,4,5,6,7,8,9,"aaa1",true,false]; // 普通for循環,公用一個i for (var i = 0; i < arr.length; i++) {//console.log(arr[i]) } // 增強for循環,相當于有n個i變量 for (let i = 0; i < arr.length; i++) {//console.log(arr[i]) } // 增強for循環,i是下標，數組和對象 for (let i in arr) {//console.log(arr[i]) } // 增強for循環,i是值，數組和對象 for (let s of arr) {//console.log(s) }總結
以上是生活随笔為你收集整理的JavaScript 数组和函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SuperMemo导出html,使用思维
- 下一篇： javascript中变量冒号方法 如d