當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 数组和函数

發(fā)布時間：2023/12/16 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 数组和函数小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

JavaScript 數(shù)組和函數(shù)

- 學(xué)習(xí)目標(biāo)
- JavaScript數(shù)組
- - 什么是數(shù)組?
  - 創(chuàng)建數(shù)組
  - 數(shù)組存儲
  - 訪問數(shù)組元素
  - 數(shù)組遍歷
  - 刪除數(shù)組元素
  - - 案例01
    - 案例02
  - 添加數(shù)組元素
  - - 案例03
    - 案例04
- JavaScript 函數(shù)（高級）
- - 函數(shù)參數(shù)
  - - 通用方法：刪除第n個：
    - 通用方法：在第N個數(shù)前插入
  - 變量的作用域
  - 函數(shù)參數(shù)數(shù)組Arguments
  - - 案例06
  - 函數(shù)返回值
- JavaScript數(shù)組API
- - concat()
  - fill()
  - join()&toString()
  - push()
  - pop()
  - unshift()
  - reverse()
  - slice()
  - splice()
  - forEach()
  - every()
  - some()
  - filter()
  - find()
  - map()
  - reduce()
  - for循環(huán)

學(xué)習(xí)目標(biāo)

掌握JavaScript數(shù)組的申明和初始化

掌握JavaScript數(shù)組遍歷的方法重點

掌握JavaScript數(shù)組增刪改查的方法重點難點

掌握JavaScript數(shù)組的內(nèi)置函數(shù) 重點

掌握JavaScript函數(shù)的高級運用

JavaScript數(shù)組

什么是數(shù)組?

數(shù)組是使用單獨的變量名來存儲一系列的多個值。如：可以用數(shù)組來保存一個會員用戶的用戶名、帳號、密碼、電話號碼等等。

創(chuàng)建數(shù)組

創(chuàng)建一個數(shù)組，有2種方法

使用new Array(“張三”,“zhangshan”)創(chuàng)建數(shù)組

//創(chuàng)建名字為user的數(shù)組，里面有四個值 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”]

//創(chuàng)建名字為user的數(shù)組，里面有四個值 var user = ["張三","zhangshan","123456","13594876584"];

數(shù)組存儲

棧內(nèi)存 - 用于存儲局部變量，數(shù)據(jù)使用完（程序退出局部變量作用域后），所占內(nèi)存自動釋放。
堆內(nèi)存 - 用于存儲數(shù)組和對象，通過new建立的實例都存放在堆內(nèi)存中。
-

訪問數(shù)組元素

通過指定數(shù)組名以及索引號碼，可以訪問某個特定的元素，如：[0] 是數(shù)組的第一個元素。[1] 是數(shù)組的第二個元素

//創(chuàng)建名字為user的數(shù)組，里面有四個值 var user = new Array("張三","zhangshan","123456","13594876584");//訪問數(shù)組很簡單，只需要使用方括號加下標(biāo) alert(user[0]); //會彈窗輸出“張三”//修改數(shù)組值 user[0] = "李四";//把數(shù)組中第1個元素的值修改為“李四” user[1] = "lisi";//把數(shù)組中第2個元素的值修改為“l(fā)isi” user[2] = "789";//把數(shù)組中第3個元素的值修改為“789” user[3] = "13569845684";//把數(shù)組中第4個元素的值修改為“13569845684”

數(shù)組遍歷

數(shù)組的遍歷通常使用for循環(huán)，for循環(huán) for / in簡寫的循環(huán)。通過數(shù)組的length屬性獲取數(shù)組的長度

//創(chuàng)建名字為user的數(shù)組，里面有四個值 var user = new Array("張三","zhangshan","123456","13594876584");for (var i in user) {document.write(user[i]+"<br/>"); }//user.length:獲取User數(shù)組的長度（個數(shù)） for (var i=0;i<user.length;i++) {document.write(user[i]+"<br/>"); }

刪除數(shù)組元素

數(shù)組的長度在數(shù)組被初始化的時候確定，如需刪除數(shù)組中的元素，應(yīng)該把需要刪除的元素移到數(shù)組的末尾，然后將數(shù)組的長度減1

