数组的常用方法-（部分带有重构函数）-CFANZ编程社区

1、数组常用方法之 push

push 是用来在数组的末尾追加一个元素

返回值：追加数组的长度

注意：会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 push 方法追加一个元素在末尾
 arr.push(4)
 
 console.log(arr) // [1, 2, 3, 4]

2、数组常用方法之 pop

pop` 是用来删除数组末尾的一个元素

返回值：被删除的数据

注意：会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 pop 方法删除末尾的一个元素
 arr.pop()
 
 console.log(arr) // [1, 2]

3、数组常用方法之 unshift

unshift 是在数组的最前面添加一个元素

返回值：添加数据后，数组的长度

注意：会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 unshift 方法向数组的最前面添加一个元素
 arr.unshift(4)
 
 console.log(arr) // [4, 1, 2, 3]

4、数组常用方法之 shift

shift 是删除数组最前面的一个元素

返回值：删除的数据

注意：会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 shift 方法删除数组最前面的一个元素
 arr.shift()
 
 console.log(arr) // [2, 3]

5、数组常用方法之 splice

splice 是截取数组中的某些内容，按照数组的索引来截取

注意：会改变原数组

语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）

 var arr = [1, 2, 3, 4, 5]
 
 // 使用 splice 方法截取数组
 arr.splice(1, 2)
 console.log(arr) // [1, 4, 5]
 console.log(arr) // [1, 0, 5] 中间0不替换

arr.splice(1, 2) 表示从索引 1 开始截取 2 个内容

第三个参数没有写，就是没有新内容替换掉截取位置

 var arr = [1, 2, 3, 4, 5]
 
 // 使用 splice 方法截取数组
 arr.splice(1, 2, '我是新内容')
 
 console.log(arr) // [1, '我是新内容', 4, 5]

arr.splice(1, 2, '我是新内容')` 表示从索引 1 开始截取 2 个内容

然后用第三个参数把截取完空出来的位置填充

6、数组常用方法slice()截取数组

语法：数组.slie(起始索引,结束索引)

特点1：包前不包后

特点2：可以写负整数,就是倒数第几个，等价于 length+负整数

起始索引不写默认为0

结束索引不写默认为length

返回值：一个新数组；里面的数组就是截取的数据内容

注意：不会改变原数组

  // slice()
   // var arr = ['a','b','c','d','e'];
   // var res = arr.slice(1);
   // var res = arr.slice(1,3);
   // var res = arr.slice(0,-1);
   // console.log(arr);
   // console.log(res);

7、数组常用方法之 reverse

reverse` 是用来反转数组使用的

返回值：反转后的数组

注意：会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 reverse 方法来反转数组
 arr.reverse()
 
 console.log(arr) // [3, 2, 1]

8、数组常用方法之 sort

sort` 是用来给数组排序的

注意：会改变原数组

数组.sort() ASCII一位一位比较

数组.sort(function(a,b){return a-b}) 升序

数组.sort(function(a,b){return b-a}) 降序

返回值：排序后的数组

 var arr = [2, 3, 1]
 
 // 使用 sort 方法给数组排序
 arr.sort()
 
 console.log(arr) // [1, 2, 3]

这个只是一个基本的简单用法

9、数组常用方法之 concat

