面試死在數組，數組真的那麼難嗎？(Js篇)

前言

前幾天面試字節，死在數組身上。總結還是刷題太少，對數組的操作不是很熟悉。最近又開始了枯燥的刷題，與此同時又對數組進行了系統性的學習。總結爲這篇學習筆記。有想一起刷題的小夥伴可以私聊我，一塊進行枯燥的刷題時間。唯有熟能生巧

---

數組

如何創建一個數組

	// 字面量方式:
    // 這個方法也是我們最常用的，在初始化數組的時候 相當方便
    var a = [3, 11, 8];  // [3,11,8];
    // 構造器:
    // 實際上 new Array === Array,加不加new 一點影響都沒有。
    var a = Array(); // [] 
    var a = Array(3); // [,,] 
    var a = Array(3,11,8); // [ 3,11,8 ]

之前版本的缺陷

let arr = new Array(6)
console.log(arr.length)		//6

改進

let arr = Array.of(6)
console.log(arr) 	//6

類型檢測與轉換

console.log(Array.isArray("das"))	//false
console.log(Array.isArray(12))		//false
console.log(Array.isArray([]))		//true

轉換成字符串

let t = [1,2,5,6,7].toString()
console.log(typeof t)		//'string'

let t = String([1,2,3,5])
console.log(typeof t)		//'string'

let t = [1,2,3,5].join("")
console.log(typeof t)		//'string'

字符串轉數組

let str = "Jack"
console.log(str.split(""))		//["J","a","c","k"]

let str = "Jack"
//使用 Array.from 必須保證有length屬性  
console.log(Array.from(str))		//["J","a","c","k"]

展開運算符

如何連接兩個字符串：

let arr1 = ["sda","qwqw"]
let arr2 = ["asdas"]
for(const value of arr2){
    arr1.push(value)
}

arr = [...arr1,...arr2]

Example

Sum function:

function sum(...args){
    return args.reduce((s,v)=>{
        return (s+=v)
    },0)
}

console.log(sum(1,2,3,5,4,6,7,8))		//34
console.log(sum(1,2,3,4))		//10

解構

let arr= [2,3]
let [a,b] = arr;
console.log(a,b)		// 2 3

const [...arr] = "Jack"	
//["J","a","c","k"]

let [,b] = [22,68]
console.log(b)		//68

let [a,...b] = [56,98,2,5,555,232]
console.log(b)		//98,2,5,555,232

let [a,b=2] = [1]
console.log(a)	//1

數組添加元素

let arr1 = ["qwewq","4ew"]
let arr2 = ["3423","ewtwe"]

console.log([...arr1,...arr2])

console.log(arr1.push("eqw",...arr2))

function test(begin,end){
    let arr = []
    for(let i=begin;i<=end;i++){
		arr.push(i)
    }
    return arr
}

數組出棧、入棧以及填充

let arr =  [1,2,3,5]
arr.pop() //1 2 3
arr.unshift(0,6)  //0 6 1 2 3
arr.shift()		//0
console.log(Array(5).fill(1))		//1 1 1 1 1
console.log([1,2,3,4,5,6].fill("jack",1,3))	//[1, "jack", "jack", 4, 5, 6]

slice splice

let arr = [1,2,3,5,6,9]
//截取部分 有始有終
let newArr = arr.slice(1,3)	
console.log(newArr)// 2 3
console.log(arr)// 1 2 3 5 6 9
//截取全部
console.log(arr.slice())	// 1 2 3 5 6 9
// 從index開始之後所有
console.log(arr.slice(1))	// 2 3 5 6 9

let arr = [1,2,3]
// 截取之後 直接拿走 改變原數組
let newArr = arr.splice(0,2)
console.log(newArr)	//1 2
console.log(arr)	//3

let arr1 = [1,2,3]
// 替換 並 移除
let arr2 = arr1.splice(0,2,"jack","yjk")
console.log(arr2)	//["jack", "yjk", 3]

let arr3 = [1,2,5,9,7]
arr3.splice(1,1,"yjk")
console.log(arr3)		// [1, "yjk", 5, 9, 7]

//當 第二個參數爲0 進行增加
let arr4 = [1,2,5,9,7]
arr4.splice(1,0,"yjk")
console.log(arr4)		// [1, "yjk", 2, 5, 9, 7]

數組數據移動

function moveEl(array,from,to){
    //判斷位置 是否合法
    if(from <0 || to >= array.length){
        console.error("參數錯誤")
        return 
    }
    // 定義新數組  從而不改變原來的數組
    const newArray = [...array]
    let item = newArray.splice(from,1)
    newArray.splice(to,0,...item)
    return newArray
}

