数组方法
- 判断是否是数组的几种方式
(1)instanceof() 运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。
let a = [];
a instanceof Array; //true
let b = {};
b instanceof Array; //false
(2)constructor() 实例的构造函数属性constructor指向构造函数,那么通过constructor属性也可以判断是否为一个数组。
let a = [1,3,4];
a.constructor === Array;//true
(3)通过 Object.prototype.toString.call() 判断 ,它强大的地方在于不仅仅可以检验是否为数组,比如是否是一个函数,是否是数字等等
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true
//检验是否是函数
let a = function () {};
Object.prototype.toString.call(a) === '[object Function]';//true
//检验是否是数字
let b = 1;
Object.prototype.toString.call(a) === '[object Number]';//true
(4)Array.isArray() 用于确定传递的值是否是一个数组,返回一个布尔值。
let a = [1,2,3]
Array.isArray(a);//true
重点知识:
/*
nodeList
childNodes
querySelectorAll
HTMLCollection
children
getElementsByTagName
getElementsByClassName
1. nodeList 有 forEach 方法,但是 HTMLCollection 没有forEach
2. HTMLCollection 每次调用时都会动态的去获取, nodeList 中 childNodes 有动态更新,但是querySelectorAll 就不会动态更新
*/
-
push 在数组的末尾添加元素
var arr = [1, 2, 3] console.log(arr.push(4, 'pink')) //返回的结果是 新数组的长度 console.log(arr); //[1, 2, 3, 4, 'pink'] -
unshift 在数组的开始位置添加元素
-
shift 删除数组中的第一项
-
pop 删除数组中的最后一项
-
splice 数组增删改
// array.splice(index, howmany, item1, ....., itemX) // 1. index 必需。 整数, 指定在什么位置添加 / 删除项目, 使用负值指定从数组末尾开始的位置。 // 2.howmany 可选。要删除的项目数。如果设置为 0,则不会删除任何项目 // 3.item1, ..., itemX 可选。要添加到数组中的新项目。 // 4.正数索引从0开始,负数从-1开始 // 5. 该方法会改变原始数组 var arr = ['aa', 'bb', 'vv', 'cc'] arr.splice(1) //['aa'] 只写一个参数 表示从该位置开始,删除后面的所有元素 arr.splice(1, 2) //['bb','vv'] arr.splice(1, 1, 'ee', 'ddd') //['aa', 'ee', 'ddd', 'vv', 'cc'] arr.splice(-1, 1) //['aa', 'bb', 'vv'] 此处负数从1开始 arr.splice(-1, 1, 'rr') //['aa', 'bb', 'vv', 'rr'] 此处负数从1开始 -
slice 查找两个数组索引中间的内容返回新数组
//array.slice(start, end) //1.start,可选。整数,指定该数组从那个位置开始,包含该位置,负数从-1开始。省略类似为'0' //2.end,可选。整数,指定结束选择的位置,省略该值默认从开始位置选到最后一个元素,返回数组 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1, 4); //["Orange", "Lemon", "Apple"] console.log(citrus); //3.将伪数组转为真正的数组 //1.arguments //传出来的是一个伪数组,并不是真正意义上的数组 // 1. 具有数组的length属性 // 2. 按照索引的方式进行存储 // 3. 他没有真正数组的一些方法 pop(), push() var lis = document.querySelector('li') console.log(Array.isArray(lis)) //false var arr = Array.prototype.slice.call(lis) console.log(Array.isArray(arr)) //true -
concat 数组拼接
var arr1 = [1, 5, 6, 7, 8, 9] var arr2 = [2, 43, 5, 6, 768] var arr3 = arr1.concat(arr2) console.log(arr3); //[1, 5, 6, 7, 8, 9, 2, 43, 5, 6, 768] -
toString() 将数组转换成字符串
var arr1 = [1, 5, 6, 7, 8, 9]
var arr3 = arr1.toString()
console.log(typeof arr3); //string9.
- join() 将数组转换成字符串
//join(参数1) 参数省略,默认使用逗号作为分隔符
var arr1 = [1, 5, 6, 7, 8, 9]
var arr3 = arr1.join()
var arr4 = arr1.join('.')
console.log(typeof arr3); //string
console.log(arr3); //1,5,6,7,8,9
console.log(arr4); //1.5.6.7.8.9
- indexOf() 返回数组元素的索引号
```js
//indexof() 返回该数组元素的索引号
//他只返回第一个满足条件的索引号
//如果在改数组找不到元素,则返回的是-1
var arr = ['er', 'af', 'afd', 'asdfa', 'af', 'asdf']
console.log(arr.indexOf('af')) //1
console.log(arr.indexOf('a')) //-1
```
11. reverse() 翻转数组
```js
//数组翻转
var arr = ['1', '2', '3', '4']
arr.reverse();
console.log(arr) //['4', '3', '2', '1']
```
12. sort() 数组排序
```js
var arr1 = [13, 4, 77, 1, 7]
console.log(arr1.sort()); //[1,4,7,13,77]
arr1.sort(function (a, b) {
//return a - b 升序
return b-a //降序
})
console.log(arr1) //[77,13,7,4,1]
```
13. includes() 查找数组或者字符串中是否包含该元素
```js
//includes(参数1,参数2)
//1.参数1必须,要查找的字符串
//2.参数2可选,从哪个位置开始查找,默认0
//3.如果找到匹配的字符串返回 true,否则返回 false。
var arr = ['aa', 'bb', 'aa', 'cc', 'dd']
console.log(arr.includes('aa', 1));
```
14. find()
```js
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
var ages = [32, 33, 16, 40];
var test = ages.find(item => {
return item > 16
})
console.log(test); //32
```
15. from() 将字符串转换成数组
```js
//在JavaScript中,可以使用split()和Array.from()方法将字符串转换为字符串数组。
var objArr = Array.from("abcdef")
console.log(objArr); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(objArr[0]); //a
```
17. every() 检索所有的元素是否返回条件
```js
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
var ages = [32, 33, 16, 40];
var test = ages.every(item => {
return item > 15
})
console.log(test); //true
```
18. findIndex() 返回数组中符合条件的第一个元素的索引
```js
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
var ages = [3, 10, 18, 20];
var test = ages.findIndex(item => {
return item > 18
})
console.log(test); //3 返回符合条件的第一个元素位置
var test = ages.findIndex(item => {
return item > 20
})
console.log(test); //-1 没有符合条件返回-1
```
19. forEach() 遍历数组
```js
//1.forEach 迭代(遍历)数组
var arr = [1, 2, 3]
var sum = 0
arr.forEach(function (value, index, array) {
console.log('每一个数组元素', value);
console.log('每一个数组元素的下标值', index);
console.log('数组本身', array);
sum += value
})
```
20. filter() 过滤数组,返回想要的数组
```js
// 2.filter 过滤数组,返回想要的数据
var arr1 = [43, 65, 86, 24, 5362, 456]
var newarr = arr1.filter(function (value, index) {
return value >= 60
})
console.log(newarr); // [65, 86, 5362, 456]
```
21. some() 查找数组中有没有符合条件的元素,找到就跳出循环,返回true,没有就返回false
```js
// 3.some() 查找数组中有没有满足条件的元素,查找到一个符合条件,就跳出循环,返回一个boolean值(true或false)
var arr2 = [10, 23, 54]
var flag = arr2.some(function (value, index) {
return value > 24
})
console.log(flag); //true
//与forEach的区别是:some()函数查找到符合条件的元素就会终止循环,效率更高
```
22. map() 返回你想要变换的函数
```js
//4.map() 返回你想要变换的数据
var arr3 = [1, 4, 5, 6, 7, 8]
var newarr1 = arr3.map(function (value) {
return value * 2
})
console.log(newarr1); //[2, 8, 10, 12, 14, 16]
```
23. reduce() 对数组内容进行汇总,通常用于计算
```js
// 5.reduce() 对数组内容进行汇总
var arr4 = [1, 1, 1, 1, 1]
var newarr2 = arr4.reduce(function (pre, n) {
return pre + n
}, 0)
console.log(newarr2); //5
```