concat` 是把多个数组进行拼接

和之前的方法有一些不一样的地方，就是 concat 不会改变原始数组，而是返回一个新的数组

 var arr = [1, 2, 3]
 
 // 使用 concat 方法拼接数组
 var newArr = arr.concat([4, 5, 6])
 
 console.log(arr) // [1, 2, 3]
 console.log(newArr) // [1, 2, 3, 4, 5, 6]

注意： concat 方法不会改变原始数组

10、数组常用方法 filter

语法：数组.filter(function(item,index,arr){})

返回值：一个新的数组

- 原始数组中满足条件的数据

- 在回调函数中以return 的新形式书写过滤条件

 //  filter()
   // var arr = [1, 2, 3, 4, 5];
   // // 获取arr中大于3的数据 形成新数组
   // var res = arr.filter(function (item) {
   //   return item > 2;
   // })
   // console.log(res);
 /* 
     封装方法
       + 需求: 根据我的条件原始数组进行过滤，把原始数组中满足条件的数据拿出
              组成一个新的数组
       + 荔枝：
         - 原始数组：[10,20,30,40]
         - 条件 > 20
         - [30,40]
    */
 
   // 1. 准备方法
   Array.prototype.myFilter = function(cb){
     // 准备一个新数组
     var ary = [];
     // 根据 回调函数的条件， 向 新数组中 添加成员
     for(var i = 0;i<this.length;i++){
       // 调用cb 
       var r = cb(this[i],i,this);
       // ary.push(this中满足条件的数据)
       r&&ary.push(this[i]);
     }
     // 将新数组返回
     return ary;
 
   }
 
   // 将来和私用
   var arr = [10,20,30,40];
   var res = arr.myFilter(function(item,index,arr){
     // 过滤条件
     return item>20;
   })
   console.log(res);

11、数组常用方法之 join 连接数组

语法：数组.join(连接赋符号)

如果连接符号不写，默认使用 ','

作用：把数组中的每一项数据，使用连接符号拼接为一个字符串

返回值：一个连接好的字符串

注意：不会改变原数组

 var arr = [1, 2, 3]
 
 // 使用 join 链接数组
 var str = arr.join('-')
 
 console.log(arr) // [1, 2, 3]
 console.log(str) // 1-2-3

12、数组常用方法 froEach()

专门用于遍历数组

语法：

 数组.forEach(function(item,index,arr) { //这个回调函数，数组有多少数据，就会执行多少次
  item 表示数组的每一个项
  index 表示数组每一个项的索引
  arr 表示原数组
  })

返回值：没有，undefined

意义：用来遍历数组

数组调用 arr.myForEach() // 报错 arr.myForEach is not a function

能不能像forEach一样，数组.myForEach 调用

需要让我们封装的方法能被数组直接调动

需要把这个方法赋值给一个 '空间'内

把我们自己写的 myForEach 放到 '数组方法空间' 中

'数组方法空间' 是一个对象数据类型

'数组方法空间' 被我们称之为 Array.prototype

将我们写的myForEach函数添加到 '数组方法空间' 这个对象中

Array.prototype.myForEach = myForEach;

此时数组就可以直接调用myForEach方法： arr.myForEach()

 // 在myForEach中也遍历数组
   Array.prototype.myForEach = myForEach;
   // 此时数组就可以直接调用myForEach方法
   // arr.myForEach(function b(item,index,arr){
   //   console.log(item,index,arr);
   // })
   
   // 求arr数组中的数据和
   var sum = 0;
   arr.myForEach(function(item){
     sum += item;
   })
   console.log(sum);

13、数组常用方法---map

语法: 数组.map(function(item,index,arr){})

作用：对原数组进行映射

返回值：就是一个和原数组长度一样的新数组，

并且新数组中的数据是被映射操作过的内容

注意：不改变原数组

 // map()
   // var arr = [10,20,30,40];
   // // arr中的数据加百分之30 
   // var res = arr.map(function(item){
   //   return item*1.3
   // })
   // console.log('原数组',arr);
   // console.log('映射操作后的数组',res);
 
 /* 
     封装一个和数组的map一样功能的方法---myMap
       + 需求：
         - 根据原数组的长度  返回 一个新的数组
         - 在回调函数中可以对原数组中的每一个数据进行操作(我需要的操作)
         - 新数组中得到的数据，就是操作后的数据
   */
   
   // 1. 准备一个方法，这个方法可以直接被数组调用
   Array.prototype.myMap = myMap
   function myMap(cb){
     // 在这个函数中，需要找到调用这个方法的那个数组
     //  因为需要遍历调用此方法的数组
     // 数组方法函数内的关键字 this 指向 调用这个方法的数组
     // console.log(this);
     
     // 准备一个新数组
     var ary = [];
     // 遍历数组 根据原始数组(this)的长度 和cb 的操作
     //   向ary中添加数据
     for (var i = 0; i < this.length; i++) {
       // 使用 myMap方法的人，会把他想要操作数据的方法写在 b 回调函数中
       // 需要调用cb,并且把每一项数据 给b函数
       // res接受的就是b函数内中的返回值
       //  因为b函数内返回的是 每一项 +1 的结果
       // res 得到的就是每一个数据 +1 的结果
       var res = cb(this[i],i,this);
       ary.push(res);           
     }
     // 把操作号的数组返回
     return ary;
   }
 
   // 2. 将来使用的时候
   var arr1 = [1,2,3,4];
   var arr2 = [10,20,30,40];
   var arr3 = [100,200,300,400];
   
   // 数组直接调用 我们自己写的myMap方法
   var resArr = arr3.myMap(function b(item,index,arr){
     // 一些操作，假设操作数据 +1
     // 以返回值的形式 把结果给出去
     return item+1;
   })
   console.log(resArr);

14、数组常用方法 every

判断数组中是不是所有项都满足条件

如果所有项都满足条件，那么返回 true

只要有任意一项不满足条件，就返回false

条件写在回调函数的 return 后

 // // every
   // // 判断数组中的数据是否都大于1
   // var r1 = arr.every(function(item){
   //   return item > 0;
   // })
   // console.log(r1);
   
   // 封装我们自己的every方法---myEvery
   // 1. 准备方法
   Array.prototype.myEvery = function (cb) {
     //  假设变量，假设所有项都满足条件
     var flag = true;
     // 通过遍历数组 来验证假设
     for (var i = 0; i < this.length; i++) {
       var r = cb(this[i], i, this)
 
       //如果在循环中，r 为 false 了，说明当前这一个项不满足条件
       // 推翻假设
       if (!r) {
         flag = false;
         break;
       }
     }
     // 返回flag
     return flag;
   }

15、数组常用方法some

判断数组中是不是有每一个项满足条件

只要数组中任意一项满足条件，就返回 true

只有所有项都不满足条件的时候，才返回false

条件写在回调函数的 return 后

 // some
   // 判断数组中的数据是否有大于4的
   // var r2 = arr.some(function(item){
   //   return item > 4;
   // })
   // console.log(r2);
   
   // 封装我们自己的some方法---mySome
   // 准备一个mySome方法
   Array.prototype.mySome = function (cb) {
     //  假设变量，假设没有数据满足条件
     var flag = false;
     for (var i = 0; i < this.length; i++) {
       var r = cb(this[i], i, this);
       if (r) {
         flag = true;
         break;
       }
     }
     return flag;
   }
   
   
   // 将来使用的时候
   var arr = [10, 20, 30, 40, 50];
   // // 判断是否都大于 20
   // var r1 = arr.myEvery(function (item) {
   //   return item > 5;
   // })
   // console.log(r1);
 
   // 判断是否有大于60的数
   var r1 = arr.mySome(function (item) {
     return item > 60;
   })
   console.log(r1);

16、数组常用方法flat()

语法：数组.flat(数字)

如果不传参数，默认拍平一层

传递参数是几，就拍平几层

不管多少维度都可以直接拍平，传递Infinity

作用：拍平一个数组(把多维数组转为一维)数组常用方法

   // flat()
   // var arr = [1,[2,[3,[4,[5]]]]];
   // console.log(arr);
   // // var resArr = arr.flat()
   // // var resArr = arr.flat(3)
   // var resArr = arr.flat(Infinity)
   // console.log(resArr);

17、数组常用方法 find()

- 语法：数组.find(function(item,index,arr){})

+ 返回值：数组中满足条件的第一个数据

- 回调函数中以 return 的形式书写

   // find()
   // var arr = [1, 2, 3, 4];
   // var res = arr.find(function (item) {
   //   return item > 1;
   // })
   // console.log(res);

18、数组常用方法 findIndex()

- 语法：数组.findIndex(function(item,index,arr){})

+ 返回值：数组中满足条件的第一个数据的索引

- 以 return 的形式书写

   // findIndex()
   // var arr = ['a', 'b', 'c', 'd'];
   // var arr = [1, 2, 3, 4];
   // var res = arr.findIndex(function (item) {
   //   // return item === 'c';
   //   return item > 2;
   // })
   // console.log(res);

19、数组常用方法 includes()

- 语法：数组.includes(数据)

+ 返回值：布尔值

- 如果数组中有该数据，那么就是true

- 如果数组中没有该数据，那么就是false

   //includes()
   // var arr = ['a', 'b', 'c', 'd'];
   // // var res = arr.includes('a');
   // var res = arr.includes('z');
   // console.log(res);

20、数组常用方法 fill()

- 语法：数组.fill(要填充的数据,开始索引,结束索引)

+ 开始索引不写默认为0

+ 结束索引不写默认为数组数据的最后一个索引

+ 特点：索引包前不包后(包含开始索引，不包含结束索引)

- 作用：替换，按照索引位置替换数组中的指定索引的数据

- 注意：直接改变原数组

- 注意：只能替换现有的数据，不能新增

   // fill()
   // var arr = [10,20,30,40,50];
   // arr.fill('数据1');
   // arr.fill('数据1',1);
   // arr.fill('数据1',1,3);
   // arr.fill('数据1',1,6);
   // console.log(arr);

21、数组常用方法 reduce()

- 语法：数组.reduce(function(prev,item,index,arr){},init)

- init 如果不写，默认使用数组的第一个数据

- 作用：叠加

— 返回值：就是叠加后的结果

   // reduce()
   // var arr = [10, 20, 30, 40, 50];
   // var res = arr.reduce(function (prev, item) {
   //   console.log(prev, item)
   //   return prev+item;
   // },0)
   // console.log(res);
   /* 
     你设置 init 位置的参数
       循环第一次， prev 就是init 位置的数据，item就是数组的第一项
       循环第二次及之后， prev 就是上一次 return 的内容，item就是数组当前的第几项
 
     你没有设置 init 位置的参数
       循环第一次， prev 就是数组的第一项[0]数据，item就是数组的第二项
       循环第二次及之后， prev 就是上一次 return 的内容，item就是当前数组的后一项
    */

22、数组常用方法 concat() 拼接数组

语法：数组.concat(数组2,数据,数组3...)

作用：把所有参数中的数组或数据追加到原始数组的后面，如果参数是数组，那么就拆开追加

返回值：拼接好的新数组

注意：不会改变原数组

   //concat()
   // var arr = [1,2,3];
   // var res = arr.concat('a','b','c',['d','e']);
   // console.log(arr);
   // console.log(res);

23、数组常用方法indexOf()

语法：数组.indexOf(要查找的数据)

数组.indexOf(要查找的数据,开始索引)

返回值：

从前向后查找数组中的数据，找到的第一个满足要求的数据

返回第一个满足要求的数据的索引

如果有这个数据则返回数据的索引；如果没有这个数据则-1

   //indexOf()
   // var arr = ['a', 'b', 'c', 'b', 'e'];
   // var res = arr.indexOf('b');
   // var res = arr.indexOf('b',2);
   // var res = arr.indexOf('z');
   // console.log(res);

24、数组常用方法 lastIndexOf()

语法：数组.lastIndexOf(要查找的数据)

数组.lastIndexOf(要查找的数据,开始索引)

返回值：

- 从后向前查找数组中的数据，找到的第一个满足要求的数据

- 返回第一个满足要求的数据的索引

- 如果有这个数据则返回数据的索引

- 如果没有这个数据则-1

   //lastIndexOf()
   // var arr = ['a', 'b', 'c', 'b', 'e'];
   // var res = arr.lastIndexOf('b');
   // var res = arr.lastIndexOf('b', 2);
   // var res = arr.lastIndexOf('z');
   // console.log(res);