数组api及实现数组方法重构

目录

一、数组基础

数组的创建

二、数组API

1、构造函数的方法

(1)Array.isArray()

(2)Array.from()

(3)Array.of()

2、栈与队列方法(均会修改原数组)

(1)Array.prototype.push()

(1.1)push()方法重构

(2)Array.prototype.pop()

(3)Array.prototype.shift()

(3.1)shift()方法重构

(4)Array.prototype.unshift()

2、排序方法

(1)Array.prototype.reverse()

(2)Array.prototype.sort()

3、操作方法

(1)Array.prototype.concat()不改变原数组

(2)Array.prototype.slice()不改变原数组

(3)Array.prototype.splice()改变原数组

4、位置方法

(1)Array.prototype.indexOf()

(2) Array.prototype.lastIndexOf

5、迭代方法(不修改原数组)

(1)Array.prototype.every()

 (1.1)重构every()方法

(2) Array.prototype.some()

(2.1) 重构some()方法

 (3)Array.prototype.filter()

(3.1)重构filter()方法

(4)Array.prototype.map()

(4.1)重构map()方法

(5)Array.prototype.forEach()

(5.1)重构forEach()方法


一、数组基础

ECMAScript数组是有序列表,是存放多个值的集合。 数组每一项都可以保存任何类型的数据且数组的大小是可以动态调整。 

数组的创建

//字面量创建数组 接受任何类型的数据作为数组元素
var arr = [123,12,'zhangsan',function(){},[]]
//通过数组下标获取对应元素 数组下标从0开始
console.log(arr[2]);//zhangsan
//获取数组长度
console.log(arr.length);//5
//获取数组最后一个元素
console.log(arr.length-1);//[]

//通过Array构造函数来创建数组
//创建一个空数组  
var arr = new Array();//等价于var arr = [];
//创建一个长度为3的数组
var arr = new Array(3); //等价于 var arr = [undefined,undefined,undefined];
//当()内的参数为number类型的整数时,表示数组的长度,为小数则会报错。如果参数其他类型的数据则会被当做数组元素放进去
var arr = new Array('zhangsan','lisi');//等价于 var arr = ['zhangsan','lisi'];

二、数组API

1、构造函数的方法

(1)Array.isArray()

作用:判断某个变量是否是一个数组对象

(2)Array.from()

作用:从类数组对象或者可迭代对象中创建一个新的数组实例。

(3)Array.of()

作用:根据一组参数来创建新的数组实例,支持任意的参数数量和类型。

2、栈与队列方法(均会修改原数组)

(1)Array.prototype.push()

作用:push()方法可向数组的末尾添加一个或多个元素,并返回新的长度

语法:array.push(item1, item2, ...)

参数:任何类型和个数的数据      返回值:新数组的长度

var arr = [2,4,6,8];
console.log(arr.push(10,'zhangsan'));//6
console.log(arr);//[ 2, 4, 6, 8, 10, 'zhangsan' ]

(1.1)push()方法重构

// 重构push()方法
// 参数;任何类型和个数的数据  返回值:新的数组长度
Array.prototype.myPush = function(){
    //arguments.length传入的参数的长度
    for(var i = 0;i<arguments.length;i++){
        //this[this.length]原数组最后一个元素的下一个元素
        this[this.length] = arguments[i]
    }
    return this.length
}
var res = arr.myPush('hello',12)
console.log(res,arr);//6 [ 2, 4, 6, 8, 'hello', 12 ]

(2)Array.prototype.pop()

作用:用于删除数组的最后一个元素并返回删除的元素。

语法:array.pop()

参数:无             返回值:返回删除的元素

var arr = [2,4,6,8]
console.log(arr.pop(),arr);

(2.1)pop()方法重构

// 重构pop()方法
// 参数:无  返回值:删除的数组元素(数组最后一个元素)  改变数组长度
var arr = [2,4,6,8]
Array.prototype.myPop = function(){
    //判断数组是否为空
    if(this.length>0){
        //将数组最后一个元素赋值给last
        let last = this[this.length - 1]
        //改变数组长度(数组长度-1)以删除数组最后一个元素
        this.length--
        return last

    }else{
        return undefined
    }
}
var res = arr.myPop()
console.log(res,arr);//8 [ 2, 4, 6 ]

(3)Array.prototype.shift()

作用:用于把数组的第一个元素从其中删除,并返回第一个元素的值。

语法:array.shift()

参数:无             返回值:被删除的元素

