数组方法 包含es6

有回调函数的方法都有两个参数(不写默认是window)

例:map,forEach,find

let arr=[1,2,3,4];
let obj={a:1,b:2};
let _this=null;
arr.map(v=>{_this=thisreturn v+1
},obj)
console.log(_this)

数组方法细则

方法功能参数返回值是否改变原数组备注
arr.push()从后面添加元素需要添加的元素数组的长度
arr.pop()从后面删除元素,只能是一个删除的元素      
arr.shift()从前面删除元素,只能删除一个删除的元素      
arr.unshift()从前面添加元素需要添加的元素数组的长度         
arr.concat()连接数组需要连接的数组 连接后的新数组        
str.split()将字符串转为数组( “ ”  )转化之后的数组        
arr.sort(callback)将数组进行排序(a,b)=>{return a-b}排序后的数组      
arr.reverse()将数组反转  反转之后的数组      
arr.slice(start,end)截取数组(索引值,索引值)   不包含结束 切出来的数组        
arr.forEach(callback)遍历数组  ( v, i, arr)     arr[i]赋值改变原数组 ,v不行
arr.map(callback)映射数组  ( v, i, arr)新数组      arr[i]赋值改变原数组 ,v不行
arr.filter(callback)过滤数组  ( v, i, arr)新数组          
arr.every(callback)全部满足返回true  ( v, i, arr)Boolean         
arr.some(callback)只要有一个满足返回true  ( v, i, arr)Boolean           
arr.reduce(callback)累加     (上一次调用回调返回的值,当前处理的数组项)数组元素的和         
arr.reduceRight(callback)从后向前累加 (上一次调用回调返回的值,当前处理的数组项)数组元素的和       
arr.indexOf()查找元素索引,有则返回第一个的索引,没有返回-1      ( v )索引       
arr.lastIndexOf()从后向前查找      ( v )索引        
以下是es6 
 Array.from()  将伪数组变为数组(有length的都行)    字符串等 数组      
Array.of()将一组值转换为数组,类似声明数组      数字等数组        
arr.find(callback)找到第一个符合条件的元素  ( v, i, arr)找到的第一个值      
arr.findIndex(callback)找到第一个符合条件的元素的索引  ( v, i, arr)找到的第一个值的索引        
arr.fill(target,start,end)填充数组 (待填充元素,开始索引,结束索引)数组     
  arr.includes()判断数组中是否有给定的值(可判断NaN)vboolean      
  arr.keys()遍历数组键名数组       
    arr.values() 遍历数组键值数组      
arr.entries()遍历数组键值对  数组    

 参数: i 索引值      n 个数

 1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]

2 arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)  //[1,2,3,4]

3 arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.shift())  // 1
console.log(arr)   // [2,3,4,5]

4 arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]

5 arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

let arr=[1,2,3,4,5]let arr1=arr.splice(0,2,5)
// 从第三个值开始替换console.log(arr1) //[1,2]
console.log(arr) //[5,3,4,5]

6 arr.concat() 连接两个数组 返回值为连接后的新数组

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]

7 str.split() 将字符串转化为数组

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

8 arr.sort() 将数组进行排序,返回值是排好的数组,默认是按照最左边的数字进行排序,不是按照数字大小排序的,见例子。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]
//字母排序 a.localeCompare(b)let arr=[{name:'key'},{name:'value'}]arr.sort((a,b)=>{return a.name.localeCompare(b.name)})

9 arr.reverse() 将数组反转,返回值是反转后的数组

let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]

10 arr.slice(start,end) 切去索引值start到索引值end的数组,不包含end索引的值,返回值是切出来的数组

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3))   // [2,3]
console.log(arr)    //  [1,2,3,4,5]

