前端之JS数组全记录（一）

1. 数组作用

    数组对象的作用是：使用单独的变量名来存储一系列的值。

2. JS创建数组的常用方法

2.1 使用 JavaScript 关键词 new

let arr = new Array();
arr[0] = "南山";
arr[1] = "福田";
arr[2] = "宝安";//
arr  ["南山","福田","宝安"]

2.2 简洁方式-直接实例化

var arr = new Array("南山","福田","宝安");

2.3 使用数组文本 

var arr = ["南山","福田","宝安"];

3. 访问数组元素

     通过引用索引来引用某个数组元素。

4. js判断数组方法

4.1 instanceof 操作符判断

      instanceof主要的目的是检测引用类型以及一个变量是否属于某个对象的实例。

let arr = [];
console.log(arr instanceof Array); // true

4.2 对象构造函数的 constructor判断

      Object的每个实例都有构造函数 constructor，用于保存着用于创建当前对象的函数。

let arr = [];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true

4.5 Array.isArray

let arr = [];
console.log(Array.isArray(arr)); // true

5. 常用API

JS数组原型提供的方法非常之多，主要分为三种：

• 修改原数组

• 原数组不变，返回新数组

• 数组遍历

5.1 修改原数组的API

• pop() 删除数组中的最后一个元素，并且返回这个元素。

• push() 添加一个或者多个元素到数组末尾，并且返回数组新的长度。

• shift() 删除数组的第一个元素，并返回这个元素。

• unshift() 在数组开始处插入一些元素，并返回数组新的长度。

• splice() 向/从数组中添加/删除项目，然后返回被删除的项目。

语法：arrayObject.splice(index,howmany,item1,.....,itemX)
参数：index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置；
howmany：必需。要删除的项目数量。如果设置为0，则不会删除项目；
item1, ..., itemX：可选。向数组添加的新项目。

• reverse() 用于颠倒数组中元素的顺序。

• sort() 用于对数组的元素进行排序。

         如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

         1. 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

         2. 若 a 等于 b，则返回 0。

         3. 若 a 大于 b，则返回一个大于 0 的值。

• fill() 将一个固定值替换数组的元素。

  
  

array.fill(value, start, end)
参数：value：必需。填充的值；
start：可选。开始填充位置；
end：可选。停止填充位置 (默认为 array.length)。

• copyWithin() 用于从数组的指定位置拷贝元素到数组的另一个指定位置中数组内元素之间的替换。

array.copyWithin(target, start, end)
参数：target：必需。复制到指定目标索引位置。
start：可选。元素复制的起始位置。
end：可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

5.2 返回新数组的API

• contact() 将传入的数组或者元素与原数组合并，组成一个新的数组并返回。

• slice() 可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

• join() 将数组中的所有元素连接成一个字符串。

• indexOf() 用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。

• lastIndexOf() 用于查找元素在数组中最后一次出现时的索引，如果没有，则返回-1。

• includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

5.3数组遍历方法

• forEach()  指定数组的每项元素都执行一次传入的函数，返回值为undefined，会改变原数组，遍历过程中不能中断（比如用return，break等无法停止，可用try...catch..捕获错误）。

• map() 遍历数组，使用传入函数处理每个元素，并返回函数的返回值组成的新数组，不改变原数组，可以链式调用，无法跳出循环，可以定义一个变量在外面控制。

• filter() 筛选符合条件的元素，返回一个新数组。

• every() 使用传入的函数测试所有元素，每一个元素经传入的函数处理都返回true该方法才返回true,否则返回false（验证是否每一个元素都满足测试函数）。

• some() 使用传入的函数测试所有元素，只要有一个元素经传入的函数处理返回true该方法就返回true,否则返回false（验证是否有元素都满足测试函数）。

• reduce() 接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。

arr.reduce(function(prev,cur,index,arr){...}, init);
其中，
1. arr 表示将要原数组；
2. prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；
3. index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
4. init 表示初始值。

使用：

var arr = [3,9,4,3,6,0,9];

1. 求数组项之和

var sum = arr.reduce(function (prev, cur) {    
  return prev + cur;
},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项最大值

var max = arr.reduce(function (prev, cur) {    
  return Math.max(prev,cur);
});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

var newArr = arr.reduce(function (prev, cur) {       
  prev.indexOf(cur) === -1 && prev.push(cur);      
  return prev;
},[]);

• reduceRight() 接收一个方法作为累加器，数组中的每个值(从右至左) 开始合并，最终为一个值。

• find() 返回数组中第一个满足条件的元素， 如果没有，则返回 undefined。

• findIndex()  返回数组中第一个满足条件的元素的索引， 如果没有，则返回 -1。

• keys() 返回一个数组索引的迭代器。

• values() 返回一个数组迭代器对象，该对象包含数组中每个索引的值。

• entries() 返回一个数组迭代器对象，该对象包含数组中每个索引的键值对。

  
  

6. 数组转换

工作中常用的数组与字符串之间的转换。

6.1  toString()

　   该方法会返回数组各个项以逗号隔开的字符串。

var num = [1,2,3];
var numStr = num.toString();//"1,2,3"

6.2  join()

　　join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，没有指定分隔符的默认是","。

var num = [1,2,3];
num.join("$");//
"1$2$3"num.join();//"1,2,3"

6.3 split() 

      split() 方法用于把一个字符串分割成字符串数组。

语法：stringObject.split(separator,howmany)
参数：
separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany：可选。该参数可指定返回的数组的最大长度。

"2:3:4:5".split(":")  //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")  //将返回["", "a", "b", "c"]
"hello".split("", 3)  //可返回 ["h", "e", "l"]

7. 类数组对象arguments

7.1 arguments是什么

function showargs() {    
  console.log( arguments );
}
showargs(1,2,3,4,5);

由打印结果可知，类数组对象由length属性，callee属性以及__proto__指向Object。

7.2 arguments应用

• 函数不用给所有的形参指定参数名，通过参数名的方式获取参数了，我们可以直接使用arguments对象来获取实参。

• 利用arguments实现方法的重载

function add() {    
    var len = arguments.length,        
    sum = 0;    
    for(;len--;){        
      sum += arguments[len];    
    }    
    return sum;
}
console.log( add(1,2,3) );   //6
console.log( add(1,3) );     //4
console.log( add(1,2,3,5,6,2,7) );   //26

由于js是一种弱类型的语言，没有重载机制，当我们重写函数时，会将原来的函数直接覆盖，这里我们能利用arguments，来判断传入的实参类型与数量进行不同的操作，然后返回不同的数值。

7.3 利用arguments.callee实现递归

function factorial(num) {     
  if(num<=1) {         
    return 1;     
  }else {         
    return num * arguments.callee(num-1);     
  } 
}
factorial(3);   //6

7.4  类数组转数组

7.4.1 数组的slice方法

Array.prototype.slice.apply(arguments);  
Array.prototype.slice.call(arguments);   
//以上调用Array对象原型中的方法，所以需要prototype//而以下写法中[]是一个Array的实例，所以不需要prototype[].slice().apply(arguments);

7.4.2 数组的concat方法

Array.prototype.concat.apply(thisArg,arguments);

thisArg是空数组，apply方法将函数this指向thisArg，arguments做为类数组传参给apply。根据apply的方法的作用,即将Array.prototype.concat方法在指定的this为thisArg内调用，并将参数传给它。

7.4.3 es6的扩展运算符

...arguments;

--END--

未完待续......

一点一滴积累，一步一步前进。分享工作中遇到的问题和日常琐事，欢迎关注公众号：南山zwl和微信小程序。