js的数组和二维数组教程

一、数组的概念

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

如果你有一组数据（例如：车名字），存在单独变量如下所示：

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 ]

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