数组的方法

Posted 2021-10-18 JingG459

数组的方法

1.push() 方法：

在数组结尾添加一个元素

var arr = [1,2,3,4,5,];
arr.push(6); //  向 arr 添加一个新元素
 //返回一个新元素的长度：6
console.log(arr); // [1,2,3,4,5,6]

2.pop() 方法：

从数组中删除最后一个元素

var arr = [1,2,3,4,5];
arr.pop(); // 从 arr 删除最后一个元素（5）
// 返回被删除的元素
console.log(arr); // [1,2,3,4]

3.shift() 方法：

会删除首个数组元素，并把所有其他元素“位移”到更低的索引

var arr = [1,2,3,4,5,6];
arr.shift();            // 从 fruits 删除第一个元素 "6"
// 返回被“位移出”的字符串 (1)
console.log(arr); // [2, 3, 4, 5, 6]

4.unshift() 方法：

（在开头）向数组添加新元素，并“反向位移”旧元素

var arr = [1,2,3,4,5];
arr.unshift(6);    // 向 fruits 添加新元素 "6"
// 返回新数组的长度 6
console.log(arr); // [6,1,2,3,4,5]

5.splice() 方法：

可用于向数组添加新项

var arr = [1,2,3,4,5];
arr.splice(2, 0, 8, 5);
// 第一个参数（2）定义了应添加新元素的位置（拼接）。
// 第二个参数（0）定义应删除多少元素。
// 其余参数（8，5）定义要添加的新元素。
console.log(arr);  // [1, 2, 8, 5, 3, 4, 5]

使用 splice() 来删除元素

var arr = [1,2,3,4,5];
arr.splice(0,1);  // 删除 arr 中的第一个元素
console.log(arr);  // [ 2, 3, 4, 5]

6.concat() 方法：

通过合并（连接）现有数组来创建一个新数组

var arr = [1,3,5,7,9];
var str = [2,4,6,8];
var dd = arr.concat(str);   // 连接 arr 和 str
// 不会更改现有数组.返回的是一个新数组
console.log(dd);  //  [1, 3, 5, 7, 9, 2, 4, 6, 8]

7.slice() 方法：

用数组的某个片段切出新数组
从数组元素 1 （‘1’）开始切出一段数组

var arr = [1,3,5,7,9];
var str = arr.slice(1); 
console.log(str); // [3, 5, 7, 9]

slice() 方法创建新数组。它不会从源数组中删除任何元素。
从数组元素 3 （“5”）开始切出一段数组：

var arr = [1,3,5,7,9];
var str = arr.slice(3); 
console.log(str);  // [7, 9]

slice() 可接受两个参数
从开始参数选取元素，直到结束参数（不包括）为止

var arr = [1,3,5,7,9];
var str = arr.slice(1,3); 
console.log(str);  // [3, 5]

结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分

8. every() 方法:

指定函数检测数组中的所有元素
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
   return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function(x) {
   return x < 3;
});
console.log(arr3); // false

9.join() 方法：

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串

function repeatString(str, n) {
   return new Array(n + 1).join(str);
}
console.log(repeatString(“abc”, 3)); // abcabcabc
console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi

10.reverse() 方法：反转数组

使得第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，依次类推。

// 语法： 数组.reverse()
//       直接改变原始数组
//       返回值： 反转后的数组
          
var arr = ["你", "好", "欢", "迎"]
var res = arr.reverse()
  
console.log(arr)   // 直接改变原始数组  ["迎", "欢", "好", "你"]
console.log(res)  // 反转后的数组  ["迎", "欢", "好", "你"]

11.sort() 方法

数组排序

// 语法1： 数组.sort()
// 		  排序方式是按照一位一位来看的（先排第一个数据的第一个数字，以此类推）
//        直接改变原始数组
//        返回值： 排序好的数组
          
  var arr = [1, 3, 7, 9, 101, 5]
  var res = arr.sort()
  
  console.log(arr)  // 直接改变原始数组  [1, 101, 3, 5, 7, 9] 
  console.log(res)  // 排序好的数组  [1, 101, 3, 5, 7, 9] 


