javasctipt 数组原生方法大集合

   

数组的方法 以及 堆栈的操作的方法

JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型。在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操作数组(比如删除当前项,则所有之后的数组元素下标都将向前移动)是一件很危险的事情。

JavaScript的数组是一个拥有堆栈和队列自身优点的global对象。也就是说JavaScript数组可以表现的像栈(LIFO)和队列(FIFO)一样操作。这也是JavaScript数组强大的可操作性的体现。今天来学习JavaScript数组的栈和队列的操作方法。 

Es3 的方法  (10)

             

   添加和删除



ES3 子数组的方法 数组排序 数组转换

 

实例

1.       push()和 pop() 栈的方法 后进先出

var  array=[3,4,5]
var arr=array.push(6,7)//变异 改变原数组 返回  返回数组长度   参数可以使多个  类型各种。
console.log("原数组"+array);   //array=[3,4,5,6,7]
console.log("新的数组"+arr);

var arr=array.pop()//变异 改变原数组 返回  返回被移除的元素
console.log("原数组"+array);   //array=[3,4,5,6,7]
console.log("新的数组"+arr);   //7  后进先出  

2.       unshift()添加元素 和shift()删除元素 队列的方法 先进先出

var  array=[3,4,5];
var arr=array.unshift(1,2); //变异 改变原数组 返回  返回数组长度
console.log("原数组"+array);   //原数组1,2,3,4,5
console.log("新的数组"+arr);   //5
var arr=array.shift();//变异 改变原数组 返回 返回被移除的元素
console.log("原数组"+array);   //原数组1,2,3,4,5
console.log("新的数组"+arr);   //1 先进先出

-—---------------———————————————注意—————---------————————————

unshift()push()要慢差不多100!因此,平时还是要慎用unshift(),特别是对大数组。那如果一定要达到unshift()的效果,可以借助于Arrayreverse()方法,Arrayreverse()的方法能够把一个数组反转。先把要放进数组的元素用push()添加,再执行一次reverse(),就达到了unshift()的效果

具体测试此处不上代码了

3.       Push和concat 的区别???

  有区别吗,当然有区别,如果没有,傻子又创建一个新的方法,

  啥区别看代码

   var array=[1,2,3,4,5]
/*******第一点 区别原数组 使用concat  不变异,返回值返回新的数组*****/
var arr=array.push(6,7);//变异 改变原数组 返回  返回数组长度
console.log("原数组"+array);   //array=[3,4,5,6,7]
console.log("新的数组"+arr);    //7Z
var array=[1,2,3,4,5]
var arr=array.concat(6,7);// 不变异原数组 返回  返回新的数组
console.log("原数组"+array);   //array=[1,2,3,4,5]
console.log("新的数组"+arr);//array=[1,2,3,4,5,6,7]
/*******第二点 区别原数组 使用push 不智能 ,*****/
var array=[1,2,3,4,5]
var arr=array.concat([6,7]);
console.log("原数组"+array);   //array=[1,2,3,4,5]
console.log("新的数组"+arr);//array=[1,2,3,4,5,6,7]
var array=[1,2,3,4,5]
var arr=array.push([6,7]);
console.log("原数组"+array);   //输出的还是array=[1,2,3,4,5,6,7] 因为toString会转 
console.log("新的数组"+arr);//6 但是长度是6 那么array 实际是 array=[1,2,3,4,5,Array[2]]  可以再控制台直接输出 array 看一下

4.      reverse  和  sort


function comprare(value1,value2){
   
return value1>value2 ? -1: //倒序, 反过来就是正序,
}

var array=[2,6,7,3,4]
var arr=array.sort(comprare);

var
array1=[2,6,7,3,4]
var arr1=array1.reverse();
/*原数组7,6,4,3,2
新的数组arr7,6,4,3,2
新的数组arr1:4,3,7,6,2*/
console.log("原数组"+array);
console.log("新的数组arr"+arr);
console.log("新的数组arr1:"+arr1);

5.      toString 和toLocalString

toLocalString()方法经常也会返回与toString()和valueOf()方法相同的值,但也不总是如此。
当调用数组的toLocaleString()方法时,它也会创建一个数组的以逗号分割的字符串。
而与前两个方法唯一的不同指出在于,这因此i是为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法。

var person1 = {
    toLocaleString: function () {
        return "Nikolaos";
    },
    toString: function () {
        return "Nicholas";
    }
}
var person2 = {
    toLocaleString: function () {
        return "Grigorios"; //直接输出数组此处不会输出
    },
    toString: function () {
        return "Greg";
    }
};
var people = [person1, person2];
alert(people);                   //Nicholas,Greg
alert(people.toString());        //Nicholas,Greg
alert(people.toLocaleString())//Nikolaos,Grigorios
alert(people.join("_"))//Nikolaos_Greg   join如特殊只是和 string.splict() 可以相互转换