11 arr.forEach(callback) 遍历数组,无return  即使有return,也不会返回任何值,并且会影响原来的数组  callback的参数: value --当前索引的值

          index --索引

          array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{console.log(`value:${value}    index:${index}     array:${array}`)})   //  value:1    index:0     array:1,2,3,4,5//  value:2    index:1     array:1,2,3,4,5//  value:3    index:2     array:1,2,3,4,5//  value:4    index:3     array:1,2,3,4,5//  value:5    index:4     array:1,2,3,4,5let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{value = value * 2console.log(`value:${value}    index:${index}     array:${array}`)})   console.log(arr)// value:2    index:0     array:1,2,3,4,5// value:4    index:1     array:1,2,3,4,5// value:6    index:2     array:1,2,3,4,5// value:8    index:3     array:1,2,3,4,5// value:10   index:4     array:1,2,3,4,5// [1, 2, 3, 4, 5]

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

var res = arr.forEach((item,index,arr)=>{     

 arr[index] = item * 2; 

 return arr 

})

console.log(arr); // [2,4,6,8]

console.log(res); // undefined 

12 arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。

  callback的参数: value --当前索引的值

          index --索引

          array --原数组

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{value = value * 2console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

var arr1 = [1,2,3,4]; 

var res1 = arr1.map((item,index,arr)=>{ 

 item = item * 3; 

 return item; 

})

console.log(arr1); // [1,2,3,4]

console.log(res1); // [3,6,9,12]

ps: arr.forEach()和arr.map()的区别 
    1. arr.forEach()是和for循环一样,是代替for。arr.map()是修改数组其中的数据,并返回新的数据。
    2. arr.forEach() 没有return  arr.map() 有return

13 arr.filter(callback) 过滤数组,返回一个满足要求的数组 

           callback的参数: value --当前索引的值

                index --索引

  let arr = [1,2,3,4,5]let arr1 = arr.filter( (value, index) => value<3)console.log(arr1)    // [1, 2]

14 arr.every(callback) 依据判断条件,数组的元素是否全满足,若满足则返回ture

            callback的参数: value --当前索引的值

                index --索引

   let arr = [1,2,3,4,5]let arr1 = arr.every( (value, index) =>value<3)console.log(arr1) // falselet arr2 = arr.every( (value, index) =>value<6)console.log(arr2)  // true

15 arr.some() 依据判断条件,数组的元素是否有一个满足,若有一个满足则返回ture

     callback的参数: value --当前索引的值

                index --索引

let arr = [1,2,3,4,5]let arr1 = arr.some( (value, index) =>value<3)console.log(arr1) // truelet arr2 = arr.some( (value, index) =>value>6)console.log(arr2) // false

16 arr.reduce(callback, initialValue) 迭代数组的所有项,累加器,数组中的每个值(从左到右)合并,最终计算为一个值

  参数: callback: previousValue 必选 --上一次调用回调返回的值,或者是提供的初始值(initialValue)

          currentValue 必选 --数组中当前被处理的数组项

          index 可选 --当前数组项在数组中的索引值

          array 可选 --原数组

     initialValue: 可选 --初始值

  实行方法:回调函数第一次执行时,preValue 和 curValue 可以是一个值,如果 initialValue 在调用 reduce() 时被提供,那么第一个 preValue 等于 initialValue ,并且curValue 等于数组中的第一个值;如果initialValue 未被提供,那么preValue 等于数组中的第一个值.

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => preValue + curValue
)
console.log(arr1)    // 10

let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

reduce的高级用法

 (1)计算数组中每个元素出现的次数

let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];

let nameNum = names.reduce((pre,cur)=>{

  if(cur in pre){

    pre[cur]++

  }else{

    pre[cur] = 1

  }

  return pre

},{})

console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }

   (2)数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])
console.log(newArr);// [1, 2, 3, 4]

(3)将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

17 arr.reduceRight(callback, initialValue) 与arr.reduce()功能一样,不同的是,reduceRight()从数组的末尾向前将数组中的数组项做累加。

  实行方法:reduceRight()首次调用回调函数callbackfn时,prevValue 和 curValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 prevValue 等于 initialValue,curValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, curValue 等于数组中倒数第二个值。

let arr = [0,1,2,3,4]
let arr1 = arr.reduceRight((preValue, curValue) => preValue + curValue
)
console.log(arr1)    // 10

let arr2 = arr.reduceRight((preValue,curValue)=>preValue + curValue,5)
console.log(arr2)    // 15

ps:

