Javascript 笔记之数组整合

数据类型

• 基本类型（值类型）：Number String Boolean null undefined
• 引用类型：Object Function
• 特殊类型：Symbol BigInt (ES10 新增基本数据类型)

数组API

增删改

push

const arr= [1,2,3]
arr.push(4) // [1,2,3,4]

concat

let arr =[1,23,2]
const hd =[45,12,11]

arr.concat(hd) // [ 1, 23, 2, 45, 12, 11 ]
arr = [...arr,..hd] // [ 1, 23, 2, 45, 12, 11 ]

pop

const arr= [1,2,3]
arr.pop() // 3

shift

const arr= [1,2,3]
arr.shift() // 1

unshift

const arr= [1,2,3]
arr.unshift(4) // [4,1,2,3]

join

// 连接字符串  转换字符串
const arr = [1,2,3].join('-')  //1-2-3

slice

// 索引值  原数组不发生改变
const arr =[1,2,3,4]

arr.slice(1) // [2,3,4]   
arr.slice() // [1,2,3,4]
arr.slice(1,3) //[ 2, 3 ]

splice

// 数量  原数组发生改变
const arr =[1,2,3,4]

arr.splice(0,2) //[ 1, 2 ]		原数组  [ 3, 4 ]
arr.splice(2，1) // [ 3 ]    	原数组  [ 1, 2, 4 ]

arr.splice(0,1,"a","b") // [ 1 ]    原数组 [ 'a', 'b', 2, 3, 4 ]

查

indexOf

const arr =[1,2,3,4,2,'9']

arr.indexOf(2) // 1
arr.indexOf(5) //-1
arr.indexOf(9) //-1

arr.lastIndexOf(4) // 3
arr.lastIndexOf(2) // 4

lastIndexOf

const arr =[1,2,3,4,2,'9']

arr.lastIndexOf(4) // 3
arr.lastIndexOf(2) // 4

includes

const arr = [1,2,3]

arr.includes(1) //true
arr.includes(3) //false

find

const arr = [5,1,34]

arr.find(item=>item == 5)  // 5
arr.find(item=>item == 123)  // undefined
==================================
const _less = [{name:'js'},{name:'css'},{age:18,name:'vue'}]

_less.find(item=>item.name == 'vue') // { age: 18, name: 'vue' }

findIndex

const _less = [{name:'js'},{name:'css'},{age:18,name:'vue'}]

_less.findIndex(item=>item.name == 'vue') // 2

遍历 API

…arg

let arr = [1,2,3]
const hd = [3,4,5]

arr = [...hd] // [3,4,5]
arr = [...arr,...hd] // [ 1, 2, 3, 3, 4, 5 ]

reduce

const arr =[1,2,3,4,5]

arr.reduce((pre,value,index,array)=>{
    console.log(pre,value)
    return pre
},0)

map

const arr = [1, 2, 3, 4]
arr.map(v => console.log(v)) // 1 2 3 4

===========================================
//DOM 数组操作
    
const div =document.querySelectorAll('div')

[...div].map(v=>{
	v.addEventListener('click',_=>{
		this.classList.toggle('hide')
    })
})

forEach

const arr = [1,3,5]
arr.forEach((item,index)=>console.log(item,index)) 
/*	1 0
	3 1
	5 2	*/

=================================
//DOM 操作
    
const div =document.querySelectorAll('div')

div.forEach(v=>{
	v.addEventListener('click',_=>{
		this.classList.toggle('hide')
    })
})

every

const arr = ["qwe","ert"]
arr.every((value,index)=>{
	console.log(index,value) //1 'qwe' 2 'ert'
    return true   //false  只返回一个value
})

some

const arr = ["qwe","ert"]
arr.some((value,index)=>{
    console.log(value)	// qwe ert
    return false   //true  只返回一个value
})

filter

const arr =[1,2,3,4]
arr.filter(v=>v>2) //[ 3, 4 ]

fill

// 填充
Array(4).fill('a') // ['a','a','a','a']

const arr = [1, 2, 3, 4].fill('a')  // ['a','a','a','a']

const arr = [1, 2, 3, 4].fill('a',1,3)  // [ 1, 'a', 'a', 4 ]

Array.of

// 赋值
const arr = Array.of(6) // [6]

Array.isArray

// 验证是否为数组
Array.isArray([]) //true
Array.isArray({}) //false

toString

// 转换字符串
const arr = [1,2,34,2]
console.log(arr.toString()) //1,2,34,2

const arr =String([1,2,34,2])
console.log(arr.toString()) //1,2,34,2

copyWithin

// copyWithin 数组改变
const hd =[1,2,3,4,5,6]

