JavaScript数组操作方法详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37772059/article/details/128712441

常见数组方法：

push() 向数组尾部添加元素，返回添加后的数组长度，原数组改变
pop() 从数组的尾部删除一个元素，返回删除的元素，原数组改变
unshift() 向数组头部添加元素，返回添加后的数组长度，原数组改变
shift() 从数组的头部删除一个元素，返回删除的元素，原数组改变
Slice() 提取数组，(1 起 2 止止不算)原数组不变

//两个参数
slice(参数1，参数2);
参数1：从何处开始选取（截取数组单元起始位置的索引下标）
参数2：从何处结束选取（截取数组单元结束位置的索引下标）

示例：
   var arr=['aa','bb','cc','dd','ee','ff'];
   var data=arr.slice(2,4);
   新数组data结果为： ["cc", "dd"]
   截取的内容包括起始索引下标数据[“cc”]，不包括结束索引下标的数据[“ee”]。



//一个参数
slice(参数1);

     var arr=['aa','bb','cc','dd','ee','ff'];
     var data=arr.slice(2);
     新数组data结果为： ["cc", "dd", "ee", "ff"]

splice() 剪接数组，(1 起 2 长 3 添加)原数组改变

// 删除功能  第一个参数为第一项位置，第二个参数为要删除几个
        var arr1 = ['a', 'b', 'c', 'b']
        var removeArray = arr1.splice(1, 1)
        console.log(arr1);  //['a', 'c', 'b']
 
 
        //插入功能  第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）
        var arr2 = ['a', 'b', 'c', 'b']
        var removeArray = arr2.splice(1, 0, "rabbit")
        console.log(arr2);  // ['a', 'rabbit', 'b', 'c', 'b']
 
 
        //替换功能  第一个参数（起始位置），第二个参数（替换的项数），第三个参数（插入任意数量的项）
        var arr3 = ['a', 'b', 'c', 'b']
        var removeArray = arr3.splice(1, 1, 'sss', '5', '562')
        console.log(arr3);  //['a', 'sss', '5', '562', 'c', 'b']

reverse() 反转数组，原数组改变
sort() 按位比较

//不传参
例1：
let arr1 = ['e', 'b', 'd', 'a', 'f', 'c'];
let result = arr1.sort(); // 将数组 arr1 进行排序
console.log('arr1 =' + JSON.stringify(arr1));
console.log('result =' + JSON.stringify(result));

result：
    arr1 =["a","b","c","d","e","f"]
    result =["a","b","c","d","e","f"]
sort 方法会改变原数组，而且方法的返回值也是同样的结果


例2：
let arr2 = [5, 2, 11, 3, 4, 1];
let result = arr2.sort(); // 将数组 arr2 进行排序
console.log('arr2 =' + JSON.stringify(arr2));
console.log('result =' + JSON.stringify(result));

result:
    arr2 = [1,11,2,3,4,5]
    result = [1,11,2,3,4,5]
使用 sort() 排序后，数字11竟然在数字2的前面。这是为啥呢？因为上面讲到了，sort()方法是按照Unicode 编码进行排序的。


//sort()方法：带参时，自定义排序规则
let arr = [5, 2, 11, 3, 4, 1];

// 自定义排序规则：升序排列
// a - b < 0, a在b的前面
// a - b = 0, a和b位置不变
// a - b > 0, a在b的后面
let result = arr.sort((a, b) => a - b);

console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));

Join() 参数最为连接字符，连接数组，转换为字符串，原数组不变

//join处理一个数组，不传任何参数
let arr = new Array()
arr[0] = 'feiniaomy.com'
arr[1] = 'mochu'
arr[2] = '飞鸟慕鱼'

let str = arr.join();
console.log("str => ", str)

result：
    str =>  feiniaomy.com,mochu,飞鸟慕鱼


//join()以指定的字符串分割数组的元素

// 使用字符串"|"分割数组的元素
let str1 = arr.join('|')
console.log("str1 => ", str1)

result:
    str1 =>  feiniaomy.com|mochu|飞鸟慕鱼

concat() 合并数组，原数组不变 arr1.concat(arr2,arr3)
find 查找符合条件的项
findIndex 查找符合条件项目的下标
toString()把数组转字符串(之间默认用逗号隔开)ES5

ES5 数组的常用方法

indexOf() 查找数组中某元素第一次出现的索引，若无返回-1
lastindexOf() 查找数组中某元素最后一次出现的索引，若无返回-1
forEach() 遍历数组，不接受返回值
map() 映射数组,接受返回值

// What you have
var officers = [
  { id: 20, name: 'Captain Piett' },
  { id: 24, name: 'General Veers' },
  { id: 56, name: 'Admiral Ozzel' },
  { id: 88, name: 'Commander Jerjerrod' }
];
// What you need
[20, 24, 56, 88]


//map
const officersIds = officers.map(officer => officer.id);

Filter() 筛选满足条件数组

var pilots = [
  {
    id: 2,
    name: "Wedge Antilles",
    faction: "Rebels",
  },
  {
    id: 8,
    name: "Ciena Ree",
    faction: "Empire",
  },
  {
    id: 40,
    name: "Iden Versio",
    faction: "Empire",
  },
  {
    id: 66,
    name: "Thane Kyrell",
    faction: "Rebels",
  }
];

//如果我们现在想要两个数组：一个是 rebel 飞行员，一个是 imperials 飞行员，用 .filter()
const rebels = pilots.filter(pilot => pilot.faction === "Rebels");
const empire = pilots.filter(pilot => pilot.faction === "Empire");

Every() 判断数组里每一个元素是否符合条件
Some() 判断数组里是否有一个符合条件的元素
reduce() 数组值累加（两个值累加完传递给第一个元素，直到最后）

Object.entries() 对象转换为数组

const object = { x:42,y:50 }
const entries = Object.entries(object)
console.log(entries)

//(2) [Array(2), Array(2)]

12. Object.fromEntries() 数组转换为对象

const object = [['x', 42], ['y', 50]]
const entries = Object.fromEntries(object)

console.log(entries)
//{x: 42, y: 50}

es6常见数组的用法

常见数组方法：

ES5 数组的常用方法