var arr = [2,4,6,8]
console.log(arr.shift(),arr);//2 [ 4, 6, 8 ]

(3.1)shift()方法重构

// 重构shift()方法
// 参数:无  返回值:删除的数组元素(数组第一个元素)  改变数组长度
Array.prototype.myShift = function(){
    let del = this[0]
    for(var i = 0;i<this.length;i++){
        this[i]=this[i+1]
    }
    this.length--
    return del
}
var res = arr.myShift()
console.log(res,arr);//2 [ 4, 6, 8 ]

(4)Array.prototype.unshift()

作用:用于向数组的开头添加一个或多个元素,并返回新的长度。

语法:array.unshift(item1,item2, ...)

参数:任何类型和个数的数据            返回值:新的数组长度

var arr = [2,4,6,8]
console.log(arr.unshift('zhangsan',10),arr);//6 [ 'zhangsan', 10, 2, 4, 6, 8 ]

(4.1)unshift()方法重构

// 重构unshift()方法 向数组的开头添加一个或多个元素
// 参数:任何类型和个数的数据 返回值:新的数组长度
Array.prototype.myUnshift = function(){
    //新的数组长度
    let long = this.length + arguments.length
    for(var i=long;i>0;i--){
        //判断i是否大于传入参数的长度
        if(i > arguments.length){
            //大于则原数组中每个元素都向后移arguments.length个位置
            this[i-1] = this[i-1-arguments.length]
        }else{
            //反之,传入的参数依次从数组开头加入
            this[i-1] = arguments[i-1]
        }
    }
    return long
}
var res = arr.myUnshift('hello',12)
console.log(res,arr);//6 [ 'hello', 12, 2, 4, 6, 8 ]

2、排序方法

(1)Array.prototype.reverse()

作用:用于颠倒数组中元素的顺序。

语法:array.reverse()

参数:无            返回值:顺序颠倒后的数组

var arr = [2,4,6,8]
console.log(arr.reverse());//[ 8, 6, 4, 2 ]

(2)Array.prototype.sort()

作用:用于颠倒数组中元素的顺序。默认按字母升序排序。

语法:array.sort(sortfunction)  

参数:sortfunction 可选,规定排序规则必须是函数           返回值:排序后的数组

var arr = [2,4,6,'d','c','e',8]
var res = arr.sort();
console.log(res);//[ 2,4,6,8,'c','d','e' ]
//数字排序(降序) 含字符串时:
var arr = [2,4,6,'d','c','e',8]
var res = arr.sort(function(a,b){
	return b-a
});
console.log(res);//[6,4,2,'d','c','e',8]
//数字排序(升序)含字符串时:
var arr = [2,4,6,'d','c','e',8]
var res = arr.sort(function(a,b){
	return a-b
});
console.log(res);//[2,4,6,'d','c','e',8]
//数字排序仅含数字时 降序
var arr = [2,9,4,5,2,1]
var res = arr.sort(function(a,b){
	return b-a
});
console.log(res);//[ 9, 5, 4, 2, 2, 1 ]
//升序
var arr = [2,9,4,5,2,1]
var res = arr.sort(function(a,b){
	return a-b
});
console.log(res);//[ 1, 2, 2, 4, 5, 9 ]

3、操作方法

(1)Array.prototype.concat()不改变原数组

作用:用于连接两个或多个数组。

语法:array1.concat(array2,array3,...)

参数: 可以是具体的值或者数组对象,个数任意。         返回值:一个新的数组

var arr = ["lisi"]; 
var arr1 = [1, "a", "c"]; 
var arr2 = ["zhangsan"]; 
var child = arr.concat(arr1,arr2);
console.log(child);//[ 'lisi', 1, 'a', 'c', 'zhangsan' ]
console.log(arr,arr1,arr2);//[ 'lisi' ] [ 1, 'a', 'c' ] [ 'zhangsan' ]

(2)Array.prototype.slice()不改变原数组

作用:用于从已有的数组中提取字符串的某个部分,并以新的字符串返回被提取的部分。

语法:array.slice(start, end)

参数:start:规定从何处开始选取,如果为负数将从数组尾部算起,比如slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)

          end:规定从何处结束选取,可填任何整数,可不填

返回值:一个新的数组          不改变数组长度