案例01

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創(chuàng)建一個空的數(shù)組var num = new Array();//用循環(huán)給數(shù)組初始化10個數(shù)據(jù)（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//刪除最后一個數(shù)num.length = 9;for(a in num){document.write(num[a]+" ");}</script> </html>

如需刪除中間的元素，需要把該元素后面的所以元素往前移動一個位置，然后將數(shù)組長度減1。

案例02

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創(chuàng)建一個空的數(shù)組$num = new Array();//用循環(huán)給數(shù)組初始化10個數(shù)據(jù)（1···10）for ($i = 0;$i < 10;$i++) {$num[$i] = $i + 1;}//刪除第3個數(shù)，需要把第3個數(shù)后面的輸全部往前移動一位for($i = 2,$temp = 0;$i < 10;$i++){$num[$i] = $num[$i+1];}$num.length = 9;//輸出顯示刪除后的結(jié)果for($a in $num){document.write($num[$a]+" ");}</script> </html>

添加數(shù)組元素

如果是在數(shù)組末尾添加數(shù)組元素，操作很簡單，只需要增加一個下標(biāo)就可以了

案例03

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創(chuàng)建一個空的數(shù)組num = new Array();//用循環(huán)給數(shù)組初始化10個數(shù)據(jù)（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//在數(shù)組末尾添加一個數(shù)據(jù)num[10] = 100;//輸出顯示刪除后的結(jié)果for(a in num){document.write(num[a]+" ");}</script> </html>

如果要在數(shù)組中間插入數(shù)據(jù)，那就需要使用循環(huán)，從需要加入數(shù)據(jù)的位置開始，講后面的數(shù)據(jù)往后移動一位，然后在該位置上插入數(shù)據(jù)。

案例04

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body><script type="text/javascript">//創(chuàng)建一個空的數(shù)組num = new Array();//用循環(huán)給數(shù)組初始化10個數(shù)據(jù)（1···10）for (i = 0;i < 10;i++) {num[i] = i + 1;}//在數(shù)組第5個位置添加一個數(shù)據(jù)for (i = 10;i > 5;i--) {num[i] = i - 1;}num[4] = 500;//輸出顯示刪除后的結(jié)果for(a in num){document.write(num[a]+" ");}</script> </html>

JavaScript 函數(shù)（高級）

函數(shù)參數(shù)

函數(shù)名后面的括號里面寫的就是參數(shù)。參數(shù)的作用就是用于函數(shù)內(nèi)部和函數(shù)外部數(shù)據(jù)的傳遞。也就是說：可以通過參數(shù)把函數(shù)外面的數(shù)據(jù)傳入函數(shù)內(nèi)部，并在內(nèi)部使用，而且不會改變外部數(shù)據(jù)的值。

參數(shù)其實也就是變量。

語法：

function functionName(parameter1, parameter2, parameter3) {// 要執(zhí)行的代碼…… }

參數(shù)的個數(shù)不限

function getNumber1(number){alert(number); } function getNumber2(n1,n2){alert(n1 + n2); }

參數(shù)只能在函數(shù)內(nèi)部使用，不可以在函數(shù)外使用函數(shù)內(nèi)的參數(shù)和變量。如：

function getNumber3($number){$number = 100; } document.write($number); // 報錯

會出現(xiàn)如下錯誤提示

[

通用方法：刪除第n個：

var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');//刪除第N個數(shù)據(jù) 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個數(shù)前插入

變量的作用域

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

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

函數(shù)參數(shù)數(shù)組Arguments

參數(shù)數(shù)組又叫可變參數(shù)，可以接受任意多個參數(shù)，而且創(chuàng)建函數(shù)的適合不需要指定參數(shù)的個數(shù)，再使用函數(shù)的時候確定參數(shù)個數(shù)即可。

案例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>

結(jié)果：871

函數(shù)返回值

有時，我們會希望函數(shù)將值返回調(diào)用它的地方。

通過使用 return 語句就可以實現(xiàn)。

在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值。

//定義函數(shù) function myFunction() {var x = 5;return x;//在這里返回一個值，并且結(jié)束函數(shù)console.log(x);//這條語句不會執(zhí)行 }//使用函數(shù) var ret = myFunction()//使用函數(shù)的時候會獲得函數(shù)的返回值，并保存在ret變量里

JavaScript數(shù)組API

concat()

連接兩個或多個數(shù)組

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()

用一個固定值替換數(shù)組的元素

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()

數(shù)組變成字符串

案例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>

效果展示

把字符串分割為字符串?dāng)?shù)組string.split(separator,limit)

