【js数组的基本使用方法】javascript最全的数组方法

数组转字符串—— .toString()

toString() 在把数组转换成字符串时，首先要将数组的每个元素都转换为字符串。当每个元素都被转换为字符串时，才使用逗号进行分隔，以列表的形式输出这些字符串。

参数：无
返回值：需要一个变量接受，数组内容转化为字符串，引用数据类型会返回数据类型，会发生隐式转换
是否改变原数组：不改变

let arr = ['one', 'two', 'there',  {
    
     name: 50, age: {
    
     ageted: 15 } }, [12, 12, 5, 2, , 5, {
    
     name: 13 }], true, false, null, undefined, "undefined"];
let str = '';
str = arr.toString();
console.log(typeof str, str);

数组转字符串——toLocaleString()

toLocalString() 方法与 toString() 方法用法基本相同，主要区别在于 toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。
会发生隐式转换

参数：无
返回值：新字符串
是否改变原数组：不改变

let arr = ['one', 'two', {
    
     name: 50, age: {
    
     ageted: 15 } }, [12, 5, 2, , 5, {
    
     name: 13 }], true, false, null, undefined, "undefined"];
let strted = arr.toLocaleString();
console.log(strted);//字符串

效 果 图

数组分割——join()

join() 方法可以把数组转换为字符串，不过它可以指定分隔符。在调用 join() 方法时

参数：可以传递一个参数作为分隔符来连接每个元素。如果省略参数，默认使用逗号作为分隔符，这时与 toString() 方法转换操作效果相同。
返回值：拼接好的字符串
是否改变原数组：不改变

let arr = ['red', 'green', 'blue', 'pink'];
let str = '';
str = arr.join()                  // red,green,blue,pink
str = arr.join('');               // redjoinbluepink
str = arr.join('=');             // red=join=blue=pink
console.log(typeof str, str);   

截取数组——.slice()

slice(start,end) :start与end都是索引，从start开始截取到end结束，包含start不包含end,

参数：array.slice(n, m)：从索引n开始查找到m处（不包含m）
array.slice(n) ：第二个参数省略，则一直查找到末尾
array.slice(0)：原样输出内容，可以实现数组克隆,相当于深拷贝
array.slice(-n,-m) ：slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项
返回值：返回一个新数组，不会改变原来的数组大小如果只有start，从start开始截取到结束
是否改变原数组：不改变

  let arr = ['one', 'two', {
    
     name: 50, age: {
    
     ageted: 15 } }, [12, 5, 2, , 5, {
    
     name: 13 }], true, false, null, undefined, "undefined"];
  let arr1 = arr.slice(1)
  console.log(arr1);//
  console.log(arr1[2][5].name);//13

效果图

截取数组——.splice()

splice(start, length): start是索引，length是个数，从start开始截取length个元素，包含start 返回一个新数组，会改变原来数组大小如果只有start,从start开始截取到结束

参数：splice(start, length)————start是索引，length是个数
返回值：返回一个新数组，不会改变原来的数组大小如果只有start，从start开始截取到结束
是否改变原数组：不改变

遍历数组 map()

一般用于数学计算，返回数组

map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变。

参数：map((element, index, array) => { /* … */ }) element：元素的值 index：元素的索引 array：被遍历的数组本身
返回值：返回一个新数组，每个元素都是回调函数的返回值。用map时改变原数组时需要定义一个新数组接收。
是否改变原数组：不会

let array = [1, 2, 3, 4, 5];
let Array = [];
Array = array.map((item) => {
    
    
  return item *= 2
});
console.log(Array);   // [2, 4, 6, 8, 10]

过滤数据 filter()

过滤数组中的元素，返回新数组，不影响原来的数组

filter() 为数组中的每个元素调用一次 callbackFn 函数，并利用所有使得 callbackFn 返回 true 或等价于 true 的值的元素创建一
新数组。callbackFn 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过
callbackFn 测试的元素会被跳过，不会被包含在新数组中。
遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组

参数：filter(function(element, index, array) { /* … */ }, thisArg) element：元素的值 index：元素的索引 array：被遍历的数组本身
返回值：新数组
是否改变原数组：不会

let arr = [1, 2, 0, 0, 3, 4, 0, 5, 6, 0, 7, 8, 9];
let len = arr.length;
let Array = [];
Array = arr.filter(item => item != 0)  // 过滤所有不为0的数字
console.log(Array);   // [1,2,3,4,5,6,7,8,9]

一些符合条件的值 some（ES6）

遍历数组中是否有符合条件的元素，返回值为Boolean值。这个它只要找到一个符合条件的，就返回 true，否则返回false
如果用一个空数组进行测试，在任何情况下它返回的都是false。

参数：some( function(element, index, array ) { /* … */ }， thisArg) element：元素的值 index：元素的索引 array：被遍历的数组本身
返回值：新数组
是否改变原数组：不会

let arr = [
  {
    
     id: 001, name: 'ling', done: false },
  {
    
     id: 002, name: 'ling', done: false },
  {
    
     id: 003, name: 'ling', done: true },
];
let Array = arr.some(item => item.done);

console.log(Array);  // true

每一个符合条件的值 every (ES6)

判断条件是否满足，如果都满足就返回true，只要有一个不满足返回false。返回布尔类型

遍历数组中是否有符合条件的元素，返回值为Boolean值。全部都符合条件，则返回true，否则返回false
若收到一个空数组，此方法在任何情况下都会返回 true。

参数：函数返回值判断
返回值：新数组
是否改变原数组：不会

简易版（es6箭头函数写法）

let arr = [
  {
    
     id: 001, name: 'ling', done: false },
  {
    
     id: 002, name: 'ling', done: false },
  {
    
     id: 003, name: 'ling', done: true },
];
let Array = arr.every(item => item.done);

