Javascript之数组

admin 2019-10-09 16:16:05 JavaScript 浏览(1778) 点赞(0)

简介

// 数组字面量创建数组（推荐）
var empty = [];                 // 没有元素的数组
var primes = [2, 3, 5, 7, 11];  // 有5个数值的数组
var misc = [1.1, true, "a"];    // 3个不同类型的元素
// 数组直接量中的值不一定要是常量，可以是任意的表达式
var base = 1024;
var table = [base, base+1, base+2, base+3];
// 也可以包含对象直接量或其他数组直接量
var b = [[1, {x:1, y:2}], [2, {x:3, y:4}]];

// new 关键字创建数组
// 调用时没有参数
var a = new Array();
// 调用时有一个数值参数，它指定长度
var a = new Array(10); 
// 显式指定多个数组元素或者数组的一个非数值元素
var a = new Array(5, 4, 3, 2, 1, "testing");

常用方法

见数组Array属性和方法整理

判断是否为数组

  • 方法一：instanceof
const arr = [1, 2, 3]
console.log(arr instanceof Array)
  • 方法二：constructor
const arr = [1, 2, 3]
console.log(arr.constructor === Array)
  • 方法三：toString
const arr = [1, 2, 3]
console.log(Object.prototype.toString.call(arr) === '[object Array]')
  • 方法四：Array.isArray()
const arr = [1, 2, 3]
console.log(Array.isArray(arr))

案例

数组去重

  • 方法一：利用Set
const unique = arr => Array.from(new Set(arr))

const arr = [1, 2, 2, 3, 4, 2, '1', 1]
console.log(unique(arr))
  • 方法二：双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值
function unique(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        j--
      }
    }
  }
  return arr
}
  • 方法三：利用indexOf
function unique(arr) {
  if (!Array.isArray(arr)) return
  const resArr = []
  arr.forEach(item => {
    if (resArr.indexOf(item) === -1) {
      resArr.push(item)
    }
  })
  return resArr
}
  • 方法四：利用includes
function unique(arr) {
  if (!Array.isArray(arr)) return
  const resArr = []
  arr.forEach(item => {
    if (!resArr.includes(item)) {
      resArr.push(item)
    }
  })
  return resArr
}
  • 方法五：利用hasOwnProperty
function unique(arr) {
  if (!Array.isArray(arr)) return
  const obj = {}
  return arr.filter((item, index, arr) => {
    const key = typeof item + item
    return obj.hasOwnProperty(key) ? false : (obj[key] = true)
  })
}
  • 方法六：使用filter
function unique(arr) {
  return arr.filter((item, index, array) => {
    return array.indexOf(item) === index
  })
}

多维数组去重

  • 一维数组去重
var arr = [2,3,4,2,3,5,6,4,3,2];
var unique = function(arr) {
  var result = [];
  arr.forEach(function(item){
    if(result.indexOf(item) < 0){
      result.push(item);
    }
  });
  return result;
}
console.log(unique(arr)); // [2,3,4,5,6]
  • 二维数组去重
var arr = [2,3,4,[2,3,4,5],3,5,[2,3,4,2],4,3,6,2];
var unique = function(arr){
  var result = [];
  arr.forEach(function(item) {
    if (Array.isArray(item)) {
      item.forEach(function(i) {
        if (result.indexOf(i) < 0) {
          result.push(i);
        }
      });
    } else {
      if (result.indexOf(item) < 0) {
        result.push(item);
      }
    }
  });
  return result;
}
console.log(unique(arr)); // [2,3,4,5,6]
  • 三维或多维数组去重
var arr = [2,3,4,[2,3,[2,3,4,2],5],3,5,[2,3,[2,3,4,2],2],4,3,6,2];
var unique = function(arr) {
  var result = [];
  var f = function(i) {
    i.forEach(function(item) {
      if (Array.isArray(item)) {
        f(item);
      } else {
        if (result.indexOf(item) < 0) {
          result.push(item);
        }
      }
    });
  };
  f(arr);
  return result;
}
console.log(unique(arr)); // [2,3,4,5,6]

数组扁平化

数组扁平化是指将一个多维数组变为一维数组，例如：[1, [2,3, [4,5]]] ------> [1,2,3,4,5]

  • 方法一：使用数组的toString方法，将数组变为字符串然后再用split分割还原为数组
const flatten = arr => arr.toString().split(',').map(item => Number(item))

const arr = [1, [2, 3, [4, 5]]]
console.log(flatten(arr))
  • 方法二：和上面的toString一样，join也可以将数组转换为字符串
const flatten = arr => arr.join(',').split(',').map(item => Number(item))
  • 方法三：递归的遍历每一项，若为数组则继续遍历，否则concat
function flatten(arr) {
  let resArr = []
  arr.forEach(item => {
    if (Array.isArray(item)) {
      resArr = resArr.concat(flatten(item))
    } else {
      resArr.push(item)
    }
  })
  return resArr
}
  • 方法四：使用reduce改写上面的方法
