JavaScript 数组(Array)方法汇总

2022-11-04 20:43:43

数组(Array)常用方法;

数组常用的方法：concat(),every(), filter(), forEach(), indexOf(), join(), lastIndexOf(), map(), pop(), push(), reduce(), reduceRight(), reverse(), shift(), slice(), some(), sort(), splice(), toLocaleString(), toString(), unshift(),其中every(),filter(),forEach(), indexOf(), lastIndexOf(),map(), reduce(), reduceRight()和some ECMAScript 5新增的方法。

concat() 方法用于连接两个或多个数组; (注: 原数组不变，创建一个新的数组)。

var arr1 = [1,2,3];

var arr2 = [4,5,6];

var arr3 = [7,8];

arr1.concat(arr2);  // [1, 2, 3, 4, 5, 6]

arr1.concat(arr2,arr3); //连接多个数组，[1, 2, 3, 4, 5, 6, 7, 8]

arr1  // [1,2,3]

join() 方法将数组分割成字符串并连接在一起，返回最后生成的字符串;可以指定一个字符串分隔数组的各个元素； (注:原数组不变，创建一个新数组)。
```
var arr = [1,2,3];

arr.join();  // "1,2,3"  默认为逗号

arr.join(''); // "123"

arr.join('|') // "1|2|3"

arr  // [1,2,3]
```
slice(start,end) 方法用于截取数组指定的一部分,参数start规定选取的开始位置，end规定选取的结束位置(不包含该元素); 如果只有一个参数，则表示选取的开始位置。如果参数中出现负数,表示相对数组中最后一个元素的位置，如-1，表示倒数第一个元素，-3表示倒数第三个元素。（注:原数组不变，创建一个新数组）
```
var arr = [1,2,3,4,5,6,7,8];

arr.slice(0,3); // [1, 2, 3]

arr.slice(3,5); // [4, 5]

arr.slice(4)  // [5, 6, 7, 8]

arr.slice(3,-1);  // [4, 5, 6, 7]

arr.slice(-3,-2)  // [6]
```

splice(index,howmany,item) 方法在数组中插入或者删除元素,返回删除的元素。参数index,表示规定添加/删除元素的位置(索引)，使用负数可从数组结尾处规定位置；参数howmany，表示要删除的数量,0表示不删除元素；参数item,表示向数组添加的元素；(注: 原数组发生改变)

var arr = [1,2,3,4,5,6,7,8,9]

arr.splice(8)  // [9]  一位参数默认截取到最后

arr  //[1, 2, 3, 4, 5, 6, 7, 8]

arr.splice(1,0) // [] 第二个参数为0，不会删除数组元素

arr  //  [1, 2, 3, 4, 5, 6, 7, 8]

arr.splice(-1) // [8]  起始为负数

arr.splice(6,0,'javaScript') // []

arr //  [1, 2, 3, 4, 5, 6, "javaScript", 7]

arr.splice(6,2,'Vue') // 删除项["javaScript", 7]  替换元素

arr  // 原数组[1, 2, 3, 4, 5, 6, "Vue"]

push()和pop() 方法 (注: 原数组发生了改变)
push()方法在数组的尾部添加一个或者多个元素，并返回数组新的长度。

var arr = ['javaScript','HTML','Css'];

arr.push('Vue');  //

arr // ["javaScript", "HTML", "Css", "Vue"]

arr.push('Sass','Jq') //

arr  // ["javaScript", "HTML", "Css", "Vue", "Sass", "Jq"]

pop()方法删除数组的最后一个元素，减少数组长度并返回删除的值。

var arr = ['JavaScript','Vue','React'];

arr.pop()  // "React"

arr  // ["JavaScript", "Vue"]

shift()与unshift()方法（注：原数组发生了改变）
unshift() 方法在数组的头部添加一个或者多个元素，返回数组新的长度；
```
var arr = [];

arr.unshift('Vue','JavaScript');  //

arr; // ["Vue", "JavaScript"]
```
shift() 方法删除数组的第一个元素并返回删除的值；
```
var arr = ['JavaScript','Vue','React'];

arr.shift();  // "JavaScript"

arr; //["Vue", "React"]
```

reverse() 和sort()方法（注: 原数组发生了改变）
reverse() 方法将数组的颠倒顺序，返回逆序的数组。

var arr = ['JavaScript','Vue','React']

arr.reverse() // ["React", "Vue", "JavaScript"]

arr  //["React", "Vue", "JavaScript"]

sort() 方法将数组中的数组排序并返回排序后的数组(升序排列)，sort()方法会调用每个数组项的toString()方法转换成字符串，然后比较得到后的字符串，已确定排列顺序；
(a) 如果数组里面的内容为字母，则以字母表的顺序排列（按照字符编码的顺序进行排序）。

