首页 > 其他分享 >js Array汇总

js Array汇总

时间：2023-04-07 16:25:39浏览次数：47  
标签：currentValue console log 汇总 js 数组 new Array const 

// ----------  JavaScript Array  ----------

// Array方法: 每行为一类（自己分的）
// 5 fill from isArray keys valueOf
// 2 join toString
// 3 indexOf lastIndexOf includes
// 2 find findIndex
// 5 every forEach filter map some
// 2 reduce reduceRight
// 9 concat uhshift push shift pop slice splice sort reverse


// Array.prototype
// 向数组Array中添加属性和方法
// Array.prototype.name = value
Array.prototype.myUcase = function () {
  for (i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase()
  }
}

var fruits = ["Banana", "Orange", "Apple", "Mango"]

fruits.myUcase()
console.log(fruits) // [ 'BANANA', 'ORANGE', 'APPLE', 'MANGO' ]


// contact
// 合并数组
// array1.concat(array2, array3,..., arrayX)
const a_contat = [1, 4, 7]
const b_contat = [2, 5, 8]
const c_contat = [3, 6, 9]

  // 注意顺序
console.log(a_contat.concat(b_contat)) // [ 1, 4, 7, 2, 5, 8 ]
console.log(b_contat.concat(a_contat)) // [ 2, 5, 8, 1, 4, 7 ]

console.log(b_contat.concat(c_contat)) // [ 2, 5, 8, 3, 6, 9 ]
console.log(c_contat.concat(b_contat)) // [ 3, 6, 9, 2, 5, 8 ]

  // 多合一
console.log(a_contat.concat(b_contat, c_contat)) // [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]


// every
// 判断数组中每一项是否符合条件, 当检测到第一个不符合条件时则返回false,且停止检测
// array.every(function(currentValue,index,arr), thisValue)
const a = [32, 33, 12, 40]

  // 两种写法
const aa = a.every((currentValue,index,arr) => {
  return currentValue > 12
})
console.log(aa); // false

console.log(a.every(age => age > 0)); // true


// fill
// 使用固定值填充数组
// array.fill(value, start, end)
let a_fill = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

a_fill.fill(10)

console.log(a_fill) // [ 10, 10, 10, 10, 10, 10, 10, 10, 10 ]

a_fill.fill(0, 2, 4)
console.log(a_fill) // [ 10, 10,  0,  0, 10, 10, 10, 10, 10 ]


// filter
// 根据条件检测数组,并返回所有符合条件的新数组
// array.filter(function(currentValue,index,arr), thisValue)
let a_filter = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

const new_a_filter = a_filter.filter((item, i, arr) => item >= 6)
const new_a_filter1 = a_filter.filter((currentValue, index, arr) => (currentValue >= 6 && index >= 6))

console.log(a_filter) // [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]
console.log(new_a_filter) // [ 7, 8, 6, 9 ]
console.log(new_a_filter1) // [ 6, 9 ]


// find
// 根据条件检测数组,并返回第一个符合条件的 值
// array.find(function(currentValue, index, arr),thisValue)
let a_find = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

const new_a_find = a_find.find((currentValue, index, arr) => currentValue >= 6)
const new_a_find1 = a_find.find((currentValue, index, arr) => currentValue >= 10)
const new_a_find2 = a_find.find((currentValue, index, arr) => (currentValue >= 6 && index >= 6))
console.log(new_a_find) // 7
console.log(new_a_find1) // undefined
console.log(new_a_find2) // 6


// findIndex
// 根据条件检测数组,并返回第一个符合条件的 下标
// array.findIndex(function(currentValue, index, arr), thisValue)
let a_findIndex = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

const new_a_findIndex = a_findIndex.findIndex((currentValue, index, arr) => currentValue >= 6)

console.log(new_a_findIndex) // 2


// forEach
// 循环遍历数组
// array.forEach(callbackFn(currentValue, index, arr), thisValue)
let a_forEach = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

a_forEach.forEach((currentValue, index, arr) => {
  console.log(currentValue) // 1  4  7  2  5  8  3  6  9
})

let num = 0
a_forEach.forEach((currentValue, index, arr) => {
  num += currentValue
})
console.log(num) // 45

  // 会 改变原数组
a_forEach.forEach((currentValue, index, arr) => {
  arr[index] = currentValue * 10
})
console.log(a_forEach) // [ 10, 40, 70, 20, 50, 80, 30, 60, 90 ]

  /*
    forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。
    使用 return 语句实现 continue 关键字的效果：
  */

  // continue - forEach
