js_数组

绝地灬酷狼 2022-05-25 05:43 215阅读 0赞

1) **创建数组：**

第一种方式:

var arr = \[\];// 初始化一个空长度的数组

第二种方式:

var arr = new Array();

2) **数组赋值：**

var book = \["字串1","字串2",30\];

book\[0\] = "字串0";// 修改第一个元素

book\[1\] = 20;// 原来的值是字串，重新赋值为数字

book\[4\] = 40;// 数组长度自动变为5，没有赋值的元素为undefined

document.write(book);// 直接输出，元素将以逗号分隔

![20180509080633974][]

3) **遍历数组：**

获取数组的长度使用length属性（不是方法，没有括号）

for (var i = 0; i < book.length; ++i)

document.write(" ");

document.write(book\[i\]);

![20180509080653673][]

使用foreach

document.write(" ");

var arr12 = \[1,2,3,4,5,6,7,8\];

document.write(" "+arr12);

document.write(" foreach");

arr12.forEach(function(e)\{

document.write(" "+e);

\})

![20180509080718294][]

注：ie不支持foreach，需要自己添加定义，在网上找的方法如下：

**if** (!Array.prototype.forEach) \{

Array.prototype.forEach = **function**(callback, thisArg) \{

**var** T, k;

**if** (**this** == **null**) \{

**throw** **new** TypeError(" this is null or not defined");

**var** O = Object(**this**);

**var** len = O.length >>> 0; // Hack to convert O.length to a UInt32

**if** (\{\}.toString.call(callback) != "\[object Function\]") \{

**throw** **new** TypeError(callback + " is not a function");

**if** (thisArg) \{

T = thisArg;

k = 0;

**while** (k < len) \{

**var** kValue;

**if** (k **in** O) \{

kValue = O\[k\];

callback.call(T, kValue, k, O);

k++;

\};

4) **数组合并**

使用concat方法：

var arr1 = \["一","二","三"\];

var arr2 = \[1,2,3\];

var arr3 = arr1.concat(arr2);

document.write(arr3);

![20180509080750383][]

5) **toString方法**

toString方法是将数组转为字符串，元素间使用逗号分隔。

var arr7 = \[1,2,3,4,5,6,7,8\];

document.write(" "+arr7);

document.write(" "+arr7.toString());

![20180509080814624][]

6) **Join方法**

在没有使用join方法前，打印数组元素默认是以逗号分隔，如：

var arr1 = \["一","二","三"\];

document.write(arr1);

![20180509080838943][]

Join可以指定一个字符用来分隔元素，如：

document.write(arr1.join("\#"));

document.write(" ");

document.write(arr1.join("是的"));

![20180509080906112][]

7) **移除元素**

document.write(arr1);

var arr10 = arr1.pop();// 将最后一个元素移除，并返回最后一个元素值

document.write(arr1);

document.write(" ");

var arr11 = arr1.shift();// 将第一个元素移除，并返回第一个元素值

document.write(arr1);

![20180509080928643][]

8) **添加元素**

document.write(" "+arr2);

var length = arr2.push("a");// 在末尾添加元素，返回新的长度

document.write(" length:"+length);

document.write(" "+arr2);

length = arr2.unshift("b");// 在头部添加元素，返回新的长度

document.write(" length:"+length);

document.write(" "+arr2);

![20180509080949982][]

9) **Splice（替换）**

// splice(index,count,items)

共三个参数，将第一个参数对应下标开始，第二个参数指定数目的元素，替换为第三个参数的值。

注：还可以有第四个第五个等参数，都是元素的意思，直接在index后面插入。

var arr4 = \[1,2,3,4,5,6,7,8\];

document.write(" length:"+arr4.length);

document.write(" "+arr4);

arr4.splice(3,2,"11,12");// 将第4个元素开始的2个元素替换为”11,12”

document.write(" length:"+arr4.length);// 2个元素换为了一个元素，因此length少1

document.write(" "+arr4);

![20180509081012795][]

var arr5 = \[1,2,3,4,5,6,7,8\];

document.write(" length:"+arr5.length);

document.write(" "+arr5);

