整理好22个的处理数组的方法以及使用案例

JavaScript 中有一些处理数组的方法，它们可以帮助我们在数组中进行条件判断。一下是一些常用的：

1.push()、2.pop()、3.shift()、4.unshift()、5.concat()、6slice()、7.splice()、8.join()、9.indexOf()、10.lastIndexOf()、11.includes()、12.sort()、13.reverse()、14.some() 、15.every() 、16.filter()、17.find() 、18.findIndex()、19.forEach()、20.map() 、21.reduce()、22.reduceRight()

const dataList = [
    {
      name: '张三',
      age: 17,
      value: 10,
      out: true,
      time: '周'
    },
    {
      name: '李四',
      age: 18,
      value: 2,
      out: false,
      title: '月'
    },
    {
      name: '王五',
      age: 19,
      out: false,
      value: 3,
      title: '年'
    }
];

//1、push(): 在数组末尾添加一个或多个元素，并返回新的长度。
dataList.push({ name: '赵六', age: 20, value: 5 });
// 现在dataList为:
// [
//   { name: '张三', age: 17, value: 10, out: true, time: '周' },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' },
//   { name: '赵六', age: 20, value: 5 }
// ]

//2、pop(): 移除并返回数组的最后一个元素。
var removedItem = dataList.pop();
// removedItem为对象：{ name: '赵六', age: 20, value: 5 }
// 现在dataList为:
// [
//   { name: '张三', age: 17, value: 10, out: true, time: '周' },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]

//3、shift(): 移除并返回数组的第一个元素。

var removedItem = dataList.shift();
// removedItem为对象：{ name: '张三', age: 17, value: 10, out: true, time: '周' }
// 现在dataList为:
// [
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]


//4、unshift(): 在数组开头添加一个或多个元素，并返回新的长度。
dataList.unshift({ name: '小明', age: 16, value: 8 });
// 现在dataList为:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]


//5、concat(): 将两个或多个数组合并，不改变原数组，并返回一个新的数组。
var newArray = dataList.concat([{ name: '赵七', age: 21, value: 7 }]);
// newArray为新的数组:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' },
//   { name: '赵七', age: 21, value: 7 }
// ]
// dataList不变:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]



//6、slice(): 返回一个从指定起始索引到结束索引（不包括结束索引）选择的新数组，不改变原数组。

var newArray = dataList.slice(1, 3);
// newArray为新的数组:
// [
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]
// dataList不变:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]


//7、splice(): 在指定索引位置添加/删除元素，改变原数组，并返回被删除的元素组成的新数组。
var removedItems = dataList.splice(1, 2, { name: '钱八', age: 22, value: 9 });
// removedItems为被删除的元素组成的新数组: 
// [
//   { name: '李四', age: 18, value: 2, out: false, title: '月' },
//   { name: '王五', age: 19, out: false, value: 3, title: '年' }
// ]
// 现在dataList为:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '钱八', age: 22, value: 9 },
//   { name: '赵七', age: 21, value: 7 }
// ]


//8、join(): 将数组中所有元素转换为字符串，使用指定的分隔符连接，并返回结果。
var joinedString = dataList.join(' - ');
// joinedString为字符串: "小明 - 钱八 - 赵七"

//9、indexOf(): 返回指定元素在数组中第一次出现的索引，如果不存在则返回-1。

var index = dataList.indexOf({ name: '小明', age: 16, value: 8 });
// index为-1，因为该对象不是引用同一个内存地址


//10、lastIndexOf(): 返回指定元素在数组中最后一次出现的索引，如果不存在则返回-1。
var index = dataList.lastIndexOf({ name: '小明', age: 16, value: 8 });
// index为-1，因为该对象不是引用同一个内存地址

//11、includes(): 判断数组是否包含指定元素，返回布尔值。

var includesItem = dataList.includes({ name: '小明', age: 16, value: 8 });
// includesItem为false，因为该对象不是引用同一个内存地址


//12、sort(): 对数组进行原地排序，默认按字符串Unicode码点排序。
dataList.sort();
// 现在dataList为:
// [
//   { name: '小明', age: 16, value: 8 },
//   { name: '赵七', age: 21, value: 7 },
//   { name: '钱八', age: 22, value: 9 }
// ]

//13、reverse(): 颠倒数组中元素的顺序，改变原数组。
dataList.reverse();
// 现在dataList为:
// [
//   { name: '钱八', age: 22, value: 9 },
//   { name: '赵七', age: 21, value: 7 },
//   { name: '小明', age: 16, value: 8 }
// ]


