让前端飞Web前端之路前端攻城狮

JavaScript学习之路-Array

2017-12-15  本文已影响48人  LeoZzz

一、前言

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

二、Array创建

1.构造函数创建
2.数组字面量创建
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 方法。

2.栈方法

所谓的栈方法就是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()方法。队列的数据结构是先进先出。

   var  array = ["1","2","3"];
   array.shift(); //  ["2", "3"]
   array.unshift('w');//  ["w","2","3"];
   console.log((array));
4.重排序方法
 var  array = ["1",'0',"2","3",'15','10'];
 console.log(array.reverse());
//输出
["10", "15", "3", "2", "0", "1"]

 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.操作方法
   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'];

    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"]

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

    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.迭代方法

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

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

    var array = ["111", '99', '33', '444', '555'];
    var bool = array.some(function (value, index, array2) {
        return (value > 100);
    })
    console.log(bool) ; // 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"]

 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]

 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.归并方法
    var array = [111, 2, 0, 2, 3];
    var  sum = array.reduce(function (pre,cure,index,array1) {
       return pre+cure;
   })
    console.log(sum); //118
9.清空数组方法

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

四、总结

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

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

上一篇 下一篇

猜你喜欢

热点阅读