//start,end均不取值时
var arr = [1,2,3,4,5]; 
var arr1 = arr.slice();
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
//slice(1) 表示从下标为1的位置开始截取到最后一个包括最后一个
var arr1 = arr.slice(1);
console.log(arr1);//[ 2, 3, 4, 5 ]
//slice(1,3) 表示截取下标1到3的数据,不包括arr[3]
var arr1 = arr.slice(1,3);
console.log(arr1);//[ 2, 3 ]
//slice(-1,-3) 
var arr1 = arr.slice(-1,-3);
console.log(arr1);//[]
//slice(-3,-1) 表示从倒数第三个数开始截取到倒数第一个数不包括最后一个数
var arr1 = arr.slice(-3,-1);
console.log(arr1);//[ 3, 4 ]
//slice(-3) 表示从倒数第三个开始截取到最后一个包括最后一个
var arr1 = arr.slice(-3);
console.log(arr1);//[ 3, 4, 5 ]

(3)Array.prototype.splice()改变原数组

作用:用于添加或删除数组中的元素

语法:array.splice(index,howmany,item1,.....)

参数:index:规定从何处添加/删除元素,必须填且一定要是数字

          howmany:规定删除元素的数量。 如果未规定此参数,则删除从 index 开始到数组结尾的所有元素。

          item:要添加到数组的元素,数据类型和数量不限

         返回值:返回的是含有被删除的元素的数组

var arr = [2,4,6,8];
//删除从下标为2开始到数组结尾的元素
var res = arr.splice(2)
console.log(res);//[ 6, 8 ]
console.log(arr);//[ 2, 4 ]

var arr = [2,4,6,8];
//在数组第三个位置添加元素
var res = arr.splice(2,0,'zhangsan',12)
console.log(res);//[]
console.log(arr);//[ 2, 4, 'zhangsan', 12, 6, 8 ]

var arr = [2,4,6,8];
// 删除数组第2个元素,并在数组第2个位置添加新元素
var res1 = arr.splice(1,1,'zhangsan',12);
console.log(res1);//[ 4 ]
console.log(arr);//[ 2, 'zhangsan', 12, 6, 8 ]

4、位置方法

(1)Array.prototype.indexOf()

作用:用于返回数组中某个指定的元素位置 。

语法:array.indexOf(item,start)

参数:item:要查找的元素,必填             start:在数组中开始检索位置。可不填,表示会从数组下标为0的位置开始检索到结尾

返回值:数组在元素中的位置,没有搜索到返回-1          不改变数组长度

var arr = [1,2,3,4,5,2]; 
var res = arr.indexOf(2);
console.log(res);//1 表示2位于数组中第2个位置,且该方法在检索到结果后就会停止检索

(2) Array.prototype.lastIndexOf

作用:返回一个指定的元素在数组中最后出现的位置。改方法要求从数组的后面向前查找。

语法:array.lastIndexOf(item,start)

参数:item:要查找的元素,必填             start:开始检索的位置。可不填,表示会从数组最后一位开始向前检索

返回值:从后往前检索,返回第一次检索到目标元素的下标,没有找到则返回-1

var arr = [1,2,3,4,5,2]; 
//检索为2的元素,从数组最后一位开始检索
var res = arr.lastIndexOf(2);
console.log(res);//5 表示第一次检索到2的位置在数组的第6位

5、迭代方法(不修改原数组)

(1)Array.prototype.every()

作用:用于检测数组所有元素是否都符合指定条件(条件通过函数提供)

语法:array.every(function(currentValue(当前元素值),index(当前元素下标),arr(检测的数组)), thisValue)

参数:function:必填,数组中每个元素都会执行这个函数   

          thisValue:可选,用作this的值,如果省略,this的值为undefined

返回值:true(所有元素都满足条件)/false(至少有一个元素不满足)

var arr = [2,4,6,8]
var res = arr.every(function(item){
    return item > 10;
})
console.log(res,arr);//false [ 2, 4, 6, 8 ]

 (1.1)重构every()方法

var arr = [2,4,6,8]
Array.prototype.myEvery = function(fun,obj){
    for(let i=0;i<this.length;i++){
        // 只要一个不满足条件 返回false
        if(!(obj?fun.call(obj,this[i]):fun(this[i]))){
            return false
        }
    }
    return true
}
var res = arr.myEvery(function(item,index,arr){
    return item>10
},{name:'zhangsan'})
console.log(res,arr);//false [ 2, 4, 6, 8 ]

(2) Array.prototype.some()

作用:检测数组中的元素是否满足指定条件(条件由函数提供)。

语法:array.some(function(currentValue(当前元素值),index(当前元素下标),arr(检测的数组)), thisValue)

