JavaScript学习之路-Array

一、前言

数组在JavaScript中，是除了Object之外，最常用的类型了。与其他语言中的数组相比，JavaScript中的Array有很大的不同，比如:它的每一项可以保存任何类型的数据;而且它也可以根据内容的变化自动调整大小。

二、Array创建

1.构造函数创建

• var array = new Array(); //创建一个空数组
• var array = new Array(20);//创建一个长度为20的数组
• var array = Array(3)
• var array = Array("Joshua")

2.数组字面量创建

• var array = []
• var array = ['Joshua','I',"AM"]
  建议大家用字面量来创建数组，简单方便，代码少。

3.length

在其他语言中例如：Objective-C，swift。数组的长度值是只读的，但是在JavaScript中它却不是只读的，你可以给它设定值，从而改变数组的长度。

var array = ["1","2","3"];
array.length = 2;
console.log(array[2]) ---> undefined

也可以利用length去添加数组内容

    var  array = ["1","2","3"];
    array[array.length] = '4';
    array[array.length] = '5';
    console.log((array));
///array : 1 2 3 4 5

数组也是有容量的，大约可以容纳4294967295个项。

4.检测数组

var array = [];
if(Array.isArray(array)){
//是数组
}

三、Array方法

1.转换方法

在JavaScript中任何对象都具有toLocaleString toString valueOf 方法。

• toString方法会返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
• valueOf方法会返回数组本身
• toLocaleString 返回和 toString方法一样的值，只不过数组中每一个值调用的是toLocaleString方法。

2.栈方法

所谓的栈方法就是push()和pop()方法。栈的数据结构是后入先出。

• push()方法:参数可以是一个或者多个， 会在数组的最末端添加内容。
• pop()方法：不需要参数。会在数组的最末端删除一个项。

    var  array = ["1","2","3"];
    array.push('4');  ->   ["1", "2", "3","4"]
    array.pop();   ->   ["1", "2", "3"]
    console.log((array));

3.队列方法

嘿嘿，队列方法就是 shift()和 unshift()方法。队列的数据结构是先进先出。

• shift()方法:移除数组中的第个一项，并返回该项。不需要参数。
• unshift()方法:在数组第一项的前面添加一项。

   var  array = ["1","2","3"];
   array.shift(); //  ["2", "3"]
   array.unshift('w');//  ["w","2","3"];
   console.log((array));

4.重排序方法

• reverse() 会把数组倒序输出

 var  array = ["1",'0',"2","3",'15','10'];
 console.log(array.reverse());
//输出
["10", "15", "3", "2", "0", "1"]

• sort()方法会更加的灵活。
  该方法默认是按照升序排列的，它会调用数组每项的toString()方法，然后比较得到的字符串。即使数组的每一项是数字，它也是进行字符串比较。（皮）

 var  array = [0,1,5,10,15];
  console.log(array.sort());
//输出
[0, 1, 10, 15, 5] （字符串进行比较）

sort()方法也会传入一个函数，进行比较，主要比较传入函数的俩个参数，规则是: 如果第一个参数本应该位于第二个参数之前则返回一个负数，如果第一个参数本应该位于第二个参数之后则返回一个正数，俩个参数相等返回0.。其实很简单，我们就比较数组中的前二个数字就好了，把数组前俩项当做参数一和参数二，如果想正序排列，如下代码:

    var  array = [100,1,51,11,15];  
    array.sort(function (param1, param2) {
        if (param1 < param2){
            return -1;
        }else if(param1 > param2){
            return 1;
        }else {
            return 0;
        }
    });
        console.log(array);

倒序排列:

    var  array = [100,1,51,11,15];
    array.sort(function (param1, param2) {
        if (param1 < param2){
            return 1;
        }else if(param1 > param2){
            return -1;
        }else {
            return 0;
        }
    });
        console.log(array);

5.操作方法

• concat()
  这个数组的方法，简单来说其实就是连接的意思，它会针对当前数组创建一个副本，然后讲接受到的参数添加到副本末尾，当无参数的时候，只是把数组复制，然后返回当前这个副本。当有参数的时候，会把每一项添加到数组的末尾。concat()方法不会影响原始数组。如下🌰：

   var  array = ["I",'AM'];
   var  array1 = ['Joshua']
   console.log(array.concat(array1));
   输出 ： ["I", "AM", "Joshua"]

   var array = ["I", 'AM'];
   var newArray = array.concat('Joshua', ['good', 'boy']);//副本 把参数拼
   接到 数组后，
  console.log(newArray) ；
  输出 ：["I", "AM", "Joshua", "good", "boy"]
  console.log(array) ；
输出 ： ["I", 'AM'];

• slice()
  slice中文意思就是切，把什么切开的意思。slice(‘开始索引’，‘结束索引’) 包括左边索引开始的值,不包括右边索引开始的值.。如果结束位置的索引值小于开始索引值，会返回空数组，
  如果传递一个参数，表示从索引值开始截取到最后。注意：slice()方法不会影响原数组。请看下面的列子

    var array = ["I", 'AM','Joshua'];
    var newArr = array.slice(1);
    console.log(newArr); // ["AM", "Joshua"]
    console.log(array); //["I", "AM", "Joshua"]

    var array = ["I", 'AM','Joshua','is','good','man'];
    var newArr = array.slice(1,3);(包左，不包右)
    console.log(newArr); // ["AM", "Joshua"]  

slice方法也可以传递一个负数，就是这个负数值+数组长度 开始的地方。如下🌰：

   var array = ["I", 'AM','Joshua','is','good','man'];

    var newArr = array.slice(-1,-3); // 结束索引值 小于 开始索引值 返回空数组
    console.log(newArr); // []

    var newArr1 = array.slice(-3,-1); // -3+6 = 3  -1+6 = 5
    console.log(newArr1); // ["is", "good"]

