欢迎来到计算机相关教程网!

JavaScript

当前位置: 主页 > 网页制作 > JavaScript

js的数组和二维数组教程

时间:2022-09-12 20:57:44|栏目:JavaScript|点击:

一、数组的概念

数组是使用单独的变量名来存储一系列的值。

如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";

var car2="Volvo";

var car3="BMW";

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!

最好的方法就是用数组。

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。


二、创建数组

创建一个数组,有三种方法。

下面的代码定义了一个名为 myCars的数组对象:

1: 常规方式:

var myCars=new Array();

myCars[0]="Saab";      

myCars[1]="Volvo";

myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];


三、访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";


四、数组的方法和属性

使用数组对象预定义属性和方法:

var x=myCars.length             // myCars 中元素的数量

var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引


五、二维数组

什么是二维数组?

注意:所谓的二维数组,就是在数组中元素还为数组,如果再有数组也可称为三维数组引值


二维数组的创建

JavaScript 并没有直接支持二维数组,但是可以设置数组元素的值等于数组,这样就能模拟二维数组的结构。


定义二维数组的方法1:


var a = [];


a[0,0] = 1;


a[0,1] = 2;


a[1,0] = 3;


a[1,1] = 4;


定义二维数组的方法2:

var a = [  //定义二维数组


    [1.1, 1.2],


    [2.1, 2.2]


];


定义二维数组的方法3:

var a = new Array(


[1.1, 1.2],


[2.1, 2.2]


);  //定义二维数组


六、遍历数组

      1、for 循环:基础、简单 

           这是最基础和常用的遍历数组的方法;各种开发语言一般都支持这种方法。


          let arr = ['a','b','c','d','e'];

         for (let i = 0, len = arr.length; i < len; i++) {

                        console.log(i);    // 0 1 2 3 4

                       console.log(arr[i]); //a b c d e

         }


       2、for..in 循环:遍历对象和数组

              for…in循环可用于循环对象和数组。


               let obj = {

                        name: '王大锤',

                        age: '18',

                        weight: '70kg'

             }

             for(var key in obj) {

                        console.log(key);    // name age weight

                       console.log(obj[key]); // 王大锤 18 70kg

            }

----------------------------

            let arr = ['a','b','c','d','e'];

           for(var key in arr) {

                    console.log(key); // 0 1 2 3 4 返回数组索引

                   console.log(arr[key]) // a b c d e

           }

七、数组的方法

            1.length 数组长度

               计算数组的长度

              var arr=[1,2,3,4,5];

               console.log(arr.length);//输出结果是5

             2. push() 添加元素

             向数组尾部添加新元素,返回值是数组的新长度

             var arr=[1,2,3,4,5];

            console.log(arr.push(6,7));//输出结果是7

            console.log(arr);//输出结果是[1,2,3,4,5,6,7]

           3. pop() 删除元素

           删除并返回最后一个元素

           var arr = [1, 2, 3, 4, 5];

          console.log(arr.pop());//输出结果是5

          console.log(arr);//输出结果是[1,2,3,4]

         4. reserve() 颠倒顺序

         将数组元素颠倒顺序,数组本身发生了变化

         var arr = [1, 2, 3, 4, 5];

         console.log(arr.reverse());//输出结果是[5,4,3,2,1]

         console.log(arr);//输出结果是[5,4,3,2,1]

         5. join() 数组转为字符串

         把数组转为字符串。即把数组所有元素通过指定的分隔符变革一个字符串,数组本身不发生变化。

         var arr = [1, 2, 3, 4, 5];

         console.log(arr.join(','));//输出结果是1,2,3,4,5

         console.log(arr);//输出结果是[1, 2, 3, 4, 5]

        6. map() 操作元素

        将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组。=>是es6的箭头函数,在后面会介绍。

        对数组进行遍历

         var arr = [1, 2, 3, 4, 5];

         arr.map(item => {

                      console.log(item)

          })

          对数组内容进行操作后返回新数组

          var arr = [1, 2, 3, 4, 5];

          console.log(arr.map(item => item*2)) //输出结果是[2, 4, 6, 8, 10]

          console.log(arr) //输出结果是[1, 2, 3, 4, 5] 

         7. forEach() 遍历元素

          将数组中的每个元素执行提供的函数,没有返回值,并没有改变原来的数组,常用来遍历数组。

         var arr = [1, 2, 3, 4, 5];

         arr.forEach(item => {

                     console.log(item)

          })

          8. filter() 元素过滤

           将所有元素进行判断,将满足条件的元素作为一个新数组返回,不会改变原始数组。


实例1:过滤所有的奇数


var arr = [1, 2, 3, 4, 5];

//过滤出奇数

console.log(arr.filter(item => {

   return item%2==1

})) //输出结果是[1, 3, 5]

console.log(arr)//输出结果是 [1, 2, 3, 4, 5]

实例2:判断数组中是否包含某个值。当包含时会返回此值的数组,不存在时返回空数组


var arr = [1,5,4,3]

console.log(arr.filter(item => item==3))//[3]

