数组的方法 以及 堆栈的操作的方法
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()
的效果,可以借助于Array的reverse()
方法,Array的reverse()
的方法能够把一个数组反转。先把要放进数组的元素用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: 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
(完)
检测数组
最佳方法