js数组其他操作方法

js数组操作方法

Array.at() 返回该索引对应的元素

接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。

// 数组及数组元素
const cart = ["apple", "banana", "pear"];

// 一个函数,用于返回给定数组的最后一个元素
function returnLast(arr) {
  return arr.at(-1);
}

// 获取 'cart' 数组的最后一个元素
const item1 = returnLast(cart);
console.log(item1); // 输出:'pear'
Array.entries() 方法返回一个新的数组迭代器 (en-US)对象

该对象包含数组中每个索引的键/值对

const array = ["a", "b", "c"];
const arrayEntries = array.entries();

for (const element of arrayEntries) {
  console.log(element);
}

// [0, 'a']
// [1, 'b']
// [2, 'c']
Array.every() 检测数值元素的每个元素是否都符合条件

返回一个布尔值

//测试一个数组的所有元素是否都存在于另一个数组中
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

Array.fill() 用于将一个固定值替换数组的元素

用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。
语法:

fill(value, start, end)
- value:必需。填充的值。
- start:可选。开始填充位置(默认0);负数索引从数组的末端开始计算。
- end:可选。停止填充位置 (默认为 array.length);负数索引从数组的末端开始计算;fill() 填充到但不包含 `end` 索引。
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// 一个简单的对象,被数组的每个空槽所引用
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
Array.filter() 检测数值元素,并返回符合条件所有元素的数组。

创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

//简单示例
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]
//使用 `filter()` 创建具有非零 `id` 的元素的 json
const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
];

let invalidEntries = 0;
function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}
const arrByID = arr.filter(filterByID);
console.log("过滤后的数组\n", arrByID);
// 过滤后的数组
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("无效条目数量 =", invalidEntries);
// 无效条目数量 = 5

如果想删除所有虚假值包括 null 、 undefined 、 0 、空字符串、 NaN 和 false,上面的过滤条件可以直接将布尔函数传递给 filter ,如下:
arr.filter(Boolean)

Array.find() 返回通过测试(函数内判断)的数组的第一个元素的值

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数;如果没有符合条件的元素返回 undefined

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// Expected output: 12

Array.findLast()并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 [undefined]

Array.findIndex()返回数组中满足提供的测试函数的第一个元素的索引

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数;如果没有符合条件的元素返回 -1

const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3

Array.findLastIndex()返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1

Array.flat() 返回一个包含将数组与子数组中所有元素的新数组
var arr1 = [1, 2, [3, 4]];  
arr1.flat();  
// [1, 2, 3, 4]  
  
var arr2 = [1, 2, [3, 4, [5, 6]]];  
arr2.flat();  
// [1, 2, 3, 4, [5, 6]]  
  
var arr3 = [1, 2, [3, 4, [5, 6]]];  
arr3.flat(2);  
// [1, 2, 3, 4, 5, 6]  
  
//使用 Infinity,可展开任意深度的嵌套数组  
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];  
arr4.flat(Infinity);  
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
**扁平化与数组空项:** flat() 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];  
arr5.flat();  
// [1, 2, 4, 5]
Array.flatMap()首先使用映射函数映射每个元素,然后将结果压缩成一个新数组
//map() 与 flatMap()

var arr1 = [1, 2, 3, 4];  
  
arr1.map(x => [x * 2]);  
// [[2], [4], [6], [8]]  
 
arr1.flatMap(x => [x * 2]);  
// [2, 4, 6, 8]  
  
// only one level is flattened  
arr1.flatMap(x => [[x * 2]]);  
// [[2], [4], [6], [8]]
Array.forEach()数组每个元素都执行一次回调函数

用于调用数组的每个元素,并将元素传递给回调函数。

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
Array.map()通过指定函数处理数组的每个元素,并返回处理后的数组

按照原始数组元素顺序依次处理元素

const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]
Array.of()将一组值转换为数组
console.log(Array.of('foo', 2, 'bar', true));
// Expected output: Array ["foo", 2, "bar", true]

console.log(Array.of());
// Expected output: Array []
Array.reduce()将数组元素计算为一个值(从左到右)

