返回原对象_Javascript对象之【Array】

89 阅读 0 评论 59 点赞

我是靠谱客的博主无限汉堡，最近开发中收集的这篇文章主要介绍返回原对象_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"]

二、数组方法

方法按照字母先后顺序列出。
1、 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"]

2、 copyWithin()（ES6新增）
从数组的指定位置拷贝元素到数组的另一个指定位置中。
- 语法

array.copyWithin(targetIndex, startIndex, endIndex)

参数
- targetIndex: 必需，复制到制定位置索引
- startIndex：可选，复制元素的开始位置索引，默认0
- endIndex：可选，复制元素的结束位置索引，默认array.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"]

3、 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"]

4、 every()（ES6新增）
检测数值元素的每个元素是否都符合条件。
- 语法

array.every(function(currentItem, index, arr), thisValue)

参数
- function: 必须，数组中每个元素都会执行该检测函数
  a. currentItem: 必须，当前元素
  b. index: 可选，当前元素索引
  c. arr: 可选，当前元素属于的数组对象
- thisValue: 可选，用作检测函数this的值
返回值
所有元素都被检测函数检测为true，则返回true，当检测遇到第一个false则停止其他元素检测，直接返回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) // 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

5、 fill()
使用一个固定值来填充数组。 - 语法

array.fill(value, start, end)

参数
- value：必须，填充的固定值
- start：可选，开始填充位置，默认0
- end：可选，结束填充位置(开区间)，默认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']

6、 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']

7、 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

8、 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

9、 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']
})

10、 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]

11、 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

12、 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

13、 isArray()
判断对象是否为数组。 - 语法

Array.isArray(obj)

参数
- obj: 必须，要判断的对象
返回值
true 或 false。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
Array.isArray(MZPPS) // true
Array.isArray('CHANGAN') // false

14、 join()
把数组的所有元素放入一个字符串。 - 语法

array.join(separator)

参数
- separator: 必须，链接分隔符，不传参数默认为逗号
返回值
分隔字符链接的字符串，原数组不变。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.join() // HUAWEI,BYD,MAOTAI
MZPPS.join('-') // HUAWEI-BYD-MAOTAI

15、 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)

16、 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

17、 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"]

18、 pop()
删除数组的最后一个元素并返回删除的元素。 - 语法

array.pop()

参数

无。

返回值
删除的元素。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.pop() // MAOTAI

19、 push()
向数组的末尾添加一个或更多元素，并返回新的长度。 - 语法

array.push(item1, item2, ..., itemX)

参数
- item1, item2, ..., itemX: 必须，要添加的元素
返回值
添加之后数组的长度。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.push('CHANGAN') // 4

20、 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

21、 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

22、 reverse()
反转数组的元素顺序。 - 语法

array.reverse()

参数无。
返回值
反转后的数组。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.reverse() // ["MAOTAI", "BYD", "HUAWEI"]

23、 shift()
删除并返回数组的第一个元素。 - 语法

array.shift()

参数无。
返回值
删除的元素。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.shift() // HUAWEI

24、 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']

25、 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
    ```

26、 `sort()`   
对数组的元素进行排序。
- 语法
```javascript
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]

27、 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"]

28、 toString()
把数组转换为字符串，并返回结果。 - 语法

array.toString()

参数无。
返回值
数组所有元素永逗号链接的字符串, 原数组不变。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.toString()

29、 unshift()
向数组的开头添加一个或更多元素，并返回新的长度。 - 语法

array.unshift(item1,item2, ..., itemX)

参数
- item1,item2, ..., itemX: 可选，要添加的元素，缺省返回数组长度
返回值
添加后数组的长度，改变原数组。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
const a = MZPPS.unshift('CHANGAN')
console.log(a) // 4

30、 valueOf()
返回数组对象的原始值。 - 语法

array.valueOf()

参数无。
返回值
原始值。
举例

const MZPPS = ['HUAWEI', 'BYD', 'MAOTAI']
MZPPS.valueOf() // ['HUAWEI', 'BYD', 'MAOTAI']

以上为Array对象属性和方法介绍，看到底真的需要勇气，不妨关注专栏，鼓励我写出更多的前端技术文章。

最后

以上就是无限汉堡为你收集整理的返回原对象_Javascript对象之【Array】的全部内容，希望文章能够帮你解决返回原对象_Javascript对象之【Array】所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：返回原对象
浏览次数：89 次浏览
发布日期：2023-08-05 19:55:03
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_22_f4_14_z_14_w.html

返回原对象_Javascript对象之【Array】

概述

一、数组属性

二、数组方法

最后

评论列表共有 0 条评论

发表评论取消回复

返回原对象_Javascript对象之【Array】

概述

一、数组属性

二、数组方法

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复