数组 Array
1. 实例方法
转换方法
join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
复制代码
首尾添加/删除方法
push() 向数组的末尾添加一个或更多元素,并返回新的长度
pop() 删除数组最后一个元素,并返回删除元素
unshift() 向数组的开头添加一个或更多元素,并返回新的长度
shift() 删除数组第一个元素,并返回删除元素
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []
复制代码
重排序方法
reverse() 翻转数组中元素的顺序
sort() 对数组的元素进行排序
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
复制代码
操作方法
concat() 连接两个或更多的数组,并返回结果
slice() 截取数组的部分元素,并返回一个新的数组
splice() 删除元素,并返回删除元素
fill() 使用给定值填充一个数组
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
arr.slice(-3, -1); // 从索引-3开始,到索引-1结束,但不包括索引-1: ['E', 'F']
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
[1,2,3,4].fill(5) // [5,5,5,5]
[1,2,3,4].fill(5,2) // [1,2,5,5]
[1,2,3,4].fill(5,1,4) // [1,5,5,5]
复制代码
位置方法
indexOf() 返回要查找的项在数组中首次出现的位置,如果没找到返回 -1
includes() 判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf('30'); // 元素'30'的索引为2
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
复制代码
迭代方法
some() 对数组中的每一项运行给定函数,如果该函数对任意一项返回true,则返回true
every() 对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true
forEach() 对数组中的每一项运行给定函数
map() 对数组的每个元素进行一定操作(映射)后,会返回一个新的数组
filter() 创建一个新的匹配过滤条件的数组
# some()
var scores = [5, 8, 4, 9]
var A = 6
var flag = scores.some((score) => {
return A > score
})
console.log(flag) // true
# every()
var scores = [5, 8, 4, 9]
var A = 6
var flag = scores.every((score) => {
return A > score
})
console.log(flag) // false
# forEach()
var arr = [1,2,3,4,5,6,7,8]
var b = arr.forEach((item, key) => {
return key
})
console.log(b) // undefined
var arr1 = []
arr.forEach((item, key) => {
if (parseInt(item) >= 4) {
arr1.push(item)
}
})
console.log(arr1) // [4, 5, 6, 7, 8]
# map()
const arr = [1, 3, 4]
const cube = (num) => {
return num * num
}
// 本质上是用元素作为函数参数去调用函数,所以无需加上参数 【错误map(cube(num))】
const res = arr.map(cube) // [1, 9, 16]
#和parseInt() 函数配合使用,将字符串转成数字的时候
['1', '2'].map(str => parseInt(str)) or ['1', '2'].map(Number)
# filter()
var arr = [
{"name":"apple", "count": 4},
{"name":"orange", "count": 2},
{"name":"pear", "count": 1},
{"name":"orange", "count": 4},
];
var newArr = arr.filter(function(item){
return item.name=='orange';
})
console.log(newArr) // [{name: "orange", count: 2}, {name: "orange", count: 4}]
复制代码
归化方法
reduce() 可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值
var arr = [1,2,5,8]
function sum (total, num) {
return total + Math.round(num)
}
console.log(arr.reduce(sum, 0)) // 16
var arr = [1,2,3,4]
arr.reduce(function(pre,next,index,arr){
return pre+next
}) // 10
复制代码
- 方法
Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型
Array.from() 从类数组或者迭代对象(iterable object)中创建一个新的数组实例
Array.of(1,2,3) // [1, 2, 3]
# Array.from()
Array.from('foo') // ['f', 'o', 'o']
const arrayLike = {
0: 'name',
1: 'age',
length: 2
}
const mapF = item=> item += item
Array.from(arrayLike, mapF) // ["namename", "ageage"]
等价于=>
Array.from(arrayLike).map(mapF)
复制代码
伪数组
定义:什么是伪数组?
-
是一个对象
-
具有length 属性
-
如果这个对象的length不为0,按索引方式存储数据
-
不具有数组的push、pop方法
例子:
-
function 的arguments
-
通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等
-
特殊写法的对象
var obj = {} obj[0] = 'a' obj[1] = 'b' obj[2] = 'c' obj.length = 3
不是伪数组
var obj = {} var obj = {length: 3}
是伪数组
var obj = {length: 0} var obj = {0: '888', length: 1} var obj = {99: 'abc', length: 100}
如何判断数据是不是伪数组
- 不是对象直接干掉
- 是对象,没有length 属性也干掉
- 有length,值必须是number 类型
- length 值是number 类型,并且值不为0,这个对象还得按照下标存储数据
如何判断数据是不是真数组
- 数据 instanceof Array
- Object.prototyep.toString.call(数据) == '[object Array]'
伪数组转标准数组
Array.prototype.slice.call(数据)
var obj = {0: 'a', 1: 'b', length: 2}
Array.prototype.slice.call(obj) // ["a", "b"]
复制代码