Js数组常用方法

通用方法

数组的遍历

// 数组的遍历
var a =1
// for in
for (let i in [1, 2, 3, 4]) {
    console.log(i)
}

// forEach
[1, 2, 3, 4].forEach((item: number, index: number, array: Array<number>) => {
    console.log(`${index}额${item}额${array[index]}`)
})

数组点长度，添加和删除元素

// length of array . update ,insert and delete of element 
let array1: number[] = [1, 2, 3, 4]
array1.length = 3
console.log(array1) // 【1，2， 3】
array1.length = 5
console.log(array1) // [1, 2, 3, empty * 2]
console.log(array1[4] == undefined) // true
delete array1[1]    // 把那个位置上的ele置为undefined
console.log(array1)

array.join(str)

/**
 * array.join(str)
 * 功能：将数组的元素用参数字符串拼接成一个新的字符串
 * @param ste string
 * @return string 拼接结果
 * 不会改变源
 */
console.log([1,2,3,4].join('=='))   // 1==2==3==4

array.reverse()

/**
 * array.reverse()
 * 功能: 翻转数组
 * @return array
 * 会改变源
 */
let array2: number[] = [1, 2, 3, 4]
array2.reverse()
console.log(array2)    // [4, 3, 2, 1]

array.slice(startIndex, endIndex)

/**
 * array.slice(startIndex, endIndex)
 * 功能：截取数组从start开始 end结束
 * @param startIndex number 
 * @param endIndex number
 * @return array 截取后的字符串
 * 不会改变源
 * tips: 不包含endIndex处的元素 不指定end就截取到最后
 */
console.log([1, 2, 3, 4, 5].slice(0, 2))  // [1, 2]
console.log([1, 2, 3, 4, 5].slice(1))   // [2  ,3, 4,5]

array.splice(index, num, itm1, item2 …)

/**
 * array.splice(index, num, item1, item2...)
 * 功能 在数组的中间添加或者删除元素
 * @param index number 开始的下标 规定从那个地方开始操作
 * @param num number 个数 规定要操作的元素的个数
 * @param item? any 要添加到数组的新元素
 * @return array 被删除的元素
 * 会改变源   
 */
let array3: Array<number> = [1, 2, 3, 4, 5]
let array3ret1: number[] = Array.prototype.splice.call(array3, 1, 2, 8, 9)
console.log(array3)  // [1, 8, 9, 4, 5]
console.log(array3ret1)  // [2, 3]
Array.prototype.splice.apply(array3, [1, 3]) // [8, 9, 4]
console.log(array3)  // [1, 5]
array3.splice(0, array3.length)
console.log(array3)  // []

array.concat(array1, array2 …)

/**
* array.concat(array1, array2, ..)
* 功能： 数组的拼接
* @param array any[]  参与拼接的数组
* @return array  拼接后的数组
* 不会改变源
*/
console.log([1, 2, 3].concat([2, 3 ,4], [1]))   // [1, 2, 3, 2, 3, 4, 1]

array.indexOf(item)/lastIndexOf(item)

/**
 * array.indexOf(item) 
 * 功能：从左边开始找第一个出现的下标
 * @param item any 要找的元素
 * @return number 找到的下标 没找到为-1
 * 不会改变源
 * lastIndexOf(item)    // 从右边往左边找
 */
console.log([1, 2, 3, 4].indexOf(2))   // 1
console.log([1, 2, 3, 4].lastIndexOf(2)) // 1
console.log([1, 2, 3, 4].indexOf(5))   // -1

冒泡排序

let array4: Array<number> = [4, 5, 2, 8, 6]
for (let i: number = 0; i < array4.length; ++i) {
    for (let j: number = 0; j < array4.length - i - 1; ++j) {
        if (array4[j] < array4[j + 1]) {
            let temp: number = array4[j]
            array4[j] = array4[j + 1]
            array4[j + 1] = temp
        } 
    }
}
console.log(array4) //[8, 6, 5, 4, 2]

array.sort(callback)

/**
 * array.sort(callback)
 * 功能：排序
 * @param callback(item1, item2)? 回调函数指定排序规则
 * @return array 排序后的数组
 * 会改变源
 */
 array4.sort((v1: number, v2: number):number => {
     return v1 > v2 ? 1 : -1    //如果返回1就交换
})
console.log(array4) // [2, 4, 5, 6, 8]

es6 新迭代方法 都不会改变源数组

array.everey(callback(item, index, array))

/**
 * array.everey(callback(item: any, index: number, array: any):boolean)
 * 功能：检测数组的每一个元素是否满足条件 只要有一个不满足就返回false
 * @param callback(item: any, index: number, array: any) item每一项 index下标 array目标数组
 * @return boolean 
 */
 console.log([1, 2, 3, 4].every((item: number, index: number, array: number[]): boolean => {
     return item > 2
 }))    // false

 console.log([1, 2, 3, 4].every((item: number, index: number, array: number[]): boolean => {
    return array[index] > 0
}))    // true

array.some(callback(item, index, array))

/**
 * array.some(callback(item: any, index: number, array: any):boolean)
 * 功能：检测数组的每一个元素是否满足条件 只要有一满足就返回true
 * @param callback(item: any, index: number, array: any) item每一项 index下标 array目标数组
 * @return boolean 
 * tips: 与every相反
 */
console.log([1, 2, 3, 4].some((item: number, index: number, array: number[]): boolean => {
    return item > 2
}))    // true

array.filter(callback(item, index, array))

/**
 * array.filter(callback(item: any, index: number, array: any):boolean)
 * 功能：检测数组每个元素 返回满足条件的元素组成的新数组
 * @param callback(item: any, index: number, array: any):boolean
 * @return array
 */

 console.log([1, 2, 3, 4, 5].filter((item: number, index: number, array: number[]):boolean => {
    return array[index] > 2
 }))    // [3, 4, 5]

array.forEach(callback(item, index, array))

 /**
  * Array<T>.forEach(callback(item: T, index: number, array: T[]): void)
  * 功能：遍历数组对数组元素进行操作 没有返回值
  * @param callback(item: T, index: number, array: T[]): void
  */
interface StrArray{
    length: number
}  
function seeArray<T extends StrArray>(array :T[]):void {
    array.forEach((item: T, index: number, array: Array<T>):void => {
        console.log(item)
    })
}
seeArray(['a', 'b', 'c', 'd'])    // abcd

array.map(callback(item, index, array))

/**
 * array.map(callback(item: any, index: number, array: any):any)
 * 功能：对数组每一项进行操作 返回callback返回值所组成的数组
 * @param callback(item: any, index: number, array: any):any
 * */
console.log([1, 2, 3, 4].map((item, index, array) => {
    return item * 2
})) // [2, 4, 6, 8]

array.reduce(callback)

console.log('------------')
console.log([1, 2, 3, 4, 5].reduce(
    (prev, cur, inex, array) => {
        console.log(prev + cur)
        // prev 上一次调用函数的返回值
        return prev + cur
    }
))

原文 https://github.com/lidaguang1989/javascript-knowhow