let array = [1,2,3,4,5]
// 把 第一個元素 移動到 第三個位置
console.log(moveEl(array,1,3))	//[1, 3, 4, 2, 5]

清空數組

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

arr = []
arr.length = 0
arr.splice(0,arr.length)
while(arr.pop()){}

// 直接賦值爲空 arr2 指向 [1,2,3]  arr1 指向空
let arr1 = [1,2,3]
let arr2 = arr1
arr1= []
console.log(arr2)	//[1, 2, 3]
console.log(arr1)   // [] 

//設置數組長度爲0  兩個數組都指向 空
let arr1 = [1,2,3]
let arr2 = arr1
arr1.length = 0
console.log(arr2)	//[]
console.log(arr1)   // [] 

數組拆分與合併

let str = "qw,er,rt"
let arr = str.split(",")		//[qw,er,rt]
arr,join("-")   //qw-er-rt

let arr1 = [1,2]
let arr2 = [1,2]
let arr3 = [1,2]

arr1 = arr1.concat(arr2,arr3)
arr1 = [...arr1,...arr2,...arr3]

let arr = [1,2,3,4]
console.log(arr.copyWithin(2,0,2))		//[1,2,1,2]

let arr = [1,2,3,4,5,6]
console.log(arr.copyWithin(3,1,3))		//[1,2,3,2,3,6]

數組查找

indexOf

let arr = [1,2,3,4,2]
//indexOf 從左側開始查找
//lastIndexOf 從右側開始查找
// 返回 2的索引位置
console.log(arr.indexOf(2))		//1
console.log(arr.indexOf(5))		//-1  查找不到返回-1
console.log(arr.lastIndexOf(2))		//4
//從第二個位置開始查找 2  (el,begin)
console.log(arr.indexOf(2,2))		//4
// 右側第二個開始進行查找
console.log(arr.lastIndexOf(2,-2))		//4
console.log(arr.includes(2))  	//true

includes 原理

function includes(array,find){
    for(const value of array){
        if(value === find) return true
        return false
    }
}

find & findIndex

let arr = [1,2,3,4,5]
let res = arr.find(function(item){
      //console.log(item)
    return item == 2
 })
console.log(res)		//2

let lessons = [{name:"js"},{name:"css"},{name:"html"}]
let status = lessons.find(function(item){
    //console.log(item)
    return item.name == "css"
})

console.log(status)		//{name:'css'}

let statusIndex = lessons.findIndex(function(item){
    //console.log(item)
    return item.name == "css"
})

console.log(statusIndex)		// 1

find 原型方法實現

function find(array,callback){
    for(const value of array){
        if(callback(value)) return value
    }
    return undefined
}

let arr= [1,2,3,4,5]
console.log(find(arr,function(item){
    return item == 22
}))
// undefined

Array.prototype.findValue = function(callback){
    for(const value of this){
        if(callback(value)) return value
    }
    return undefined
}

let arr= [1,2,3,4,5]
const res = arr.findValue(function(item){
    return item == 2
})

console.log(res)  // 2

排序

let arr = [1,2]
arr = arr.sort(function(a,b){
    // return a-b  //從小到大
    // return a-b  //從大到小
    return a-b
})
console.log(arr)		// 1 2

sort 原理

let arr = [4,3,5,1,2,9,78]
function sort (array,callback){
    for(const n in array){
        for(const m in array){
            if(callback(array[n],array[m]) < 0){
				const temp = array[n]
                array[n] = array[m]
                array[m] = temp
            }
        }
    }
    return array
}

arr = sort(arr,(a,b) => a-b)
console.log(arr)		//[1, 2, 3, 4, 5, 9, 78]

循環

let list = [
    {id:1,name:"asdas"},
    {id:1,name:"sf"},
    {id:1,name:"wer"}
]

for

for(let i=0;i<list.length;i++){
    list[i].name = `test ${list[i].name}`
}
console.table(list)

for…of

for(const value of list){
    value.name = `test ${value.name}`
}
console.table(list)

注意：當數組中爲值類型的時候，進行數據更改，不會更改原有數組內容

let arr = [1,2,3]
for(let value of arr){
    value += 10
}
console.log(arr)		// [1,2,3]

for…in

for(const key in list){
    list[key].name = `test ${list[key].name}`
}

forEach

list.forEach(function(item,index,list){
    console.log(item)
})

list.forEach(function(item,index,list){
    console.log(index)
})

list.forEach(function(item,index,list){
    console.log(list)
})

list.forEach(function(item,index,list){
    item.name = item.name.substr(0,5)
})
console.table(list)

