Javascript 常见的操作数组的方法

何处锦绣不灰堆 2020-11-13 12:59:44
javascript 操作 常见 操作数 作数


操作数组常用方法

  • 总结使人进步,所以经常总结是一个很好的习惯,今天给大家总结了一些关于Js中对于数组的操作,我们写JS的时候遇到的最多的就是数组的操作,数组也是Js里面相对比较麻烦的一个点,希望这篇文章可以帮助到各位大佬!

reduce

首先说的是这个操作数据计算的方法,reduce
语法:

arr.reduce(function(prev,cur,index,arr){

...
}, init)
  • 去重例子:
var newArr = arr.reduce(function (prev, cur) {
 prev.indexOf(cur) === -1 && prev.push(cur); return prev;},[])
  • 求和例子:
var arr = [4,2,3,1,7,8,343678]
var sum = arr.reduce(function (prev, cur) {
 return prev + cur;},0)

这个0也就是我们开始计算的第一位初始值,也就是prev的初始值

  • 求最大值例子:
var max = arr.reduce(function (prev, cur) {
 return Math.max(prev,cur)})

解释:
arr 表示原数组;
prev 表示上一次调用回调时的返回值,或者初始值 init;
cur 表示当前正在处理的数组元素;
index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;
init 表示初始值

数组排序 sort

升序例子:

-直接用法
var arr = [2,5,3,1,4,-6,3,5,6,-2,-5]
console.info(arr.sort())
- 可以函数式写法
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {

return a - b
})
console.log(numbers)
- 可以ascii字符排
var items = ['résé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']
items.sort(function (a, b) {

return a.localeCompare(b)
})
console.info(items)
- 可以对象进行排序
var items = [
{
 name: 'Edward', value: 21 },
{
 name: 'Sharpe', value: 37 },
{
 name: 'And', value: 45 },
{
 name: 'The', value: -12 },
{
 name: 'Magnetic' },
{
 name: 'Zeros', value: 37 }
];
// sort by value
items.sort(function (a, b) {

return (a.value - b.value)
})
console.info(items)
- 还有一种我也在看的方法
// 需要被排序的数组
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']
// 对需要排序的数字和位置的临时存储
var mapped = list.map(function(el, i) {

return {
 index: i, value: el.toLowerCase() }
})
// 按照多个值排序数组
mapped.sort(function(a, b) {

return +(a.value > b.value) || +(a.value === b.value) - 1
})
// 根据索引得到排序的结果
var result = mapped.map(function(el){

return list[el.index]
})
console.info(result)
(该例子涞源:https://www.cnblogs.com/cmy1996/p/9194534.html 感谢博主的分享)

降序例子:

var array = [1, 80, 4, 33, 21, 55]
array.sort(function (x, y) {

return y - x
});
console.info(array)

数组查值

实际业务中很多情况是需要我们判断这个数组中有没有我们想要的值,下面记录一些方法:

let arr = ['something', 'anything', 'nothing', 'anything’]
let index = arr.indexOf('nothing');console.log(index)
//结果是2
或者
function include_test(fruit) {

const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {

console.log(redFruits.includes(fruit));
} else {

console.log(redFruits.includes(fruit));
}
}
include_test('apple’)
//返回 true 否则返回false

如果不存在该值则返回-1

数组查询满足条件的值

let numbers = [12, 5, 8, 130, 44]
let maxnum = []
let minnum = []
let result = numbers.find(item => {

return item > 8
})
let resultmap = numbers.map((item)=>{

console.info(item)
if(item > 8){

return maxnum.push(item)
}else{

return minnum.push(item)
}
})
console.log('第一个满足条件的是数字'+result)
console.info('所有满足条件的是数字' + maxnum)
console.info('所有不满足条件的是数字' + minnum)
//将前面的提示去掉就是数组本身的格式,数组连接字符串以后会丢失格式

移除数组的某一个值

Array.prototype.remove = function(val) {

var index = this.indexOf(val);
if (index > -1) {

this.splice(index, 1);
}
}

用法

let arr = [2,5,4,5,6,7,3,4,2,5,8,1,9,0,3,6,7,5]
let succesarr = []
/**
* 构造一个移除元素的函数
* @param val
*/
Array.prototype.remove = function(val) {

var index = this.indexOf(val);
if (index > -1) {

this.splice(index, 1);
}
};
/**
* 将满足条件的值拿到
* @type {any[]}
*/
let result = arr.map((item,index=0)=>{

if(arr[index + 1] - arr[index] === 1){

return succesarr.push(item,arr[index + 1])
}
})
/**
* 将最终的数据拿到
* @type {any[]}
*/
let finresult = succesarr.map((item,index=0)=>{

if(succesarr[index + 1] === succesarr[index]){

return succesarr.remove(succesarr[index])
}
})
console.info(succesarr)

这些是我们写js的过程中,经常遇到的一些问题,这里总结一下,以后遇到了可以直接拿来使用,喜欢的可以关注一下,鄙人不才,能力有限,写的不对的还请及时联系我,我这边及时纠正,也可以相互交流。谢谢各位大佬!

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/102580964

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple