js 数组操作
在开发中，数组的使用场景非常多，平日中也涉及到很多数组相关操作，对一些常见的操作方法进行总结和收藏，在开发中就能信手拈来，大大提高开发效率。
随机排序
1、生成随机数
遍历数组，每次循环都随机一个在数组长度范围内的数，并交换本次循环的位置和随机数位置上的元素
function randomSort1(arr) {
for (let i = 0, l = arr.length; i < l; i++) {
let rc = parseInt(Math.random() * l)
// 让当前循环的数组元素和随机出来的数组元素交换位置
const empty = arr[i]
arr[i] = arr[rc]
arr[rc] = empty
}
return arr
}
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 下面两次的结果肯定是不一样的；
console.log(randomSort1(arr1))
console.log(randomSort1(arr1))2、生成新数组
- 申明一个新的空数组,利用 while 循环，如果数组长度大于 0，就继续循环；
- 每次循环都随机一个在数组长度范围内的数，将随机数位置上的元素 push 到新数组里，
- 并利用 splice（对 splice 不太理解的同学可以看这里）截取出随机数位置上的元素，同时也修改了原始数组的长度；
function randomSort2(arr) {
var mixedArr = []
while (arr.length > 0) {
let rc = parseInt(Math.random() * arr.length)
mixedArr.push(arr[rc])
arr.splice(rc, 1)
}
return mixedArr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(randomSort2(arr1))3、 arr.sort
- 如果 compareFunction(a, b)的返回值 小于 0 ，那么 a 会被排列到 b 之前；
- 如果 compareFunction(a, b)的返回值 等于 0 ，那么 a 和 b 的相对位置不变；
- 如果 compareFunction(a, b)的返回值 大于 0 ，那么 b 会被排列到 a 之前；
function randomSort3(arr) {
arr.sort(function (a, b) {
return Math.random() - 0.5
})
return arr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(randomSort3(arr1))数组对象排序
1、单个属性排序
function compare(property) {
return function (a, b) {
let value1 = a[property]
let value2 = b[property]
return value1 - value2
}
}
let arr = [
{ name: 'zopp', age: 10 },
{ name: 'gpp', age: 18 },
{ name: 'yjj', age: 8 },
]
console.log(arr.sort(compare('age')))2、多个属性排序
function by(name, minor) {
return function(o, p) {
let a, b
if (o && p && typeof o === 'object' && typeof p === 'object') {
a = o[name]
b = p[name]
if (a === b) {
return typeof minor === 'function' ? minor(o, p) : 0
}
if (typeof a === typeof b) {
return a < b ? -1 : 1
}
return typeof a < typeof b ? -1 : 1
} else {
thro('error')
}
}
},数组扁平化
1、调用 ES6 中的 flat 方法
ary = arr.flat(Infinity)
console.log([1, [2, 3, [4, 5, [6, 7]]]].flat(Infinity))2、普通递归
let result = []
let flatten = function (arr) {
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
if (Array.isArray(arr[i])) {
flatten(item)
} else {
result.push(item)
}
}
return result
}
let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))3、利用 reduce 函数迭代
function flatten(arr) {
return arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
}, [])
}
let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))4、扩展运算符
function flatten(arr) {
while (arr.some((item) => Array.isArray(item))) {
arr = [].concat(...arr)
}
return arr
}
let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))数组去重
1、利用数组的 indexOf 下标属性来查询
function unique(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))2、先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
function unique(arr) {
var formArr = arr.sort()
var newArr = [formArr[0]]
for (let i = 1; i < formArr.length; i++) {
if (formArr[i] !== formArr[i - 1]) {
newArr.push(formArr[i])
}
}
return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))3、利用对象属性存在的特性，如果没有该属性则存入新数组。
function unique(arr) {
var obj = {}
var newArr = []
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))4、利用数组原型对象上的 includes 方法。
function unique(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))5、利用数组原型对象上的 filter 和 includes 方法。
function unique(arr) {
var newArr = []
newArr = arr.filter(function (item) {
return newArr.includes(item) ? '' : newArr.push(item)
})
return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))6、利用 ES6 的 set 方法。
function unique(arr) {
return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))根据属性去重
方法一
function unique(arr) {
const res = new Map()
return arr.filter((item) => !res.has(item.productName) && res.set(item.productName, 1))
}方法二
function unique(arr) {
let result = {}
let obj = {}
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i].key]) {
result.push(arr[i])
obj[arr[i].key] = true
}
}
}交集/并集/差集
1、includes 方法结合 filter 方法
let a = [1, 2, 3]
let b = [2, 4, 5]
// 并集
let union = a.concat(b.filter((v) => !a.includes(v)))
// [1,2,3,4,5]
// 交集
let intersection = a.filter((v) => b.includes(v))
// [2]
// 差集
let difference = a.concat(b).filter((v) => !a.includes(v) || !b.includes(v))
// [1,3,4,5]2、ES6 的 Set 数据结构
let a = new Set([1, 2, 3])
let b = new Set([2, 4, 5])
// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4,5}
// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2}
// 差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1, 3, 4, 5}数组求和
1、万能的 for 循环
function sum(arr) {
var s = 0
for (var i = arr.length - 1; i >= 0; i--) {
s += arr[i]
}
return s
}
sum([1, 2, 3, 4, 5]) // 152、递归方法
function sum(arr) {
var len = arr.length
if (len == 0) {
return 0
} else if (len == 1) {
return arr[0]
} else {
return arr[0] + sum(arr.slice(1))
}
}
sum([1, 2, 3, 4, 5]) // 153、ES6 的 reduce 方法
function sum(arr) {
return arr.reduce(function (prev, curr) {
return prev + curr
}, 0)
}
sum([1, 2, 3, 4, 5]) // 15类数组转化
1、Array 的 slice 方法
let arr = Array.prototype.slice.call(arguments)2、ES6 的 Array.from()
let arr = Array.from(arguments)3、扩展运算符...
let arr = [...arguments]数组上下移动
function swapitems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
return arr
}
function up(arr, index) {
if (index === 0) {
return
}
this.swapItems(arr, index, index - 1)
}
function down(arr, index) {
if (index === this.list.length - 1) {
return
}
this.swapItems(arr, index, index + 1)
}数组转化为树形结构
将如下数据转化为树状结构
let arr = [
{
id: 1,
name: '1',
pid: 0,
},
{
id: 2,
name: '1-1',
pid: 1,
},
{
id: 3,
name: '1-1-1',
pid: 2,
},
{
id: 4,
name: '1-2',
pid: 1,
},
{
id: 5,
name: '1-2-2',
pid: 4,
},
{
id: 6,
name: '1-1-1-1',
pid: 3,
},
{
id: 7,
name: '2',
},
]实现方法
function toTree(data, parentId = 0) {
var itemArr = []
for (var i = 0; i < data.length; i++) {
var node = data[i]
if (node.pid === parentId) {
var newNode = {
...node,
name: node.name,
id: node.id,
children: toTree(data, node.id),
}
itemArr.push(newNode)
}
}
return itemArr
}
console.log(toTree(arr))探索JavaScript数组奥秘
avaScript数组同后端语言一样，具有它自己的数据结构，归根结底，这种数据结构，本质就是一种集合。在后端语言中(如java,.net等)，数组是这样定义的：数组是用来存储相同数据类型的集合
js使用数组+循环+条件实现数字转换为汉字的简单方法。
单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说，这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。
[译]async-await 数组循环的几个坑
在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单，但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子，看看你应该注意什么，以及哪个循环最适合特定用例。
数组、字符串去重
今天说的数组和字符串去重呢，主要用到es6新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值，所以活用Set来进行数组和字符串的去重。
JavaScript 数组方法
数组方法：1、Array.join([param]) 方法：将数组中所有的元素都转换为字符串并连接起来，通过字符 param 连接，默认使用逗号，返回最后生成的字符串2、Array.reverse() 方法：将数组中的元素颠倒顺序（在原数组中重新排列它们），返回逆序数组
如何删除JavaScript 数组中的虚值
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值，比如：在条件语句或者循环语句中。
JavaScript中十种一步拷贝数组的方法
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下。扩展运算符（浅拷贝）自从ES6出现以来，这已经成为最流行的方法。
JS数组的几个经典api
本文主要来讲数组api的一些操作，如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()
关于Vue不能监听（watch）数组变化
vue无法监听数组变化的情况，但是数组在下面两种情况下无法监听：利用索引直接设置数组项时，例如arr[indexofitem]=newValue；修改数组的长度时，例如arr.length=newLength
JS计算两个数组的交集、差集、并集、补集（多种实现方式）
使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本，使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!