壹、at()
at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。这个方法等同于[index], 但是这种写法不支持传入负数.你只能通过[ - 1].所以这里就凸显了 at() 方法的简洁性和可读性。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
})
('输出:', (4)) // 输出: 5
('输出:', (1)) // 输出: 2
('输出:', (-1)) // 输出: 9
// 这个方法等同于[index], 但是这种写法不支持传入负数
('输出:', [-1]) // 输出: undefined
('输出:', [ - 1]) // 输出: 9
return {
}
}
})
</script>贰、concat()
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list1: number[]
list2: number[]
list3: number[]
}
const data = reactive<Data>({
list1: [0, 1, 2, 3, 4],
list2: [5, 6, 7, 8, 9],
list3: [11, 12, 13]
})
// 语法:
// concat()
// concat(value0)
// concat(value0, value1)
// concat(value0, value1, /* … ,*/ valueN)
// 数组和/或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。
// 合并两个数组
('输出:', data.(data.list2)) // 输出: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// 合并三个数组 n个以此类推
('输出:', data.(data.list2, data.list3)) // 输出: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13]
}
})
</script>叁、every()
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
// 语法:
// 箭头函数
// every((element) => { /* … */ } )
// every((element, index) => { /* … */ } )
// every((element, index, array) => { /* … */ } )
// 回调函数
// every(callbackFn)
// every(callbackFn, thisArg)
// 内联回调函数
// every(function(element) { /* … */ })
// every(function(element, index) { /* … */ })
// every(function(element, index, array){ /* … */ })
// every(function(element, index, array) { /* … */ }, thisArg)
const isBelowThreshold = (currentValue: number, ratio: number) => currentValue < ratio;
('输出:', ((element) => isBelowThreshold(element, 10))); // 输出: true
('输出:', ((element) => isBelowThreshold(element, 8))); // 输出: false
}
})
</script>肆、filter()
filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
// 语法:
// 箭头函数
// filter((element) => { /* … */ } )
// filter((element, index) => { /* … */ } )
// filter((element, index, array) => { /* … */ } )
// 回调函数
// filter(callbackFn)
// filter(callbackFn, thisArg)
// 内联回调函数
// filter(function(element) { /* … */ })
// filter(function(element, index) { /* … */ })
// filter(function(element, index, array){ /* … */ })
// filter(function(element, index, array) { /* … */ }, thisArg)
('输出:', (item => item > 6)); // 输出: [7, 8, 9]
('输出:', (item => item < 6)); // 输出: [0, 1, 2, 3, 4, 5]
}
})
</script>伍、find()、findIndex()
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[],
list2: {
name: string
sex: string
age: number
}[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
list2: [
{
name: '',
sex: '男',
age: 28
},
{
name: 'Annie',
sex: '女',
age: 22
},
{
name: 'George',
sex: '男',
age: 39
}
]
})
// 语法:
// 箭头函数
// find((element) => { /* … */ } )
// find((element, index) => { /* … */ } )
// find((element, index, array) => { /* … */ } )
// 回调函数
// find(callbackFn)
// find(callbackFn, thisArg)
// 内联回调函数
// find(function(element) { /* … */ })
// find(function(element, index) { /* … */ })
// find(function(element, index, array){ /* … */ })
// find(function(element, index, array) { /* … */ }, thisArg)
('输出:', (item => item > 6)); // 输出: 7
('输出:', (item => item < 6)); // 输出: 0
// 对象数组
('输出:', data.(item => === '')); // 输出: { name: '', sex: '男', age: 28 }
('输出:', data.(item => ('Etc'))); // 输出: { name: '', sex: '男', age: 28 }
}
})
</script>findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
('输出:', (item => item > 5));
// 输出: 6
('输出:', (item => item > 10));
// 输出: -1
// 对象数组
('输出:', data.(item => === ''));
// 输出: 0
('输出:', data.(item => ('George')));
// 输出: 2陆、includes()
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
})
('输出:', (2)); // 输出: true
('输出:', (10)); // 输出: false
// includes(searchElement, fromIndex)
// searchElement为需要查找的元素值。
// 从fromIndex 索引处开始查找 searchElement。
// 如果为负值，则按升序从 + fromIndex 的索引开始搜
// （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
('输出:', (2, 1)); // 输出: true
('输出:', (2, -1)); // 输出: false
('输出:', (8, -3)); // 输出: true
('输出:', (2, 8)); // 输出: false
}
})
</script>柒、indexOf()
indexOf() 使用方法和includes() 方法一模一样,只是indexOf()方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
})
('输出:', (2)); // 输出: 2
('输出:', (10)); // 输出: -1
// includes(searchElement, fromIndex)
// searchElement为需要查找的元素值。
// 从fromIndex的位置开始查找。如果该索引值大于或等于数组长度，意味着不会在数组里查找,返回 -1。
// 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，
// -2 表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，
// 查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于 0，则整个数组都将会被查询。其默认值为 0。
('输出:', (2, 1)); // 输出: 2
('输出:', (2, -1)); // 输出: -1
('输出:', (8, -3)); // 输出: 8
('输出:', (2, 8)); // 输出: -1
}
})
</script>捌、isArray()
() 用于确定传递的值是否是一个 Array。
<script lang="ts">
export default defineComponent({
setup() {
('输出:', ([1, 2, 3, 4, 5, 6])) // 输出: true
('输出:', ({ name: '' })); // 输出: false
('输出:', ('')); // 输出: false
('输出:',(undefined)); // 输出: false
}
})
</script>玖、join()
join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
})
('输出:', ()); // 输出: 0,1,2,3,4,5,6,7,8,9
('输出:', (' ')); // 输出: 0 1 2 3 4 5 6 7 8 9
('输出:', ('-')); // 输出: 0-1-2-3-4-5-6-7-8-9
}
})
</script>拾、keys()
keys() 方法返回一个包含数组中每个索引键的 Array Iterator 对象。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: any[],
list2: {}
}
const data = reactive<Data>({
list: [0, 1, , 3, 4, 5, , 7, 8, 9],
list2: {
name: '',
sex: '男',
age: 18,
phone: '183********',
}
})
const iterator = ();
for (const key of iterator) {
('输出:', key);
// 输出: 0
// 输出: 1
// ……
// 输出: 9
}
// Object同样提供了获取key值的keys
('输出:', (data.list2)) // 输出: ['name', 'sex', 'age', 'phone']
}
})
</script>拾壹、Map()
map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
('输出:', (item => item * 2)) // 输出: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]
}
})
</script>拾贰、shift()、pop()
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
('删除的元素是:', ()) // 删除的元素是: 0
('删除的元素是:', ()) // 删除的元素是: 9
}
})
</script>拾叁、slice()
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
// slice(start, end)
('输出:', ()) // 输出: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
('输出:', (2)) // 输出: [2, 3, 4, 5, 6, 7, 8, 9]
('输出:', (1, 5)) // 输出: [1, 2, 3, 4]
('输出:', (2, -1)) // 输出: [2, 3, 4, 5, 6, 7, 8]
('输出:', ) // 输出: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
})
</script>拾肆、some()
some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
})
const verification = (arr: number[], val: number) => {
return (function(arrVal) {
return val === arrVal;
});
}
('输出:', verification(, 1)) // 输出: true
('输出:', verification(, 11)) // 输出: false
('输出:',(x => x > 5)) // 输出: true
('输出:',(x => x > 10)) // 输出: false
}
})
</script>拾伍、sort()
sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
list2: string[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 99, 5, 9, 7, 8, 6],
list2: ['h','a','d','b','r','m',]
})
('输出:', ()) // 输出: [0,1,2,3,4,5,6,7,8,9,99]
('输出:', data.()) // 输出: ["a","b","d","h","m","r"]
const current = ((a: number, b: number) => {
return b - a
})
('输出: ', current) // 输出: [99,9,8,7,6,5,4,3,2,1,0]
}
})
</script>拾陆、splice()
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 99, 5, 9, 7, 8, 6]
})
// 添加
(1, 0, 100)
('输出:', ) // 输出: [0,100,1,2,3,4,99,5,9,7,8,6]
// 替换
(4, 1, 222)
('输出:', ) // 输出: [0,100,1,2,222,4,99,5,9,7,8,6]
// 删除 从索引8开始删除一个
(8, 1)
('输出:', ) // 输出: [0,100,1,2,222,4,99,5,7,8,6]
// 删除 从索引8开始删除二个
(8, 2)
('输出:', ) // 输出: [0,100,1,2,222,4,99,5,6]
// 删除 从索引-开始删除1个
(-1, 1)
('输出:', ) // 输出: [0,100,1,2,222,4,99,5]
}
})
</script>拾柒、unshift()
unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: number[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, 99, 5, 9, 7, 8, 6]
})
(100, 500)
('输出:', ()) // 输出: [100,500,0,1,2,3,4,99,5,9,7,8,6]
}
})
</script>拾捌、flat()
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
<script lang="ts">
export default defineComponent({
setup() {
interface Data {
list: any[]
}
const data = reactive<Data>({
list: [0, 1, 2, 3, 4, [5, 6, 7, [8, 9, 10]]]
})
// flat 默认参数是1 转换多维数组
('输出:', (())) // 输出: [0,1,2,3,4,5,6,7,[8,9,10]]
// 转换为一维数组,只需要传入层级即可
('输出:', ((2))) // 输出: [0,1,2,3,4,5,6,7,8,9,10]
}
})
</script>纯属学习记录。我是，如果文章对你有帮助，记得帮我点个赞???? ???? ???? ???? ????