有关数组的操作_哪些操作改变原数组 concat slice filter-CSDN博客

本文链接：https://blog.csdn.net/wythhhhh/article/details/125660926

有关数组的操作

数组常见的方法含有：forEach，find，findIndex，filter，some，includes，map，every，reduce，for…of，for…in，indexOf，reduceRight，ES6中新方法keys、values、entries
Js中改变原数组的操作：shift，unshift，pop，push，reserve，sort，splice
Js中不改变原数组的操作：concat，join，slice，tostring，map，filter，some，every等（Shift:删除一个元素，不返回被删元素）

Filter

过滤，需要返回一个对象，不改变原数组，返回一个数组

// 普通数组遍历
var arr = [1,3,2,1,7,9]
var sum = 0;
arr.filter((value, index, arr) => {
  console.log(value)  // 1
  console.log(index)  // 0
  console.log(arr)   // [1,3,2,1,7,9]
  console.log(arr[index]==value) // true
})

// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 1, value: 'a1', name: 'xiao1' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]
arr.filter(item => {
  item.key === 1
  return item
})  // [{ key: 1, value: 'a', name: 'xiao' }，{...}]
arr.filter(item => item.key === 1) // [{ key: 1, value: 'a', name: 'xiao' }，{...}]

Find

查找，返回找到的第一个值，需要返回一个对象

var arr = [1,3,2,1,7,9];
var sum = 0;
// 普通数组遍历
arr.find((value,index,arr) => {
  console.log(value)  // 1
  console.log(index)  // 0
  console.log(arr)  // [1,3,2,1,7,9]
  console.log(arr[index]==value);    // ==> true
  sum+=value
})
console.log(sum)  // 23
var maxArr = arr.find(item => item > 3)
console.log(maxArr) // 7: 只返回第一个找到的

// 复杂数据类型
// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]

// const a = arr.find(item => {
//   item.key === 1
//   return item
// })
const a = arr.find(item =>  item.key === 1)  //{key: 1, value: 'a', name: 'xiao'}

findIndex

查找单个元素（对于空数组函数不会执行，不改变原始数组，没有返回-1）

// 普通数组遍历
var arr = [1,3,2,1,7,9]
var sum = 0;

// const a = arr.findIndex(1)  错误
const a = arr.findIndex((value, index, arr) => {
  console.log(value) // 1
  console.log(index) // 0
  console.log(arr)  // [1,3,2,1,7,9]
})
const b = arr.findIndex(item => item === 1) // 0

// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 1, value: 'a1', name: 'xiao1' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]
const a = arr.findIndex(item => item.key === 1) // 0

forEach

遍历

// 普通数组遍历
var arr = [4,3,2,1];
var sum = 0;
// arr.forEach((val,index,arr) => {  // 这种写也是可以的
arr.forEach(function(val,index,arr){
    console.log(val);                //4
    console.log(index);              //0
    console.log(arr);                //[4,3,2,1]
    console.log(arr[index]==val);    // ==> true
    sum+=val           
});
console.log(sum);  //10

// 复杂数据类型
/ 复杂数据类型
var arr = [
  { 1: 'a' },
  { 2: 'b' },
  { 3: 'c' },
]
// 以第一项item为例
arr.forEach(item => {
  console.log(item) // { 1: 'a' }
})
// 获取arr的键名
const keysArr = []
const valuesArr = []
arr.forEach((value, index) => {
  console.log(value, index) // { 1: 'a' }, 0
  Object.keys(value)       // 获取一个对象的key，返回一个数组
  Object.values(value)    // 获取一个对象的值，返回一个数组
  keysArr.push(Object.keys(value)) // [ ["1"], ["2"], ["3"]  ]
  valuesArr.push(Object.values(value)) // [ ["a"], ["b"], ["c"]  ]
  keysArr.push(Object.keys(value).toString()) // [ "1", "2", "3" ]
  valuesArr.push(Object.values(value).toString()) // [ "a", "b", "c" ]
})
// 复杂数据类型
var arr = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' },
]
// 以第一项item为例
arr.forEach(item => {
  console.log(item) // { key: 1, value: 'a' },
  console.log(item.key) // 1
  console.log(item.value) // a
})

