javaScript Array 对象

coder_大太阳
198 阅读8分钟

数组属性

  • constructor:返回创建数据对象的原型函数
  • length:设置或返回数组中元素的个数(也可以用来显示数组中的个数/置空数组)
  • prototype:允许向数组对象添加属性或方法
    • 实例
Array.prototype.toHump = function () {//在数组的原型上定义一个驼峰方法  
        this.forEach((item, index) => {
            if (item.includes('-')) {
                this[index] = item.replace(/-/g, function (match, p1, p2, p3, offset, string) {
                    return item[p1 + 1].toLocaleUpperCase();
                })
            }
        })
    }
let arr = ['header', 'header-item', 'header-item1-item2'];
arr.toHump();
console.log(arr)//["header", "headerIitem", "headerIitem1Iitem2"]

Array对象方法

  • forEach()
    • 应用频率:极高
    • 参数:array.forEach(function(currentValue,index,arr), thisValue)
    • 返回值:undefined
    • 注意点:forEach只能通过throw Error终止,不过一般没人这么做.换句话说forEach无法终止return/break都不好使.
let people=[
    {name:'张三',age:20},
    {name:'张三',age:19},
    {name:'张三',age:18},
    {name:'张三',age:17},
    {name:'张三',age:16},
    {name:'张三',age:15}
]
people.forEach((item,index)=>{//利用foreach修改people数组
    people[index].age=item.age+1
});
console.log(people)//[{name: "张三", age: 21},{name: "张三", age: 20},{name: "张三", age: 19},{name: "张三", age: 18},{name: "张三", age: 17},{name: "张三", age: 16}]
  • map():重构数组
    • 使用频率:极高
    • 参数:array.map(function(currentValue,index,arr), thisValue)
    • 返回值:array
    • 特点:不会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let arr=people.map((item,index)=>{
        return{
            name:item.name+index,
            age:item.age+index
        }
    })
    console.log(arr)//[{name: "张三0", age: 20},{name: "张三1", age: 20},{name: "张三2", age: 20},{name: "张三3", age: 20},{name: "张三4", age: 20},{name: "张三5", age: 20}]
  • unshift():向数组的开头添加一个或更多元素，并返回新的长度
    • 使用频率:极高
    • 参数:需要添加的item
    • 返回值:array.length
    • 特点:会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let obj=people.unshift({
        name: "王五", age: 30
    })
    console.log(obj)//7
  • shift():删除数组中第一个元素
    • 返回值:数组中被删除的元素
    • 使用频率:极高
    • 特点:会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let obj=people.shift()
    console.log(obj)//{name: "张三", age: 20}
  • push():向数组的末尾添加一个或更多元素，并返回新的长度
    • 使用频率:极高
    • 参数:需要添加的item
    • 返回值:array.length
    • 特点:会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let obj=people.push({
        name:'李四',age:26
    })
    console.log(obj)//7
  • pop():删除数组的最后一个元素并返回删除的元素
    • 使用频率:极高
    • 返回值:数组中被删除的元素
    • 特点:会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let obj=people.pop()
    console.log(obj)//{name: "张三", age: 15}
  • includes():判断一个数组是否包含一个指定的值
    • 应用频率:极高
    • 参数:includes(item:必填,findStartIndex:默认0)
    • 返回值:`Boolean
let arr=['张三','李四','王五']
let bool=arr.includes('张三');
console.log(bool)//true
  • indexOf():搜索数组中的元素，并返回它所在的位置
    • 应用频率:高
    • 参数:array.indexOf(item:必填,start:默认0)
    • 返回值:index
let arr=['张三','李四','王五']
let index=arr.indexOf('王五');
console.log(index)//2
  • lastIndexOf():从后往前找
    • 应用频率:高
    • 参数:array.lastIndexOf(item:必填,start:默认array.length-1)
    • 返回值:index
let fruits = ["Apple","Banana", "Orange", "Apple", "Mango"];
let index=fruits.lastIndexOf("Apple");
console.log(index)//3
  • Array.isArray():判断是不是数组
    • 应用频率:高
    • 参数:Array.isArray(array)
    • 返回值:Boolean
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let bool = Array.isArray(fruits);
console.log(bool)//true
  • splice():从数组中添加或删除元素
    • 使用频率:高
    • 参数:array.splice(index:删除开始位置,howmany:删除个数,item1,.....,itemX)
    • 返回值:截取的数组片段
    • 特点:会修改数组
 let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    let citrus = fruits.splice(1,1,"total");
    console.log(citrus)//["Orange"]
    console.log(fruits)//["Banana", "total", "Lemon", "Apple", "Mango"]
  • slice():选取数组的的一部分，并返回一个新数组
    • 返回值:截取的数组片段
    • 参数:array.slice(start:默认值0, end:array.length-1)
    • 使用频率:高
    • 技巧:可以复制数组
    • 特点:不会修改数组
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1,3);
console.log(citrus)//["Orange", "Lemon"]
  • join():将数组转成字符串
    • 应用频率:高
    • 参数:array.join(separator:默认','分割)
    • 返回值:string
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let str=fruits.join('');
console.log(str)//BananaOrangeAppleMango
  • filter():检测数值元素，并返回符合条件所有元素的数组
    • 应用频率:高
    • 参数:array.filter(function(currentValue,index,arr), thisValue)
    • 返回值:array
    • 特点:不会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let arr=people.filter(item=>{
        return item.age>=18
    })
    console.log(arr)//[{name: "张三", age: 20},{name: "张三", age: 19},{name: "张三", age: 18}]
  • sort():数组排序
    • 返回值:array
    • 应用频率:高
    • 参数:array.sort(sortfunction)
    • 特点:不会修改原数组
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
   let arr=people.sort(function(a,b){
        return a.age-b.age
   })
   console.log(arr)//[ {name: "张三", age: 15},{name: "张三", age: 16},{name: "张三", age: 17},{name: "张三", age: 18},{name: "张三", age: 19},{name: "张三", age: 20}]
  • reduce():将数组元素计算为一个值（从左到右）
    • 使用频率:高
    • 参数:array.reduce(function(total, currentValue, currentIndex, arr), initialValue:传递给函数的初始值)
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let count = people.reduce(function (total, item) {
        return total + item.age
    },0)
    console.log(count) //105
  • concat():连接两个或者更多的数组,并返回结果
    • 语法:array1.concat(array2,array3,...,arrayX)
    • 参数:array2, array3, ..., arrayX,必填属性,可以是具体的值,也可以是数组
    • 应用频率:中
一:连接数组
let hege = ["Cecilie", "Lone"];
let stale = ["Emil", "Tobias", "Linus"];
let kai = ["Robin"];
let newArr=hege.concat(stale,kai);
console.log(newArr)//["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]

二:连接值
let hege = ["Cecilie", "Lone"];
let newArr=hege.concat('stale','kai');
console.log(newArr)//["Cecilie", "Lone", "stale", "kai"]
  • some():检测数组元素中是否有元素符合指定条件
    • 返回值:Boolean
    • 参数:array.some(function(currentValue,index,arr),thisValue)
    • 应用频率:中
  let books=[
        {id:1,name:'西游记',price:'$186'},
        {id:2,name:'红楼梦',price:'$286'},
        {id:3,name:'水浒传',price:'$386'},
        {id:4,name:'三国演义',price:'$86'},
        {id:5,name:'中华字典',price:'$586'},
        {id:6,name:'钢铁是怎么练成的',price:'$686'}
    ];

    let newBook={id:1,name:'成语字典',price:'$999'}

    let obj=books.some(item=>{
        if(item.id==newBook.id){
            item.name=newBook.name;
            item.price=newBook.price;
            return true
        }
    });
    if(!obj){
        books.push(newBook)
    }
    console.log(books)//[{id: 1, name: "成语字典", price: "$999"},{id: 2, name: "红楼梦", price: "$286"},{id: 3, name: "水浒传", price: "$386"},{id: 4, name: "三国演义", price: "$86"},{id: 5, name: "中华字典", price: "$586"},{id: 6, name: "钢铁是怎么练成的", price: "$686"}]
  • find():返回符合传入测试（函数）条件的数组元素
    • 应用频率:中
    • 参数:array.find(function(currentValue, index, arr),thisValue)
    • 返回值array.item
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]

    let obj=people.find(item=>{
        return item.age>19
    })
    console.log(obj)//{name: "张三", age: 20}
  • findIndex():返回符合传入测试（函数）条件的数组元素
    • 应用频率:中
    • 参数:array.findIndex(function(currentValue, index, arr),thisValue)
    • 返回值array.index
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]

    let obj=people.findIndex(item=>{
        return item.age<16
    })
    console.log(obj)//5
  • reverse():翻转数组
    • 使用频率:低
    • 返回值:Array
 let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
   people.reverse();
   console.log(people)//[{name: "张三", age: 15},{name: "张三", age: 16},{name: "张三", age: 17},{name: "张三", age: 18},{name: "张三", age: 19},{name: "张三", age: 20}]
  • from():通过给定的对象中创建一个数组
    • 应用频率:低
    • 返回值:array
    • 重点应用:数组去重
let arr=[1,2,3,1,4,45,5,8,9,8,7,5,5,55]
let set=new Set(arr)
console.log(Array.from(set))//[1, 2, 3, 4, 45, 5, 8, 9, 7, 55]
  • every():检测数值元素的每个元素是否都符合条件
    • 返回值:Boolean
    • 应用频率:极低
    • 参数:array.every(function(currentValue, index, arr),thisValue)
let people=[
        {name:'张三',age:20},
        {name:'张三',age:19},
        {name:'张三',age:18},
        {name:'张三',age:17},
        {name:'张三',age:16},
        {name:'张三',age:15}
    ]
    let bool=people.every(item=>{
        return item.age>=18
    })
    if(!bool){
        console.log('有未成年人')
    }
  • fill():使用一个固定值来填充数组
    • 应用频率:极低
    • 语法:array.fill(value, start, end)
    • 参数:value必填 start默认0 end默认array.length
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob",1,2);
console.log(fruits)//["Banana", "Runoob", "Apple", "Mango"]
  • entries():返回数组的可迭代对象
    • 应用频率:极低
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let obj=[...fruits.entries()];
console.log(obj[0])//[0, "Banana"]
console.log(obj[1])//[1, "Orange"]
console.log(obj[2])//[2, "Apple"]
console.log(obj[3])//[3, "Mango"]
  • keys():返回数组的可迭代对象
    • 应用频率:极低
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let str=fruits.keys();
console.log(Array.from(str))//[0, 1, 2, 3]
  • copyWithin():从数组的指定位置拷贝元素到数组的另一个指定位置中
    • 语法:array.copyWithin(target, start, end)
    • 参数:target必填 start默认0 end默认Array.length
    • 应用频率:极低
一个参数:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(1)==fruits.copyWithin(1,0,4)
console.log(fruits)//["Banana", "Banana", "Orange", "Apple"]

解释说明: 

两个参数:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(1,2)==fruits.copyWithin(1,2,4)
console.log(fruits)//["Banana", "Apple", "Mango", "Mango"]

解释说明 

三个参数:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(1,2,3);
console.log(fruits)//["Banana", "Apple", "Apple", "Mango"]

avatar
文章
阅读
粉丝