push()

向數(shù)組末尾添加一個或多個元素，并返回新的長度

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()

刪除數(shù)組的最后一個元素并返回刪除的元素

案例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()

向數(shù)向數(shù)組的開頭添加一個或更多元素，并返回新的長度

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>

效果展示

刪除并返回數(shù)組的第一個元素

案例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()

反轉(zhuǎn)數(shù)組的元素順序

案例

<!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()

提取數(shù)組部分元素

array.slice(start, end);

參數(shù) Values

參數(shù)描述

start

可選。規(guī)定從何處開始選取。如果是負數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。如果該參數(shù)為負數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個元素開始提取，slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個元素到最后一個元素（包含最后一個元素）。

end

可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果該參數(shù)為負數(shù)，則它表示在原數(shù)組中的倒數(shù)第幾個元素結(jié)束抽取。 slice(-2,-1) 表示抽取了原數(shù)組中的倒數(shù)第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數(shù)第二個元素）。

返回值

Type描述

Array

返回一個新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

splice()

添加/刪除項目，然后返回被刪除的項目

該方法會改變原始數(shù)組。

arrayObject.splice(index,howmany,item1,.....,itemX);

參數(shù)

參數(shù)描述

index	必需。整數(shù)，規(guī)定添加/刪除項目的位置，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany	必需。要刪除的項目數(shù)量。如果設(shè)置為 0，則不會刪除項目。
item1, …, itemX	可選。向數(shù)組添加的新項目。

forEach()

調(diào)用數(shù)組的每個元素

注意: forEach() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

array.forEach(function(currentValue, index, arr), thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index, arr)	必需。數(shù)組中每個元素需要調(diào)用的函數(shù)。函數(shù)參數(shù):currentValue必需。當(dāng)前元素index可選。當(dāng)前元素的索引值。arr可選。當(dāng)前元素所屬的數(shù)組對象。
thisValue	可選。傳遞給函數(shù)的值一般用 “this” 值。如果這個參數(shù)為空， “undefined” 會傳遞給 “this” 值

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

every()

檢測數(shù)組所有元素是否都符合指定條件

every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素：

如果數(shù)組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩余的元素不會再進行檢測。
如果所有元素都滿足條件，則返回 true。

注意： every() 不會對空數(shù)組進行檢測。

注意： every() 不會改變原始數(shù)組。

array.every(function(currentValue,index,arr), thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index,arr)	必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù) 函數(shù)參數(shù):currentValue必須。當(dāng)前元素的值index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素屬于的數(shù)組對象
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 “this” 的值。如果省略了 thisValue ，“this” 的值為 “undefined”

案例

// every:判斷數(shù)組中每一個元素是否都符合要求 result = arr.every(function(value,index,array){if(value < 10){return true;}return false; }); console.log(result);

some()

檢測數(shù)組中的元素至少有一個滿足指定條件

some() 方法會依次執(zhí)行數(shù)組的每個元素：

如果有一個元素滿足條件，則表達式返回true , 剩余的元素不會再執(zhí)行檢測。
如果沒有滿足條件的元素，則返回false。

注意： some() 不會對空數(shù)組進行檢測。

注意： some() 不會改變原始數(shù)組。

array.some(function(currentValue,index,arr),thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index,arr)	必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù) 函數(shù)參數(shù):currentValue必須。當(dāng)前元素的值index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素屬于的數(shù)組對象
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 “this” 的值。如果省略了 thisValue ，“this” 的值為 “undefined”