// 语法2： 数组.sort() //常用语法
// 		  排序方式是按照数字大小来排列
//        直接改变原始数组
//        返回值： 排序好的数组（顺序排列 小-->大）
          
  var arr = [1, 3, 7, 9, 101, 5]
  var res = arr.sort(function (a, b) {
      return a - b
    })
  
  console.log(arr)  // 直接改变原始数组   [1, 3, 5, 7, 9, 101] 
  console.log(res)  // 排序好的数组  [1, 3, 5, 7, 9, 101] 

12. forEach() 方法：遍历数组

ES5

var colors = ["red","blue","green"];
// ES5遍历数组方法
for(var i = 0; i < colors.length; i++){ 
   console.log(colors[i]);  //  red blue green
}

ES6

// ES6 forEach
var colors = ["red","blue","green"];
colors.forEach(function(color){
   console.log(color);  //  red blue green
});

计算数组的和

var numbers = [1,2,3,4,5];
var sum = 0;
numbers.forEach(number=>sum+=number)
console.log(sum)//15

13.map() 方法：将数组映射成另一个数组

map通过指定函数处理数组的每个元素，并返回处理后新的数组，map 不会改变原始数组。

forEach和map的区别在于，forEach没有返回值。 map需要返回值，如果不给return，默认返回undefined

//  假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
var numbers = [1,2,3];
var doubledNumbers = [];


// es5写法
for(var i = 0; i < numbers.length; i++){
   doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers);//[2,4,6]


// es6 map方法
var doubled = numbers.map(function(number){
   return number * 2;
})
console.log(doubled);  // [2,4,6]

14.filter() 方法：从数组中找出所有符合指定条件的元素

filter() 检测数值元素，并返回符合条件所有元素的数组。 filter() 不会改变原始数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
   return index % 3 === 0 || x >= 8;
});
console.log(arr2);   // [1, 4, 7, 8, 9, 10]

15.indexOf() 方法：

返回某个指定的字符串值在字符串中首次出现的位置。

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));  // 2
console.log(arr.indexOf(5,2));  // 2
console.log(arr.indexOf(“5”));  // -1

16.reduce() 方法：

reduce方法有两个参数，第一个参数是一个回调函数（必须），第二个参数是初始值（可选）。回调函数有四个参数，依次为本轮循环的累计值、当前循环的元素（必须），该元素的下标（可选），数组本身（可选）。

reduce方法，会让数组的每一个元素都执行一次回调函数，并将上一次循环时回调函数的返回值作为下一次循环的初始值，最后将这个结果返回。

如果没有初始值，则reduce会将数组的第一个元素作为循环开始的初始值，第二个元素开始执行回调函数。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
   return prev + cur;
},0);
console.log(sum);  // 15

17.for…of…方法

es6新增了interator接口的概念，目的是对于所有数据结构提供一种统一的访问机制，这种访问机制就是for of。

let arr=[1,2,3,4,5];
for(let value of arr){
   console.log(value)  //  '1','2','3','4','5'
}

18.findIndex() 方法

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

1. 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
2. 如果没有符合条件的元素返回 -1

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var ret3 = arr1.findIndex((value, index, arr) => {
  return value > 4
})

var ret4 = arr1.findIndex((value, index, arr) => {
  return value > 14
})
console.log(ret3)  // 4
console.log(ret4)  // -1

19.some() 方法

some() 方法测试数组中的某些元素是否通过了指定函数的测试。
返回一个Boolean

var arr=[1,2,3]

arr.some(function(el,index)){
    return (el=3)  // true
}

20.split() 方法

把一个字符串分割成字符串数组:

var a = "something";
var arr = a.split("e");
console.log(arr);  // ['som', 'thing']