Javascript 之 Array - fill()、find()、findIndex()

Javascript 之 Array - fill()、find()、findIndex()

只能抽点空闲时间来写博文，所以打算将 数组Array 分为几个部分来写
后续这里会添加其他部分的链接

1 数组的定义

var arr1 = [1,2,3]               // 隐式创建
var arr2 = new Array(4,5,6)      // 直接实例化
var arr3 = new Array(4)          // 创建数组并指定长度
var arr4 = [undefined,undefined,undefined,undefined]
console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr3[0])
console.log(arr3==arr4)  // false  因为数组为引用类型

效果

2. 数组的方法
2.1 fill() - ES5
底层

关于vs code 如何查看底层

// fill(value, start, end)  // 后两个可有可无
var arr5 = new Array(5).fill(1)  // 创建被填充初始值
console.log(arr5)
var arr6 = [2,2,2,2,2,2].fill(1,3) 
console.log(arr6) // 从下标3开始到最后 值被替换为1
var arr7 = [2,2,2,2,2,2].fill(1,3,5) 
console.log(arr7) // 从下标3开始到最后 到下标5 但是不包括下标5
// 关于start和end 当然还有另外一种记忆方法
// 1.  start为 下标开始位置
// 2.  长度为 end - start 若省略 end 则end为数组长度
// 3.  被替换的值为 value
var arr8 = [2,2,2,2,2,2].fill(1,3,3) 
console.log(arr8)  // 由于3-3=0  所以没有元素被替换  输出 [2,2,2,2,2,2]

效果

2.2 find() -ES5
底层

显然当第一参数无返回值时 将会 return undefined

// find()
var arr9 = [1,2,3,4,5,6]
// 由底层可知  func9 可传入3个参数
function func9(value, index, obj){
    console.log(value, index, obj)
}
arr9.find(func9, this)
// 输出
// 1 0 [ 1, 2, 3, 4, 5, 6 ]
// 2 1 [ 1, 2, 3, 4, 5, 6 ]
// 3 2 [ 1, 2, 3, 4, 5, 6 ]
// 4 3 [ 1, 2, 3, 4, 5, 6 ]
// 5 4 [ 1, 2, 3, 4, 5, 6 ]
// 6 5 [ 1, 2, 3, 4, 5, 6 ]
// value 为当前元素   index 为下标  obj为数组本身
function func10(value, index, obj){
    if(value>3) {
        // return false  //  输出 undefined
        // return 0  // 输出 undefined
        return index
    }
}
// 显然当有值返回时  就会返回第一个满足条件的元素
console.log(arr9.find(func10, this))

2.3 findIndex() - ES5
底层

// findIndex()  与find 类似  只不过 返回的是 第一个满足条件的元素的下标
var arr11 = [1, 2, 3, 4, 3, 9, 3]
function func11(value, index, obj) {
    if(value===3) {
        // return false  //  输出 undefined
        // return 0  // 输出 undefined
        return 1
    }
}
console.log(arr11.findIndex(func11, this))  // 第一个 3 的位置在下标2

怎么既返回元素的值又返回对应下标

// 怎么既返回元素的值又返回对应下标
var arr11 = [1, 2, 3, 4, 3, 9, 3]
Array.prototype.hujiajia = function(args,self){

    if(!Array.isArray(this)){  // 判断是不是数组
        console.log('error')
    } else {
        return [this.find(function(a,b,c){
            if(a==args){
                i = b
                return 1
            }
        },self),i]
    }
}
console.log(arr11.hujiajia(9,this))  // 输出 [9,5]