// 选择替换开始索引 ，复制索引开始 ，复制索引结束
hd.copyWithin(2,0,2) // [ 1, 2, 1, 2, 5, 6 ]

hd.copyWithin(3, 1, 3) // [ 1, 2, 3, 2, 3, 6 ]

案例

数组求和

function sum(...args) {
  return args.reduce((oldVal, newVal) => oldVal += newVal, 0)
}

sum(1, 2, 3) // 6

移动函数

function move(arr,from,to){
    if(from < 0|| to>=arr.length) return console.error("参数错误") 
	const newArr =[...arr]
    const item = newArr,splice(from,1)
    newArr.splice(to,0,...item)
    
    return newArr
}
const arr = [1,3,2,65]

move(arr,1,3) // [ 1, 2, 65, 3 ]

清空数组

let arr =[1,2,3,4]

arr=[]
arr.length = 0
arr.splice(0,arr.length)

排序

大到小

const arr= [12,1,2654,21,35]
// -1 从小到大  1 从大到小
arr.sort((a,b)=> b-a) // [ 2654, 35, 21, 12, 1 ]

小到大

const arr= [12,1,2654,21,35]
// -1 从小到大  1 从大到小
arr.sort((a,b)=> a-b) // [ 2654, 35, 21, 12, 1 ] //[ 1, 12, 21, 35, 2654 ]

出现次数

const arr = [1,2,3,1,2,1,3,1,3]

function arrayCount(arr,item){
    let count = 0
	arr.reduce((pre,val)=>{
        if(item == val) count++
    },0)
    return count
}

console.log(arrayCount(arr,1))

========================================
const arr = [1,2,3,1,2,1,3,1,3]
function arrayCount(arr,item){
	return arr.reduce((total,cur)=>{
       total+=item === cur ?1:0
        return total
    },0)
}

console.log(arrayCount(arr,1))

去重

const array = [1, 2, 31, 1, 2, 31, 23]

const ar2 = array.reduce((arr, cur) => {
  if (arr.includes(cur) === false) arr.push(cur)
  return arr
}, [])

console.log(ar2) // [ 1, 2, 31, 23 ]

===========================================================
const array = [1, 2, 31, 1, 2, 31, 23]

console.log([...new Set(array)]) // [ 1, 2, 31, 23 ]

最大值

const arr=[1,23,54,12]

function arrayMax(arr){
	return arr.reduce((pre,val)=>{
		return pre>val ? pre:val
    })
}

console.log(arrayMax(arr)) //54
========================================
Math.max.apply(null,arr)
==========================================
Math.max(...arr)   

手写 includes

const arr =[1,2,3,4]

function includes(arr,find){
	if(const val of arr) if(val === find) return true
    return false
}
includes(arr,1) //true
includes(arr,5) //false

手写find

function find(arr,callback){
	for(const val of arr) if(callback(val)) return val
    return undefined
}
const arr =[1,2,3,4,5]

find(arr,item=>item==1) // 1

=============================
//修改原型
Array.prototype.findVal = callback => {
	for(const val of arr) if(callback(val)) return val
    return undefined
}

const arr =[1,2,3,4,5]
arr.findVal(item=>item==5) // 5

手写 sort

const arr= [12,1,2654,21,35]

function sort(arr,callback){
	for(const n in arr){
		for(const m in arr){
			if(callback(arr[n],arr[m])<0){
				const temp =arr[n]
                arr[n] = arr[m]
                arr[m] = temp
            }
        }
    }
    return arr
}

console.log(sort(arr,(a,b)=>a-b)) // [ 1, 12, 21, 35, 2654 ]

=======================================================
//原型
const arr= [12,1,2654,21,35]

Array.prototype.sortVal= callback =>{
    for(const n in arr){
		for(const m in arr){
			if(callback(arr[n],arr[m])<0){
				const temp =arr[n]
                arr[n] = arr[m]
                arr[m] = temp
            }
        }
    }
    return arr
}
console.log(arr.sortVal((a,b)=>b-a))

手写filter

const arr =[1,23,4,5]
function filter(arr,callback){
	const newAR = []
    for(const val of arr){
        if(callback(val)===true) newAR.push(val)
    }
    return newAR
}
 
filter(arr,v=>v>2) //[ 23, 4, 5 ]

========================================
// 原型
const arr =[1,23,4,5]
Array.prototype.filterVal=callback=>{
    	const newAR = []
    for(const val of arr){
        if(callback(val)===true) newAR.push(val)
    }
    return newAR
}
arr.filterVal(v=>v>2) //[ 23, 4, 5 ]