Map

遍历，需要返回一个对象，不会改变原数组（主要用来重构一个想要的数组对象）

var arr = [4,3,2,1];
var sum = 0;

// 普通数组遍历
arr.map((value,index,arr) => {
  console.log(value)  // 4
  console.log(index)  // 0
  console.log(arr)  // [4,3,2,1]
  console.log(arr[index]==value);    // ==> true
  sum+=value
})
console.log(sum)  // 10
const numberArr = arr.map(item => {
  return {
    number: item
  }
})
console.log(numberArr) // [{number: 4},{number: 3},{...},{...}]

// 复杂数据类型
// 复杂数据类型
var arr = [
  { 1: 'a' },
  { 2: 'b' },
  { 3: 'c' },
]
const keysArr = arr.map(item =>  Object.keys(item).toString() )
const valuesArr = arr.map(item =>  Object.values(item) )
console.log(keysArr) // [ "1", "2", "3" ]
console.log(valuesArr) // [ ["a"], ["b"], ["c"] ]
// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]
// 以第一项item为例
var arr1 = arr.map(item => {
  return {
    key1: item.key,
    value1: item.value,
  }
})
var arr2 = arr.map(item => {
  return {
    ...item
  }
})
var arr3 = arr.map(item => {
  return {
    value1: item.key+1,
    ...item
  }
})
var arr4 = arr.map(item => item.key)
console.log(arr1)  // [ {key1: 1, value1: 'a'}, {...},{...}]
console.log(arr2)  // [ {key: 1, value: 'a', name: "xiao"}, {...},{...}]
console.log(arr3)  // [ {value1: 2, key: 1, value: 'a', name: "xiao"}, {...},{...}]
console.log(arr4)  // [1, 2, 3]

For…in

一般用来遍历对象（obj[‘key’] === obj.key）

// for of 无法遍历对象
var obj = {
  key0: 'a',
  key1: 'b',
  key2: 'c',
  key3: 'd',
}
// hasOwnProperty用来判断对象中是否含有这个键
console.log(obj.hasOwnProperty('key0')) //true
console.log(obj.key0)  // a
console.log(obj['key0'])  // a
console.log(obj[key0])  // err

for( const item in obj) {
  console.log(item)  // key0,key1,key2,key3
  console.log(obj[item])  // a,b,c,d （obj[0]==a）
  console.log(obj.item)  // undefined
}
for (const item of obj) {
  console.log(item)  // error
}

For…of

一般用来遍历数组

// for...in获取键名（下标），for...of获取键值
var arr = [1,3,2,1,7,9]
for(const item in arr) {
  console.log(item)  // 0,1,2,3,4,5
  console.log(arr[item])  // 1,3,2,1,7,9
}
for(const item of arr) {
  console.log(item)  // 1,3,2,1,7,9
}

// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 1, value: 'a1', name: 'xiao1' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]

for(const item of arr) {
  if(item.value === 'a'){
    console.log(item)  // { key: 1, value: 'a', name: 'xiao' }
  }
}

Includes

用来判断一个数组是否包含一个指定的值，如果是返回true，否则返回fals

//include : 第二个参数所代表的意思为何处开始索引，默认为0
// 如果第二个参数大于数组长度，接返回false
// 如果第二个参数小于0，则从array.length + fromIndex开始
arr = [1,2,3,4]
arr.includes(2) // true
arr.includes(5) // false
arr.includes(2, 3) // false
[1,2,NaN].includes(NaN) // true

Some

检索数组中是否满足指定条件，有一个满足返回true（后面的元素不再检测），都没有返回false，不改变原始数组（如果数组为空，则任何条件皆返回false）

var arr = [1,3,2,1,7,9]
const a = arr.some(item => item === 1) // true
const b = arr.every(item => item === 1) // false

var arr = []
const a = arr.some(item => item === 0) // false
const b = arr.every(item => item === 0) // true

