1、map
数组格式化。数组中的每个元素调用传参的函数,将结果作为新的数组返回,不改变原数组
let arr = [1, 2, 3, 4, 5]
let newarr = arr.map((item, index, array) => {
//参数 1 - item 数组里每个元素
//参数 2 - index 每个元素对应的下标
//参数 3 - array 数组本身
return item * 2
});
console.log(arr) // [1, 2, 3, 4, 5]
console.log(newarr) // [2, 4, 6, 8, 10]
注意:如果return后面是条件表达式,则会返回布尔值 比如:
let arr = [1, 2, 3, 4, 5]
let newarr = arr.map((item, index) => {
return index > 2
});
console.log(newarr) // [false, false, false, true, true]
2、forEach
数组遍历。数组中的每个元素调用传参的函数,没有返回值,直接改变原数组
let arr = [1, 2, 3, 4]
arr.forEach((item, index, array) => {
item ++
});
console.log(arr) // [1, 2, 3, 4]
奇怪的是原数组没有发生改变,没有达到预期的效果 这里要注意的是:如果数组元素是数字、字符串、布尔值、null和undefined,原数组不会发生改变,但我们可以这样:
let arr = [1, 2, 3, 4]
arr.forEach((item, index, array) => {
array[index] ++
});
console.log(arr) // [2, 3, 4, 5]
假如数组元素是对象(键值对形式),则不需要考虑这种情况
let arr = [
{ num: 1, age: 18 },
{ num: 1, age: 19 },
{ num: 1, age: 20 }
];
arr.forEach(item => {
item.num++;
item.age = 30;
});
console.log(arr);
// [{ num: 2, age: 30 },{ num: 2, age: 30 },{ num: 2, age: 30}]
3、filter
数组过滤。对数组中所有元素进行判断,将符合条件的元素作为一个新数组返回
let arr = [1, 2, 3, 4, 5]
let newarr = arr.filter((item, index, array) => {
return item > 2
});
console.log(newarr) // [3, 4, 5]
4、push
数组后增。在数组末尾添加一个或者多个元素,同时改变数组的长度
let arr = [1, 2, 3, 4]
arr.push(5)
console.log(arr) // [1, 2, 3, 4, 5]
let arr2 = [1, 2, 3, 4]
arr2.push(5, 6)
console.log(arr2) // [1, 2, 3, 4, 5, 6]
5、pop
数组后删。删除并返回数组最后一个元素,同时改变数组的长度
let arr = [1, 2, 3, 4]
let arrLast = arr.pop()
console.log(arrLast) // 4
console.log(arr) // [1, 2, 3]
6、shift
数组前删。删除并返回数组的第一个元素,同时改变数组的长度
let arr = [1, 2, 3, 4]
let arrFirst = arr.shift()
console.log(arrFirst) // 1
console.log(arr) // [2, 3, 4]
7、unshift
数组前增。在数组开头添加一个或者多个元素,同时改变数组的长度
let arr = [1, 2, 3, 4]
arr.unshift(6)
console.log(arr) // [6, 1, 2, 3, 4]
let arr2 = [1, 2, 3, 4]
arr2.unshift(6, 7)
console.log(arr2) // [6, 7, 1, 2, 3, 4]
8、splice
数组的万能方法,可以实现增删改,不仅会改变原数组,而且将删除的元素作为一个新数组返回 splice(开始的位置, 删除的个数, 添加或替换的元素)
let arr1 = [1, 2, 3, 4]
// 删除 3
let delarr1 = arr1.splice(2, 1)
console.log(delarr1) // [3]
console.log(arr1) // [1, 2, 4]
let arr2 = [1, 2, 3, 4]
// 将 2,3 替换成 “666”
let delarr2 = arr2.splice(1, 2, "666")
console.log(delarr2) // [2, 3]
console.log(arr2) // [1, "666", 4]
let arr3 = [1, 2, 3, 4]
// 在 2 前面新增 "666",“777”
let delarr3 = arr3.splice(1, 0, "666", "777")
console.log(delarr3) // []
console.log(arr3) // [1, "666", "777", 2, 3, 4]
9、sort
数组排序。对数组中的元素进行排序,直接改变原数组,参数必须是规定元素排序顺序的函数
let arr1 = [4, 65, 3, 48, 29]
// 升序
const rule = (a, b) => a - b
arr1.sort(rule)
console.log(arr1) // [3, 4, 29, 48, 65]
let arr2 = [4, 65, 3, 48, 29]
// 降序
arr2.sort((a, b) => {
return b - a
})
console.log(arr2) // [65, 48, 29, 4, 3]
10、concat
数组拼接。将两个或多个数组拼接成一个数组,不会改变现有数组,只会返回一个拼接后的新数组
let arr0 = [0, 0, 0]
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr0.concat()
console.log(arr3) // [0, 0, 0]
let arr4 = arr1.concat(arr2)
console.log(arr4) // [1, 2, 3, 4, 5, 6]
let arr5 = arr0.concat(arr1, arr2)
console.log(arr5) // [0, 0, 0, 1, 2, 3, 4, 5, 6]
11、toString
将数组转化为字符串,且元素之间通过逗号分隔
let arr = [1,2,"hello",4]
let str = arr.toString()
console.log(str) // 1,2,hello,4
12、join
将数组转化为字符串,且元素通过指定的分隔符分隔,默认使用逗号分隔
let arr = [1, 2, "hello", 3]
console.log(arr.join()) // 1,2,hello,3
console.log(arr.join("")) // 12hello3
console.log(arr.join("-")) // 1-2-hello-3
console.log(arr.join(99)) // 199299hello993
13、reverse
反转数组。颠倒数组中元素的顺序
let arr = ["h","e","l","l","0"]
console.log(arr.reverse()) // ["0", "l", "l", "e", "h"]
14、indexOf
返回指定元素在数组中第一次出现的位置,从前往后找,假如指定元素没有出现,则返回 -1
let arr = ["h","e","l","l","0"]
console.log(arr.indexOf("l")) // 2
console.log(arr.indexOf("q")) // -1
15、lastIndexOf
用法和indexOf一样,不同点:lastIndexOf是从后往前找
let arr = ["h","e","l","l","0"]
console.log(arr.lastIndexOf("l")) // 3
console.log(arr.lastIndexOf("q")) // -1
16、every
对数组中所有元素进行判断并返回一个布尔值,假如所有元素都符合判断条件,则返回true,否则为false
let arr = [12, 12, 13, 18]
let arrflag1 = arr.every((item, index, array) => {
return item < 20
})
console.log(arrflag1) // true
let arrflag2 = arr.every(item => {
return item < 15
})
console.log(arrflag2) // false
17、some
对数组中所有元素进行判断并返回一个布尔值,假如存在元素符合判断条件,则返回true,假如都不符合则为false。注意和every区分
let arr = [12, 12, 13, 18]
let arrflag1 = arr.some((item, index, array) => {
return item < 10
})
console.log(arrflag1) // flase
let arrflag2 = arr.some(item => {
return item < 15
})
console.log(arrflag2) // true
18、reduce
数组中所有元素调用传参函数,返回值为最后的结果,传入的参数必须是函数
let arr = [1, 2, 3, 4, 5, 6]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum) // 21
es6新增
19、copyWithin
将数组中指定位置的元素复制到另一个指定位置中,直接改变原数组 copyWithin(指定目标位置, 元素复制开始位置, 元素复制结束位置 )
let arr = [1, 2, 3, 4, 5, 6]
arr.copyWithin(1, 3, 4)
console.log(arr) // [1, 4, 3, 4, 5, 6]
20、fill
将固定的值替换数组中指定位置的元素,直接改变原数组 fill(替换的值, 元素替换开始位置, 元素替换结束位置)
let arr = [1, 2, 3, 4, 5, 6]
arr.fill(0, 2, 4)
console.log(arr) // [1, 2, 0, 0, 5, 6]
21、find
对数组中所有元素进行判断,返回第一个符合条件的元素,不会改变原数组
let arr = [1, 2, 3, 4, 5, 6]
let arrFind = arr.find((item, index, array) => {
return item > 2
})
console.log(arrFind) // 3
22、findIndex
用法和find一样,不同点:findIndex返回的是元素下标
let arr = [1, 2, 3, 4, 5, 6]
let arrFindIndex = arr.findIndex((item, index, array) => {
return item > 2
})
console.log(arrFindIndex) // 2
23、includes
判断一个指定的值是否在数组中,假如是返回 true,否则false
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr.includes(4)) // true
24、keys
返回一个包含数组键(元素下标)的可迭代对象
let arr = ["h", "e", "l", "l", "o"]
console.log(arr.keys()) // Array Iterator {}
for (let i of arr.keys()) {
console.log(i) // 0 1 2 3 4
}
25、values
返回一个包含数组值(元素)的可迭代对象
let arr = ["h", "e", "l", "l", "o"]
console.log(arr.values()) // Array Iterator {}
for (let i of arr.values()) {
console.log(i) // h e l l o
}
26、entries
返回一个数组的可迭代对象,该对象包含数组的键值对
let arr = ["h", "e", "l", "l", "o"]
console.log(arr.entries()) // Array Iterator {}
for (let i of arr.entries()) {
console.log(i) // [0, "h"] [1, "e"] [2, "l"] [3, "l"] [4, "o"]
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!