案例

// some:判斷數(shù)組中每一個元素是否都符合要求 result = arr.some(function(value,index,array){if(value < 10){return true;}return false; }); console.log(result);

filter()

檢查指定數(shù)組中符合條件的所有元素

注意： filter() 不會對空數(shù)組進行檢測。

注意： filter() 不會改變原始數(shù)組。

array.filter(function(currentValue,index,arr), thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index,arr)	必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù) 函數(shù)參數(shù):currentValue必須。當(dāng)前元素的值index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素屬于的數(shù)組對象
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 “this” 的值。如果省略了 thisValue ，“this” 的值為 “undefined”

案例：

// filter:判斷數(shù)組中每一個元素是否都符合要求 result = arr.filter(function(value,index,array){if(value < 10){return value;} }); console.log(result);

find()

返回符合條件的數(shù)組的第一個元素的值。

find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：

當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。
如果沒有符合條件的元素返回 undefined

注意: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。

注意: find() 并沒有改變數(shù)組的原始值。

array.find(function(currentValue, index, arr),thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index,arr)	必需。數(shù)組每個元素需要執(zhí)行的函數(shù)。函數(shù)參數(shù):currentValue必需。當(dāng)前元素index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素所屬的數(shù)組對象
thisValue	可選。傳遞給函數(shù)的值一般用 “this” 值。如果這個參數(shù)為空， “undefined” 會傳遞給 “this” 值

案例：

// find:判斷數(shù)組中每一個元素是否都符合要求 result = arr.find(function(value,index,array){if(value < 10){return value;} }); console.log(result);

map()

返回原始數(shù)組元素調(diào)用函數(shù)處理后的新數(shù)組

map() 方法按照原始數(shù)組元素順序依次處理元素。

注意： map() 不會對空數(shù)組進行檢測。

注意： map() 不會改變原始數(shù)組。

array.map(function(currentValue,index,arr), thisValue)

參數(shù)

參數(shù)描述

function(currentValue, index,arr)	必須。函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù) 函數(shù)參數(shù):currentValue必須。當(dāng)前元素的值index可選。當(dāng)前元素的索引值arr可選。當(dāng)前元素屬于的數(shù)組對象
thisValue	可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 “this” 的值。如果省略了 thisValue，或者傳入 null、undefined，那么回調(diào)函數(shù)的 this 為全局對象。

案例:

// map:對數(shù)組中的元素統(tǒng)一處理 result = arr.map(function(value,index,array){return value * value; }); console.log(result);

reduce()

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函數(shù)，用于函數(shù)的 compose。

注意: reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數(shù)：

參數(shù)描述

function(total,currentValue, index,arr)	必需。用于執(zhí)行每個數(shù)組元素的函數(shù)。 total必需。初始值, 或者計算結(jié)束后的返回值。 currentValue必需。當(dāng)前元素。 currentIndex可選。當(dāng)前元素的索引arr可選。當(dāng)前元素所屬的數(shù)組對象。
initialValue	可選。傳遞給函數(shù)的初始值

如：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><p>點擊按鈕后對數(shù)組元素進行四舍五入并計算總和。</p><button onclick="myFunction()">點我</button><p>數(shù)組元素之和: <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循環(huán)

// 數(shù)組的遍歷 arr = [1,2,3,4,5,6,7,8,9,"aaa1",true,false]; // 普通for循環(huán),公用一個i for (var i = 0; i < arr.length; i++) {//console.log(arr[i]) } // 增強for循環(huán),相當(dāng)于有n個i變量 for (let i = 0; i < arr.length; i++) {//console.log(arr[i]) } // 增強for循環(huán),i是下標(biāo)，數(shù)組和對象 for (let i in arr) {//console.log(arr[i]) } // 增強for循環(huán),i是值，數(shù)組和對象 for (let s of arr) {//console.log(s) }

總結(jié)

以上是生活随笔為你收集整理的JavaScript 数组和函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SuperMemo导出html,使用思维
下一篇： javascript中变量冒号方法如d