js中的数组方法

js中的数组方法

数组是js中最常用到的数据集合,其内置的方法也很多,熟练掌握这些方法,可以有效的提高我们的工作效率,也对我们的代码质量有很大影响。

一、创建数组

1、使用数组字面量方法

var arr1 = [];       // 创建一个数组
var arr2 = [20];   // 创建一个包含1项数据为20的数组
var arr3 = ['lily','lucy','Tom'];     // 创建一个包含3个字符串的数组

2、使用Array构造函数

无参构造

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

带参构造

如果只传一个数值参数,则表示创建一个初始长度为指定数组的空数组

var arr2 = new Array(10);     // 创建一个包含10项的数组

如果传入一个非数值的参数或者参数大于1,则表示创建一个包含指定元素的数组

var arr3 = new Array('lily','lucy','Tom');     // 创建一个包含3个字符串的数组

3、Array.of方法创建数组(es6新增)

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

js中的数组方法
let arr1 = Array.of(1,2);
console.log(arr1.length);   // 2

let arr2 = Array.of(3);
console.log(arr2.length);   // 1
console.log(arr2[0]);   // 3
js中的数组方法

4、Array.from方法创建数组(es6新增)

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

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

arga(arr1,26,from);     // [arr1,26,from]
js中的数组方法

二、数组方法

数组原型方法主要有以下这些:

  • join():用指定的分隔符将数组每一项拼接为字符串
  • push():向数组的末尾添加新元素
  • pop():删除数组的最后一项
  • unshift():向数组首位添加新元素
  • shift():删除数组的第一项
  • slice():按照条件查找出其中的部分元素
  • splice():对数组进行增删改
  • filter():过滤功能
  • concat():用于连接两个或多个数组
  • indexOf():检测当前值在数组中第一次出现的位置索引
  • lastIndexOf():检测当前值在数组中最后一次出现的位置索引
  • every():判断数组中每一项都是否满足条件
  • some():判断数组中是否存在满足条件的项
  • includes():判断一个数组是否包含一个指定的值
  • sort():对数组的元素进行排序
  • reverse():对数组进行倒序
  • forEach():es5及以下循环遍历数组每一项
  • map():es6循环遍历数组每一项
  • find():返回匹配的项
  • findIndex():返回匹配位置的索引
  • reduce():从数组的第一项开始遍历到最后一项,返回一个最终的值
  • reduceRight():从数组的最后一项开始遍历到第一项,返回一个最终的值
  • toLocaleString()、toString():将数组转换为字符串
  • entries()、keys()、values():遍历数组

各个方法的基本功能详解

1、join()

join()方法用于把数组中的所有元素转换一个字符串,默认使用逗号作为分隔符

var arr1 = [1,2,3];
console.log(arr1.join());   // 1,2,3
console.log(arr.join('-'));   // 1-2-3
console.log(arr);   // [1,2,3](原数组不变)

2、push()和pop()

push()方法从数组末尾向数组添加元素,可以添加一个或多个元素

pop()方法用于删除数组的最后一个元素并返回删除的元素

js中的数组方法
var arr1 = ['lily','lucy','Tom'];
var count = arr1.push('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']

var item = arr1.pop();
console.log(item);   // Sean
console.log(arr1);   // ['lily','lucy','Tom','Jack']
js中的数组方法

3、unshift()和shift()

unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度

shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

js中的数组方法
var arr1 = ['lily','lucy','Tom'];
var count = arr1.unshift('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']

var item = arr1.shift();
console.log(item);   // Jack
console.log(arr1);   // [''Sean','lily','lucy','Tom']
js中的数组方法

4、sort():用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序

js中的数组方法
var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d']

function compare(value1,value2){
     if(value1 < value2){
          return -1;
     }else if(value1 > value2){
          return 1;
     }else{
          return 0;
     }
}

var arr2 = [13,24,51,3];
console.log(arr2.sort(compare));   // [3,13,24,51]