console.log(Array);  // false

效 果 图
原版

find (ES6)

遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

参数：判断回调函数
返回值：元素 / undefined
是否改变原数组：不会

let arr = [1, 2, 3, 4, 5]; 
let element = arr.find(item => item == 3);
console.log(element);

findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

参数：判断回调函数
返回值：索引 / 1
是否改变原数组：不会

let arr = [1, 2, 3, 4, 5]; 
let element = arr.find(item => item == 3);
console.log(element);

push() 方法

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

参数：基本数据类型
返回值：一个新数组
是否改变原数组：会

let arr = [5, 6, 7, 8, 9, 10];
let a = arr.push(1);   
console.log(arr, a);              // [5, 6, 7, 8, 9, 10,1]

unshift() 方法

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

参数：单个元素
返回值：新数组
是否改变原数组：不会

let arr = [5, 6, 7, 8, 9, 10];
let a = arr.unshift(1, 2, 3, 4);   // a = 10
console.log(arr, a);              // [1,2,3,4,5,6,7,8,9,10]  10

shift

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

参数：未知
返回值：未知
是否改变原数组：未知

pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

参数：未知
返回值：未知
是否改变原数组：会

let arr = [1, 2, 3, 4, 5];
let a = arr.pop();    //  a = 5
console.log(arr, a);  // [1,2,3,4]  5

indexOf()

indexOf(searchElement, fromIndex) searchElement 要查找的元素
fromIndex: 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。如果参数中提供的索引
值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找 ，以
此类推。

注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值小
于 0，则整个数组都将会被查询。其默认值为 0。

参数：元素
返回值：返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
是否改变原数组：未知

let arr = [1,2,3,4,5,6,1,2,5];
console.log(arr.indexOf(1));       // 0
console.log(arr.indexOf(1, 1));    // 6

concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

参数：元素 / 数组
返回值：返回一个新数组。
是否改变原数组：未知

let arr1 = [1,2,3,4,5];
let arr2 = [5,6,7,8,9];
let arr3 = arr1.concat(arr2);
console.log(arr3);                 // [1,2,3,4,5,6,7,8,9]

合并多个数组用逗号分隔

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let arr = arr1.concat(arr2, arr3);
console.log(arr);                  // [1,2,3,4,5,6,7,8,9]

排序sort()

对数组的元素进行排序（默认是从小到大来排序 并且是根据字符串来 排序的）升序
sort在不传递参数情况下，只能处理10以内（个位数）数字排序

参数：可选(函数) 规定排序规则 默认排序顺序为按字母升序
返回值：排序后新数组
是否改变原数组：改变

颠倒数组reverse()

把数组倒过来排列

参数：无
返回值：倒序后新数组
是否改变原数组：改变

查找指定数值 includes()

判断一个数组是否包含一个指定的值

参数：指定的内容
返回值：布尔值
是否改变原数组：不会

查找最后一次出现索引 lastIndexOf()

检测当前值在数组中最后一次出现的位置索引

参数：array.lastIndexOf(item,start)：item:查找的元素，start:字符串中开始检索的位置
返回值：第一次查到的索引，未找到返回-1
是否改变原数组：不改变

查找第一次数据的索引indexOf()

检测当前值在数组中第一次出现的位置索引

参数：array.indexOf(item,start)： item:查找的元素，start:字符串中开始检索的位置
返回值：第一次查到的索引，未找到返回-1
是否改变原数组：不改变

数组遍历——for

最简单的一种循环遍历方法，也是使用频率最高的一种

是否能中断： 能
Continue 和break
break立即跳出整个循环，即循环结束、开始执行循环后面的内容（直接跳到大括号）
continue立即跳出当前循环，继续下一次循环

  let arr = ['one', 'two', {
    
     name: 50, age: {
    
     ageted: 15 } }, 50, [12, 5, 2, , 5, {
    
     name: 13 }], true, false, null, undefined, "undefined"];
  
  let arrted = []

  for (let i = 0; i < arr.length; i++) {
    
    
    console.log("for..in遍历", arr[i]);
    arrted.push(arr[i])
    if (arr[i] > 20) {
    
    
      break;
      // continue;
    }
  }
  console.log(arrted, arrted[4]);

效 果 图

数组遍历——for…in…

这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

是否能中断： 能

 let arr = ['one', 'two', {
    
     name: 50, age: {
    
     ageted: 15 } }, 50, [12, 5, 2, , 5, {
    
     name: 13 }], true, false, null, undefined, "undefined"];
  let forArr1 = []
  for (let key in arr) {
    
    
    forArr1.push(arr[key])
    if (arr[key] > 20) {
    
    
      break;
      // continue;
    }
    console.log(key, arr[key]);//key中是索引
  }
  console.log(forArr1, forArr1[4]);

效 果 图

数组遍历——for…of…（ES6）

虽然性能要好于 for..in...，但仍然比不上普通的 for 循环 注意：不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String*等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterato属性的，所以无法被for…of遍历

是否能中断： 能

  let forofArr = [];
  for (let key of arr) {
    
          // key中是值
    forofArr.push(key);
    console.log("for..of...", key);
    if (key > 20) {
    
    
      break;
      // continue;
    }
  }
  console.log(forofArr, forofArr[4]);

效 果 图

数组遍历——forEach

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

参数数： item：数组中正在处理的当前元素。
index：数组中正在处理的当前元素的索引。
array：forEach() 方法正在操作的数组。
不能使用return ， 不会改变原数组
返回值为：undefined
是否能中断： 能

let arr = ['apple', 'banana', 'orange'];
arr.forEach((item,index,arr) => {
    
    
  console.log(item,index);
})

// apple 0
// banana 1
// orange 2

一分坚持，一分努力，一分记忆，等于10份收获