数组方法大全

Posted 2020-09-20 leaf930814

　　数组的方法很多，ECMScript5又提供了好几种方法。有空把之前的云上的笔记整理了一下，方便自己以后查找使用。

一、ECMScript 3的Array.prototype中定义的方法

1、join()
定义：将数组中所有的元素都转化为字符串拼接在一起，返回最后生成的字符串。
注意：不改变原数组

var a = [1,2,3];
console.log(a.join());    //1,2,3 默认使用逗号分隔
console.log(a.join(""));  //123   转化为字符串的常用方法
console.log(a.join("-")); //1-2-3 自定义分隔符
console.log(a);           //[1,2,3]  不修改原素组
var b = new Array(5);
console.log(b.join(\'*\')); //****  4个连字号组成字符串

 

2、reverse()
定义：将数组中的元素颠倒顺序，返回逆序的字符串。
注意：原数组被改变

var a2=[1,2,3];
console.log(a2.reverse());        //[3,2,1]
console.log(a2);                  //[3,2,1]原数组被修改
console.log(a2.reverse().join()); //1,2,3 因为原数组又被修改了

　　

3、sort()
定义：将数组中的元素排序后返回排序后的数组、
注意：数组以字母表顺序排。
原数组被改变
可以自定义按非字母的顺序排序，只要个sort()传入一个比较的匿名的比较函数可以了。
该比较函数决定了两个参数的在排好数组中的先后顺序，加入第一个参数在前，返回小于0的值，反之。相等为0。

    var a3=[\'c\',\'b\',undefined,\'a\',\'z\'];
    console.log(a3.sort());    //["a", "b", "c", "z", undefined],undefined被排到最后
    console.log(a3);           //["a", "b", "c", "z", undefined]修改原数组  

    //自定义排序规则
    var a4 = [33,4,1111,2222];
    //console.log(a4.sort());  //[1111, 2222, 33, 4] 默认排序
    a4.sort(function(a,b){
    	return a-b;            
    });
    console.log(a4);           //[4, 33, 1111, 2222]

　　

4、concat()
定义：创建并返回一个新数组。新数组由原数组和concat()里面的参数组成
注意：不改变原数组
只能扁平化一维数组，高维不行（不会递归扁平化数组），高维数组（扁平化）降维可以看。扁平化多维数组。

    var a5 = [1,2,3];
    console.log(a5.concat(4));            //[1,2,3,4]
    console.log(a5);                      //[1,2,3]  //原数组不改变
    console.log(a5.concat([4,5]));        //[1, 2, 3, 4, 5]
    console.log(a5.concat([4,5,[6,7]]));  //[1, 2, 3, 4, 5,[6,7]] //只能扁平化一维

　　

5、slice()
定义：返回指定数组的片段或者子数组，两个参数分别指是片段的开始和结束位置（不包含结束的位置）。
注意：不改变原数组
如果没有参数，相当于生成一原数组的副本
生成的新数组不包含结束位置的元素
说明：字符串也可以使用这个方法 ,如"[Object Array]".slice(8,-1); =>Array

   var a6 = [1,2,3,4,5];
   console.log(a6.slice(1,3));   //[2,3]  //索引从1到3但包括3的子数组
   console.log(a6);              //[1,2,3,4,5]  //原数组不改变
   console.log(a6.slice(1));     //[2,3,4,5] 只有一个参数，则从该参数位置到末尾
   console.log(a6.slice(1,-1));  //[2,3,4] 参数为-1只向最后一个元素，但不包括它
   console.log(a6.slice(-2,-1))  //[4] 从倒数第2个数到倒数第一个数，但不包括倒数第一个数

　　

6、splice()
定义：在数组中输入和删除元素的通用方法。返回的是由删除元素组成的新数组，没有删就返回空数组[]
前两个参数是指定需要删除的元素，后面的任意个数的参数是需要插入到原数组的元素
注意：原数组被改变

   var a7 = [1,2,3,4,5];
   b7 = a7.splice(2); 
   console.log(b7);      //[3,4,5]   返回原数组从索引为2的元素到结尾被删除的部分
   console.log(a7);      //[1,2]     原数组是被修改之后的数组
   
   b7 = a7.splice(1,2); 
   b7 = a7.splice(1,1);  // 从索引为1的元素开始删除1个元素   
   console.log(b7);      //[2,3]   从索引为1的元素开始删除2个元素，也就是2和3
   console.log(a7);      //[1,4,5] 原数组是被删除之后剩余的数组
 
   var b7 = a7.splice(1,0,100); 
   console.log(b7);      //[] 因为没有删除元素，所有返回的是一个空数组
   console.log(a7);      //[1, 100, 2, 3, 4, 5] 从索引为1的元素开始，删除0个元素，之后原索引为1的位置插入新元素

　　

7、push()和pop()
定义：push在数组的末尾添加一个或者多个元素，返回新数组的长度。所以不能链式操作
pop删除数组的最后一个元素，返回它删除的值元素

组合使用push()和pop()可以实现先进后出的栈

var a8 = [1,2,3];
var b8 = a8.push(4,5);
console.log(b8);   //5  返回的是新数组的长度。
console.log(a8);   //[1,2,3,4,5] 直接原数组尾部添加4
   
var a9 = [1,2,3];
var b9 = a9.pop();
console.log(b9);   //3  返回的删除的元素。
console.log(a9);   //[1,2] 直接在原数组上删除元素3

//栈
var stack = [];
stack.push(1,2,3);
console.log(stack);  //[1,2,3]
stack.pop();
console.log(stack);  //[1,2]
stack.push(100)    
console.log(stack);  //[1, 2, 100]
stack.pop()
console.log(stack);  //[1, 2]

　　

8、unshift()和shift()
定义：unshift是在数组头部添加一个或多个元素。如果一次性传入多个参数，多个参数按照按照原先的位置直接加到数
组中。返回新数组的新数组的长度。
shift:删除数组的第一个元素，并返回删除的元素

//组合使用push()和()可以实现先进先出的队列
var queue = [];
queue.push(1,2,3);
console.log(queue);  //[1,2,3]
queue.shift();
console.log(queue);  //[2,3]
queue.push(100)    
console.log(queue);  //[2, 3, 100]
queue.shift();
console.log(queue);  //[3,100]
queue.shift();
console.log(queue);  //[100]

　　

9、toString()
定义：将数组数组中的每个元素转化为字符串。 输出用逗号分隔的字符串列表（可能数组的内部元素(数组)还会再次调
用toString()，高维数组扁平化正是利用这点）
注意：与不使用任何参数调用的jion()方法返回的字符串一样。

var a10 = [1,2,3];
var a11 = [1,2,[3,4,[5,6]]];
console.log(a10.toString());  //1,2,3
console.log(a10);             //原数组         
console.log(a11.toString());  //1,2,3,4,6
console.log(a11);             //原数组

　　

二、ECMScript 5中的数组方法

1、forEach()  //遍历
定义：该方法从头到尾遍历数组，为某个元素调用指定的函数。传递函数包括三个参数（数组元素、元素索引、数组本身
），如果只关心数组元素的值，可以只传一个参数。
注意：无法在所有元素的都传递给调用函数之前提前结束。也就是没有像for中一样的break语句。如果要提交终止，可以
把forEach（）方法放到try块中。如果forEach()调用的函数抛出forEach.break异常，循环提前结束

var data = [1,2,3];
var sum = 0;
data.forEach(function(value){
  sum+=value;
});
console.log(sum);  //6

var data = [10,20,30];
data.forEach(function(v,i,a){
  a[i] = v*2;
});
console.log(data) //[20, 40, 60]

　　

2、map()     //映射
定义：将调用的数组的每个元素传递给指定的函数，并返回一个新数组，它包含该该函数的返回值
注意：传递给map的函数应该有返回值，返回的是新数组，不修改调用的数组。

var data3 = [1,2,3];
var b = data3.map(function(val){
   return   val*10;
});
console.log(data3);  //[1,2,3]     不改变原数组
console.log(b);      //[10,20,30]  新数组

　　

3、filter() //过滤
定义：返回的数组元素是调用的数组的一个子集，就传递的函数是用来做逻辑判定的，返回true，传给给判定函数的元素就是这个子集的成员。

var data4 = [1,2,3,4,5];
var b2 = data4.filter(function(val){
  return val<3;
});
console.log(b2);     //[1,2]
console.log(data4);  //[1,2,3,4,5] 不改变原数组   

var b3 = data4.filter(function(val,i){
  return i%2;
});
console.log(b3);     //[2,4] 返回索引为奇数的元素组成的数组

4、every() 和some()
这两种方法是数组的逻辑判定，他们针对数组中的所有元素应用指定的函数进行判定。返回true或者false
定义:every 当且仅针对数组中的所有元素调用判定的函数都返回true,它才返回true
some 至少有一个判定为true就返回true.

 

5、reduce()
定义：使用指定的函数将数组元素进行组合，生成一个单值。参数一是执行简化操作的函数，参数二是传给简化函数的初始值。

注意：一旦确认之后，就停止遍历数组了。

var data5 = [1,2,3];
var sum = data5.reduce(function(x,y){
  return  x+y;
},0);
console.log(sum);  //6

var product = data5.reduce(function(x,y){
  return  x*y;
},100);
console.log(product);  //600 

　

6、indexOf()和lastIndexOf()
定义：搜索整个数组中具有给定值的位子，返回找到第一个元素的索引，如果没有找到就返回-1；indexOf()是从头找到尾，lastIndexOf()正好相反
注意：不接受函数作为参数，第一个参数是需要搜索的值，第二个参数是可选的，表示从哪里搜索，可以是负数，表示相对数组末尾的偏移量。
说明：字符串也有这两个方法，功能类似。

var data6 = [1,2,3,3,4,3,5];
console.log(data6.indexOf(3)); //2 第一个3的索引是2

　　

7、isArray()
定义：判断对象是不是数组

 

三、作为数组的字符串

1、简单的使用

var str = "test"

str.charAt(1) //e
str[1]        //e

　　

2、可以调用数组的方法

注意：字符串是不可变的值，当成数组看待是只可读的。所以像push() sort() reverse() splice()等会修改原数组的方法，在字符串上是无效的。错误可能都没有提示！

var str = "hello";
Array.prototype.join.call(str," "); //"h e l l o"

Array.prototype.filter.call(str, function(x){
  return x.match(/o/g);             //["o"]
});

　　

 

String 对象方法

常用的:

chatAt()

indexOf()

match()

replace()

slice() //数组也是

split() //数组也是     split(/\\s+/) 按中间一个或多个空字符串分隔成数组，如获取字符串中的单词

substr()

substring()

等

方法	描述
anchor()	创建 html 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。