JS数组方法

用户2995006815140
261 阅读9分钟

JS数组方法

一、创建数组方法

1、使用数组字面量创建

var arr = [] 
var arr = [ 20 ]  
var arr = [ "a", "b" ]

2、Array构造函数

无参构造

   var arr = new Array()   //创建一个空数组

有参构造

   var arr = new Array(20)   //创建一个20项的空数组
   var arr = new Array( "a", "b", "c" )   //创建指定项的数组

3、Array.of (ES6新增)

Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

let arr = Array.of(3)   //[ 3 ]  
console.log(arr.length)    //1  
console.log(arr[0])      //3  
let arr1 = Array.of("aa", "bb", "cc")    //['aa','bb','cc']

4、Array.from (ES6新增)

在 js 中将非数组对象转换为真正的数组是非常麻烦的。在 ES6 中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组。

function arga(...args) {  //...args剩余参数数组,由传递给函数的实际参数提供    
let arg = Array.from(args);    
console.log(arg);
}
arga( arr1 , 26,  from ); // [ arr1 ,26, from ]

二、检测数组方法

1、instanceof

let arr = []
let obh={}
consolog.log(arr instanceof Array)  //true
consolog.log(obj instanceof Array)  //false

2、Array.isArray(ES6新增)

let arr = []
let obh={}
consolog.log(Array.isArray(arr))  //true
consolog.log(Array.isArray(obj))  //false

三、数组循环方法

1、for循环

let arr=[1,2,3,4,5,6,7]
for(let i=0; i<arr.length; i++){
  return arr[i]   //返回数组的每一项
}

2、map循环 有返回值

  let arr=[1,2,3,4,5,6,7]
  arr.map((item,index)=>{
     return [item,index]  //返回每一项和对应的下标
  })
  let arr1= arr.map((item,index)=>{
     return item+1
  })
  console.log(arr1) //[2,3,4,5,6,7,8] //返回一个新数组

3、forEach循环 无返回值

  let arr=[1,2,3,4,5,6,7]
  let arr1 = []
  arr.forEach((item,index)=>{
  arr1.push(item)  //不需要return
 })

四、数组方法

1、join 数组转字符串

let arr = [1,2,3]
let arr1 = arr.join()   //123
let arr2 = arr.join(",")  //1，2，3  传入想转换的符号

2、push 和 pop 原数组改变

  • push 向数组末尾添加元素可以添加一个或多个

  • pop 删除数组的最后一个，并返回删除的元素

      var arr = ["Lily","lucy","Tom"];
  var count = arr.push("Jack","Sean");
  console.log(count);  // 5
  console.log(arr);   // ["Lily", "lucy","Tom","Jack","Sean"]
  var item = arr.pop()；
  console.log(item);   // Sean
  console.log(arr);   // ["Lily", "lucy", "Tom", "Jack"]

3、shift 和 unshift 原数组改变

  • shift 删除数组的第一项，返回删除的元素

  • unshift 向数组的开头添加一个或多个，返回数组的长度

      var arr = ["Lily","lucy","Tom"];
  var count = arr.unshift("Jack","Sean");
  console.log(count);  // 5
  console.log(arr);   //["Jack","Sean","Lily","lucy","Tom","Jack","Sean"]
  var item = arr.shift()；
  console.log(item);   // Jack
  console.log(arr);   // ["Sean","Lily", "lucy", "Tom", "Jack"]

4、sort

  • 对数组排序

  • 排序顺序可以是字母或数组，按升序或降序

  • 默认方式按字母

      var arr1 = ["a", "d", "c", "b"];
  console.log(arr1.sort());   // ["a", "b", "c", "d"]
  arr2 = [13, 24, 51, 3];
  console.log(arr2.sort());   // [13, 24, 3, 51]
  console.log(arr2);   // [13, 24, 3, 51](元数组被改变)

    • 为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

         function compare(value1, value2) {    
     if (value1 < value2) {    
       return -1;    
     } else if (value1 > value2) {     
       return 1;    
     } else {     
       return 0;    
     }
   }
   arr2 = [13, 24, 51, 3];
   console.log(arr2.sort(compare));   // [3, 13, 24, 51]

    • 如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：

        function compare(value1, value2) {    
    if (value1 < value2) {     
      return 1;    
    } else if (value1 > value2) {     
      return -1;    
    } else {     
      return 0;   
    } 
  }
  arr2 = [13, 24, 51, 3];
  console.log(arr2.sort(compare));   // [51, 24, 13, 3]

5、reverse 数组颠倒，反转

var arr = [13, 24, 51, 3];
console.log(arr.reverse());  //[3, 51, 24, 13]
console.log(arr);   //[3, 51, 24, 13](原数组改变)

6、concat 连接两个或多个数组 原数组改变

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy);   //[1, 3, 5, 7, 9, 11, 13]
console.log(arr);   // [1, 3, 5, 7](原数组未被修改)

7、slice 截取数组 返回从开始下标到结束下标的数组（包头不包尾 下标）不改变原数组

  • 一个参数时，返回从这个参数指定位置开始到当前数组的结尾
  • 两个参数时，返回起始位置和结束位置的项组成的数组，不包含结束位置，如果为负数参数，则让这个负数加上当前数组的长度来代替当前这个参数
var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);//相当于arr.slice(1,4)
var arrCopy4 = arr.slice(-4,-1);//相当于arr.slice(2,5)
console.log(arr);   //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy);   //[3, 5, 7, 9, 11]
console.log(arrCopy2);   //[3, 5, 7]
console.log(arrCopy3);   //[3, 5, 7]
console.log(arrCopy4);   //[5, 7, 9]

