15.数组的方法（改变原数组和不改变原数组）_数组截取不改变原数组-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55688275/article/details/139150229

这篇博客详细介绍了JavaScript中两种类型的数组方法：改变原数组（如pop、push、shift等）和不改变原数组（如join、concat、slice等）。文章通过实例解释了每个方法的作用、语法和返回值，帮助读者理解如何在实际开发中应用这些数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改变原数组

（1）pop

语法：数组名.pop()

作用：删除数组最后一项

返回值：返回被删除的那一项
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.pop()
console.log(arr) //['zhangsna', 'lisi', 'wanger']
console.log(res) //"mazi"
（2）push

语法：数组名.push(数据)

作用：在数组末尾添加数据

返回值：返回数组的长度
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.push("我是push")
console.log(arr)  //['zhangsna', 'lisi', 'wanger', 'mazi', '我是push']
console.log(res)  //5
（3）shift

语法：数组名.shift()

作用：删除数组第一项

返回值：返回被删除的数据
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.shift()
console.log(arr) //['lisi', 'wanger', 'mazi']
console.log(res) //"zhangsna"
（4）unshift

语法：数组名.unshift(数据)

作用：子啊数组最前面插入数据

返回值：返会数组长度
var arr=["zhangsna","lisi","wanger","mazi"]

var res=arr.unshift("我是unshift",'1111')
console.log(arr) //['我是unshift', '1111', 'zhangsna', 'lisi', 'wanger', 'mazi']
console.log(res) //6
（5）splice

语法：

作用：截取字符串

返回值：返回被截取的字符串

语法：

①数组名.splice(开始索引)
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.splice(1) //开始索引
console.log(arr) //['zhangsna']
console.log(res) //['lisi', 'wanger', 'mazi']
②数组名.splice(开始索引,截取的个数)
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.splice(2,4) 
console.log(arr) //['zhangsna', 'lisi']
console.log(res) //['wanger', 'mazi']
③数组名.splice(开始索引，截取的个数，插入的数据1，插入的数据2...)
var arr=["zhangsna","lisi","wanger","mazi"]
var res=arr.splice(1,1,'插入数1','插入数2') 
console.log(arr) //['zhangsna', '插入数1', '插入数2', 'wanger', 'mazi']
console.log(res) //['lisi']
（6）reverse

语法：数组名.reverse()

作用：翻转数组

返回值：返回翻转的数组
var arr = ["zhangsan", "lisi", "wanger", "mazi"];
var res = arr.reverse();
console.log(res);//['mazi', 'wanger', 'lisi', 'zhangsan']
console.log(arr);//['mazi', 'wanger', 'lisi', 'zhangsan']
（7）sort

语法：数组名.sort()

作用：对数组排序（字符串-对字符一位一位的比较），默认从小到大排

返回值：返回排序完的数组
var arr = [1, 88, 44, 12, "A", "a"];
var res = arr.sort();
console.log(res); //[1, 12, 44, 88, 'A', 'a']
console.log(arr); //[1, 12, 44, 88, 'A', 'a']

/*
相当于
var res = arr.sort(function (a, b) {
    return a - b;
});
*/
从小到大排
var arr = [1, 88, 44, 12, "A", "a"];
var res = arr.sort(function (a, b) {
     return b - a;
});
console.log(res); [88, 44, 12, 1, 'A', 'a']
console.log(arr); [88, 44, 12, 1, 'A', 'a']

不改变原数组

（1）join