// 如果需要通过比较函数产生降序排序的结果,只要交后比较函数返回的值即可
js中的数组方法

5、reverse():用于颠倒数组中元素的顺序

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

6、concat():用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

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

7、slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组,可以接受一或两个参数,即要返回项的起始和结束位置(不包括结束位置的项)

js中的数组方法
var arr1 = [1,3,5,7,9,11];
var arrCopy = arr1.slice(1);
var arrCopy2 = arr1.slice(1,4);
var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);
var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);
console.log(arr1);   // [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]
js中的数组方法

8、splice():可以实现删除、插入和替换

8-1、删除元素,并返回删除的元素,2个参数:起始位置和要删除的项数

var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1);   // [5,7,9,11]
console.log(arrRemoved);   // [1,3]

8-2、向指定索引处添加或替换元素,3个参数:起始位置、0(要删除的项数)和要插入的项

js中的数组方法
// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1);   // [22,12,35,3,31,12]

// 替换元素
var arr2 = [22,3,8,58];
arr2.splice(1,1,6);   // [3]
console.log(arr2);   // [22,6,8,58]
js中的数组方法

9、forEach():3个参数:遍历的数组的项,索引、数组本身

10、map():返回一个新数组,会按照原始数组元素顺序依次处理元素

11、every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

js中的数组方法
var arr1 = [1,2,3,4,5];
var arr2 = arr1.every.every(x => {
     return x < 10;
});
console.log(arr2);   // true

var arr3 = arr1.every(x => {
     return x < 3;
});
console.log(arr3);   // false
js中的数组方法

12、some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

js中的数组方法
var arr1 = [1,2,3,4,5];
var arr2 = arr1.some(x => {
     return x < 3;
});
console.log(arr2);   // true

var arr3 = arr1.some(x => {
     return x < 1;
});
console.log(arr3);   // false
js中的数组方法

13、includes():es7新增,用来判断一个数组是否包含一个指定的值,使用===运算符来进行值比较,如果是返回true,否则false,参数有两个,第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置

js中的数组方法
var arr1 = [22,3,31,12,58];
var includes = arr1.includes(31);
console.log(includes);   // true

var includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在
console.log(includes2);   // false
js中的数组方法

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

reduce()方法从数组的第一项开始,逐个遍历到最后

reduceRight()方法从数组的最后一项开始。向前遍历到第一项

4个参数:前一个值、当前值、项的索引和数组对象

var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {
     return prev + cur;
},10);   // 数组一开始加了一个初始值10,可以不设默认0
console.log(sum);   // 25

15、toLocaleString()和toString():都是将数组转换为字符串

js中的数组方法
var arr1 = [22,3,31,12];
let str = arr1.toLocaleString();
var str2 = arr1.toString();

console.log(str);   // 22,3,31,12
console.log(str2);   // 22,3,31,12
js中的数组方法

16、find()和findIndex():都接受两个参数:一个回调函数,一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数:数组的某个元素、该元素对应的索引位置、数组本身,在回调函数第一次返回true时停止查找。

二者的区别是:find()方法返回匹配的值,而findIndex()方法返回匹配位置的索引

17、entries()、keys()和values():es6新增

entries()、keys()和values()--用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

js中的数组方法
for(let index of [a,b],keys()){
     console.log(index);
}
// 0
// 1

for(let elem of [a,b].values()){
     console.log(elem);
}
// a
// b

for(let [index,elem] of [a,b].entries()){
     console.log(index,elem);
}
// 0 'a'
// 1 'b'
js中的数组方法

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历

let arr1 = [a,b,c];
let entries = arrr1.entries();
console.log(entries.next().value);   // [0,a]
console.log(entries.next().value);   // [1,b]
console.log(entries.next().value);   // [2,c]
上一篇:Java中System类的常用方法 (#垃圾回收机制#获取程序运行时间#拷贝数组内容#退出Java虚拟机JVM)


下一篇:判断一个链表是否为回文序列