在数组Array原型上添加padStart()和padEnd()

最近使用vue 写项目,每当需要数组管理一组当前的选中状态的时候,就会使用循环初始一个数组。 想到了String 上的 padStart 可以填充字符串。因为数组的fill()方法是浅拷贝,所以就模拟了padStart()padEnd()。 不完善之处谢谢指出

/**
 * 补全数组长度的功能 如果某个数组不够指定长度,会在头部补全
 * @param { Number } length 
 * @param { * } element 
 * @return 补全后的数组
 * 示例: [].padStart(Number, element = '')
 */
if(!Array.prototype.padStart) {
    Object.defineProperty(Array.prototype, 'padStart', {
        value: function (length, element) {
            // length is Number
            if(!Number(length) && Number(length) != 0) throw new Error(`${length} is not Number`)
            // init
            let ary = this;
            let len = length - this.length;
            // add elements
            for(let i = 0; i < len; i ++ ) {
                if(element instanceof Array) {
                    ary.unshift([...element])
                }else if(element instanceof Object) {
                    ary.unshift({...element})
                }else{
                    ary.unshift( element || '')
                }
            }
            return ary
        }
    })
}
/**
 * 补全数组长度的功能 如果某个数组不够指定长度,会在尾部补全
 * @param { Number } length 
 * @param { * } element 
 * @return 补全后的数组
 * 示例: [].padEnd(Number, element = '')
 */
if(!Array.prototype.padEnd) {
    Object.defineProperty(Array.prototype, 'padEnd' , {
        value: function (length,element) {
            // length is Number
            if(!Number(length) && Number(length) != 0) throw new Error(`${length} is not Number`)
            // init
            let ary = this;
            let len = length - this.length;
            // add elements
            for(let i = 0; i < len; i ++ ) {
                if(element instanceof Array) {
                    ary.push([...element])
                }else if(element instanceof Object) {
                    ary.push({...element})
                }else{
                    ary.push( element || '')
                }
            }
            return ary
        }
    })
}

示例:

let state = [].padStart(3,{checked:false})
console.log(state) // [{checked:false},{checked:false},{checked:false}]
//改变一下
state[1].checked = true
console.log(state) // [{checked:false},{checked:true},{checked:false}]

你可能感兴趣的:(代码片段)