function flatten(arr) {
  return arr.reduce((result, item) => {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item))
    } else {
      result.push(item)
    }
    return result
  }, [])
}

// 简化写法一
function flatten(arr) {
  return arr.reduce((result, item) => {
    return Array.isArray(item) ? result.concat(flatten(item)) : [...result, item]
  }, [])
}

// 简化写法二
function flatten(arr) {
  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flatten(item) : [item])
  }, [])
}
  • 方法五：做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止
function flatten(arr) {
  while(arr.some(item => Array.isArray(item))) {
    // concat参数可以有多个。不是输入的话相当于push
    arr = [].concat(...arr)
  }
  return arr
}
  • 方法六：借助 apply/call
function flatten(arr) {
  while(arr.some(item => Array.isArray(item))) {
    arr = Function.apply.call([].concat, [], arr)
  }
  return arr
}
  • 方法七：ES6 flat
// 慎用：比如node就不支持
const flatten = arr => arr.flat(Infinity)

某对象是否在对象数组中

文章列表articleList，文章obj1和obj2是否在文章列表数组中
判断条件：文章id相同即可

const articleList = [
  { id: 1, title: '文章一', content: 'this is a test page'},
  { id: 2, title: '文章二', content: 'this is a test page'},
  { id: 3, title: '文章三', content: 'this is a test page'},
  { id: 4, title: '文章四', content: 'this is a test page'},
  { id: 5, title: '文章五', content: 'this is a test page'},
  { id: 6, title: '文章六', content: 'this is a test page'},
  { id: 7, title: '文章七', content: 'this is a test page'},
  { id: 8, title: '文章八', content: 'this is a test page'},
  { id: 9, title: '文章九', content: 'this is a test page'},
  { id: 10, title: '文章十', content: 'this is a test page'}
]
const obj1 = { id: 5, title: '文章5', content: 'this is a test page'}
const obj2 = { id: 20, title: '文章20', content: 'this is a test page'}

const itemInList = (item, list) => list.some(obj => item.id === obj.id)

console.log(itemInList(obj1, articleList))    // true
console.log(itemInList(obj2, articleList))   // false

对象数组合并去重

两个对象数组合并并去除重复项，然后根据id排序
重复条件：对象的id相同

const list1 = [
  { id: 1, title: '文章一', content: 'this is a test page'},
  { id: 2, title: '文章二', content: 'this is a test page'},
  { id: 3, title: '文章三', content: 'this is a test page'},
  { id: 4, title: '文章四', content: 'this is a test page'},
  { id: 5, title: '文章五', content: 'this is a test page'},
  { id: 10, title: '文章六', content: 'this is a test page'},
  { id: 15, title: '文章七', content: 'this is a test page'},
]
const list2 = [
  { id: 3, title: '文章三', content: 'this is a test page'},
  { id: 4, title: '文章四', content: 'this is a test page'},
  { id: 5, title: '文章五', content: 'this is a test page'},
  { id: 6, title: '文章六', content: 'this is a test page'},
  { id: 7, title: '文章七', content: 'this is a test page'},
  { id: 8, title: '文章八', content: 'this is a test page'},
  { id: 9, title: '文章九', content: 'this is a test page'},
  { id: 10, title: '文章十', content: 'this is a test page'}
]
// 方法一：从list2筛选出不在list1的项。跟list1进行拼接
// let arr = list2.filter(item => {
//   return !list1.some(obj => obj.id === item.id)
// })
// let list = list1.concat(arr)      // 合并去重后的结果
// list.sort((a, b) => a.id - b.id)  // 根据id递增排序
// console.log(list)

// 方法二：list2循环，每一项判断是否在list1中，如果不在，往list1里面插
list2.forEach(item => {
  !list1.some(obj => obj.id === item.id) && list1.push(item)  // 若该项不在list1中，push进去
})
list1.sort((a, b) => a.id - b.id)   // 根据id递增排序
console.log(list1)

对象数组去除指定项

去除id为4、6、9的项

const arr = [4, 6, 9]
let list = [
  { id: 1, title: '文章一', content: 'this is a test page'},
  { id: 2, title: '文章二', content: 'this is a test page'},
  { id: 3, title: '文章三', content: 'this is a test page'},
  { id: 4, title: '文章四', content: 'this is a test page'},
  { id: 5, title: '文章五', content: 'this is a test page'},
  { id: 6, title: '文章六', content: 'this is a test page'},
  { id: 7, title: '文章七', content: 'this is a test page'},
  { id: 8, title: '文章八', content: 'this is a test page'},
  { id: 9, title: '文章九', content: 'this is a test page'},
  { id: 10, title: '文章十', content: 'this is a test page'}
]

list = list.filter(item => arr.indexOf(item.id) === -1)
console.log(list)

创作不易，若本文对你有帮助，欢迎打赏支持作者！

 分享给好友：