8、splice 可以删除、替换、添加 会改变原数组

  • 删除时，参数为删除项的下标和删除的项数两个参数，返回的是删除的元素所组成的数组
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr);   //[5, 7, 9, 11]
console.log(arrRemoved);   //[1, 3]
  • 添加时，参数为添加的下标，0，所添加的元素，返回的是原数组和添加的项组成的新数组
var array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35);  //[]
console.log(array1); // [22, 12, 35, 3, 31, 12]
  • 替换时，参数为替换的下标，删除的项数，想添加任意数量的项
const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8);   //[3]
console.log(array1);  // [22, 8, 31, 12]

9、indexOf 和 lastIndexOf indexOf从前往后找，lastIndexOf从后往前找

  • 一个参数时，则是要查找的项，找到了返回下标，找不到返回-1
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5));   //2
console.log(arr.lastIndexOf(5));   //5
  • 两个参数时，则从第二个参数为起始位置开始找到存在项的下标，从后往前数没有返回-1；indexOf第二个参数为负数时，传入几，就从后往前数几个数，在这些元素中去查找传入的元素，有的话则返回在数组中的下标，不存在返回-1
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5,2));   //2 即从开头下标2的位置为起始位置开始找5
console.log(arr.lastIndexOf(5,4));   //2 即从末尾开始，找到下标2为起始位置，继续找5
console.log(arr.indexOf("5"));   //-1
console.log(numbers.indexOf(3,-4)) //6 
//从后往前数的4个数中，（即在7,5,3,1中查询数字3，从前往后数），则存在数字3，且在数组中的位置为6 则返回6
console.log(numbers.indexOf(5,-6)) // 2 
//从后往前数的6个数中，（即在5,7,7,5,3,1中查询数字5 从前往后数），则存在数字5的第一个位置且在数组中的位置为2 则返回2

10、forEach 遍历数组，没有返回值，不会改变原数组，对数组中的每一项运行给定函数。函数参数为每一项，下标索引，数组本身

var arr = [11, 22, 33, 44, 55];
arr.forEach(function(x, index, a){ 
console.log(x +  |  + index +  |  + (a === arr));
}
);
输出为：
 11|0|true 
 22|1|true 
 33|2|true 
 44|3|true 
 55|4|true

11、map 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值,有返回值。不会改变原数组

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){ 
return item*item;
}
);
console.log(arr2);  //[1, 4, 9, 16, 25]

12、“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。不改变原数组

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]

13、fill es6新增 能使用特定值填充数组中的一个或多个元素。改变原数组

  • 一个参数时，该方法会用该参数的值填充整个数组。
let arr = [1, 2, 3,  'cc' , 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];
  • 不想改变数组中的所有元素，可以传入两个或三个参数，参数为：填充数值，起始位置参数，结束位置参数（不包括结束位置的那个元素）
let arr = [1, 2, 3,  'cc' , 5];
arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]
arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

14、every 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回 true。

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

15、some 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(x => x < 3);
console.log(arr2);  //true
var arr3 = arr.some(x => x < 1);
console.log(arr3);  // false

16、includes 判断数组中是否存在指定的值，存在返回true，否则返回false。参数为查找的值、开始查找的下标，第一个必填，第二个参数选填。

const array1 = [22, 3, 31, 12,  arr ];
const includes = array1.includes(31);
console.log(includes); // true
const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在
console.log(includes1); // false

includes使用===运算符来进行值比较，仅有一个例外：NaN 被认为与自身相等。

let values = [1, NaN, 2];right
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true

17、reduce 和 reduceRight 都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值。

  • reduce从第一个开始遍历到最后一个
  • reduceRight从最后一个开始遍历到第一个
  • 4个参数：前一项，当前项，下标，数组本身
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur
},10);   //数组一开始加了一个初始值10,可以不设默认0
console.log(sum);  //25

18、toLocaleString 和 toString 将数组转换为字符串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();
console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

19、find 和 findIndex

  • find 查找符合第一个条件的项，找到了就返回当前项
  • findIndex 查找第一个符合条件的索引，找到了则返回符合项的下标
let arr = [1, 2, 3,  arr , 5, 1, 9];
console.log(arr.find((item, index, arr) => {   
return value > 2
})); // 3 返回匹配的值
console.log(arr.findIndex((value, index, arr) => {   
return value > 2
})) // 2 返回匹配位置的索引

20、copyWithin()（es6 新增）用于从数组的指定位置拷贝元素到数组的另一个指定位置中。会改变原有数组。

//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3,  arr , 5];
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含停止的位置）。

let arr = [1, 2, 3,  arr , 5, 9, 17];
//从索引3的位置开始粘贴 即从arr开始
//从索引0的位置开始复制 即1，2 ，3
//遇到索引3时停止复制 17时停止不包含17本身
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

21、flat() 和 flatMap() （es6 新增）

  • flat数组扁平化处理默认值为1，传入几则扁平化基层
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));// expected output: [0, 1, 2, [3, 4]]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位
var arr4 = [1, 2, , 4, 5];
arr4.flat();// [1, 2, 4, 5]
  • flatMap 对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

22、entries(),keys() 和 values() （ES6）遍历数组

  • entries对键值对的遍历，keys对键名的遍历，values对键值的遍历

     //对象
 let data = {aa:2,bb:4,cc:7}
 console.log(Object.keys(data)); //['aa', 'bb', 'cc']
 console.log(Object.values(data)); // [2, 4, 7]
 console.log(Object.entries(data)); //[['aa', 2],['bb', 4],['cc', 7]]
 //数组
 let data = [1,2,3,6]
 console.log(Object.keys(data)); //['0', '1', '2', '3']
 console.log(Object.values(data)); // [1, 2, 3, 6,]
 console.log(Object.entries(data)); //[['0', 1], ['1', 2], ['2', 3],['3', 6]]
avatar
文章
阅读
粉丝