下面要放大招了。。。。。当当当。。。。

• splice()方法，可以算是数组中最强大的方法了。能力强的一批。（😆）
  该方法可以做到替换，删除。还以 改变原始数组 (@ο@)。始终返回一个数组，这个数组就是从原始数组中删除的项，没有删除，返回的是一个空数组。
  splice(开始索引值，删除几个，我是替换内容1，我是替换内容2,........)
  ① 删除
  可以删除任意数量的项，只要指定开始索引和要删除的项数。

    var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(0, 2); // 返回被删除的项
    console.log(removed);//["I", "AM"]  
    console.log(array);//["Joshua", "is", "good", "man"]

② 插入
可以向指定位置插入任意数量的项，指定3个参数。删除的项数要为0

    var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(2, 0,'woman','you');// 返回被删除的项为0 ，返回空数组
    console.log(removed);//[]
    console.log(array);//["I", "AM", "woman", "you", "Joshua", "is", "good", "man"]

③ 替换
可以向指定位置替换任意数量的项，同时删除指定的项数，指定三个参数

  var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
    var removed = array.splice(2, 2,'woman','you');
    console.log(removed);//["Joshua", "is"]
    console.log(array);// ["I", "AM", "woman", "you", "good", "man"]

6.位置方法

位置方法包括：indexOf()和 lastIndexOf() 这俩个方法都是返回要查找的值在数组中的索引值，只是前者从头开始找到第一个有效的值的索引。后者从尾部开始，找到最后一个有效值索引。如果没有找到则返回 -1

 var array = ["I", 'AM', 'Joshua', 'is', 'good', 'man'];
console.log(array.indexOf('Joshua'));// 2
console.log(array. lastIndexOf('AM'));// 1

也可以指定从哪个索引开始查找

    var array = ["1", '2', '3', '4', '5', '4','3','2','1'];
    console.log(array.indexOf('4',4));// 5
    console.log(array. lastIndexOf('4',4));// 3

7.迭代方法

以下方法都不会修改数组中的值

• every()
  对数组的每一项都运行回调函数，如果都返回true，every返回true，有一项为false，就停止遍历。就像极限运动一样，有一次失败了，人生就完蛋了。（原天堂没有极限）

array.every(function (value, index, array2) { 
        value //每项元素
        index;//索引
        array2 ;.数组本身
return true;
    })

 var array = ["111", '222', '333', '444', '555'];
    var bool = array.every(function (value, index, array2) {
        if (value > 100) {
            return true;
        } else {
            return false;
        }
    })
    console.log(bool) // true

• some()
  这个方法和every()方法正好相反，只要有一项为true，函数就返回true。

    var array = ["111", '99', '33', '444', '555'];
    var bool = array.some(function (value, index, array2) {
        return (value > 100);
    })
    console.log(bool) ; // true

• fliter()
  对数组每一项运行回调函数，该函数返回结果是true的项组成的新数组。
  新数组是有老数组为true的项组成的

    var array = ["111", '99', '33', '444', '555'];
    var bool = array.filter(function (value, index, array2) {
        return (value > 100);
    })
    console.log(bool) ; // ["111", "444", "555"]

• map()
  对数组每一项运行回调函数，返回该函数的结果组成的新数组。即return 什么 新数组中就有什么，不return返回undefined。

 var array = ["111", '99', '33', '444', '555'];
    var bool = array.map(function (value, index, array2) {
        if (index == 2){
            return value;
        }
        return value - 1;
    })
    console.log(bool) ; // [110, 98, "33", 443, 554]

• forEach()
  这个其实就是for循环嘛！但是它没有返回值哟！！！

 var array = [111, 1, 0, 2, 3];
    var  sum = 0;
    var bool = array.forEach(function (value, index, array2) {
        sum += value ;
    })
    console.log(sum); //117
    console.log(bool) ; // undefined

8.归并方法

• reduce()
  这个方法回迭代数组的所有项，然后构建一个最终返回值。该方法从第一个项开始。reduce函数接受四个参数：前一个值，当前值，项的索引，数组对象。这个函数返回的任何值，都会做为参数传递给下一项。第一次迭代，是在第二个参数上。所以第一个参数就是第一项，第二个参数就是第二项，如下🌰：

    var array = [111, 2, 0, 2, 3];
    var  sum = array.reduce(function (pre,cure,index,array1) {
       return pre+cure;
   })
    console.log(sum); //118

• reduceRight()
  这个方法除了从哪头开始遍历数组之外，其他完全相同。这里就不再举🌰。

9.清空数组方法

说道这个清空方法 我想大多数人应该会用
array.length = 0//伪数组不能清空
array.splice(0)//伪数组没有这个方法
提到伪数组 那最应该想到的就是函数的 arguments。这个是每个函数都包含的一个对象。除了拥有length方法外，无其他数组属性。
所以呢，推荐大家一个完美解决方法
array = [];
这个方法也可以操作伪数组

四、总结

数组的方法就是以上方法了。希望大家在平常多家运用，在有些时候能帮助我们提高开发效率。
最后呢送大家一句歌词，感觉回忆起了当年青涩的样子。

怀念啊我们的青春啊
昨天在记忆里生根发芽
爱情滋养心中那片土地
绽放出美丽不舍的泪花
怀念啊我们的青春啊
留下的脚印拼成一幅画
最美的风景是你的笑容
那一句再见有太多的放不下
那时的我们拥有
没有污染过的清晨
嘀嘀嗒嗒的秒针
却留不住一个黄昏
曾经的爱很简单
不需要费力的眼神
牵手走过无人山岗
想时间再慢几分