Javascript对象之【Array对象】
数组用于在变量中存储多个值。
本篇文章作为Array对象的温习笔记，包含3个数组属性和30个数组方法。
文章示例中MZPP为 民族品牌 拼音首写字母大写。
一、数组属性
constructor
返回数组对象的原型函数。
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.constructor) // ƒ Array() { [native code] }
length
设置或返回数组元素的个数。
// 设置数组长度
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.length = 4
console.log(MZPPS.length) // 4
console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", empty]
console.log(MZPPS[3]) // undefined
// 返回数组长度
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.length) // 3
prototype
向数组对象添加属性或者方法。
// 添加属性
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
Array.prototype.love = 'forever'
console.log(MZPPS) // ['HUAWEI', 'BYD', 'MAOTAI']
console.log(MZPPS.love) // forever
// 添加方法
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
Array.prototype.ILoveMZPPS = function() {
for (let i = 0, len = this.length; i < len; i++) {
this[i] = 'I love ' + this[i]
}
}
MZPPS.ILoveMZPPS()
console.log(MZPPS) // ["I love I love I love HUAWEI", "I love I love BYD", "I love I love MAOTAI"]
二、数组方法
方法按照字母先后顺序列出。
-
concat()
连接两个或更多的数组，并返回结果。- 语法
array1.concat(array2, array3, ...)-
参数
参数为必填，可以是数组对象，也可以是具体的值。 -
返回值
返回一个新的数组。 -
举例
// 传入数组对象 const MZPPS1 = ['HUAWEI', 'BYD', 'MAOTAI'] const MZPPS2 = ['CHANGAN'] const MZPPS = MZPPS1.concat(MZPPS2) console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", "CHANGAN"] // 传入具体的值 const MZPPS1 = ['HUAWEI', 'BYD', 'MAOTAI'] const MZPPS = MZPPS1.concat('CHANGAN') console.log(MZPPS) // ["HUAWEI", "BYD", "MAOTAI", "CHANGAN"] -
copyWithin()（ES6新增）
从数组的指定位置拷贝元素到数组的另一个指定位置中。- 语法
array.copyWithin(targetIndex, startIndex, endIndex)- 参数
targetIndex: 必需，复制到制定位置索引startIndex：可选，复制元素的开始位置索引，默认0endIndex：可选，复制元素的结束位置索引，默认a r ray.length。负值表示从后往前。
- 返回值
被修改后的原数组。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.copyWithin(1) // ["HUAWEI", "HUAWEI", "BYD"] MZPPS.copyWithin(1,0) // ["HUAWEI", "HUAWEI", "BYD"] MZPPS.copyWithin(1,0,1) // ["HUAWEI", "HUAWEI", "BYD"] MZPPS.copyWithin(1,0,2) // ["HUAWEI", "HUAWEI", "BYD"] MZPPS.copyWithin(2,0,1) // ["HUAWEI", "BYD", "HUAWEI"] MZPPS.copyWithin(1,0,-1) // ["HUAWEI", "HUAWEI", "BYD"] -
entries()（ES6新增）
返回数组的可迭代对象。- 语法
array.entries()- 参数
无。 - 返回值
数组迭代对象。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] // 1.解构遍历 for(let [index, value] of MZPPS.entries()) { console.log(index, value) } // 0 "HUAWEI" // 1 "BYD" // 2 "MAOTAI" // 2.使用entries返回的迭代器遍历 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const iterator = MZPPS.entries() let isDone = false do{ const nextI = iterator.next() isDone = nextI.done console.log(nextI.value) } while (!isDone) // [0, "HUAWEI"] // [1, "BYD"] // [2, "MAOTAI"] -
every()（ES6新增）
检测数值元素的每个元素是否都符合条件。- 语法
array.every(function(currentItem, index, arr), thisValue)- 参数
function: 必须，数组中每个元素都会执行该检测函数
a.currentItem: 必须，当前元素
b.index: 可选，当前元素索引
c.arr: 可选，当前元素属于的数组对象thisValue: 可选，用作检测函数this的值
- 返回值
- 举例
// 不传第二个参数 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const isLen_3 = MZPPS.every(function(currentItem, index, arr){ // 由于HUAWEI的length==6，所以第一次就退出循环，返回false console.log(currentItem) // HUAWEI console.log(index) // 0 console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"] console.log(this) // window对象 return currentItem.length == 3 }) // isLen_3 == false // 传第二个参数 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const isLen_3 = MZPPS.every(function(currentItem, index, arr){ // 由于HUAWEI的length==6，所以第一次就退出循环，返回false console.log(currentItem) // HUAWEI console.log(index) // 0 console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"] console.log(this) // ["HUAWEI", "BYD", "MAOTAI"] return currentItem.length == 3 }, MZPPS) // isLen_3 == false -
fill()
使用一个固定值来填充数组。- 语法
array.fill(value, start, end)- 参数
value：必须，填充的固定值start：可选，开始填充位置，默认0end：可选，结束填充位置(开区间)，默认array.length
- 返回值
填充后的原数组。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.fill('CHANGAN') // ["CHANGAN", "CHANGAN", "CHANGAN"] MZPPS.fill('CHANGAN', 1) // ["HUAWEI", "CHANGAN", "CHANGAN"] MZPPS.fill('CHANGAN', 1, 1) // ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.fill('CHANGAN', 1, 2) // ['HUAWEI', 'CHANGAN', 'MAOTAI'] MZPPS.fill('CHANGAN', 1, 3) // ['HUAWEI', 'CHANGAN', 'CHANGAN'] -
filter()（ES6新增）
检测数值元素，并返回符合条件所有元素的数组。- 语法
array.filter(function(currentValue,index,arr), thisValue)- 参数
function：必须，每个元素都执行该过滤函数
a.currentValue: 必须，当前元素
b.index: 可选，当前元素索引
c.arr：可选，当前元素所在数组thisValue: 可选，用作过滤函数this的值
- 返回值
满足过滤函数的新数组。 - 举例
// 不传第二个参数 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const newArr = MZPPS.filter(function(currentItem, index, arr){ console.log(currentItem) // HUAWEI BYD MAOTAI console.log(index) // 0 1 2 console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"] console.log(this) // window对象 return currentItem.length == 3 // 只有BYD的length==3 }) console.log(newArr) // ['BYD'] // 传第二个参数 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const newArr = MZPPS.filter(function(currentItem, index, arr){ console.log(currentItem) // HUAWEI BYD MAOTAI console.log(index) // 0 1 2 console.log(arr) // ["HUAWEI", "BYD", "MAOTAI"] console.log(this) // ['HUAWEI', 'BYD', 'MAOTAI'] return currentItem.length == 3 // 只有BYD的length==3 }, MZPPS) console.log(newArr) // ['BYD'] -
find()
返回符合传入测试（函数）条件的数组元素。- 语法
array.find(function(currentValue, index, arr),thisValue)- 参数
function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
a.currentValue: 必须，当前元素
b.index：可选，当前元素索引
c.arr: 可选，当前元素所在数组thisValue: 可选，用作判断函数的this值
- 返回值
符合判断函数条件的一个元素。 - 举例
const MZPPS = ['HUAWEI', 'BYD','BMW', 'MAOTAI'] const findItem = MZPPS.find(function(currentValue, index, arr){ return currentValue.length == 3 }) console.log(findItem) // BYD -
findIndex()
返回符合传入测试（函数）条件的数组元素索引。- 语法
array.findIndex(function(currentValue, index, arr), thisValue)- 参数
function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
a.currentValue: 必须，当前元素
b.index：可选，当前元素索引
c.arr: 可选，当前元素所在数组thisValue: 可选，用作判断函数的this值
- 返回值
符合判断函数条件的一个元素的索引。 - 举例
const MZPPS = ['HUAWEI', 'BYD','BMW', 'MAOTAI'] const findIndex = MZPPS.findIndex(function(currentValue, index, arr){ return currentValue.length == 3 }) console.log(findIndex) // 1 -
forEach()（ES6新增）
数组每个元素都执行一次回调函数，空数组不执行。- 语法
array.forEach(function(currentValue, index, arr), thisValue)- 参数
function: 必须，每个元素都需要执行的判断函数（返回符合条件的元素后，其他元素不再执行）
a.currentValue: 必须，当前元素
b.index：可选，当前元素索引
c.arr: 可选，当前元素所在数组thisValue: 可选，用作判断函数的this值
- 返回值
无。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.forEach(function(currentValue, index, arr){ console.log(currentValue) // 依次为 HUAWEI BYD MAOTAI console.log(index) // 依次为 0 1 2 console.log(arr) // 三次['HUAWEI', 'BYD', 'MAOTAI'] }) -
from()
通过给定的对象中创建一个数组。- 语法
Array.from(object, mapFunction, thisValue)- 参数
object: 必须，要转化为数组的对象mapFunction: 可选，数组中每个元素要执行的判断函数
a.currentValue: 必须，当前元素
b.index: 可选，当前元素索引thisValue: 可选，执行函数的this值
- 返回值
新的数组对象，每个值为mapFunction的判断返回值，true 或者 false。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const newArr = Array.from(MZPPS, function(currentValue, index){ console.log(currentValue) console.log(index) console.log(arr) return currentValue.length == 3 }) console.log(newArr) // [false, true, false] -
includes()
判断一个数组是否包含一个指定的元素。- 语法
arr.includes(searchElement, fromIndex)- 参数
searchElement: 必须，要查找的元素fromIndex: 可选，查找开始的位置索引，默认0，负数为从后向前查找(开区间)
- 返回值
true 或者 false。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.includes('BYD') // true MZPPS.includes('BYD', 2) // false MZPPS.includes('BYD', -1) // 开区间，返回false MZPPS.includes('BYD', -2) // true -
indexOf()
搜索数组中的元素，并返回它所在的位置，从前向后所有。- 语法
array.indexOf(item,start)- 参数
item: 必须，要搜索的元素start: 搜索开始的位置
- 返回值
搜索到元素的位置索引。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.indexOf('BYD') // 1 MZPPS.indexOf('BYD', 1) // 1 MZPPS.indexOf('BYD', 2) // -1 -
isArray()
判断对象是否为数组。- 语法
Array.isArray(obj)- 参数
obj: 必须，要判断的对象
- 返回值
true 或 false。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] Array.isArray(MZPPS) // true Array.isArray('CHANGAN') // false -
join()
把数组的所有元素放入一个字符串。- 语法
array.join(separator)- 参数
separator: 必须，链接分隔符，不传参数默认为逗号
- 返回值
分隔字符链接的字符串，原数组不变。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.join() // HUAWEI,BYD,MAOTAI MZPPS.join('-') // HUAWEI-BYD-MAOTAI -
keys()（ES6新增）
返回数组的可迭代对象，包含原始数组的键(key)。- 语法
array.keys()- 参数
无。 - 返回值
可迭代对象（迭代器）。 - 举例
// 解构遍历 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const iterator = MZPPS.keys() for(let key of iterator){ console.log(key) // 依次输出 0 1 2 } // 迭代器next遍历 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const iterator = MZPPS.keys() let isDone = false do { const iteratorNext = iterator.next() isDone = iteratorNext.done console.log(iteratorNext.value) } while(!isDone) -
lastIndexOf()
搜索数组中的元素，并返回它最后出现的位置，从后向前搜索。- 语法
array.lastIndexOf(item,start)- 参数
item: 必须，要搜索的元素start: 可选，搜索开始的位置，默认array.length
- 返回值
搜索到元素最后出现的位置索引，搜索不到返回-1。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'BYD', 'MAOTAI'] MZPPS.lastIndexOf('BYD') // 2 MZPPS.lastIndexOf('BYD', 1) // 从索引为1的位置向前搜索，1 MZPPS.lastIndexOf('BYD', 0) // -1 -
map()（ES6新增）
通过指定函数处理数组的每个元素，并返回处理后的数组。- 语法
array.map(function(currentValue,index,arr), thisValue)- 参数
function: 必填，每个元素都要执行的处理函数。
a.currentValue: 必须，当前元素
b.index: 可选，当前元素索引
c.arr: 当前元素所在数组thisValue: 可选，制定数据处理函数的this值
- 返回值
数据处理函数执行后的新数组，原数组不变。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const newArr = MZPPS.map(function(currentValue, index, arr){ console.log(index) // 依次输出 0 1 2 return `I love ${currentValue}` }) console.log(newArr) // ["I love HUAWEI", "I love BYD", "I love MAOTAI"] -
pop()
删除数组的最后一个元素并返回删除的元素。- 语法
array.pop()- 参数
无。 - 返回值
删除的元素。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.pop() // MAOTAI -
push()
向数组的末尾添加一个或更多元素，并返回新的长度。- 语法
array.push(item1, item2, ..., itemX)- 参数
item1, item2, ..., itemX: 必须，要添加的元素
- 返回值
添加之后数组的长度。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.push('CHANGAN') // 4 -
reduce()（ES6新增）
将数组元素计算为一个值（从左到右）。- 语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)-
参数
function: 必须，所有元素都执行的计算函数。
a.total: 必须，计算后的值
b.currentValue: 必须，当前元素值
c.currentIndex: 可选，当前元素索引
d.arr: 可选，当前元素所在数组initialValue: 可选，传递给计算函数的初始值
-
返回值
计算结果。 -
举例
// 不传初始值, 会将第一个值作为初始值 const numbers = [1, 2, 3, 4] const total = numbers.reduce(function(total, currentValue, currentIndex, arr){ console.log(currentIndex) // 依次输出 1 2 3 console.log(arr) // [1, 2, 3, 4] return total + currentValue }) console.log(total) // 10 // 初始值为20 const numbers = [1, 2, 3, 4] const total = numbers.reduce(function(total, currentValue, currentIndex, arr){ console.log(currentIndex) // 依次输出0 1 2 3 console.log(arr) // [1, 2, 3, 4] return total + currentValue }, 20) console.log(total) // 30 -
reduceRight()（ES6新增）
将数组元素计算为一个值（从右到左）。- 语法
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)- 参数
function: 必须，所有元素都执行的计算函数。
a.total: 必须，计算后的值
b.currentValue: 必须，当前元素值
c.currentIndex: 可选，当前元素索引
d.arr: 可选，当前元素所在数组initialValue: 可选，传递给计算函数的初始值
- 返回值
计算后的值。 - 举例
// 不传初始值, total默认为0 const numbers = [1, 2, 3, 10] const total = numbers.reduce(function(total, currentValue, currentIndex, arr){ console.log(currentIndex) // 依次输出 1 2 3 console.log(arr) // [1, 2, 3, 4] return total - currentValue }) console.log(total) // -14 // 初始值为20 const numbers = [1, 2, 3, 10] const total = numbers.reduce(function(total, currentValue, currentIndex, arr){ console.log(currentIndex) // 依次输出0 1 2 3 console.log(arr) // [1, 2, 3, 4] return total - currentValue }, 20) console.log(total) // 4 -
reverse()
反转数组的元素顺序。- 语法
array.reverse()- 参数
无。 - 返回值
反转后的数组。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.reverse() // ["MAOTAI", "BYD", "HUAWEI"] -
shift()
删除并返回数组的第一个元素。- 语法
array.shift()- 参数
无。 - 返回值
删除的元素。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.shift() // HUAWEI -
slice()
选取数组的一部分，并返回一个新数组。- 语法
array.slice(start, end)- 参数
start: 可选，选取开始的位置，负数从后向前选取end: 可选，选取结束位置，负数从后先前选取，开区间
- 返回值
选取后的新数组。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.slice(0, 1) // ['HUAWEI'] MZPPS.slice(1, 1) // [] MZPPS.slice(-1) // ['MAOTAI'] -
some()（ES6新增）
检测数组元素中是否有元素符合指定条件。- 语法
array.some(function(currentValue, currentIndex, arr){}, thisValue)- 参数
function: 必填，每个元素都要执行的处理函数。
a.currentValue: 必须，当前元素
b.index: 可选，当前元素索引
c.arr: 当前元素所在数组thisValue: 可选，指定当前检测函数的this值
- 返回值
有一个以上元素满足检测函数则返回true,否则返回false。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const hasSome = MZPPS.some(function(currentValue, currentIndex, arr){ console.log(currentIndex) // 依次输出(当找到一个满足检测函数的值则返回t rue,其他元素不再执行检测函数) 0 1 console.log(arr) // 输出两次['HUAWEI', 'BYD', 'MAOTAI'] return currentValue.length == 3 }) console.log(hasSome) // true -
sort()
对数组的元素进行排序。- 语法
array.sort(sortfunction)- 参数
sortfunction: 可选，排序函数，缺省为升序
- 返回值
排序后的数组。 - 举例
// 缺省 const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.sort() // ["BYD", "HUAWEI", "MAOTAI"] //升序 const MZPPS = [1, 3, 2] MZPPS.sort(function(a, b){ return a - b }) console.log(MZPPS) // [1, 2, 3] //倒序 const MZPPS = [1, 3, 2] MZPPS.sort(function(a, b){ return b - a }) console.log(MZPPS) // [3, 2, 1] -
splice()
从数组中添加或删除元素。- 语法
array.splice(index,howmany,item1,.....,itemX)- 参数
index: 必须，添加或者删除的开始位置索引howmany: 可选，必须为数字，规定删除的元素个数，如果为0，则不删除，如果缺省，则删除从index开始到数组结尾的所有元素item1,.....,itemX: 可选，要添加的元素
- 返回值
如果删除元素，则返回包含删除元素的数组，元素组被改变。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const deletedE = MZPPS.splice(2, 1, 'CHANGAN') console.log(deletedE) // ["MAOTAI"] console.log(MZPPS) // ["HUAWEI", "BYD", "CHANGAN"] -
toString()
把数组转换为字符串，并返回结果。- 语法
array.toString()- 参数
无。 - 返回值
数组所有元素永逗号链接的字符串, 原数组不变。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.toString() -
unshift()
向数组的开头添加一个或更多元素，并返回新的长度。- 语法
array.unshift(item1,item2, ..., itemX)- 参数
item1,item2, ..., itemX: 可选，要添加的元素，缺省返回数组长度
- 返回值
添加后数组的长度，改变原数组。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] const a = MZPPS.unshift('CHANGAN') console.log(a) // 4 -
valueOf()
返回数组对象的原始值。- 语法
array.valueOf()- 参数
无。 - 返回值
原始值。 - 举例
const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI'] MZPPS.valueOf() // ['HUAWEI', 'BYD', 'MAOTAI']