参数:function:必填,数组中只要有一个元素满足就返回true并停止对剩余元素的检测  

          thisValue:可选,用作this的值,如果省略,this的值为undefined

返回值:false(所有元素都不满足条件)/true(至少有一个元素满足)

var arr = [2,4,6,8]
var res = arr.some(function(item){
    return item > 5;
})
console.log(res,arr);//true [ 2, 4, 6, 8 ]

(2.1) 重构some()方法

var arr = [2,4,6,8]
Array.prototype.mySome = function(fun,obj){
    for(let i = 0; i<this.length;i++){
        if(obj?fun.call(obj,this[i]):fun(this[i])){
            return true
        }
    }
    return false
}
var res = arr.mySome(function(item,index,arr){
    return item > 5
},{name:'zhangsan'})
console.log(res,arr);//true [ 2,4,6,8 ]

 (3)Array.prototype.filter()

作用:创建一个新的数组,新数组中的元素是符合条件的所有元素。

语法:array.fliter(function(currentValue(当前元素值),index(当前元素下标),arr(检测的数组)), thisValue)

参数:function:必填,数组中每个元素都会执行这个函数

          thisValue:可选,用作this的值,如果省略,this的值为undefined

返回值:返回一个新数组,如没有元素符合条件将返回空数组

var arr = [2,4,6,8]
var res = arr.filter(function(item){
    return item > 5;
})
console.log(res,arr);//[ 6, 8 ] [ 2, 4, 6, 8 ]

(3.1)重构filter()方法

var arr = [2,4,6,8]
Array.prototype.myFilter = function(fun,obj){
    let newArr = []
    for(var i = 0; i<this.length;i++){
        if(obj?fun.call(obj,this[i]):fun(this[i])){
            newArr.push(this[i])
        }
    }
    return newArr
}
var res = arr.myFilter(function(item,index,arr){
    return item>5
},{name:'zhangsan'})
console.log(res,arr);//[ 6, 8 ] [ 2, 4, 6, 8 ]

(4)Array.prototype.map()

作用:返回一个新的数组,新数组中的元素为原数组元素调用函数处理后的值。

语法:array.map(function(currentValue(当前元素值),index(当前元素下标),arr(检测的数组)), thisValue)

参数:function:必填,数组中每个元素都会执行这个函数

          thisValue:可选,用作this的值,如果省略,this的值为undefined

返回值:返回一个新数组,如没有元素符合条件将返回空数组

var arr = [2,4,6,8]
var res = arr.map(function(item){
    return item + 1;
})
console.log(res,arr);//[ 3, 5, 7, 9 ] [ 2, 4, 6, 8 ]

(4.1)重构map()方法

var arr = [2,4,6,8]
Array.prototype.myMap = function(fun,obj){
    let newArr = [];
    for(var i = 0;i < this.length; i++){
        newArr.push(obj?fun.call(obj,this[i]):fun(this[i]))   
    }
    return newArr
}
var res = arr.myMap(function(item,index,arr){
    return item + 1
},{name:'zhangsan'})
console.log(res,arr);//[ 3, 5, 7, 9 ] [ 2, 4, 6, 8 ]

(5)Array.prototype.forEach()

作用:用于调用数组的每个元素,并将元素传递给回调函数。

语法:array.forEach(function(currentValue(当前元素值),index(当前元素下标),arr(检测的数组)), thisValue)

参数:function:必填,数组中每个元素都会调用这个函数

          thisValue:可选,用作this的值,如果省略,this的值为undefined

返回值:undefined 无返回值

var arr = [2,4,6,8]
var res = arr.forEach(function(item){
    console.log(item);
})
console.log(res,arr);//undefined [ 2, 4, 6, 8 ]

(5.1)重构forEach()方法

var arr = [2,4,6,8]
Array.prototype.myForEach = function(fun,obj){
    for(let i = 0;i<arr.length;i++){
        obj?fun.call(obj,this[i]):fun(this[i])
    }
}
var res = arr.myForEach(function(item,index,arr){
    console.log(this);
    console.log(item);
},{name:'zhangsan'})
console.log(res,arr);
//{ name: 'zhangsan' }
//2
//{ name: 'zhangsan' }
//4
//{ name: 'zhangsan' }
//6
//{ name: 'zhangsan' }
//8
//undefined [ 2, 4, 6, 8 ]

注意:迭代方法均不会对空数组进行检测

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值