JavaScript —— 数组（Array）对象-阿里云开发者社区

创建一个数组

常规方式：

  var myCars = new Array()
    myCars[0] = 'Saab'
    myCars[1] = 'Volvo'
    console.log(myCars[1]) // Volvo

简洁方式：

  var myCars = new Array('Saab','Volvo','BMW')
    console.log(myCars[1]) // Volvo

字面表达式：

  var myCars = ['Saab','Volvo','BMW']
    console.log(myCars[1]) // Volvo

数组属性

constructor：返回创建数组对象的原型函数。

  var myCars = ['Saab','Volvo','BMW']
    console.log(myCars.constructor) // ƒ Array() { [native code] }

数组的 constructor 属性返回 function Array() { [native code] }

数字 constructor 属性返回 function Number() { [native code] }

字符串 constructor 属性返回 function String() { [native code] }

length：返回数组的数目。

  var myCars = ['Saab','Volvo','BMW']
    console.log(myCars.length) // 3

prototype：允许向数组对象添加属性或方法。

  Array.prototype.myUcase = function() {
        for(i = 0; i < this.length; i++){
            this[i] = this[i].toUpperCase()
        }
    }
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits) //['Banana', 'Orange', 'Apple', 'Mango']
    fruits.myUcase()
    console.log(fruits) //['BANANA', 'ORANGE', 'APPLE', 'MANGO']

数组对象方法

concat()：连接两个或多个数组。不会改变现有的数组，仅仅返回被连接数组的一个副本。

  let mike = ['mike','12']
    let john = ['john','20']
    let hob = ['hob','16']
    let total = mike.concat(john, hob)
    console.log(total) //['mike', '12', 'john', '20', 'hob', '16']

join()：把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。不改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let energy = classic.join(' & ')
    console.log(energy) // 唐三藏 & 孙悟空 & 猪八戒 & 沙和尚

shift()：删除数组的第一个元素并返回删除的元素。该方法改变数组的长度。改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let remove = classic.shift()
    console.log(remove) // 唐三藏

pop()：删除数组的最后一个元素并返回删除的元素。该方法改变数组的长度。改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let remove = classic.pop()
    console.log(remove) // 沙和尚
    console.log(classic) //['唐三藏', '孙悟空', '猪八戒']

unshift()：向数组的开头添加一个或多个元素，并返回新的长度。该方法改变数组的长度。改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let preAdd = classic.unshift('白龙马','金箍棒')
    console.log(preAdd) //6
    console.log(classic) //['白龙马', '金箍棒', '唐三藏', '孙悟空', '猪八戒', '沙和尚']

push()：向数组的末尾添加一个或多个元素，并返回新的长度。该方法改变数组的长度。改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let add = classic.push('白龙马')
    console.log(add) //5
    console.log(classic) //['唐三藏', '孙悟空', '猪八戒', '沙和尚', '白龙马']

splice()：添加或删除数组中的元素。返回被添加或删除元素的数组。该方法会改变原始数组。改变原始字符串。

语法：array.splice(index,howmany,item1,.....,itemX)

index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。

howmany：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。

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

item1, …, itemX：可选。要添加到数组的新元素

数组中添加新元素：

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let add = classic.splice(2,0,'白龙马')
    console.log(add) // []
    console.log(classic) // ['唐三藏', '孙悟空', '白龙马', '猪八戒', '沙和尚']

移出数组的第三个元素，并在数组第三个位置添加新元素：

    let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let change = classic.splice(2,1,'白龙马')
    console.log(change) // ['猪八戒']
    console.log(classic) // ['唐三藏', '孙悟空', '白龙马', '沙和尚']

从第三个位置开始删除数组后的两个元素：

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let remove = classic.splice(2,2)
    console.log(remove) // ['猪八戒', '沙和尚']
    console.log(classic) //['唐三藏', '孙悟空']

slice()：从已有的数组中返回选定的元素。以新的字符串返回被提取的部分。该方法不改变原始数组。

在数组中读取元素：

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let newClassic = classic.slice(1,3)
    console.log(newClassic) //['孙悟空', '猪八戒']
    console.log(classic) //['唐三藏','孙悟空','猪八戒','沙和尚']

