数组 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"]

JS 数组

数组 Array

1. 实例方法

不是伪数组

是伪数组