forEach 可以直接操作 DOM 元素

迭代器

let arr = [1,2,3]
let keys = arr.keys()
let values = arr.values()
console.log(keys)  // Array Iterator{}
console.log(keys.next())	//{value:1,done:false}  false代表後面還有值

while(({value,done} = values.next()) && done === false){
    console.log(value)
}		// 1 2 3

取值:

let arr = [1,2,3]
for(const value of arr.values()){
    console.log(value)
}	// 1 2 3

取索引值：

let arr = [1,2,3]
for(const key of arr.keys()){
    console.log(key)
}	// 0 1 2

let str = ["jack","yjk"]
let entries = str.entries()
let {done,value} = entries.next()
console.log(done,value)  //  false  [0, "jack"]

let str = ["jack","yjk"]
for(const [key,value] of arr.entries()){
    console.log(value)
}
// jack yjk

every & some

const list = [
    {name:"asd",num:90},
    {name:"asd",num:70},
    {name:"asd",num:55}
]

every

let res = list.every(function (item){
    return item.num >= 60
})
if(res){
    console.log("True")
}else{
    console.log("False")
}

//False

some

let res = list.some(function (item){
    return item.num >= 60
})
if(res){
    console.log("True")
}else{
    console.log("False")
}

//True

過濾 filter

let arr = [1,2,3,4]
let newArr = arr.filter(function(value,index,arr){
	return true
})
console.table(newArr)		

let list = [
    {id:1,name:"asdas"},
    {id:2,name:"sf"},
    {id:1,name:"wer"}
]

let res = list.filter(function(list){
    return list.id === 1
})
console.log(res)

let arr = [1,2,3,4,5,6,7,8,9]
function filter(array,except){
    let newArray = []
    for(const value of array){
        if(except.includes(value) === false){
        	newArray.push(value)
    	}
    }
    return newArray
}
console.log(filter(arr,[4,5,6]))			//[1, 2, 3, 7, 8, 9]

// 判斷偶數
let arr = [1,2,3,4,5,6,7,8,9]
function filter(array){
    let newArray = []
    for(const value of array){
        if(value%2 === 0){
        	newArray.push(value)
    	}
    }
    return newArray
}
console.log(filter(arr))

let arr = [1,2,3,4,5,6,7,8,9]
function filter(array,callback){
    let newArray = []
    for(const value of array){
        if(callback(value) === true){
        	newArray.push(value)
    	}
    }
    return newArray
}
console.log(filter(arr,function(value){
    return value%2===0
}))

映射 map

值類型

let arr = [1,2,3,4,5,6]
let arr1 = arr.map(function(value,index,arr){
    value += 2
    return value
})

console.log(arr1)    //  [3, 4, 5, 6, 7, 8]
console.log(arr)    //   [1,2,3,4,5,6]

引用類型

let list = [
    {id:1,name:"asdas"},
    {id:2,name:"sf"},
    {id:1,name:"wer"}
]

list.map(function(value){
    value.other = "test"
})
console.table(list)

引用類型 不想改變原數組：

第一種：

let list = [
    {id:1,name:"asdas"},
    {id:2,name:"sf"},
    {id:1,name:"wer"}
]

let newArr = list.map(function(value){
    return Object.assign({other:"test"},value)
})
console.table(list)
console.table(newArr)

第二種：

let list = [
    {id:1,name:"asdas"},
    {id:2,name:"sf"},
    {id:1,name:"wer"}
]

let newArr = list.map(function(value){
    return {
        id:value.id,
        name:value.name,
        other:"test"
    }
})
console.table(list)
console.table(newArr)

reduce

let arr = [1,2,3,4,5,6]
arr.reduce(function(pre,value,index,array){
    console.log(pre,value)
    return 12
})

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

在第二個中 0爲當前reduce中的 pre 的值

例子1：查詢出現的次數

let arr = [1,2,5,6,2,3,4,2,6,1]
function arrayCount(array,item){
    return array.reduce(function(total,cur){
        total += item === cur ? 1 : 0
        return total
    },0)
}
console.log(arrayCount(arr,1))	// 2 

例子2：查詢最大值

let arr = [56,89,51,78,63,21,59,99]
function arrayMax(array,item){
    return array.reduce(function(pre,cur){
        return pre > cur ? pre : cur
    })
}
console.log(arrayMax(arr))	// 99

數組去重：

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

let newArr = arr.reduce(function(arr,cur){
    if(arr.includes(cur) === false){
        arr.push(cur)
    }
    return arr
},[])

console.log(newArr)			// [1, 2, 3, 5, 6, 4]