语法: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • total: 必需。初始值, 或者计算结束后的返回值
  • currentValue: 必需。当前元素
  • initialValue: 可选。传递给函数的初始值

Array.reduceRight() 将数组元素计算为一个值(从右到左)

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10
Array.some()检测数组元素中是否有元素符合指定条件

测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。

//判断数组元素中是否存在某个值
const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true
Array.sort()用于对数组的元素进行排序

默认排序顺序为按字母升序

[数字排序」:

//升序
var points = [40,100,1,5,25,10];  
points.sort(function(a,b){return a-b}); //1,5,10,25,40,100

//降序
var points = [40,100,1,5,25,10];  
points.sort(function(a,b){return b-a}); // 100,40,25,10,5,1

拓展:

数组去重

Set
var arr = [1, 2, 2, 'a', 'a', true, true, false, false, undefined, undefined, NaN, NaN];
console.log(new Set(arr)) // Set(7) {1, 2, 'a', true, false, …}
console.log([...new Set(arr)]); // [1, 2, 'a', true, false, undefined, NaN]
 // 或 console.log(Array.from(new Set(arr)));
includes
function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  return newArr
}
var arr = [1, 2, 2, 'a', 'a', true, true, false, false, undefined, undefined, NaN, NaN];
removeDuplicate(arr); // [1, 2, 'a', true, false, undefined, NaN]

数组对象去重

var arr = [
    {name: "张三",id: 1},
    {name: "李四",id: 2},
    {name: "王五",id: 3},
    {name: "李四",id: 2},
    {name: "张三",id: 1},
  ];
  
  //Set() + map
 const noRepeat = [...new Set(arr.map(item => JSON.stringify(item)))];
 // 反序列化
 const newArr = noRepeat.map(item => JSON.parse(item));
 console.log(newArr);
 /* 0: {name: '张三', id: 1}
 1: {name: '李四', id: 2}
2: {name: '王五', id: 3} */

// Map()+filter
function removeDuplicate(arr, id){
  const res = new Map();
  return arr.filter((item) => !res.has(item[id]) && res.set(item[id], 1));
}
console.log(removeDuplicate(arr, 'id'))
/* 0: {name: '张三', id: 1}
 1: {name: '李四', id: 2}
2: {name: '王五', id: 3} */

image.png

对象合并

var obj1 = {name: 'Lisa',age: 24};var obj2 = {sex: '女'}

//Object.assign
var newObj = {}
newObj = Object.assign(newObj,obj1,obj2);
console.log(newObj) //{name: 'Lisa', age: 24, sex: '女'}
// *:当两个对象中有相同字段,合并时,后者的key和value会覆盖前者的key和value

// es6
var newObj = {...obj1, ...obj2}
console.log(newObj) //{name: 'Lisa', age: 24, sex: '女'}

数组对象按某个属性合并

      // Example: 根据code合并数组,并将sl值累加,如下两种方法:
      var data = [
        { code: 1001, name: "苹果", sl: 12 },
        { code: 1001, name: "苹果", sl: 13 },
        { code: 1001, name: "苹果", sl: 14 },
        { code: 1001, name: "苹果", sl: 15 },
        { code: 1002, name: "西瓜", sl: 41 },
        { code: 1002, name: "西瓜", sl: 75 },
        { code: 1003, name: "梨", sl: 17 },
        { code: 1003, name: "梨", sl: 75 }
      ];
 
      // 根据reduce遍历累加,得到数组
   var newArray = data.reduce((accumulator, cur, index) => {
        let hasValue = accumulator.findIndex(current => {
            return current.code === cur.code;
        });
        hasValue === -1 && accumulator.push(cur);
        hasValue !== -1 && (accumulator[hasValue].sl = accumulator[hasValue].sl + cur.sl);
         return accumulator;
     }, []);
      console.log(newArray);
      /* 0: {code: 1001, name: '苹果', sl: 54}
        1: {code: 1002, name: '西瓜', sl: 116}
        2: {code: 1003, name: '梨', sl: 92}*/

参考:

Array - JavaScript | MDN (mozilla.org)

JavaScript Array 对象 | 菜鸟教程 (runoob.com)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值