var arr = [1,1,1]
const a = arr.some(item => item === 1) // true
const b = arr.every(item => item === 1) // true

var arr = [1,2,3]
const a = arr.some(item => item === 4) // false
const b = arr.every(item => item === 4) // false

Every

检索数组中所有值满足该条件，都满足返回true，有一个不满足返回false

Reduce

对空数组不会执行回调函数

// arr.reduce(function(prev,cur,index,arr){ ... }, init)
// reduce可以将前面数组项遍历产生的结果与当前遍历项进行运算
// arr 表示原数组
// prev 表示上一次调用回调时的返回值，或者初始值 init  *重要*
// cur 表示当前正在处理的数组元素  *重要*
// index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1
// init 表示初始值
var arr = [1,3,2,1,7,9]

求项数之和

var sum = arr.reduce(function(prev, cur) {
  return prev + cur
},0)
console.log(sum) // 23

求数组项最大值

var max = arr.reduce(function (prev, cur) {
  return Math.max(prev,cur)
},[])

数组去重

var newArr= arr.reduce(function(prev, cur) {
  prev.indexOf(cur) === -1 &&  prev.push(cur)
  return prev
})

求项数之和

var arr = [1,3,2,1,7,9]
const sum = arr.reduce((total, value) => total+value) // 23
const sum1 = arr.reduce((total, value) => total+value, 5) // 28 以5为初始值开始计算
var objArr = [
  {name: 'math', score: 88},
  {name: 'chinese', score: 77},
  {name: 'english', score: 66},
]
const sum2 = objArr.reduce((total, value) => total+value.score, 0 ) // 231
const sum3 = objArr.reduce((total, value) => total+value.score, -10) // 221

求最大值

const max = objArr.reduce(function(total,value){ 
  return total > value.score ? total : value.score 
},0)  // 8

输出值拼接的字符串

const keyArr = objArr.reduce((total,value,index,arr) => {
  if(index === 0) {
    return value.name
  }else if(index === (arr.length-1)){
    return total + '和' + value.name
  }else{
    return total + '、' + value.name
  }
},'')   // math、chinese和english

两个数组求和

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2,
}
// dis[value.name] === dis['math'] ===0.5
var sum4 = objArr.reduce((total, value) => dis[value.name]*value.score + total, 0) console.log(sum4)  // 80.3

ReduceRight

和reduce相同相同，只是遍历顺序相反，从最后往前开始遍历

IndexOf

搜索数组中的元素，并返回他的位置（有返回第一次出现的位置，没有返回-1）

// indexOf：第二个参数表示从何处开始搜索，小于0则从array.length + fromIndex开始var arr = [1,3,2,1,7,9]
arr.indexOf(1) // 0
arr.indexOf(5) // -1

// 复杂数据类型
var arr = [
  { key: 1, value: 'a', name: 'xiao' },
  { key: 1, value: 'a1', name: 'xiao1' },
  { key: 2, value: 'b', name: 'xia' },
  { key: 3, value: 'c', name: 'xi' },
]
var a = arr.indexOf({ key: 1, value: 'a', name: 'xiao' })  // -1
var b = arr.indexOf( arr.find(v => v.key === 2))  // 2

keys、values、entries

entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

let obj = { a: 1,b: 2, c: 3 };
for (let key of Object.keys (obj) ) {
  console.log ( key) // 'a', 'b' , 'c'
}

for (let value of Object.values (obj) ) {
  console.log (value) // '1', '2' , '3'
}

for (let [key, value] of Object.entries(obj)) {
  console.log ([key, value])  // ['a', 1], ['b', 2] , ['c', 3]
}

两个数组比较

arrA = [1, 2, 3, 5, 6, 7]    arrB = [2, 3, 4, 5, 6, 9]
// 得到共同的元素：
arrCommon = arrA.filter(item => arrB.includes(item) ) 
// 得到另一边没有的arrC： 
arrA.map(item => {
  if(arrB.indexOf(item) < 0 ) {
     arrC.push(item) 
  }
})