JS数组的相关操作

数组类型检测

let arr = [1,2,15]
Array.isArray(arr)  // true

数组转字符串

let arr = ['a','b','c']
arr.toString() //a,b,c
String(arr) //a,b,c
arr.join("") //abc
arr.join(",") //a,b,c

字符串转数组

let str = "daqianduan"
str.split("") // ["daqianduan"]
Array.from(str) // ["d", "a", "q", "i", "a", "n", "d", "u", "a", "n"]

数组元素的添加与删除

arr.push() //添加到数组元素最后
arr.pop() //删除最后一个数组元素
arr.unshift() //添加到数组元素最前
arr.shift() //删除第一个数组元素

截取数组元素

let arr = ['1','3','5','7']

// 参数1：截取的起始位置，参数2：截取的结束位置(不改变原数组)
let newArr = arr.slice(1,3) // ['3']

// 参数1：截取的起始位置，参数2：截取的个数(会改变原数组)
// splice()还可进行追加与替换
arr.splice(0,3) // ['1','3','5']
arr.splice(2,0,'amd') // ['1','3','5','amd','7']
arr.splice(0,3,'cms') // ['1','3','5','cms']

合并数组

let arr = ['jon','mike','lisa']
let arr1 = ['zhangsan','lisi','wangwu']
let arr2 = ['lei']
// 方法一
arr = arr.concat(arr1,arr2) //['jon','mike','lisa','zhangsan','lisi','wangwu','lei']

// 方法二
arr = [...arr, ...arr1, ...arr2]

查找数组元素

let arr = [1,3,5,7,3,9]
/*参数1：要查找的数组元素，参数2：指定索引位置查找*/
arr.indexOf(3) // 1 (从左往右查找)
arr.lastIndexOf(3) // 4 (从右往左查找)
arr.includes(3,1) // true (返回布尔类型)

// 高阶检索
let lesson = [{name:'css'},{name:'js'},{name:'html'}]
// 自动遍历数组，当返回值为true时，返回条件为true的元素
let value = find(item => {
	return item.name == 'css'
})
console.log(value ) // {name:'css'}

// 自动遍历数组，当返回值为true时，返回满足条件元素的索引
let index = findIndex(item => {
	return item.name == 'js'
})
console.log(index ) // 1

数组元素排序

let arry = [1,3,10,5,9,2]
arr = arry.sort((a,b) => {
// 返回b-a 从大到小，a-b 从小到大
   return b-a
})
console.log(arry) //[10, 9, 5, 3, 2, 1]

// 例子
let cart = [
   {name:'iphone',price:8900},
   {name:'imac',price:18000},
   {name:'ipad',price:3999},
   {name:'itouch',price:3000}
]
cart = cart.sort((a,b) => {
// 价格从大到小排序
   return b.price - a.price
})
console.log(cart) //[{name: "imac", price: 18000},{name: "iphone", price: 8900},{name: "ipad", price: 3999},{name: "itouch", price: 3000}

高阶函数处理数组

• map()

let lesson = [
   {title:'媒体查询',categort:'css'},
   {title:'原型',categort:'js'},
   {title:'生命周期',categort:'vue'},
]
// 改变原数组
lesson.map(item => {
	item.click = 100
})
console.log(lesson ) //[{title:'媒体查询',categort:'css',click = 100},{title:'原型',categort:'js',click = 100},{title:'生命周期',categort:'vue',click = 100}]

// 不改变原数组
let newLes = lesson.map(item => {
	return Object.assign({click:100},item)
})

• reduce()

let num = [1,2,3,4]
//参数1：上一次返回的值(不指定值时为第一个值),参数2：当前值
reduce((pre,cur,index,arr) => {
	console.log(pre,cur) 
	// 会打印3次
	/* 
	*  1,2
	*  undefined,3
	*  undefined,4
	*/
})
//此时指定参数1为0
reduce((pre,cur,index,arr) => {
	console.log(pre,cur) 
	// 会打印4次
	/* 
	*  0,1
	*  undefined,2
	*  undefined,3
	*  undefined,4
	*/
},0)

// 统计元素出现次数
let arr= [1,2,5,6,6,6]
function arrayCount(array,item) {
	return array.reduce((total,cur) => {
    	total += item == cur ? 1 : 0
    	return total
    },0)
}
arrayCount(arr,6) //3

// 统计总价
let cart = [
   {name:'iphone',price:8900},
   {name:'imac',price:18000},
   {name:'ipad',price:3999},
   {name:'itouch',price:3000}
]
function sum(goods) {
	return goods.reduce((total,cur)=> {
		total += cur.price
		return total
	})
}
sum(cart) //33800

// 得到价格大于等于一万的商品
let cart = [
   {name:'iphone',price:10900},
   {name:'imac',price:18000},
   {name:'ipad',price:3999},
   {name:'itouch',price:3000}
]
function getGoodsByPrice(goods) {
	return goods.reduce((arr,cur) => {
		if(cur.price>=10000) arr.push(cur)
		return arr
	},[])
	.map(item => item.name)
}
getGoodsByPrice(cart,10000)

将伪数组转换为数组

let arr = [].slice.call(arg) //arg 需要转换的伪数组