(如果对这两个方法不明白,可以查看大漠老师的实例 http://www.w3cplus.com/javascript/array-part-8.html)

18 arr.indexOf() 查找某个元素的索引值,若有重复的,则返回第一个查到的索引值若不存在,则返回 -1

let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1)  // 1
let arr2 = arr.indexOf(9)
console.log(arr2)  // -1

19 arr.lastIndexOf()   和arr.indexOf()的功能一样,不同的是从后往前查找

let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1)  // 5
let arr2 = arr.lastIndexOf(9)
console.log(arr2)  // -1

20 Array.from() 将伪数组变成数组,就是只要有length的就可以转成数组。 ---es6

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]

21 Array.of() 将一组值转换成数组,类似于声明数组    ---es6

let str = '11'
console.log(Array.of(str))   // ['11']

等价于

console.log(new Array('11'))  // ['11

ps:

但是new Array()有缺点,就是参数问题引起的重载

console.log(new Array(2))   //[empty × 2]  是个空数组
console.log(Array.of(2))    // [2

22 arr.copyWithin() 在当前数组内部,将制定位置的数组复制到其他位置,会覆盖原数组项,返回当前数组

  参数: target --必选 索引从该位置开始替换数组项

      start --可选 索引从该位置开始读取数组项,默认为0.如果为负值,则从右往左读。

      end --可选 索引到该位置停止读取的数组项,默认是Array.length,如果是负值,表示倒数

let arr = [1,2,3,4,5,6,7]
let arr1 = arr.copyWithin(1)
console.log(arr1)   // [1, 1, 2, 3, 4, 5, 6]
let arr2 = arr.copyWithin(1,2)
console.log(arr2)   // [1, 3, 4, 5, 6, 7, 7]
let arr3 = arr.copyWithin(1,2,4)
console.log(arr3)   // [1, 3, 4, 4, 5, 6, 7]

23 arr.find(callback) 找到第一个符合条件的数组成员

let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 2)
console.log(arr1)   // 3

24 arr.findIndex(callback) 找到第一个符合条件的数组成员的索引值let arr = [1,2,3,4,5] let arr1 = arr.findIndex((value, index, array) => value > 3) console.log(arr1) // 3

25 arr.fill(target, start, end) 使用给定的值,填充一个数组,ps:填充完后会改变原数组

  参数: target -- 待填充的元素

      start -- 开始填充的位置-索引

        end -- 终止填充的位置-索引(不包括该位置)

let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]
let arr2 = arr.fill(5,2)
console.log(arr2)
let arr3 = arr.fill(5,1,3)
console.log(arr3)

26 arr.includes() 判断数中是否包含给定的值

let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)  
console.log(arr1)   // ture
let arr2 = arr.includes(9) 
console.log(arr2)    // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3)  // true

ps:与indexOf()的区别:

1 indexOf()返回的是数值,而includes()返回的是布尔值

2 indexOf() 不能判断NaN,返回为-1 ,includes()则可以判断

27 arr.keys() 遍历数组的键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {console.log(key);   // 0,1,2,3
}

28 arr.values() 遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {console.log(val);   // 1,2,3,4
}

29 arr.entries() 遍历数组的键名和键值

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {console.log(e);   // [0,1] [1,2] [2,3] [3,4]
}

entries() 方法返回迭代数组。

迭代数组中每个值 前一个是索引值作为 key, 数组后一个值作为 value。

转载     热爱前端的17号诶     https://www.cnblogs.com/sqh17/p/8529401.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里开源支持10万亿模型的自研分布式训练框架EPL(EasyParallelLibrary)

简介&#xff1a;EPL背后的技术框架是如何设计的&#xff1f;开发者可以怎么使用EPL&#xff1f;EPL未来有哪些规划&#xff1f;今天一起来深入了解。 作者 | 王林、飒洋 来源 | 阿里技术公众号 一 导读 最近阿里云机器学习PAI平台和达摩院智能计算实验室一起发布“低碳版”巨…

如何从 Docker 镜像里提取 dockerfile!

