js基础之数组方法

代码筑梦人
• 阅读 623

操作数组的方法

> push pop shift unshift join reverse concat slice splice 
> toString toLocaleString indeOf lastIndexOf sort find findIndex fill includes Array.from 
> forEach map filter every some reduce reduceRight new  for-in for-of
> new Set() new Map()
push pop 在数组最后添加或删除元素
shift unshift 在数组前面添加和删除元素
// slice(start, end)不包含end不改变原数组 和splice()区别

var arr = [1,2,3,4,5,6];
console.log(arr.slice(2)); //[3,4,5,6] 一个start默认到数组末尾
console.log(arr.slice(2,8)); //[3,4,5,6] 超过数组长度按arr长度算
console.log(arr.slice(2,5)); //[3,4,5] 2-4 不包含5下标
console.log(arr.slice(2,-1)); //[3,4,5] 相对于倒数第一个之前
console.log(arr.slice(-2));//[5,6] 一个参数负值从倒数第二个到最后
console.log(arr.splice(1)) // [] 改变原数组 清空
console.log(arr.splice(0, 1)) // 返回[1] 选取一个 arr=[2, 3, 4, 5, 6]
console.log(arr.splice(1, 0, 9)) // 返回[] arr = [1, 9, 2, 3, 4, 5, 6] 中间为0代表插入元素 第三个参数为插入的元素
console.log(arr.splice(1,1,8)) // 返回被替换的[2] arr = [1, 8, 3, 4, 5, 6]
 
// forEach 和 map ,reduce的区别
map:接收一个函数,返回新数组
forEach 接受一个函数,会改变原数组 一般用于对数组直接操作的修改
reduce- 会改变原数组 -- reduce函数是为数组中每一个元素依次执行回调函数,不包括数组中的被删除或未被赋值的元素
arr.reduce(callback(val,index,array), [initiaValue])
1.prev上一次调用回调返回的值 prev第一次为初始值initiaValue
2.数组中当前被处理的元素
3.index 当前元素在数组中的索引
4.array 调用reduce的数组

// for in 和 for of区别
for of是ES6新增的循环方法
for in循环遍历的是数组的键值(索引),而for of循环遍历的是数组的值。
给数组添加一个自定义属性name,并且赋值"数组"。
然后进行遍历输出的,会发现新定义的属性也被for in输出来了,
而for of并不会对name进行输出。

// every 和 some的区别
 every 相当于|| 的关系有一项满足就成立
const enum1 = (val) => {
   return val < 10
}
console.log([1,20,3,8].some(enum1)) // true
some相当于 &&的关系 所有满足才成立
console.log([1,20,3,8].every(enum1)) // false
// es6新增的 find() findIndex() fill() from()  includes() reduce
console.log([1,2,3].find(i => i >2)) // 3返回过滤后的元素
console.log([1,2,3].findIndex(i => i >2)) // 2 下标为2
console.log([1,2,3].fill(9,0,2))// 用新元素替换掉数组内的元素 fill(value, start, end) [ 9, 9, 3 ]  替换9 从0开始替换两个
console.log(Array.from('abcd')) // [ 'a', 'b', 'c', 'd' ] 把元素转化为数组
console.log(Array(1,2,3)) // [1, 2, 3])
// includes 类似indexOf
console.log([1,2,6].includes(6))  // true
console.log([1,2,6].indexOf(6,0)) // 2 返回下标 从第0个下标开始 查找6

string|array.indexOf(searchvalue,fromindex) //返回下标 不存在返回-1

// 数组A以双倍形式放到B数组
// for
var numbers = [1,2,3]
var doublenum = []
for (var i =0; i<numbers.length; i++){
  doublenum.push(numbers[i] * 2)
}
console.log(doublenum) // [ 2, 4, 6 ]
// map
const maparr = numbers.map(num => num *2)
console.log(maparr) // [ 2, 4, 6 ]
// 抽离某些属性到一个数组
const colorarr = [
  {
    color: 'red',
    
  },
  {
    color: 'yellow'
  }
]
const reducearr2 = colorarr.reduce((arr1, arr2) => {
  arr1.push(arr2.color) 
  return arr1
}, [])
console.log(reducearr2) // [ 'red', 'yellow' ]
// 数组去重的几种方法 [键值对|indexOf|排序后相邻去除法
// 键值对 --1
let testres = []
let testjson = {}
const testarr = [1,2,3,2,5,,]
for (let i = 0; i<testarr.length; i++) {
  if (!testjson[testarr[i]]) {
      testres.push(testarr[i])
      testjson[testarr[i]] = 1
  }
}
console.log(testarr) // [ 1, 2, 3, 2, 5, <1 empty item> ]

const testarr2 = [1,2,3,4,2,3,5]
// set --2方式
console.log([...new Set(testarr2)]) // [ 1, 2, 3, 4, 5 ]

// 原始indexOf-3
const testarr2 = [1,2,3,4,2,3,5]
for (let i = 0; i< testarr2.length; i++) {
  if (res_.indexOf(testarr2[i]) === -1) {
    res_.push(testarr2[i])
  }
}
console.log(res_) // [ 1, 2, 3, 4, 5 ]

//sort -4
  function arrRep (arr) {
    arr.sort()
    let temp = [arr[0]]
    for (let i=1; i<arr.length; i++) {
      if(arr[i] !== arr[i - 1]) {
        temp.push(arr[i])
      }
    }
    return temp
  }
  console.log(arrRep([1,2,3,4,2,3,3,2,1,5])) // [ 1, 2, 3, 4, 5 ]