//14、some(): 判断数组中是否至少有一个满足条件的元素，它会遍历数组中的每个元素，直到找到一个满足条件的元素，然后返回 true，否则返回 false

//(1) 判断数组 dataList 中out 是否都是true
var hasOut = dataList.some(function(item) {
  return item.out === true;
});
// hasOut为false，因为没有元素的out属性为true


//(2)判断数组 dataList 中是否存在年龄大于 18 的项。
const hasAdult = dataList.some(item => item.age > 18);
console.log(hasAdult); // 输出：true


//15、every(): 判断数组中是否每个元素都满足条件，返回布尔值。


//(1)判断数组 dataList 中的元素是否都具有 out 属性。
const allHaveOutProperty = dataList.every(item => item.hasOwnProperty('out'));
console.log(allHaveOutProperty); // 输出：true


//(2)判断value是不是大于0
 var allGreaterThanZero = dataList.every(function(item) {
  return item.value > 0;
});
// allGreaterThanZero为true，因为每个元素的value属性都大于0

//(3)检测数组中所有元素的年龄是否大于 16，如果是则返回true，如果有一个元素不满足条件，返回false
const isAgeGreaterThan16 = dataList.every(item => item.age > 16);
console.log(isAgeGreaterThan16); // Output: true

//16、filter(): 根据条件过滤数组中的元素，返回一个新的由通过筛选的元素组成的数组。

//(1)通过筛选age大于等于18的对象，创建一个新数组
const filteredData = dataList.filter(item => item.age >= 18);
console.log(filteredData);
// 输出结果:
// [
//   {
//     name: '李四',
//     age: 18,
//     value: 2,
//     out: false,
//     title: '月'
//   },
//   {
//     name: '王五',
//     age: 19,
//     out: false,
//     value: 3,
//     title: '年'
//   }
// ]

//(2)通过筛选出 out 值为 true 的对象，创建一个新数组
const filteredData = dataList.filter(item => item.out === true);
console.log(filteredData); // Output: [{name: '张三', age: 17, value: 10, out: true, time: '周'}]

//17、find(): 查找数组中符合指定条件的第一个元素并返回。
//(1)找到name等于'张三'的都一个对象
const foundItem = dataList.find(item => item.name === '张三');
console.log(foundItem);
// 输出结果:
// {
//   name: '张三',
//   age: 17,
//   value: 10,
//   out: true,
//   time: '周'
// }

//(2)找到年龄大于等于 18 的第一个对象
const foundData = dataList.find(item => item.age >= 18);
console.log(foundData); // Output: {name: '李四', age: 18, value: 2, out: false, title: '月'}


//18、findIndex(): 查找数组中符合指定条件的第一个元素的索引，并返回该索引值。

//(1)找到第一个age的值大于18的对象的索引
const foundIndex = dataList.findIndex(item => item.age > 18);
console.log(foundIndex); // 输出结果: 2

//(2)找到第一个 out 值为 false 的对象的索引
const foundIndex = dataList.findIndex(item => item.out === false);
console.log(foundIndex); // Output: 1

//19、forEach(): 遍历数组中的每个元素，对每个元素执行指定操作。
dataList.forEach(item => console.log(item.name));
// 输出结果:
// 张三
// 李四
// 王五

//20、map(): 根据指定操作对数组中的每个元素进行处理，返回一个新的数组
//通过对 value 属性加倍得到的结果
const mappedData = dataList.map(item => item.value * 2);
console.log(mappedData);
// 输出结果:
// [20, 4, 6]


//21、reduce():方法用于对数组中的每个元素执行一个函数，并将其结果汇总为单个值。它可以累计处理数组各个元素，最终返回一个值。
//计算数组 dataList 中所有元素的 value 属性的总和。
const totalValue = dataList.reduce((acc, item) => acc + item.value, 0);
console.log(totalValue); // 输出：15

//22、reduceRight方法与 reduce() 方法基本相同，但是它从数组的末尾开始遍历数组元素进行累计运算。
//(1)将数组 dataList 中的所有 name 属性值拼接成一个字符串，以逗号分隔。
const concatenatedNames = dataList.reduceRight((acc, item) => acc + (acc.length > 0 ? ',' : '') + item.name, '');
console.log(concatenatedNames); // 输出：'王五,李四,张三'
//(2)从右向左依次处理对象的 title 属性，并将字符串拼接起来
const concatenatedTitles = dataList.reduceRight((acc, item) => acc + item.title, '');
console.log(concatenatedTitles); // Output: '年月周'