使用负值从数组中读取元素：

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let newClassic = classic.slice(-3,-1)
    // let newClassic = classic.slice(-3) //['孙悟空', '猪八戒', '沙和尚']
    console.log(newClassic) //['孙悟空', '猪八戒']

slice(-3,-1): 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素。

slice(-3): 截取最后三个元素。

截取字符串：

  let str = 'www.baidu.com!'
    console.log(str.slice(4)) //baidu.com!
    console.log(str.slice(4,9)) //baidu

slice(4): 从第 5 个字符开始截取到末尾。

slice(4,10): 从第5 个字符开始截取到第 9 个字符。

reverse()：颠倒数组中元素的顺序。返回颠倒顺序后的数组。该方法改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let reverse = classic.reverse()
    console.log(reverse) //['沙和尚', '猪八戒', '孙悟空', '唐三藏']
    console.log(classic) //['沙和尚', '猪八戒', '孙悟空', '唐三藏']

toString()：转换数组为字符串。并返回用逗号隔开的结果。该方法不改变原始数组。

  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚']
    let str = classic.toString()
    console.log(str) //唐三藏,孙悟空,猪八戒,沙和尚
    console.log(classic) //['唐三藏', '孙悟空', '猪八戒', '沙和尚']

sort()：对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。该方法会改变原始数组。

数组排序（字母和升序）：

  let fruits = ["Banana", "Orange", "Apple", "Mango"]
  let result = fruits.sort()
    console.log(result) //['Apple', 'Banana', 'Mango', 'Orange']
    console.log(fruits) //['Apple', 'Banana', 'Mango', 'Orange']

数字排序（字母和降序）：

    let fruits = ["Banana", "Orange", "Apple", "Mango"]
    fruits.sort() //['Apple', 'Banana', 'Mango', 'Orange']
    console.log(fruits.reverse()) //['Orange', 'Mango', 'Banana', 'Apple']

数字排序（数字和升序）：

  let points = [40,20,1,5,10,6]
    let result = points.sort(function(a,b){return a-b})
    console.log(result) //[1, 5, 6, 10, 20, 40]
    console.log(points) //[1, 5, 6, 10, 20, 40]

数字降序（数字和降序）：

  let points = [40,20,1,5,10,6]
    let result = points.sort(function(a,b){return b-a})
    console.log(result) //[40, 20, 10, 6, 5, 1]
    console.log(points) //[40, 20, 10, 6, 5, 1]

filter()：该方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。该方法不改变原始数组。

  let ages = [20, 15, 35, 12]
    function checkAdult(age){
        return age >= 18
    }
    let pass = ages.filter(checkAdult)
    console.log(pass) //[20, 35]
    console.log(ages) //[20, 15, 35, 12]

map()：该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map()方法按照原始数组元素顺序依次处理元素。该方法不改变原始数组。

返回一个数组，数组中元素为原始数组的平方根：

  let numbers = [4, 9, 16, 25]
    function Fn(){
        return numbers.map(Math.sqrt)
    }
    console.log(Fn()) //[2, 3, 4, 5]
    console.log(nums) //[4, 9, 16, 25]

forEach()：用于调用数组的每个元素，并将元素传递给回调函数。 forEach() 对于空数组是不会执行回调函数的。该方法不改变原始数组。
列出数组的每个元素：

  let numbers = [4, 9, 16, 25]
    function Fn(item, index){
        let result = 'index[' + index + ']:' + item
        console.log(result)
    }
    numbers.forEach(Fn)
  /* 输出:
  index[0]: 4
  index[1]: 9
  index[2]: 16
  index[3]: 25 
  */

使用 return 语句实现 continue 效果：

  let arr = [1,2,3,4,5]
    arr.forEach(function (item){
        if(item === 3){
            return
        }
        console.log(item) // 1 2 4 5
    })

使用 return 语句实现 break 效果：

  let arr = [1,2,3,4,5]
    arr.every(function (item){
        console.log(item) // 1 2 3
        return item !==3
    })