//splice -5
  function arrRepSplice(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
  }
  console.log(arrRepSplice([1,2,3,4,2,3,3,2,1,5])) // [ 1, 2, 3, 4, 5 ]
// includes -6 arr.includes(指定元素(必填),指定索引值(可选,默认值为0) ),有值返回true,没有则返回false-6
 function arrIncludes (arr) {
    let arr1 = []
    for (let i = 0; i<arr.length;i++) {
      if(!arr1.includes(arr[i])) {
        arr1.push(arr[i])
      }
    }

    return arr1
  }
  console.log(arrIncludes([1,2,3,4,2,3,3,2,1,5])) // [ 1, 2, 3, 4, 5 ]
// filter -7 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
  function arrFilter (arr) {
    return arr.filter((item, idx) => {
      return arr.indexOf(item, 0) === idx
    })
  }
  console.log(arrFilter([1,2,3,4,2,3,3,2,1,5])) // [ 1, 2, 3, 4, 5 ]

// map -8
function repMap(arr) {
    let nmap = new Map()
    let narr = []
    for (let i = 0; i<arr.length; i++) {
      if (!nmap.has(arr[i])) {
        nmap.set(i, arr[i])
        narr.push(arr[i])
      }
    }
    return narr
  }

console.log(repMap([1,2,3,4,2,3,3,2,1,5])) // [ 1, 2, 3, 4, 5 ]

// 数组对象去重
  function repMap(arr) {
    let nmap = new Map()
    return arr.filter((item, idx) => {
      if(!nmap.has(item.x)) {
       return nmap.set(item.x, idx)
      }
    })
  }

console.log(repMap([{x:10,y:20},{x:11,y:21},{x:10,y:23}])) // [ { x: 10, y: 20 }, { x: 11, y: 21 } ]

数组合并去重



function combine() {
  let arr = [].concat.apply([], arguments) // 没有去重复的新数组
  return Array.from(new Set(arr))
}
console.log(combine([1,2,3,4,2,3,1])) // [ 1, 2, 3, 4 ]
console.log(combine([1,2,3,4],[3,2,4,5]))  // [ 1, 2, 3, 4, 5 ]
console.log(combine([1,2,3,4],[3,2,4,5], [5,3,6]))  // [ 1, 2, 3, 4, 5, 6 ]

其他方法

// Object.keys
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)) // [ '0', '1', '2' ]
console.log(Object.values(arr)) // [ 'a', 'b', 'c' ]

// Object.entries()
let entroj = {name:'xx',age: 20}
console.log(Object.entries(entroj)) // [ [ 'name', 'xx' ], [ 'age', 20 ] ]
console.log(Object.entries([1,2,3])) // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]
// Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皮卡皮卡皮 皮卡皮卡皮
4年前
javaScript 数组常用的几个方法
数组的方法总结1.数组转换字符串1.toString()2.toLocaleString()3.join()jsconstarr1,5,6,9,3,2,4,6console.log('toString'arr.toString())//toString1,5,6,9,3,2,4,6console.log('toLocaleSt
她左右 她左右
4年前
JavaScript数组常用方法总结
数组基本操作可以归纳为增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响push()unshift()splice()concat()push
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
待兔 待兔
3年前
12个有用的JavaScript数组技巧
数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的。1、数组去重1、from()叠加newSet()方法字符串或数值型数组的去重可以直接使用from方法。varplants'Saturn','Earth','Uranus','Mercury','Venus','Earth',
LinMeng LinMeng
4年前
js数组Api之reduce()方法的详解
reduce()的基础概念和用法在上一篇已经粗略讲过,本篇主要来讲一讲它的高级用法。reduce()能实现的功能,我们用常规的for()/forEach()也能搞定,但是相对来说reduce()算得上是捷径我们先来用例子解析一下initialValue参数vararr1,2,3,4;varsumarr.reduc
Wesley13 Wesley13
3年前
Java开发者容易犯的十个错误
!(https://oscimg.oschina.net/oscnet/c9f00cc918684fbe8a865119d104090b.gif)Top1.数组转换为数组列表将数组转换为数组列表,开发者经常会这样做:\java\List<StringlistArrays.asList(arr);Arr
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
3年前
ES6之数组常用方法
数组是js中常用的一个数据结构,熟练掌握和使用数组的方法更有利于快速开发,有些方法可以实现相同的功能,但是语义不一定适合。数组新增元素push尾部加入,返回修改后的数组长度。非常常见的数组追加方法。1,2,3.push(5)//尾部插入51,2,3,5//reutrn4u
Stella981 Stella981
3年前
JavaScript——数组(三)数组方法汇总
前面两篇大致介绍了一下数组的基本特性,这里说一下数组的常用方法:Array.join()   将数组中所有的元素都转化为字符串并拼接在一起,返回最后生成的字符串。  不改变原数组可通过指定的分隔符来分隔各个元素,如果不指定分隔符,则默认使用逗号。1vararr1,2,3;//创
达里尔 达里尔
1年前
给数组添加新数据,判断数据是否重复
多选要进行数组拼接,希望判断往原数组里添的新数据是否重复,封装个简易方法languageconstdataArrayname:'aaa',id:1,name:'bbb',id:2;constnewDataname:'ccc',id:2;//要添加的新数