var arr = ["React", "Vue", "JavaScript"];

arr.sort(); // ["JavaScript", "React", "Vue"]

(b) sort(sortFun) 参数sortFun 为一个函数

var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];

arr.sort(); // [12, 123, 123, 44, 45, 555, 56, 678, 78, 9, 99, 999] 未传入函数参数

---------------------------------------------------

var arr = [78,56, 99, 9, 44,123,45,555,678,999,12,123];

arr.sort(function(a,b){

   return a - b;           // 返回 负数，0， 正数

})   // [9, 12, 44, 45, 56, 78, 99, 123, 123, 555, 678, 999]

toString() 和 toLocaleString() （注: 原数组不发生改变）
toString()方法将数组的每个元素转换成字符串，返回用逗号分隔开的字符串

[1,2,3].toString(); //"1,2,3"

['JavaScript','Vue','React'].toString(); //"JavaScript,Vue,React"

[1,['JavaScript','Vue',{'title':'标题'}],2].toString(); //  "1,JavaScript,Vue,[object Object],2"

toLocaleString()方法把数组转换为本地字符串；

[1,2,3].toLocaleString()  // "1,2,3"

[new Date()].toLocaleString(); //  "2018/6/2 上午11:50:12"

ECMAScript 5定义了9个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组；

forEach(function(item,index,list){})方法从头到尾遍历数组,为每个元素调用指定的函数；参数function(item,index,list) {} item,表示数组每一项的值，index,表示元素索引，list,表示为遍历的数组本身；

var  data = [1,2,3,4,5,6];

var sum = 0;

data.forEach((item) => {

  sum += item;   // 求和

});

sum //

// 每个数组元素自加1

data.forEach((item,index,list) => {

  list[index] = item + 1;

});

data /// [2, 3, 4, 5, 6, 7]

------------------------------------

// 注意： forEach() 对于空数组是不会执行回调函数的

var data = [];

data.forEach((item) => {

  console.log(item)    // 不执行

})

// 注意，非数组调用报错

var data = '';

data.forEach((item) => {

})

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。
```
var arr = [2,3,4,5,6,7,8];

var mapArr = arr.map((item) => {

  return Math.pow(item,3);  // 返回每一项的的3次幂

});

mapArr  // [8, 27, 64, 125, 216, 343, 512]

arr  // [2, 3, 4, 5, 6, 7, 8]   原数组不发生改变
```

filter()方法将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

var arr = [2,4,6,8,10,15];

// 取数组小于 6 或者 大于 12 的数

arr.filter((item) => {

   return item < 6 || item > 12;  // [2, 4, 15]

})

 // 取数组能整除2的数

arr.filter((item) => {

  return item%2 == 0;  // [2, 4, 6, 8, 10]

})

every()和some()方法（注：不改变原数组）
every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,返回值为true or false; 当且针对数组中的所有元素调用判定函数都返回true时，才返回true。
```
var arr = [1,2,3,4,5,6,7,8];

// 所有值小于10

arr.every((item) => {

  return item < 10;   // true

});

arr.every((item) => {

  return item < 4; // false

})
```
some() 方法当数组中至少存在一个元素调用判定函数返回true,它就返回true。
some() 方法会依次执行数组的每个元素：
```
var arr = [2,4,6,8,10,15];

arr.some((item) => {

  return item < 2;  // false

})

arr.some((item) => {

  return item < 4; // true

})
```

reduce()和reduceRight()方法用指定的函数将数组进行组合，最终计算为一个值；
reduce()接收两个参数，第一个参数是执行简化操作的函数(必选)，第二参数是传递给函数的初始值(可选)。

var arr = [1,2,3,4,5,6,7,8];

// 求和

arr.reduce((x,y) => {

  return x + y;

},0);

// 求最大值

arr.reduce((x,y) => {

   return x>y ? x : y;  //

})

reduceRight()原理与reduce()一样，不同的是reduceRight()按照数组从高到低处理数组。

var arr = [2,3,4];

//2^(3^4) 乘方从右到左

arr.reduceRight((x,y) => {

   return Math.pow(y，x);  // 2.4178516392292583e+24

   //  return Math.pow(x,y);  // 4096

})

indexOf()和lastIndexOf()方法
indexOf () 方法用于搜索整个数组中某个字符串在数组中首次出现的位置，并返回该值在数组中的索引。没有找到返回-1； indexOf(),从头到尾搜索，lastIndexOf()方法从末尾开始搜索。
```
var arr = ['javaScript','Vue','React','CSS3'];

arr.indexOf('vue') // -1

arr.indexOf('CSS3');  //

arr.lastIndexOf('CSS3'); //

arr.lastIndexOf('Vue');  //
```

码农公寓

相关文章