作者 | A-刘晨阳来源 | CSDN博客今天给大家分享一下 dockerfile 里面是如何写的&#xff0c;然后去查了查就有了新的发现——通过镜像来提取 dockerfile。从镜像中提取dockerfile的两种方法。history参数我们可以直接用docker自带的参数来查看镜像的dockerfile&#xff0c;但有…

新品发布|备案变更不用再担心中断服务啦

简介&#xff1a;ICP备案迁移服务&#xff0c;就是面向有计划变更域名备案主体&#xff0c;或者在不同主体间迁移网站备案信息的客户&#xff0c;实现迁移过程中域名或者网站服务不中断的备案增值服务。 说起ICP备案&#xff0c;做过互联网经营业务的朋友都很熟悉&#xff0c;…

一眼定位问题,函数计算发布日志关键词秒检索功能

简介&#xff1a;当 FaaS 应用出现很多报错&#xff0c;且调用日志页面的请求过多时&#xff0c;如何才能简单、快速地查到出现 bug 的原因&#xff1f; 听说这个问题你也遇到了&#xff1f; 小王是一名程序员&#xff0c;最近在使用 FaaS &#xff08…

如何在 Linux 中使用 rsync 传输文件

作者 | 刘光录来源 | TIAPrsync&#xff08;远程同步&#xff0c;Remote Sync&#xff09;是一种在系统中或两个系统之间复制文件和目录的同步工具。rsync 的一个最大的优点&#xff0c;就是它只复制更改的文件&#xff0c;因而可以减少 CPU 消耗&#xff0c;在复制文件时节省带…

国民级消消乐背后的网络技术支持:不畏巨“峰”,“运”筹帷幄

简介&#xff1a;近日&#xff0c;阿里云网络携手乐元素共同部署建设了基于7层业务自动化调度的弹性网络架构&#xff0c;进一步提升乐元素在用户服务上的娱乐体验。提到乐元素相信大家都不陌生&#xff0c;作为从事移动网络游戏的研发、运营及广告平台&#xff0c;其代表作就是…

透析阿里云视频云「低代码音视频工厂」之能量引擎——vPaaS视频原生应用开发平台

简介&#xff1a;支撑15分钟上线高品质专属音视频平台 为满足企业用户极速搭建高品质专属音视频业务的需求&#xff0c;阿里云视频云的“低代码音视频工厂”应运而生&#xff0c;但极速而高品质的平台搭建诉求&#xff0c;需要用全新的开发方式才能真正实现&#xff0c;而全新…

自动驾驶“稳打地基”,小鹏汽车基于阿里云建自动驾驶AI智算中心算力可达600PFLOPS

数据驱动是自动驾驶发展的公认方向&#xff0c;也让自动驾驶模型训练成为一头“吃算力”的巨兽。自动驾驶的视觉检测、轨迹预测与行车规划等算法模型&#xff0c;有赖于机器学习海量数据集&#xff0c;但算力的不足让研发速度仍远远赶不上数据量增长的速度。随着传感器的进一步…

阿里云视频云「 vPaaS 」演绎了怎样的音视频应用开发「未来图景」

简介&#xff1a;前瞻音视频平台的演进未来 vPaaS是阿里云视频云最新推出的低代码音视频应用开发产品&#xff0c;其中&#xff0c;vPaaS低代码音视频工厂&#xff0c;彻底打破了音视频应用的繁冗技术开发壁垒&#xff1b;vPaaS视频原生应用开发平台&#xff0c;全新定义了音视…

鲲鹏开发者创享日2022:鲲鹏全栈创新 与开发者共建数字湖南

由华为推出的面向鲲鹏计算产业全栈开发者的系列活动——鲲鹏开发者创享日2022于8月5日在长沙成功举办。这场被称为开发者“技术嘉年华”的峰会&#xff0c;汇聚了国内顶尖技术大咖、科研带头人、知名企业技术专家及高校开发者&#xff0c;描绘了计算产业发展趋势和蓝图&#xf…

MySQL 深潜 - MDL 锁的实现与获取机制

简介&#xff1a;本文将介绍在 MDL 系统中常用的数据结构及含义&#xff0c;然后从实现角度讨论 MDL 的获取机制与死锁检测&#xff0c;最后分享在实践中如何监控 MDL 状态。 作者 | 泊歌 来源 | 阿里技术公众号 一 背景 为了满足数据库在并发请求下的事务隔离性和一致性要求…