a_forEach.forEach((currentValue, index, arr) => {
  if (currentValue < 6) return
  console.log(currentValue)
})
  // continue - forEach
a_forEach.some((currentValue, index, arr) => {
  if (currentValue < 6) return
  console.log(currentValue);
})

  // break
a_forEach.every((currentValue, index, arr) => {
  // console.log(currentValue); // 1 4 7 2
  return currentValue !== 2 // true
})


// from
// 用于通过拥有 length属性的对象或可迭代的对象来 返回一个数组。
// Array.from(object, mapFunction, thisValue)

  // 字符串 转 数组
const myArr = Array.from('afa')
console.log(myArr);

  // Set 转 数组
console.log( Array.from(new Set([1, 2, 3, 4, 5, 1, 2])) );

  // 伪数组 转 数组
const myObjFrom = {
  "0": 1,
  1: 2,
  2: 3,
  3: 4,
  4: 5,
  length: 6
}
console.log(Array.from(myObjFrom));


// includes
// 判断指定一个数组中是否包含一个指定的数值
// arr.includes(searchElement)
// arr.includes(searchElement, fromIndex)
let a_includes = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ]

console.log(a_includes.includes(2))
console.log(a_includes.includes(2, 5))


// indexOf
// 返回数组中某一个值的第一次出现的具体位置, 没有则返回 -1
// array.indexOf(item,start)
let a_indexOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

console.log(a_indexOf.indexOf(2));
console.log(a_indexOf.indexOf(2, 5));


// lastIndexOf
// 返回数组中某一个值最后一次出现的具体位置, 没有则返回 -1
// array.lastIndexOf(item,start)
let a_lastIndexOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

console.log(a_lastIndexOf.lastIndexOf(2)) // 4
console.log(a_lastIndexOf.lastIndexOf(2, 5)) // 4
console.log(a_lastIndexOf.lastIndexOf(2, 3)) // 3
console.log(a_lastIndexOf.lastIndexOf(12)) // -1


// isArray
// 判断一个对象是否为数组
// Array.isArray(obj)
let a_isArray = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

console.log(Array.isArray(a_isArray)) // true
console.log(Array.isArray({})) // false


// join
// 将数组转换为一个字符串
// array.join(separator) separator默认为逗号
let a_join = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

console.log(a_join.join()) // 1,4,7,2,2,5,8,3,6,9
console.log(a_join.join(',')) // 1,4,7,2,2,5,8,3,6,9
console.log(a_join.join(' ')) // 1 4 7 2 2 5 8 3 6 9
console.log(a_join.join('-')) // 1-4-7-2-2-5-8-3-6-9


// keys
// 用于从数组创建一个包含数组键的可迭代对象。
// array.keys()
let a_keys = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const x = a_keys.keys()
console.log(a_keys) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(x) // Object [Array Iterator] {}
console.log(x.next()) // { value: 0, done: false }
console.log(x.next()) // { value: 1, done: false }
console.log(x.next()) // { value: 2, done: false }
console.log(x.next()) // { value: 3, done: false }
console.log(x.next()) // { value: 4, done: false }
console.log(x.next()) // { value: 5, done: false }
console.log(x.next()) // { value: 6, done: false }
console.log(x.next()) // { value: 7, done: false }
console.log(x.next()) // { value: 8, done: false }
console.log(x.next()) // { value: 9, done: false }
console.log(x.next()) // { value: undefined, done: true }


// map
// 遍历数组,并返回新数组
// array.map(function(currentValue,index,arr), thisValue)
let a_map = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
let new_a_map = a_map.map((currentValue, index) => {
  return currentValue * 10
})
console.log(new_a_map) // [ 10, 40, 70, 20, 20, 50, 80, 30, 60, 90 ]

let numMap = 0
a_map.map((currentValue, index) => {
  numMap += currentValue
})
console.log(numMap) // 47


// shift
// 删除并返回数组的第一个元素
// array.shift()
let a_shift = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const a_shift1 = a_shift.shift()

console.log(a_shift); // [ 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(a_shift1); // 1


// pop
// 删除并返回数组的最后一个元素
// array.pop()
let a_pop = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const a_pop1 = a_pop.pop()

console.log(a_pop); // [ 1, 4, 7, 2, 2, 5, 8, 3, 6 ]
console.log(a_pop1); // 9