Es5 的方法(9个) 


1.    indexOf 和lastIndexOf

ECMAScipt5为数组实例添加了两个位置方法:indexOf()和lastIndexOf()。这两个方法的共同点是都接收2个参数:要查找的项和(可选的)表示查找起点位置的索引。不同的是indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。  这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。注意:在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。

varnum=[3,4,5,4,3,4,4,4,4,4,5,2,3,3]
num.
indexOf(3);// 输出 0
num.indexOf(3,1);// 输出 4 从索引为1的位置开始查找, 返回自己在数组的索引。
num.indexOf(3,5);// 输出 12 从索引为5的位置开始查找
num.indexOf(3,12);// 输出 12 从索引为12的位置开始查找
num.indexOf(3,15);//输出 -1 从索引为15的位置开始查找 15以后没有了
num.indexOf("3");// 输出 -1 因为数组的每一项都是全等。
var person={name:"Nicholas"};
var
people=[{name:"Nicholas"}];
var
morePeople=[person];

alert(morePeople.indexOf(person));//0

alert(people.indexOf(person));  //-1   // 输出 -1 因为数组的每一项都是全等。People 的对象时从新实例化的 object是引用类型 如果是基本类型就是0

//值类型
var person=1
var people=[1];
var morePeople=[person];
alert(people.indexOf(person));   //0
alert(morePeople.indexOf(person)); //0
 

var numbers=[1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4))//3  
alert(numbers.lastIndexOf(4))//5  查找方向不同,[1,2,3,4(我是indexOf(4)的位置),5,4(我是lastIndexOf(4)的位置),3,2,1];

2.    map、filter、some、every 和forEach

函数简述

map():返回一个新的Array,每个元素为调用func的结果

filter():返回一个符合func条件的元素数组

some():返回一个boolean,判断是否有元素是否符合func条件

every():返回一个boolean,判断每个元素是否符合func条件

forEach():没有返回值,只是针对每个元素调用func

functionmy_func(item) {
   
if (item <2) {
        item+=
1;
       
console.log('t');
        returntrue;
   
}
   
console.log('f');
    returnfalse;
}
function my_func1(item) {
   
if (item <2) {
       
console.log('t');
        return true;
   
}
   
console.log('f');
   
//returnfalse;
}



// init an array
var array= [0,1,2,3,4];
// print: t,t,f,f,f
/*
原数组0,1,2,3,4
 
新的数组arr1:true,true,,,*/
var arr=array.map(my_func)//返回一个新的Array,每个元素为调用func的结果
var arr1=array.map(my_func1);//如果某个元素无返回值返回一个空的站位符号
console.log("原数组"+array);
console.log("新的数组arr:"+arr);
console.log("新的数组arr1:"+arr1);
// print: t,t,f,f,f
/*
原数组0,1,2,3,4
新的数组arr:0,1
 新的数组arr1:0,1*/
 arr=array.filter(my_func)//返回一个符合func条件的元素数组
 arr1=array.filter(my_func);
console.log("原数组"+array);
console.log("新的数组arr:"+arr);
console.log("新的数组arr1:"+arr1);
// print: t
/*
原数组0,1,2,3,4
 
新的数组arr:true
 新的数组arr1:true*/
/*找到一个符合的就停止数组的遍历*/
arr=array.some(my_func)//返回一个boolean,判断是否有元素符合func条件   如果有一个元素符合 就是true  否则是false
arr1=array.some(my_func)//返回一个boolean,判断是否有元素符合func条件  如果有一个元素符合 就是true  否则是false //没有任何一个元素符合的
console.log("原数组"+array);
console.log("新的值arr:"+arr);
console.log("新的值arr1:"+arr1);

// print: t,t F
/*
原数组0,1,2,3,4
 
新的数组arr:false
 新的数组arr1:false*/
/*找到一个不符合的元素就停止数组的遍历*/
arr=array.every(my_func)//返回一个boolean,判断是否每一个元素都符合func条件   如果有一个元素不符合 就是false  否则是true
arr1=array.every(my_func)//返回一个boolean,判断是否每一个元素都符合func条件   如果有一个元素不符合 就是false  否则是true //所有的元素都符合条件
console.log("原数组"+array);
console.log("新的值arr:"+arr);
console.log("新的值arr1:"+arr1);
// print: f,t,f,f,f
//return: undefined

arr=array.forEach(my_func);//没有返回值,只是针对每个元素调用func
console.log("原数组"+array);
console.log("新的值arr:"+arr);
//如何实现的
Array.prototype.map= function(fun/*, thisp*/)
{
   
var len =this.length;
    if
(typeoffun != "function")
       
throw new TypeError();

    var
res = newArray(len);
    var
thisp = arguments[1];
    for
(vari = 0;i < len; i++)
    {
       
if (iin this)
            res[i] = fun.
call(thisp,this[i],i, this);
   
}

   
return res;
};

Array.prototype.filter= function(fun/*, thisp*/)
{
   
var len =this.length;
    if
(typeoffun != "function")
       
throw new TypeError();

    var
res = newArray();
    var
thisp = arguments[1];
    for
(vari = 0;i < len; i++)
    {
       
if (iin this)
        {
           
var val =this[i];// in case fun mutates this
           
if (fun.call(thisp,val, i, this))
                res.
push(val);
       
}
    }

   
return res;
};

Array.prototype.some= function(fun/*, thisp*/)
{
   
var len =this.length;
    if
(typeoffun != "function")
       
throw new TypeError();

    var
thisp = arguments[1];
    for
(vari = 0;i < len; i++)
    {
       
if (iin this && fun.call(thisp,this[i],i, this))
           
return true;
   
}

   
return false;
};

Array.prototype.every= function(fun/*, thisp*/)
{
   
var len =this.length;
    if
(typeoffun != "function")
        
throw new TypeError();

    var
thisp = arguments[1];
    for
(vari = 0;i < len; i++)
    {
       
if (iin this && !fun.call(thisp,this[i],i, this))
           
return false;
   
}

   
return true;
};

if
(!Array.prototype.forEach)
{
    Array.
prototype.forEach= function(fun/*, thisp*/)
    {
       
var len =this.length;
        if
(typeoffun != "function")
           
throw new TypeError();

        var
thisp = arguments[1];
        for
(vari = 0;i < len; i++)
        {
           
if (iin this)
                fun.
call(thisp,this[i],i, this);
       
}
    }
;
}

 

3.    reduce和reduceRight   实例。

array1.reduce(callbackfn[,initialValue])

可选。如果指定 initialValue,则它将用作初始值来启动累积。第一次调用 callbackfn 函数会将此值作为参数而非数组值提供

 

回调函数语法:

    functioncallbackfn(previousValue, currentValue, currentIndex, array1)

  可使用最多四个参数来声明回调函数。

回调参数

定义

previousValue

通过上一次调用回调函数获得的值。如果向 reduce 方法提供 initialValue,则在首次调用函数时,previousValue 为 initialValue。

currentValue

当前数组元素的值。

currentIndex

当前数组元素的数字索引。

array1

包含该元素的数组对象。

 

 

来个实用的案例 数组各项之和

functionsum (previousValue,currentValue) {
   
return previousValue+ currentValue;
}
var elements = [1,2, 3,4];
var
result = elements.reduce(sum);10

varresult1 = elements.reduce(sum,"23")//"231234"

 

模仿一个join

function appendCurrent (previousValue, currentValue) {
    return previousValue + "::" + currentValue;
}
var result = elements.reduce(appendCurrent);//abc::def::123::456
var result1 = elements.reduce(appendCurrent,"122222");//122222::abc::def::123::45610
 

 

再来一个高级的

functionaddDigitValue(previousValue,currentDigit,currentIndex,array) {
   
var exponent = (array.length- 1) - currentIndex;
  
//var exponent = currentIndex;
   
var digitValue = currentDigit *Math.pow(10,exponent);
   
console.log(array);
   
console.log(exponent+"::::::"+previousValue);
    return
previousValue + digitValue;
}
/*
 [4, 1, 2, 5][
千,百,十,个]        如果    var exponent = currentIndex
                                      [4,1, 2, 5] [4, 1, 2, 5][个,十,百,千]                           
 index.js:305 3::::::0                index.js:306 0::::::0
 index.js:304 [4, 1, 2, 5]            index.js:305 [4, 1, 2, 5]
 index.js:305 2::::::4000             index.js:306 1::::::4
 index.js:304 [4, 1, 2, 5]           index.js:305 [4, 1, 2, 5]
 index.js:305 1::::::4100            index.js:306 2::::::14
 index.js:304 [4, 1, 2, 5]           index.js:305 [4, 1, 2, 5]
 index.js:305 0::::::4120            index.js:306 3::::::214
 index.js:310 4125                   index.js:322 5214

* */
var digits = [4,1, 2,5];//
var result = digits.reduce(addDigitValue,0);
console.log(result);

reduceRight (来源于网络)

reduceRight方法可应用于字符串。下面的示例演示如何使用此方法反转字符串中的字符。

functionAppendToArray(previousValue,currentValue) {
   
return previousValue + currentValue;
}
var word ="retupmoc";
var
result = [].reduceRight.call(word,AppendToArray,"the ");
// var result = Array.prototype.reduceRight.call(word,AppendToArray, "the ");
console.log(result);
// Output:
// the computer

 

      (完)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

检测数组

最佳方法

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值