数组（2）

最新推荐文章于 2021-04-13 21:17:28 发布

weixin_43756060

最新推荐文章于 2021-04-13 21:17:28 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/weixin_43756060/article/details/106723136

版权

数组的遍历方法

1. for循环

for (let i = 0; i < arr.length; i++) {
   console.log(arr[i])
}

2. forEach

没有返回值，只针对每个元素调用func
forEach 的代码块中不能使用 break、continue，它会抛出异常

arr.forEach(function(item, index, array){
	console.log(item, index, array)
})

3. map()

返回新的数组，每个元素为调用func的结果

let result = arr.map(function(value) {
    value += 1
    console.log(value)
    return value
})
console.log(arr, result)

4. filter()

返回符合func条件的元素数组

let result = arr.filter(function(value) {
    console.log(value)
    return value == 2
})
console.log(arr, result)

5. some() 返回boolean，判断是否有元素符合func条件

只要有一个元素满足条件就返回true

let result = arr.some(function(value) {
    console.log(value)
    return value == 4
})
console.log(arr, result)

6. every() 返回boolean，判断每个元素都符合func条件

每一个元素都要满足条件才能返回true

let result = arr.every(function(value) {
    console.log(value)
    return value == 2
})
console.log(arr, result)

7.reduce() 接收一个函数作为累加器

let sum = arr.reduce(function(prev, cur, index, array) {
    return prev + cur
}, 0)
console.log(sum)

8.for…in…也可以遍历数组，但是它会遍历到数组的自定义属性

所以它用来遍历对象比较合适

9.ES6 中数组遍历方式 for…of

它可以遍历所有的可遍历对象

// 遍历数组中的元素
for (let item of arr) {
    console.log(item)
}

// 遍历数组的index
for (let item of arr.keys()) {
    console.log(item)
}

// 遍历values
for (let item of arr.values()) {
    console.log(item)
}

// 同时遍历keys和values
for (let [index, item] of arr.entries()) {
    console.log(index, item)
}

数组的其他扩展方法

1. Array.from()

将类数组转换成数组

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

参数
语法：Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike：必传参数，要转换为数组的类数组
mapFn：可选参数，如果指定了该参数，新数组中的每个元素会执行该回调函数
thisArg：可选参数，执行回调函数 mapFn 时 this 对象

2. Array.of()

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

3. copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
语法：arr.copyWithin(target, start = 0, end = this.length)
target: 必传参数，从该位置开始替换数据。如果为负值，表示倒数
start: 选填，从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算
end: 选填，到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3))
// [1, 4, 5, 4, 5]

4. fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

第一个参数：用来填充数组元素的值
第二个参数：开始位置
第三个参数：结束位置

let array = [1, 2, 3, 4]
array.fill(0, 1, 2)
// [1,0,3,4]

5. find()

返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 12

6. findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

5. includes()

返回一个布尔值
表示某个数组中是否包含给定的值
还可以传递第二个参数，它表示搜索的起始位置，默认值为0，如果为负数，则表示倒数的位置，如果大于数组长度，则会重置为从0开始

[1,2,3].includes(2) // true
[1,2,NaN].includes(NaN) // true

es5数组常用属性和方法汇总

length属性返回数组的长度
reverse() 颠倒数组中元素的顺序
判断一个对象是否是数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 第一种方法
Array.isArray(fruits)
// 第二种方法
fruits instanceof Array

把数组转换成字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString(); // Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串,它的行为类似 toString()，但是它可以规定分隔符
pop() 方法从数组中删除最后一个元素，返回被删除的值
push() 在数组结尾处，向数组添加一个新的元素，返回新数组的长度
shift() 方法会删除首个数组元素，返回被删除的值
unshift() 方法（在开头）向数组添加新元素，返回新数组的长度
splice() 删除元素，并向数组添加新元素
返回一个包含已删除项的数组,没有删除元素则返回空

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// 第一个参数（2）定义了应添加新元素的位置（拼接）
// 第二个参数（0）定义应删除多少元素
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素

concat() 合并数组

// concat() 方法不会更改现有数组。它总是返回一个新数组
// concat() 方法可以使用任意数量的数组参数
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

slice() 方法用数组的某个片段切出新数组

// slice() 方法创建新数组。它不会从源数组中删除任何元素
// slice() 可接受两个参数，比如 (1, 3)
// 该方法会从开始参数选取元素，直到结束参数（不包括）为止
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);