// unshift
// 向数组开头添加一个或多个新的元素,并返回新数组的长度
// array.unshift(item1,item2, ..., itemX)
let a_unshift = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const a_unshift_len = a_unshift.unshift(10, 12)
console.log(a_unshift); // [ 10, 12, 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(a_unshift_len); // 12


// push
// 向数组末尾添加一个或多个新的元素,并返回新数组的长度
// array.push(item1, item2, ..., itemX)
let a_push = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const a_push_len = a_push.push(10, 12)
console.log(a_push); // [ 1, 4, 7, 2, 2, 5,  8, 3, 6, 9, 10, 12 ]
console.log(a_push_len); // 12

// ------

// reduce
// 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
let a_reduce = [ 1, 2.2, 3, 4, 5, 6.6, 7, 8.6, 9 ]
const new_a_reduce = a_reduce.reduce((pre, curVal, curIndex, arr) =>{
  // console.log(pre, curVal, curIndex)
  return pre + curVal
})
// console.log(new_a_reduce) // 49.4

const new_a_reduce1 = a_reduce.reduce((pre, curVal, curIndex, arr) =>{
  console.log(pre, curVal, curIndex)
  return pre + curVal
}, 3)
console.log(new_a_reduce1) // 48


// reduceRight
// 与reduce相同, reduceRight是数组 从右向左 开始计算
// array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
let a_reduceRight = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const new_a_reduceRight = a_reduceRight.reduceRight((pre, curVal, curIndex, arr) => {
  console.log(pre, curVal, curIndex);
  return pre
})
console.log(new_a_reduceRight)


// reverse
// 颠倒数组中元素的顺序, 改变原数组
// array.reverse()
let a_reverse = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
console.log(a_reverse)
a_reverse.reverse()
console.log(a_reverse)


// slice
// 从已有的数组中返回选定的元素。
// array.slice(start, end), 接收负数
let a_slice = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const new_a_slice = a_slice.slice(1, 3)
console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(new_a_slice) // [ 4, 7 ]


const new_a_slice1 = a_slice.slice(2)
console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(new_a_slice1) // [ 7, 2, 2, 5, 8, 3, 6, 9 ]

const new_a_slice2 = a_slice.slice(-5)
console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(new_a_slice2) // [ 5, 8, 3, 6, 9 ]

const new_a_slice3 = a_slice.slice(-3, -1)
console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(new_a_slice3) // [ 3, 6 ]


// some
// 检测数组中的元素是否满足指定条件(函数提供)
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
// 如果没有满足条件的元素，则返回false。
// array.some(function(currentValue,index,arr),thisValue)
let a_some = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const new_a_some = a_some.some((currentValue, index, arr) => {
  console.log(currentValue); // 1 4 7
  // 检测是否有 >= 6 的元素
  return currentValue >= 6
})
console.log(new_a_some); // true, 表示包含 >= 6 的元素


// sort
// 对数组进行排序. 排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。
// array.sort(sortfunction)

var a_sort = ["Banana", "Orange", "Apple", "Mango"]
a_sort.sort()
console.log(a_sort) // [ 'Apple', 'Banana', 'Mango', 'Orange' ]

let a_sort1 = [ 1, 40, 7, 20, 50, 8, 32, 65, 19 ]
a_sort1.sort()
console.log(a_sort1) // [ 1, 19, 20, 32, 40, 50, 65,  7,  8 ] // 注意数字排序

let a_sort2 = [ 1, 40, 7, 20, 50, 8, 32, 65, 19 ]
a_sort2.sort((a, b) => {
  return a - b
 })
console.log(a_sort2); // [ 1,  7,  8, 19, 20, 32, 40, 50, 65 ] // 注意数字排序


// splice
// 向数组中添加或删除元素
// array.splice(index,howmany,item1,.....,itemX) // 从何处删 删多少 要添加的元素
let a_splice = [ 1, 6, 8 ]

const new_a_splice = a_splice.splice(1, 0, 2)
console.log(new_a_splice) // []
console.log(a_splice) // [ 1, 2, 6, 8 ]

const new_a_splice1 = a_splice.splice(1, 1, 3, 4)
console.log(new_a_splice1) // [ 2 ]
console.log(a_splice) // [ 1, 3, 4, 6, 8 ]

const new_a_splice2 = a_splice.splice(2, 3, 5, 7)
console.log(new_a_splice2) // [ 4, 6, 8 ]
console.log(a_splice) // [ 1, 3, 5, 7 ]


// toString
// 将数组转换为字符串
// array.toString()
let a_toString = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