语法：数组名.join(连接符）

作用：将数组转为字符串

返回值：返回连接好的字符串
  var arr = ["hh", "yy", "ee"];
  var res = arr.join("---");
  console.log(res, typeof res); //hh---yy---ee string   string
  console.log(arr); //["hh", "yy", "ee"]
若连接符为空，则默认用逗号连接
//   var res = arr.join();
//   console.log(res, typeof res); //hh,yy   string
//   console.log(arr); //['hh', 'yy']
（2）concat

语法：数组名.concat()

作用：拼接数据或数组

返回值：返回拼接好的新数组
var arr = ["hh", "yy"];

var res = arr.concat("加入1");
console.log(res); //['hh', 'yy', '加入1']

//和push的区别
//1.concat会将要拼接进去的数组拆分开  一个个的加入，push会将要加入的数组作为整体
//2.push会改变原数组  concat不会 
var res2 = arr.concat(["数据1", "数据2"]); //['hh', 'yy', '数据1', '数据2']
console.log(res2);

var res3 = arr.push(["数据1", "数据2"]); //["hh", "yy",['数据1', '数据2']]
（3）slice

语法：数组名.slice(开始索引，结束索引)

作用：截取数据

返回值：返回截取数据组成的新数组
var arr = ["a", "b", "c", "d", "e"];
//开始索引和结束索引都不写截取整个数组
var res = arr.slice();
console.log(res);         //['a', 'b', 'c', 'd', 'e']

//开始索引不写，默认为0
var res1 = arr.slice("", 2);
console.log(res1);         //['a', 'b']

//结束索引不写，默认截取到最后一个
var res2 = arr.slice(2);
console.log(res2);         //['c', 'd', 'e']

//包前不包后（包含开始索引，不包含结束索引位置的数据）
var res3 = arr.slice(0, 2);
console.log(res3);        //['a', 'b']
（4）filter

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

作用：过滤符合条件的项

返回值：返回新数组，包含满足条件的项，若没有返回空数组
var arr = [1, 2, 3, 4, 5, 6, 7];
//item表示数组的每一项
//index表示数组的索引
//origin表示原数组，此案例表示arr
var res = arr.filter(function (item, index, origin) {
    return item > 4;  //返回大于4的数据
});
console.log(res);       //[5,6,7]
（5）findIndex

语法：数组名.findIndex(function(item,index.origin){})

作用：找到符合条件的第一个索引

返回值：返回对应的索引，没有符合条件的返回-1
var arr = [1, 8, 3, 4, 5, 6, 7];
var res = arr.findIndex(function (item, index, origin) {
    return item > 4;
});
console.log(res);  //1

var res1 = arr.findIndex(function (item, index, origin) {
    return item > 10;
});
console.log(res1); //-1
（6）find

语法：数组名.find(function(item,index.origin){})

作用：找到第一个满足条件的项

返回值：返回满足条件的值
      var arr = [1, 8, 3, 4, 5, 6, 7];
      var res = arr.find(function (item, index, origin) {
        return item > 4;
      });
      console.log(res);     //8

      var res1 = arr.find(function (item, index, origin) {
        return item > 10;
      });
      console.log(res1); //undefined
（7）foreach

语法：数组名.foreach(function(item,index.origin){})

作用：遍历每一项

返回值：没有返回值
      var arr = [1, 8, 3, 4, 5, 6, 7];
      var res = arr.forEach(function (item) {
        return item + 1;
      });
      console.log(res);     //undefined
（8）map

语法：数组名.map(function(item,index.origin){})

作用：映射数组(可以理解为每一项都做相同的操作）

返回值：返回一个和原数组相同长度的数组，其数据经过加工
      var arr = [1, 8, 3, 4, 5, 6, 7];
      var res = arr.map(function (item) {
        return item + 1;  //每一项都加1
      });
      console.log(res); //[2, 9, 4, 5, 6, 7, 8]
（9）indexOf

语法：数组名.indexOf(字符,开始索引)

作用：从前向后查找数据第一次出现的位置

返回值：返回查找到的索引，没有找到返回-1
      var arr = ["zz", "ll", "ww", "zz", "ll"];
      //查找'zz'第一次出现的索引
      var res = arr.indexOf("zz");
      console.log(res);        //0

      //从索引2开始查找'zz'第一次出现的索引
      var res1 = arr.indexOf("zz", 2);
      console.log(res1);        //3
（10）lastIndexOf

语法：数组名.lastIndexOf(字符,开始索引)

作用：从后向前查数据第一次出现的索引

返回值：返回对应的索引，没找到返回-1
     var arr = ["zz", "ll", "ww", "zz", "ll"];

      //倒着看'zz'第一次出现的索引
      var res = arr.lastIndexOf("zz");
      console.log(res); //3

      //从索引3的位置倒着看'll'第一次出现的索引
      var res1 = arr.lastIndexOf("ll", 3);
      console.log(res1); //1

      var res2 = arr.lastIndexOf("hh");
      console.log(res2); //-1
（11）every

语法：数组名.every(function(item,index,origin){})

作用：判断所有项是否都满足某个条件

返回值：如果都满足一个条件，那么返回true，否则返回false
      var arr = [2, 9, 4, 5, 6, 7, 8];
      var res = arr.every(function (item, index, origin) {
        return item > 1;    //条件
      });
      console.log(res);     //true

      var res1 = arr.every(function (item, index, origin) {
        return item > 5;
      });
      console.log(res1);       //false
（12）some

语法：数组名.some(function(item,index,origin){})

作用：判断是否有一项满足条件

返回值：如果有一项满足就返回true，否则返回fasle
      var arr = [2, 9, 4, 5, 6, 7, 8];
      var res = arr.some(function (item, index, origin) {
        return item > 1;
      });
      console.log(res); //true

      var res1 = arr.some(function (item, index, origin) {
        return item > 100;
      });
      console.log(res1); //false
（13）includes

语法：数据.includes(数据)

作用：判断是否包含此项

返回值：若包含为true，否则为false
      var arr = [2, 9, 4, "zz", "ll", 7, 8];
      var res = arr.includes("aa");
      console.log(res);        //false

      var res1 = arr.includes(9);
      console.log(res1);    //true
（14）reduce

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

prev：迭代的结果

init：迭代的初始值

作用：根据条件对每项做数据处理，将每次循环结构叠加

返回值：返回迭代的值
      var arr = [1, 1, 1, 1, 1];

      //没有设置init，那么prev默认为arr[0]的值
      //循环次数是arr.length-1
      //循环从[1]索引1开始
      var res = arr.reduce(function (prev, item, index, origin) {
        return prev + item;
      });
      console.log(res);        //5

      //设置init，那么prev=init的值
      //循环次数是arr.length
      //循环从[0]索引0开始
      var res1 = arr.reduce(function (prev, item, index, origin) {
        return prev + item;
      }, 100);
      console.log(res1);      //105
（15）flat

语法：数组名.flat(depth)

返回值:返回扁平后的数组

作用：扁平化数组
let arr = [[1, 2], [3, [4, 5]]]
var res=arr.flat(Infinity)
console.log(res)            //[1, 2, 3, 4, 5]

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

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

console.log(arr)            //[[1, 2], [3, [4, 5]]]
上一篇：14.js数组-优快云博客

下一篇：16.js数学方法和进制转换-优快云博客