arr5.splice(3,2,"11","12");// 将第4个元素开始的2个元素替换为11,12

document.write(" length:"+arr5.length);// 两个元素替换为了两个元素，因此length不变

document.write(" "+arr5);

![20180509081034925][]

var arr6 = \[1,2,3,4,5,6,7,8\];

document.write(" length:"+arr6.length);

document.write(" "+arr6);

arr6.splice(3,2);// 将第4个元素开始的2个元素替换为空，即删除两个元素

document.write(" length:"+arr6.length);

document.write(" "+arr6);

![2018050908105618][]

10) **Slice**

Slice方法和字符串中的substr差不多，是获取子数组的意思。

语法：

arrayObject .slice(start,end)

它返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

<table> 
 <tbody> 
 <tr> 
 <td>参数</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>start </td> 
 <td>必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。</td> 
 </tr> 
 <tr> 
 <td>end</td> 
 <td>可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。</td> 
 </tr> 
 </tbody> 
</table>

如：

var arr7 = \[1,2,3,4,5,6,7,8\];

document.write(" slice(2,4)："+arr7.slice(2,4));// 取下标为2的元素到第4个元素

document.write(" slice(3)："+arr7.slice(3));// 取下标为3的元素到结束

document.write(" slice(-2)："+arr7.slice(-2));// 取倒数第二个元素到结束

![20180509081118320][]

11) **清空数组**

arr7 = \[\];

12) 将数组颠倒

var arr11 = \[1,2,3,4,5,6,7,8\];

document.write(" arrll:"+arr11);

document.write(" reverse():"+arr11.reverse());// 将数据顺序颠倒

document.write(" arrll:"+arr11);

![20180509082550452][]

13) 过滤：filter

Filter方法使用一个回调函数，第一个参数是每个值，第二个参数是每个值的索引，返回满足条件的数组。

如返回数组中的偶数：

document.write(" arrl2:"+arr13);

var arr12 = \[1,"gary","keke",4,5,6,7,8\];

document.write(" arr12:"+arr12);

var arr13 = arr12.filter(function(value,index)\{

return value%2 == 0;// 取所有的偶数

\});

document.write(" arrl3:"+arr13);

![20180509082614228][]

var arr14 = \[1,"gary","keke",4,5,6,7,8\];

document.write(" arr14:"+arr14);

var arr15 = arr14.filter(function(value,index)\{

return !isNaN(value);// 取所有的数字

\});

document.write(" arrl5:"+arr15);

![20180509082638789][]

[20180509080633974]: /images/20220525/f1af77a578e74550ae94bef3317e48fe.png
[20180509080653673]: /images/20220525/f92f29ec35d04c1693bf64e83c43fcc1.png
[20180509080718294]: /images/20220525/b6ac2a1f2a68471d940d95837e142ab1.png
[20180509080750383]: /images/20220525/5bf4da99ba1948a88373e8ddc21c9c53.png
[20180509080814624]: /images/20220525/9906d6b8af7f4938b58c3a31aba5be30.png
[20180509080838943]: /images/20220525/700e9b7e416a4174916adeab3805d638.png
[20180509080906112]: /images/20220525/bb152f3c003f4ead8f934e45e3e3be82.png
[20180509080928643]: /images/20220525/211d88152be048f49bfd790c3cd07470.png
[20180509080949982]: /images/20220525/c481357220714413a99e0e0f716c03ff.png
[20180509081012795]: /images/20220525/14dcbcc5af96464bafcacdbc7615a492.png
[20180509081034925]: /images/20220525/791a5e2206644bfc8afc4d7150f19061.png
[2018050908105618]: /images/20220525/7a7c135b90f747bf8d9b3b036cbb3dd4.png
[20180509081118320]: /images/20220525/e7a973b3592248f2ba35d4daf390af2a.png
[20180509082550452]: /images/20220525/d7f59ae73c484fc6beca9fde6e46f888.png
[20180509082614228]: /images/20220525/f4b74e68a2474d1f9214e9ed7409dcc1.png
[20180509082638789]: /images/20220525/c6a9de4d813340de92c02cf337b93cb5.png