青海做网站的公司,邢台交友吧,电商网站开发的现状,扬州学做网站培训多少钱目录
1. 基本概念
2. 创建数组对象
2.1 字面量创建
2.2 构造函数创建
2.3 静态方法Array.of()
2.4 静态方法Array.from()
2.5 空槽位
3. 常用实例方法
3.1 修改方法
3.11 push 和 unshift
3.12 shift 和 pop
3.13 fill
3.14 cpoyWithin
3.15 reverse
3.16 sort …目录
1. 基本概念
2. 创建数组对象
2.1 字面量创建
2.2 构造函数创建
2.3 静态方法Array.of()
2.4 静态方法Array.from()
2.5 空槽位
3. 常用实例方法
3.1 修改方法
3.11 push 和 unshift
3.12 shift 和 pop
3.13 fill
3.14 cpoyWithin
3.15 reverse
3.16 sort 3.17 splice
3.2 非修改方法【1】
3.21 forEach
3.22 map
3.23 filter
3.24 find / findLast
3.25 findIndex / findLastIndex
3.26 some
3.27 every
3.3 非修改方法【2】
3.31 indexOf / lastIndexOf
3.32 reduce / reduceRight
3.33 slice
3.34 flat
3.35 includes
3.36 toSpliced
3.37 join
3.38 contact
4. 其他方法
4.1 Array.isArray
4.2 Math对象方法 1. 基本概念 在JavaScript中数组Array是一种特殊的对象类型它提供了一种高效的方式来组织和管理数据元素。
JS 数组是可以动态调整大小的并且可以包含任何数据类型的如果不需要这个特征可使用类型化数组。
JS数组不是关联数组不能使用任意字符串作为索引访问数组元素必须使用非负整数或它们各自的字符串形式作为索引访问。 2. 创建数组对象
JS提供了多种数组创建的方式
2.1 字面量创建
const arr [1, 2, 3, four, true]2.2 构造函数创建
const arr new Array(1, 2, 3, four, true)
//也可以指定数组的长度但这种方法不初始化数组元素
const arr new Array(5) // 创建一个长度为5的空数组 2.3 静态方法Array.of()
这种方法与构造函数 new Array() 创建数组一样但如果只传入单个元素new Array()会将其解释为数组长度所以只能是非负整数创建出来的数组也是空数组。而 Array.of()会将其解释为元素内容即创建一个只有一个元素的数组。总的来说这与数组字面量相似但提供了一种函数式的方式来创建数组。
const arr Array.of(-6)
console.log(arr) //[-6] 2.4 静态方法Array.from()
// 创建一个长度为5的数组每个元素是其索引的两倍
const arr Array.from({ length: 5 }, (v, i) i * 2)
console.log(arr) //[0, 2, 4, 6, 8]
它常用于将将类数组或可迭代对象如 Map、Set、String、arguments 、NodeList 等转换为数组但这种方式是浅拷贝创建新数组。
Array.from(arrayLike, mapFn, thisArg)
arrayLike类数组或可迭代对象
mapFn可选新数组中的每个元素会执行该回调函数
thisArg可选执行 mapFn 函数时 this 的值
----------------------------------------------
处理arguments伪数组
function foo() { let args Array.from(arguments); console.log(args);
} foo(1, 2, 3); // 输出: [1, 2, 3]----------------------------------------------
字符串转数组
let str hello;
let strArray Array.from(str);
console.log(strArray); // [h, e, l, l, o]
---------------------------------------------
Set 转换为数组
let set new Set([1, 2, 3, 4, 5]);
let arrayFromSet Array.from(set); console.log(arrayFromSet); // [1, 2, 3, 4, 5] 2.5 空槽位
在JavaScript中数组的空槽位也称为“空洞”或“稀疏数组”是指数组中那些存在但未被赋值的索引位置。这些空槽位在数组的length属性中被计算在内但实际上并不包含任何值。
那么空槽位主要是如何产生的呢
JS数组是动态的同时它的长度与length属性数值是关联的这意味着我们可以通过显示的增加或者减少length属性值来扩展或缩减数组
const arr [1, 2, 3, 4]
//数组长度元素个数
console.log(arr.length) //4
//减少length
arr.length - 3
//删除了数组末尾的3个元素
console.log(arr) //[1]
//增加 length
arr.length 3
console.log(arr) //[1,空*3]
可以看见当我们增加length属性值的时候数组会使用空槽来扩展数组而不是创建任何新元素—— 甚至不会是 undefined。与之相同的
使用构造函数传入一个非负整数作为数组长度创建数组时通过空槽位扩展数组
coconst arr new Array(5)
console.log(arr)//[空 x5]直接赋值时也可能产生空槽位
let arr []
arr[2] three // 索引0和1现在是空槽位
console.log(arr)//[空 x2,three]字面量创建
let array [1, 2, 3, 4, , , , , 8]
console.log(array.reverse()) //[8, 空 ×4, 4, 3, 2, 1]
不过虽然没有创建为undefined数据但在JS中未被操作或赋值的变量本就代表着undefined
const arr new Array(10)
console.log(arr[9] undefined) //true
那么既然其可以等价于undefined又为何需要专门提及呢
因为不同的数组方法在遇到空槽时可能有不同的行为
通常较旧的方法例如 forEach处理空槽的方式与处理包含 undefined 索引的方式不同。
const arr [1, undefined, undefined]
arr[5] 5
console.log(arr) // [1, undefined, undefined, 空 ×2, 5]//forEach并不会把空槽位当作undefined处理甚至根本不会访问空槽
arr.forEach((e) console.log(e))
//输出1 undefined undefined 5
对空槽进行特殊处理的方法包括concat()、copyWithin()、every()、filter()、flat()、flatMap()、forEach()、indexOf()、lastIndexOf()、map()、reduce()、reduceRight()、reverse()、slice()、some()、sort() 和 splice()。诸如 forEach 之类的迭代方法根本不会访问空槽。其他方法如 concat、copyWithin 等在进行复制时会保留空槽因此最终数组依然是稀疏的。
const arr [undefined]
arr[3] 3
console.log(arr) //[undefined, 空 ×2, 3]
console.log(arr.concat(arr)) // [undefined, 空 ×2, 3, undefined, 空 ×2, 3]
console.log(arr.reverse()) //[3, 空 ×2, undefined]
较新的方法例如 keys不会对空槽进行特殊处理而是将它们视为包含 undefined。将空槽合并为 undefined 元素方法有entries()、fill()、find()、findIndex()、findLast()、findLastIndex()、includes()、join()、keys()、toLocaleString()、values() 和 with()以及[....array]扩展运算符
const arr []
arr[3] 3
console.log(arr) //[ 空 ×3, 3]
console.log(arr.findIndex((e) e undefined)) // 0
console.log([...arr]) //[undefined, undefined, undefined, 3] 3. 常用方法
与其它标准内置对象一样Array也提供了许多方便好用的属性方法来操作其实例它们主要定义在Array.prototype上。
3.1 修改方法
这些方法会对原数组进行修改
3.11 push 和 unshift
push向数组末尾添加一个或多个元素并返回新的数组长度
unshift向数组开头添加一个或多个元素并返回新的数组长度
const array [1, 2, 3]
console.log(array.push(777)) // 4
console.log(array) // [1, 2, 3, 777]
console.log(array.unshift(666)) // 5
console.log(array) // [666, 1, 2, 3, 777] 3.12 shift 和 pop
pop删除并返回数组的最后一个元素如果数组为空则返回undefined。
shift删除并返回数组的第一个元素如果数组为空则返回undefined。
const array [666, 2, 3, 4, 777]
console.log(array.pop()) // 777
console.log(array) // [666, 1, 2, 3]
console.log(array.shift()) // 666
console.log(array) // [2, 3, 4] 3.13 fill
fill将数组中的元素替换为指定的值可以指定索引范围如果传入索引那么将会默认替换全部元素。同时fill会访问空槽位将其视为undefined所以也可以替换它
const array new Array(5).fill(null, 2, 4)
console.log(array) //[空 ×2, null, null, 空]
3.14 cpoyWithin
cpoyWithin浅拷贝数组的一部分到同一数组中的另一个位置并返回它会修改原数组的内容但不会改变原数组的长度。
copyWithin(target, start, end)参数描述选值target序列开始替换的目标位置target 0则使用 target array.lengthtarget -array.length则使用 0target array.length则不会拷贝任何内容target start 则复制只会持续到 array.length 结束永远不会扩展数组start可选要复制的元素序列的起始位置start 0则使用 start array.length如果省略 start 或 start -array.length则默认为 0如果 start array.length则不会拷贝任何内容end可选要复制的元素序列的结束位置但不包括 end 这个位置的元素end 0则实际是 end array.lengthend -array.length则使用0如果省略 end 或 end array.length则默认为 array.length这将导致直到数组末尾的所有元素都被复制如果 end 位于 start 之前则不会拷贝任何内容
let array [0, 1, 2, 3, 4, 5]
console.log(array) //[0, 1, 2, 3, 4, 5]
// 将索引3-4不包括4之间的元素从索引0开始依次复制
console.log(array.copyWithin(0, 3, 4)) //[3, 1, 2, 3, 4, 5] copyWithin不会视空槽位为undefined但会访问复制它
const array new Array(5).fill(null, 2, 3)
console.log(array) //[空 ×2, null, 空 ×2]
console.log(array.copyWithin(2, 4)) //[ 空 × 5]
copyWithin() 方法的工作原理类似于 C 和 C 的 memmove是一种移动数组数据的高性能方法。序列在一次操作中被复制和粘贴即使复制和粘贴区域重叠粘贴的序列也将具有复制值。 3.15 reverse
reverse就地反转数组中的元素顺序并返回它。与copyWithin一样会访问空槽位并复制保留它
let array [1, 2, 3, 4, , , , , 8]
console.log(array.reverse()) //[8, 空 ×4, 4, 3, 2, 1] 3.16 sort
sort就地排序数组并返回它。默认情况下会将数组元素即使是数字转换为字符串然后按照字符串的Unicode码点顺序进行排序。这可能会导致非直观的排序结果
const arr [a, 3, 11, ab, 2, 1, 15]
arr.sort()
console.log(arr) // 输出:[1, 11, 15, 2, 3, a, ab]
对于空槽位和undefinedsort会先将它移动到数组的末尾再进行排序。不过undefined会被放在空槽位之前。
console.log([a, , , b].sort()) // [a, b, 空x 2]
console.log([, undefined, a, b].sort()) // [a, b, undefined, 空]
我们也可以使用一个比较函数做参数来改变默认排序。比较函数接受两个参数而sort则根据比较的返回值来确定排序顺序。比如
比较函数接收ab两个参数当比较函数的返回值 0时a排在b之前返回值 0b排在a之前。 返回值 0时a和b的相对位置不变。由此可实现数组的升序和降序排列
const numbers [40, 100, 1, 5, 25]
numbers.sort((a, b) b - a)
console.log(numbers) // 输出: [100, 40, 25, 5, 1] 也可以设置复杂的比较函数注意在比较函数是访问不到空槽位和undefined的
const arr [, , 1, 2, 3, undefined, null]
arr.sort((a, b) {if (typeof a typeof b) return 1 //升序else if (a null || b null) return 0else return -1 //降序
})
console.log(arr) // [3, 1, 2, null, undefined, 空 ×2] 3.17 splice
splice就地移除或者替换已存在的元素和/或添加新的元素。会返回一个包含被删除的元素的新数组如果没有删除元素则返回一个空数组。
会保留数组的稀疏性即同 copyWithin会访问并复制空槽位
splice(start, deleteCount, item1, item2, /* …, */ itemN)
start从该索引处开始删除元素
deleteCount删除元素的数量如果省略则默认start开始删删完
item1, item2, /* …, */ itemN删除后从start开始插入的元素
-------------------------------------------------------------// 删除
let testArray [1, 2, 3, 4, 5, 6]
console.log(testArray.splice(2, 3)) //[3, 4, 5] 从2开始删除3个元素
console.log(testArray) // [1, 2, 6]// 插入
let testArray [1, 2, 3, 4, 5, 6]
console.log(testArray.splice(2, 0, a, b)) //[] 从2开始删除0个插入a, b
console.log(testArray) // [1, 2, a, b, 3, 4, 5, 6]// 替换
let testArray [1, 2, 3, 4, 5, 6]
console.log(testArray.splice(2, 1, a, b)) //[3] 从2开始删除1个插入a, b
console.log(testArray) // [1, 2, a, b, 4, 5, 6] 3.2 非修改方法【1】
1. 这些方法不会对原数组进行修改
2. 这些方法接收一个回调函数作为参数且回调函数可接受三个参数分别是当前访问元素当前访问元素索引访问的数组。
3. 这些方法可以使用函数提供的改变this指向的方法来遍历非数组对象中属性为整数的属性值。
注意这些非数组对象需要有length属性
3.21 forEach
forEach遍历数组并对数组的每个元素执行一次给定的函数。
不访问空槽位无返回值
arr.forEach((item, index, array) {console.log(item) //item元素当亲元素console.log(index) //index数组索引console.log(array) //array数组本身
})
//通常只用于遍历访问元素
const array [1, 2, , , , 3, 4]
array.forEach((e) console.log(e))//1 2 3 4//在非数组对象上使用forEach
const obj {length: 2,0: 6,1: 6,2: 6,3: 6
}
// forEach() 方法读取 this 的 length 属性然后访问每个整数索引。
Array.prototype.forEach.call(obj, (e) console.log(e)) //6 6 3.22 map
map创建一个由原数组中的每个元素都调用一次提供的函数后的返回值组成的新数组并返回。
不访问空槽位但空槽的索引在返回的数组中仍然为空
const array [1, 2, , , , 3, 4]
const doubled array.map((e) e * 2)
console.log(doubled) // [2, 4, 空 ×3, 6, 8]//因为不会访问空槽位所以使用map初始化空槽数组时通常需要借助fill
new Array(n).fill(0).map((){})
由于其回调函数会接受三个参数元素索引数组由此有一个值得注意的问题当map与parseInt一起使用时
const array [1, 2, 3, 4]
console.log(array.map(parseInt)) //[1, NaN, NaN, NaN]
console.log(array.map((e) parseInt(e))) //[1, 2, 3, 4]
当我们直接用parseInt等函数作map的回调函数时map会将元素索引数组等三个参数一起传入回调函数parseInt而恰好parseInt可以接收两个参数参数是表达式解析该表达式的基数。所以就变成了以index为基数来解析element并返回解析结果......其结果当然不是一个数字
这一点对于forEachfilter和findfindIndex等方法与其他类似函数结合使用时一样值得注意 3.23 filter
filter创建并返回给定数组一部分的浅拷贝其包含通过所提供函数实现的测试的所有元素
不访问空槽位。
const array [1, 2, 3, 4, 5];
const evenNumbers array.filter(element element % 2 0);
console.log(evenNumbers); // 输出: [2, 4] 3.24 find / findLast
find返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
findLast与find使用相同但它是反向迭代数组
空槽会被访问的并被视为 undefined。
const array [, , 5, 12, 8, 130, 44]
console.log(array.find((e) e 10)) // 12
console.log(array.find((e) e undefined)) //undefined 3.25 findIndex / findLastIndex
findIndex返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1
findLastIndex与findIndex使用相同但它是反向迭代数组
空槽会被访问的并被视为 undefined。
const array [, , 5, 12, 8, 130, 44]
console.log(array.findIndex((e) e 10)) // 3
console.log(array.findIndex((e) e undefined)) //0 3.26 some
some测试数组中是否至少有一个元素通过了由提供的函数实现的测试。返回一个布尔值
不会在空槽上运行它的断言函数
const numbers [1, 2, 3, 4, 5];
const hasEven numbers.some(function(number) { return number % 2 0;
});
console.log(hasEven); // trueconsole.log([1, , 3].some((x) x undefined)) // falseconst obj {length: 3,0: a,1: b,2: c,3: d
}
const r Array.prototype.some.call(obj, (e) e a)
console.log(r) //true 3.27 every
every测试一个数组内的所有元素是否都能通过指定函数的测试 。如果有一个元素不满足条件就会立即返回false并且停止遍历数组。
不会在空槽上运行它的断言函数但对于空数组不管测试条件如何都会返回true
const numbers [2, 4, 6, 8, 10]
const allEven numbers.every(function (number) {return number % 2 0
})
console.log(allEven) // trueconsole.log([].every(() {})) // true
//不会在空槽上运行假言判断故相当于只有undefined一个元素
console.log([, , , undefined].every((x) x undefined)) // trueconst obj {length: 3,0: a,1: b,2: c,3: d
}
const r Array.prototype.every.call(obj, (e) e a)
console.log(r) //false 3.3 非修改方法【2】
1. 这些方法不会对原数组进行修改
3.31 indexOf / lastIndexOf
indexOf返回数组中第一次出现给定元素的下标可指定开始索引如果不存在则返回 -1。
lastIndexOf与indexOf使用相同但它是反向迭代数组
不会访问空槽
let fruits [Apple, Banana, Mango, Orange, Banana]
console.log(fruits.indexOf(Banana)) // 1
console.log(fruits.indexOf(Banana, 2)) // 4因为从索引 2 开始查找console.log(fruits.lastIndexOf(Banana)) // 4
console.log(fruits.lastIndexOf(Banana, 2)) // 1因为从索引 2 开始向前搜 3.32 reduce / reduceRight
reduce对数组中的每个元素按序执行一个提供的 reducer 函数每一次运行 reducer 会将先前元素的计算结果作为参数传入最后将其结果汇总为单个返回值。
会跳过空槽但不会跳过 undefined
reduceRight与reduce使用相同但它是反向迭代数组
arr.reduce(reducer(),initialValue)
reducer回调函数可接收四个参数acc, cur, index可选, array可选acc累加器累加回调的返回值它是上一次调用回调时返回的累积值或initialValuecur正在处理的元素index可选正在处理元素的索引。如果提供initialValue起始index为0否则为1array可选调用reduce的数组initialValue可选作为第一次调用reducer时第一个参数的值
-------------------------------------------------------------
const array [1, 2, 3, 4]
const reducer (acc, cur) acc cur
// 1 2 3 4
console.log(array.reduce(reducer)) // 10
// 初始值为 100
console.log(array.reduce(reducer, 100)) //110
-------------------------------------------------------------
const array [[0, 1],[2, 3],[4, 5]]
const flatten (acc, cur) acc.concat(cur)
console.log(array.reduce(flatten, [])) //[0, 1, 2, 3, 4, 5]
// reduceRight反向迭代数组
console.log(array.reduceRight(flatten, [])) // [4, 5, 2, 3, 0, 1] 3.33 slice
slice返回一个由 起始索引start 和到 结束索引 end 不包括 end的浅拷贝新数组
它接受负整数作为索引具体选值情况和 cpoyWithin 方法的相似
不会跳过空槽如果源数组是稀疏数组有空槽的数组返回的数组也会是稀疏数组
和 非修改方法【1】中的方法一样可以改变this指向来提取伪数组的元素
let sliceArr [1, 2, 3, 4, 5]
let sliced1 sliceArr.slice(0, 3) //[1,2, 3]
let sliced2 sliceArr.slice(1) //[2, 3, 4, 5]
let sliced4 sliceArr.slice(-4, -1) //[2, 3, 4]
let sliced3 sliceArr.slice(-4) //[2, 3, 4, 5]const obj {length: 3,0: a,1: b,2: c,3: d
}
const r Array.prototype.slice.call(obj, 1, 3)
console.log(r) // [b, c] 3.34 flat
flat根据指定深度递归地将所有子数组元素拼接到新的数组中并返回。
如果传递给 flat 的参数是 Infinity则无论多少层嵌套的数组都会被扁平化为一维数组。
如果扁平化的层数大于实际嵌套的层数当扁平化的层数大于实际嵌套的层数时flat 方法会在完全扁平化数组后立即停止并返回结果而不会继续无意义地调用扁平化函数
该方法会删除数组中的空槽
const arr [1, , [2, , [3, [4, , , ,]]]]
console.log(arr.flat()) //[1, 2, [3, [4,空x3]]]
console.log(arr.flat(2)) //[1, 2, 3, [4, 空 ×3]]
console.log(arr.flat(Infinity)) //[1, 2, 3, 4] 3.35 includes
includes判断一个数组是否包含一个指定的值
将稀疏数组中的空位槽视为undefined
arr.includes(searchElement, fromIndex)
searchElement检索的元素
fromIndex检索起始索引默认为 0。接受负索引
-------------------------------------------------
const arr [1, 1, 2, 3, 4, 4, 3];
console.log(arr.includes(2));//trueconsole.log(arr.includes(2, 3)); //falseconsole.log([1, , 3].includes(undefined)); // true3.36 toSpliced
toSpliced是splice的复制版本区别在于它不会返回删除的元素而是返回经过删除、插入操作后的一个新数组而不会更改原数组。
且它会删除空槽位并将其替换为undefined
// 删除
let testArray [1, 2, 3, 4, 5, 6, , ,]
console.log(testArray.toSpliced(2, 3)) //[1, 2, 6, undefined, undefined]
// 插入
console.log(testArray.toSpliced(2, 0, a, b))
//[1, 2, a, b, 3, 4, 5, 6, undefined, undefined]
// 替换
console.log(testArray.toSpliced(2, 1, a, b))
//[1, 2, a, b, 4, 5, 6, undefined, undefined]
//原数组没改变
console.log(testArray) // [1, 2, 3, 4, 5, 6,空 ×2]] 3.37 join
join将数组的元素连接成一个字符串以指定的分隔符进行分隔。默认的分隔符是逗号。
将空槽视为 undefined并产生额外的分隔符
和 非修改方法【1】中的方法一样可以改变this指向来连接伪数组的元素成为字符串
const joinArr [1,2,3,4,5]
console.log(joinArr.join()); //1,2,3,4,5
console.log(joinArr.join(|)) //1|2|3|4|5console.log([, , 666, undefined, undefined].join(|)) //||666||const obj {length: 3,0: a,1: b,2: c,3: d
}
const r Array.prototype.join.call(obj, )
console.log(r) // abc 3.38 contact
concat合并两个或多个数组。而是返回被合并数组的一个新数组。
如果任何源数组是稀疏的则结果数组也将是稀疏的
var array1 [a, b, c]
var array2 [d, e, f]
var array3 array1.concat(array2)
console.log(array3)
// 输出: [a, b, c, d, e, f]
console.log(array1)
// 输出: [a, b, c] (原数组不会被修改) 4. 其他方法
4.1 Array.isArray
该方法用于确定一个值是否是一个数组对于检测数组类型非常有用。
const testArray []
console.log(Array.isArray(testArray)) //true 4.2 Math对象方法
虽然Math对象的方法不是直接用于数组操作的但你可以使用它们来处理数组中的数值
Math.max(...array) 和 Math.min(...array)使用扩展运算符...将数组元素作为单独的参数传递给Math.max()和Math.min()以找到数组中的最大值和最小值。Math.floor(), Math.ceil(), Math.round()等用于对数组中的数值进行四舍五入、向下取整或向上取整操作。
let numbers [3.14, 4.99, -1.56, -2.45]
console.log(Math.max(...numbers)) //4.99
console.log(Math.min(...numbers)) //-2.45
console.log(numbers.map(Math.floor)) // [3, 4, -2, -3]
console.log(numbers.map(Math.ceil)) // [4, 5, -1, -2]
console.log(numbers.map(Math.round)) // [3, 5, -2, -2] 如有不足或遗漏烦请私信或评论留言