深度解说阿里云 Serverless Kubernetes

简介&#xff1a;听阿里云技术专家聊聊 Serverless Kubernetes 一路走来的发展史&#xff0c;看看它是如何做到兼容 Kubernetes 使用方式的同时&#xff0c;拥有免运维和极致弹性等特点~ 作者 | 陈晓宇&#xff08;阿里云技术专家&#xff09; 策划 | 褚杏娟 伴随着云原生的…

理清 HTTP 之下的 TCP 流程,让你的 HTTP 水平更上一层

作者 | 神说要有光来源 | 神光的编程秘籍大家都知道 HTTP 的底层是 TCP&#xff0c;但是可能仅限于知道&#xff0c;并不是真正理解它们的关系。平时我们用 chrome devtools 的 Network 工具也只是能分析 HTTP 请求&#xff1a;TCP 层的东西看不见摸不着的&#xff0c;所以对它…

基于 EventBridge 构建 SaaS 应用集成方案

简介&#xff1a;事件源是事件驱动的基石&#xff0c;如何获取更多事件源也是 EventBridge 一直在探索和尝试的方向。针对市场上其他云厂商和垂直领域的 Saas 服务&#xff0c;EventBridge 发布了 HTTP Source 能力&#xff0c;提供简单且易于集成的三方事件推送 &#xff0c;帮…

无缝融入 Kubernetes 生态 | 云原生网关支持 Ingress 资源

简介&#xff1a;Kubernetes 一贯的作风是通过定义标准来解决同一类问题&#xff0c;在解决集群对外流量管理的问题也不例外。Kubernetes 对集群入口点进行了进一步的统一抽象&#xff0c;提出了 3 种解决方案&#xff1a;NodePort、LoadBalancer 和 Ingress。 作者&#xff1…

阿里云 AI 编辑部获 CCBN 创新奖,传媒行业解决方案背后的黑科技

简介&#xff1a;视频云驱动智媒创新 5 月 27 日&#xff0c;CCBN&#xff08;第二十八届中国国际广播电视信息网络展览会&#xff09;在北京隆重召开&#xff0c;在本次的 “CCBN 年度创新奖” 评选中&#xff0c;阿里云视频云凭借 AI 编辑部的传媒行业专业解决方案获得 CCBN …

云原生正在吞噬一切,开发者该如何应对?

十年前&#xff0c;Netscape创始人、硅谷著名投资人马克安德森&#xff08;Marc Andreessen&#xff09;预言“软件正在吞噬世界”&#xff1b;数年后&#xff0c;软件里90%以上的代码都是开源代码&#xff0c;“开源正在吞噬软件”&#xff1b;如今&#xff0c;“云原生吞噬开…

阿里云视频云 Retina 多媒体 AI 体验馆开张啦

简介&#xff1a;带你体验视频更多可能 带你体验视频更多可能 海量视频管理难度大&#xff1f;翻库检索特定人物费时费力&#xff1f;视频内容剪辑效率低&#xff1f;您的得力助手“Retina多媒体AI”体验馆已上线。带你感受视频AI黑科技&#xff0c;开启极致智能体验。 1、智…

一篇文章了解 Docker 的安装、启动以及工作原理!

作者 | 是泡泡来源 | CSDN博客Docker 浅谈1.1 Docker 为什么出现我们知道&#xff0c;传统的项目开发和运维是两套环境&#xff0c;而且要一一配置环境并且有的时候更新还会导致服务不可用&#xff0c;这就很麻烦了&#xff0c;那么有没有一种很方便不用这么麻烦的技术可以一键…

技术解读:英特尔 x86 平台上,AI 能力是如何进行演进的?(附PPT)

简介&#xff1a;AI 生态系统是怎样的&#xff1f;其中又有哪些关键技术&#xff1f; AI 计算力的指数增长意味着&#xff0c;为了解决越来越复杂的用例&#xff0c;即使是 1000 倍的计算性能增长也很容易被消耗。因此&#xff0c;需要通过软件生态系统的助力&#xff0c;才能…