1. 前言
数组真的是每天用了，但是有很多方法都是记不住，总是要百度查，很烦，所以才写了个数组使用总结，有什么不对的希望大家指出来。
2. 思路
先看看这些问题都记得很清楚么？
- 创建数组，怎么创建数组的
- 数组的构造方法Array有哪些方法？ES5 , ES6
- ES6把类似数组对象转化成数组方法，ES5怎么把类似数组的对象转化成数组，原理
- 字符串和数组互相转换
- 数组的增删查改
增：从头部增，从尾部增， 从中间位置增加
删：从头部删，从尾部删，从中间位置删
查： indexOf()， indexOf 的不足，ES6 怎么查找指定的元素
改：哪些操作是对本数组的修改，哪些是创建新数组？ - 数组排序，配合sort方法
- 数组的迭代器方法
不产生新数组的迭代器方法
产生新数组的迭代器方法 - $.each() 和 forEach 参数区别，如何跳出循环？
3. 整理
3.1 创建数组
var a = new Array(1,2,3); //[1,2,3]
var b = new Array(4); //[,,,] 四个空值,不是undefined
var c = [5,6,7]; //[5,6,7]3.2 Array 的构造函数有哪些方法？
ES5：isArray, 判断变量是否是数组
var a = [1,2,3];
Array.isArray(a); //trueES6: Array.from ，Array.of
Array.from 将类似数组的对象（array-like object）和可遍历（iterable）的对象, 转为真正的数组
什么是类似数组的对象?类数组对象
总结：
- 表象：这种对象很像数组，对对象的读写和遍历操作和数组类似，但却不是数组
- 条件：只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象。
- 常见的类数组对象：DOM 通过 document.querySelectorAll 获取的对象、函数的参数arguments
//定义数组和类数组对象
var arr = [1,2,3];
var obj = {0: 1, 1: 2, 2: 3, length: 3};
//元素读写操作
console.log(arr[0], obj[0])//1, 1
console.log(arr['length'], obj['length'])//1, 1
arr[0] = 9;
obj[0] = 9;
//遍历
for(var i = 0, len = arr.length; i < len; i++) {
arr[i]....
}
for(var i = 0, len = obj.length; i < len; i++) {
obj[i]....
}-
什么是可遍历对象？
JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
Array.from 使用：
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
let namesSet = new Set(['a', 'b']);
Array.from(namesSet) //将可遍历对象转成数组 Array.of ：方法用于将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 13.3 ES6、ES5怎么把类似数组的对象转化成数组，原理
[].slice.call(arrayLike); //为什么能转化为数组
slice原理
3.4 字符串数组互相转化
var s = "a,b,c,d";
var arr1 = s.split(",");
arr1; // ["a", "b", "c", "d"]
var s2 = arr1.join(" ");
s2; //"a b c d"
var s3 = arr1.toString();
s3; // "a,b,c,d"
3.5 数组的增删查改
-
从头部增，从尾部增， 从中间位置增加
头： var arr = [4,5,6]; arr.unshift(3); //5 注意，返回的是数组长度 arr; // [3,4,5,6] arr.unshit(1,2); // unshit 不仅可以增加一个，还可以增加多个 arr; //[1,2,3,4,5,6] 尾： arr.push(7); //7, 返回数组长度 arr; // [1,2,3,4,5,6,7] arr.push(8,9); //9， push也可以添加多个 arr; // [1,2,3,4,5,6,7,8,9] 中间 splice(起始索引，需要删除的元素个数，想要添加进数组的元素) var arr2 = [1,2,3,7,8,9]; arr2.splice(3,0,4,5,6); arr2; //[1, 2, 3, 4, 5, 6, 7, 8, 9] -
从头部删，从尾部删，从中间位置删
var arr = ["a","b","c","d","e"] arr.shift(); // "a", 被删除的元素 arr; //["b", "c","d","e"] arr.pop(); //"e", 返回被删除的元素 arr; // ["b","c","d"] arr.splice(1,1); // ["c"] 返回，被删除元素组成的数组！！！ arr; // ["b","d"] -
indexOf()， indexOf 的不足，ES6 怎么查找指定的元素
indexOf : 如果目标数组包含该参数，就返回第一个与参数相同元素的的索引，如果不包含，返回 -1
var arr = ["a", "b", "c"]; arr.indexOf("b"); //1indexOf 不足：
一是，不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判
ES6： includes: 返回一个布尔值，表示某个数组是否包含给定的值 ``` [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true ``` find: 用于找出第一个符合条件的数组成员，参数是一个回调函数 和filter 不同，返回所有符合添加的数组成员 ``` [1, 4, -5, -2].find((n) => n < 0) // -5 [1, 4, -5, -2].filter((n) => n < 0) //[-5, -2] ``` findIndex: 返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 ``` [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2 ``` -
哪些操作是对本数组的修改，哪些是创建新数组？
splice: 修改会影响原数组
concat: 不会影响原数组var a = [1,2,3,4]; var b = [5,6]; a.concat(b); a; //[1,2,3,4];
3.6 数组排序，配合sort方法
//顺序修改
var arr = [1,11,2,22,3,33];
arr.reverse(); //[33, 3, 22, 2, 11, 1]
//大小排序：
arr.sort(); //[1, 11, 2, 22, 3, 33]
//sort 方法默认按照字典顺序对元素进行排序
arr.sort(function(a, b) {
return a - b;
});
arr; //[1, 2, 3, 11, 22, 33]3.7 数组的迭代器方法
不产生新数组的迭代器方法
1. forEach
2. every
3. some
4. reduce
forEach,接受一个函数作为参数，对数组的每一个元素使用该函数
var arr = [1, 2, 3];
arr.forEach(function(value, index){
console.log(value * value);
})every, 接受一个返回值为布尔类型的函数，对数组中每一个元素使用该函数，如果所有元素，该函数均返回true，则函数返回true
var arr = [1, 2, 3];
var arrIsEven = arr.every(function(value){
return value % 2 == 0;
});
arrIsEven; //false
some, 接受一个返回值为布尔类型的函数，对数组中每一个元素使用该函数，只要有一个元素使得该函数返回true，则函数返回true
var arr = [1, 2, 3];
var arrIsEven = arr.some(function(value){
return value % 2 == 0;
});
arrIsEven; //true
reduce, 接受一个函数，返回一个值。迭代数组的所有项，然后构建一个最终返回的值。reduce() 方法从数组的第一项开始，逐个遍历到最后，而reduceRight() 则从数组的最后一项开始，从前遍历到第一项。
//前一个值，当前值，索引，数组对象
reduce(prev, cur, index, arr)
var nums = [1, 2, 3, 4, 5];
var sum = nums.reduce(function(prev, cur, index, arr) {
console.log("prev", prev); //1 3 6 10
console.log("cur", cur); // 2 3 4 5
return prev + cur;
})
sum; //15
产生新数组的迭代器方法
1. map
2. filter
map: 类似forEach，对数组的每个元素使用某个函数，并返回新数组
var arr = [1, 2, 3];
var arr2 = arr.map(function(value, index){
return (value * value);
})
arr2; //[1, 4, 9]
arr; //[1, 2, 3]
filter: 和every相似，传入一个返回值为布尔类型的函数。和every不同的是，对数组中的所有元素应用改函数，将返回返回为true的元素，添加新数组，返回新数组
var arr = [1, 2, 3];
var arr2 = arr.filter(function(value){
return value % 2 == 0;
})
arr2; //[2]
arr; //[1, 2, 3]
3.8 $.each() 和 forEach 参数区别，如何跳出循环？
$.each 是 jQuery的方法,forEach 是js 数组原生方法 ,
value 和 index 顺序是反的，很气！每次都要百度！
$.each 用return false
forEach 无法在所有元素都传递给调用的函数之前终止遍历，没有办法中止 forEach 循环。如果要中止，可使用 Array.every 或Array.some，或 try catch
$.each([1,2,3,4], function(index, value ){
if( value == 3) {
return false;
}
console.log( value ); //1 2 3
})
var flag = true;
[1,2,3,4].forEach(function(value, index) {
if( value != 3 && flag) {
console.log(value);
}
else {
flag = false;
}
})
try {
[1,2,3].forEach(function(i) {
if(i === 2) throw new Error();
console.log(i);
});
} catch(e) {
}
[1,2,3].some(function(i) {
if(i == 2) return true;
console.log(i);
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。