JavaScript —— 数组（Array）对象

前端杂货铺

已于 2022-06-02 19:20:52 修改

阅读量1.7k

点赞数 1

分类专栏： JavaScript 基础文章标签： javascript 前端原型模式

于 2022-03-14 20:51:43 首次发布

本文链接：https://blog.csdn.net/qq_45902692/article/details/123485842

版权

JavaScript 基础专栏收录该内容

7 篇文章 5 订阅

订阅专栏

创建一个数组

常规方式：

	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) //['唐三藏', '孙悟空', '猪八戒', '沙和尚', '孙悟空', '猪八戒', '沙和尚']

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

点个关注不迷路（持续更新中…）

前端杂货铺

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
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','
复制链接

扫一扫