实例3:过滤掉null,undefined,空字符串


var arr2 = [1, null, 2, '', 'm', undefined, 222]

console.log(arr2.filter(item => item))//[ 1, 2, 'm', 222 ]

实例4:数组去重。index表示索引,self表示filter函数本身。


var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, 4, 56, 2];

var arr2 = arr.filter((item, index, self) => self.indexOf(item) === index)

console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]

9. every() 元素判断

将所有元素进行判断,如果所有元素都满足判断条件,则返回true,否则为false。常作为所有条件判断。

var arr = [1, 2, 3, 4, 5];

var morethan4 = value => value > 4

var lessthan6 = value => value < 6

console.log("arr数组所有元素都大于4吗?" + arr.every(morethan4))//输出结果是 arr数组所有元素都大于4吗?false

console.log("arr数组所有元素都小于6吗?" + arr.every(lessthan6))//输出结果是 arr数组所有元素都小于6吗?true

10. some() 元素判断

将所有元素进行判断,如果存在元素满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false。常作为部分条件判断。


var arr = [1, 2, 3, 4, 5];

var morethan4 = value => value > 4

var morethan6 = value => value > 6

console.log("arr数组存在元素大于4吗?" + arr.some(morethan4))//输出结果是arr数组存在元素大于4吗?true

console.log("arr数组存在元素大于6吗?" + arr.some(morethan6))//输出结果是arr数组存在元素大于6吗?false

11. reduce() 操作内容

所有元素都调用返回函数,返回值为最后结果,传入的值必须是函数类型。


var arr = [1, 2, 3, 4, 5];

//遍历元素,将它们累加后返回

console.log(arr.reduce((a,b) => {

    return a+b

}))//输出结果是15

12. shift() 删除元素

删除数组中的第一个元素并返回。


var arr = [1, 2, 3, 4, 5];

console.log(arr.shift())//输出结果是 1

console.log(arr)//输出结果是[2, 3, 4, 5]

13. unshift() 添加元素

将一个或多个元素添加到数组的开头,并返回数组的长度。


var arr = [1, 2, 3, 4, 5];

console.log(arr.unshift(6,7))//输出结果是7

console.log(arr)//输出结果是[1, 2, 3, 4, 5, 6, 7]

14. concat() 连接数组

将多个数组进行拼接,返回一个新数组。


var arr = [1, 2, 3, 4, 5]

var arr2=[6, 7]

console.log(arr.concat(arr2))//输出结果是[1, 2, 3, 4, 5, 6, 7]

15. toString() 数组转字符串

将数组转为字符串。


var arr = [1, 2, 3, 4, 5]

console.log(arr.toString())//输出结果是1, 2, 3, 4, 5

16. splice(开始位置, 删除的个数,元素)

万能的方法,可实现数组的增删改。常用于删除指定元素。


新增元素时,删除个数为0:


var arr = [1, 2, 3, 4, 5]

arr.splice(1,0,6)//在索引为1的位置插入元素

console.log(arr)//输出结果是[1, 6, 2, 3, 4, 5]

删除元素时,元素不写:


var arr = [1, 2, 3, 4, 5]

arr.splice(1,1)//删除索引为1的元素

console.log(arr)//输出结果是[ 1, 3, 4, 5]

修改元素时,删除个数为1:


var arr = [1, 2, 3, 4, 5]

arr.splice(1,1,6)//把索引为1的元素替换为6

console.log(arr)//输出结果是[ 1,6, 3, 4, 5]

17. Array.isArray() 判断是否数组

判断是否是一个数组


var arr = [1, 2, 3, 4, 5]

//判断是否是一个数组

console.log(Array.isArray(arr))//输出结果是true

console.log(Array.isArray({'id':1}))//输出结果是false

18. sort() 数组排序

对数组的内容进行排序,可以数字,字符串数字,字母等,会按照Unicode进行升序排序。数组内容已经变成排序后的结果!


console.log([5,6,9,1,2,4].sort())//[1, 2, 4, 5, 6, 9]

console.log(['5','6','9','1','2','4'].sort())//["1", "2", "4", "5", "6", "9"]

console.log(['b','f','a','A','C','4'].sort())//["4", "A", "C", "a", "b", "f"]

下面看一个特例


console.log([5,1,10,20,2].sort())//[1, 10, 2, 20, 5]

结果出乎意料,10竟然在2前面,原因就是它是根据Unicode来排序。对于数字的这种情况,需要些一个方法,然后给sort调用:


function compare(m,n){

    if (m < n) return -1

    else if (m > n) return 1

    else return 0

}

const arr = [5,1,10,20,2]

console.log(arr.sort(compare))//[ 1, 2, 5, 10, 20 ]

通过这种方式,自定义比较方式,就可以完美的解决这个问题。对于字符串数字也是类似。


上一篇:window.onload事件的用途与格式

栏    目:JavaScript

下一篇:console.dir()是什么意思?

本文标题:js的数组和二维数组教程

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=247

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有 Powered by EyouCms冀ICP备17010187号