當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 数组和函数

發布時間：2023/12/16 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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數組的申明和初始化

掌握JavaScript數組遍歷的方法重點

掌握JavaScript數組增刪改查的方法重點難點

掌握JavaScript數組的內置函數重點

掌握JavaScript函數的高級運用

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個數前插入

變量的作用域

變量的位置不同，分為全局變量和局部變量

全局變量 - 作用范圍是所有代碼塊，也就是說在任何一個位置都可以直接訪問全局變量
局部變量 - 作用范圍是某一個代碼塊內部，也就是說只能在當前代碼塊內部使用。

函數參數數組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) 表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。

返回值

Type描述

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” 值

// forEach(function(value,index,array)) 循環 // 類似于let循環，相當于有n個index變量 arr.forEach(function(value,index,array){console.log(index,value) });

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