keys()：用于从数组创建一个包含数组键的可迭代对象。如果对象是数组返回 true，否则返回 false。该方法不改变原始数组。

  let fruits = ["Banana", "Orange", "Apple"];
    let result = fruits.keys()
    console.log(result.next().value) // 0
    console.log(result.next().value) // 1
    console.log(result.next().value) // 2
    console.log(result.next().value) // undefined'
    console.log(fruits) //["Banana", "Orange", "Apple"]

reduce()：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。该方法不改变原始数组。

  let numbers = [1,2,3,4]
    function getSum(total,num){
        return total + num
    }
    console.log(numbers.reduce(getSum)) //10

copyWithin()：用于从数组的指定位置拷贝元素到数组的另一个指定位置中。该方法改变原数组。

语法： array.copyWithin(target, start, end) //目标元素复制起始位置元素复制终点位置

  let a = ['张三','李四','王五','赵六']
    let c = a.copyWithin(2,0,2)
    console.log(a) // ['张三', '李四', '张三', '李四']
    console.log(c) // ['张三', '李四', '张三', '李四']

entries()：返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key，数组元素作为 value。该方法不会改变原数组。

语法：array.entries() 没有参数

  let a = ['张三','李四','王五','赵六']
    let c = a.entries()
    console.log(a)
    console.log(c.next().value)

19. fill()：用于将一个固定值替换数组的元素。该方法改变原始数组。

语法：array.fill(value, start, end)

  let nums = [1,2,3,4]
    let result = nums.fill(8)
    console.log(nums) //[8, 8, 8, 8]
    console.log(result) //[8, 8, 8, 8]

  let nums = [1,2,3,4]
    let result = nums.fill('替换内容',2,3)
    console.log(nums) //[1, 2, '替换内容', 4]
    console.log(result) //[1, 2, '替换内容', 4]

find()：返回通过测试（函数内判断）的数组的第一个元素的值。该方法不改变原始数组。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

  let nums = [1,3,5,7]
    function check(num){
        return num > 3
    }
    let result = nums.find(check)
    console.log(result) //5
    console.log(nums) //[1, 3, 5, 7]

findIndex()：返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

  let nums = [1,3,5,7]
    function check(num){
        return num > 3
    }
    let result = nums.findIndex(check)
    console.log(result) //2
    console.log(nums) //[1, 3, 5, 7]

from()：用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

  //数组去重
  let arr = Array.from(new Set([1,2,1,2]))
    console.log(arr) //[1,2]

  //返回集合中包含的对象数组
  let setObj = new Set(["a","b","c"])
    let objArr = Array.from(setObj)
    console.log(objArr[1] == 'b') //true

  //使用箭头语法和映射函数更改元素的值
  let arr = Array.from([1,2,3], x => x * 10)
    console.log(arr[1]) //20

lastIndexOf()：返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。该方法不改变原始数组。

语法：array.lastIndexOf(item,start)

item：必需，需要检索的字符串

start：可选，开始检索的位置。取值 0 ~ length-1。省略该参数，将从字符串最后一个字符处开始检索。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。

如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

    let classic = ['唐三藏','孙悟空','猪八戒','沙和尚','孙悟空','猪八戒','沙和尚']
    let result = classic.lastIndexOf("猪八戒")
    console.log(result) //5
    console.log(classic) //['唐三藏', '孙悟空', '猪八戒', '沙和尚', '孙悟空', '猪八戒', '沙和尚']

  //从数组的第四个位置开始查找
  let classic = ['唐三藏','孙悟空','猪八戒','沙和尚','孙悟空','猪八戒','沙和尚']
    let result = classic.lastIndexOf("猪八戒",4)
    console.log(result) //2
    console.log(classic) //['唐三藏', '孙悟空', '猪八戒', '沙和尚', '孙悟空', '猪八戒', '沙和尚']

不积跬步无以至千里不积小流无以成江海

JavaScript —— 数组（Array）对象

创建一个数组

数组属性

数组对象方法

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript —— 数组（Array） 对象

创建一个数组

数组属性

数组对象方法

热门文章

最新文章

相关课程

相关电子书

相关实验场景

JavaScript —— 数组（Array）对象