const new_a_to_string = a_toString.toString() // 等同 a_toString.join()
console.log(new_a_to_string); // 1,4,7,2,2,5,8,3,6,9
console.log(new_a_to_string.length); // 19


// valueOf
// 返回Array队形原始值 (貌似不怎么用得到)
// array.valueOf()
let a_valueOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]

console.log(a_valueOf.valueOf()); // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ]
console.log(a_valueOf.valueOf() === a_valueOf); // true



// 其他说明
/*
  1、every 和 some 总结：

  every() 方法用于检测数组元素是否都满足指定条件，都满足时才返回 true；有一个不满足时，返回 false，剩余元素不再进行检测。对于空数组，不会检测，直接返回 true

  some() 方法用于检测数组中是否有元素满足指定条件，有一个满足就返回 true；内部遍历数组时，遇到满足指定条件的元素，就返回 true，剩余元素不再进行检测，对于空数组，不会检测，直接返回 false
*/

 

标签：currentValue,console,log,汇总,js,数组,new,Array,const
From： https://www.cnblogs.com/-roc/p/17296553.html

相关文章

  • js Number汇总
    //----------JavaScriptNumber----------/*//属性Number.MAX_VALUENumber.MIN_VALUENumber.POSITIVE_INFINITYNumber.NEGATIVE_INFINITYNaN*//*//方法isFiniteisIntegerisNaNtoFixedtoString*///------Number属性------//MAX_VAL......
  • js Math汇总
    //----------JavaScriptMath----------////abs(x)//返回x的绝对值//Math.abs(x)console.log(Math.abs(8.8));//8.8console.log(Math.abs(-8.8));//8.8console.log(Math.abs(null));//0console.log(Math.abs(undefined));//NaNconsole.log(......
  • js Date汇总
    //----------JavaScriptDate----------//Date方法：常用分三大类/*get*:getFullYeargetMonthgetDategetHoursgetMinutesgetSecondsgetDaygetTime*//*set*setFullYearsetMonthsetDatesetHourssetMinutessetSecondssetTime*/......
  • js String汇总
    //----------JavaScriptString----------//charAtcharCodeAt//concatrepeatsplit//slicesubstring//replacereplaceAll//toLowerCasetoUpperCase//startsWithendsWith//indexOflastIndexOfincludes//matchsearch//charAt()//返回在指定位......
  • js RegExp汇总
    //----------JavaScriptRegExp----------/*语法：constpatt=newRegExp(pattern,modifiers)或constpatt=/pattern/modifierspattern（模式）描述了表达式的模式modifiers(修饰符)用于指定全局匹配、区分大小写的匹配和多行匹配*///修饰符-用于执......
  • JS生成随机颜色
    //传统写法functionrandomColor1(){varr=Math.floor(Math.random()*256),g=Math.floor(Math.random()*256),b=Math.floor(Math.random()*256);return`rgb(${r},${g},${b})`;}//取巧functionrand......
  • js数据遍历几种方式
    在JavaScript中，有多种方式可以遍历数据集，下面列出了常用的几种：for循环for循环是一种常见的遍历数据集的方式，可以用于遍历数组、对象等数据类型。例如：constarr=[1,2,3];for(leti=0;i<arr.length;i++){console.log(arr[i]);}constobj={a:1,b:2,......
  • h5 - pc 使用 pdf.js 预览pdf -配合文件流实现 - 遇到的坑总结
    1.pdf.js下载看我这篇随笔【h5-使用pdf.js预览pdf-岑惜-博客园(cnblogs.com)】2.html调用页面的局部代码<body><divstyle="height:100vh;margin:0auto"><iframestyle="height:100%;width:100%;border:none"id="fvic"src="&......
  • Spring Boot返回Json数据及数据封装
    1.1简介在项目开发中，接口与接口之间，前后端之间数据的传输都使用Json格式，在SpringBoot中，接口返回Json格式的数据很简单，在Controller中使用@RestController注解即可返回Json格式的数据，@RestController也是SpringBoot新增的一个注解，我们点进去看一下该注解都包含了哪些东西......
  • 小程序开发 JSON转换的使用
    前言  此篇博客讲解小程序的JSON使用，因为JavaScript与JSON泛用性太大。初学者很容易在JSON的使用上困惑。 字符串转JSON请注意，下面的字符串json是带引号的。jsonTest(){letjsonString="{\"id\":\"1\",\"name\":\"测试JSON\"}";letdata......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99