JavaScript 学习笔记（Array篇）

Array 是JS应用最广的数据类型，这里做个总结：

• 创建：
  1） 构造函数

  var colors1 = new Array();
  var colors2 = new Array(20);//预先知道数量
  var colors3 = new Array("red", "blue", "green"); //知道应该包含的项
  var colors4 = Array(); // 可省略new
  

  2）数组字面量表示法

  var colors1 = [];
  var colors2 = ["red", "green", "blue"];
  

  • length 数组长度可以被赋值：

  arr.length = 3; //添加empty项，或删除之后的项
  arr[arr.length] = 3;
  arr[arr.length] = 4; //在数组最后添加新项
  

• 判断是否为数组
  (1) arrVar instanceof Array => true/false
  instanceof 针对一个全局环境好用，若网页存在多个框架<iframe>，每个框架的Array()构造函数不同就不好判断。
  (2) arrVar.constructor === Array => true/false
  同instanceof一样的问题（constructor容易被改写）
  (3) Array.isArray(arrVar) => true/false （ES5新增）
  不管全局环境的变化。最稳定可用
  (4) Object.prototype.toString.call(arrValue) => “[object Array]” 功能强大，还可判断Number， Function等具体类型

• 转换
  (1) alert(arr): alert 要接收字符串参数，因此在后台会自动调用Array 的 toString()方法，每项都转为String并用 ’ , ’ 隔开
  (2) arr.valueOf() 返回数组本身
  (3) 为arr内的每个元素定义toLocaleString()方法，则arr.toLocaleString() 就分别调用每项的toLocaleString() 用 ‘,’ 隔开。
  (4) arr.join(" || "): 返回arr String,与自定义的间隔符号

• 操作
  栈方法 LIFO
  (1) push(): 任意长度参数，逐个加到数组尾，返回新的数组长度
  (2) pop()：从数组尾弹出，返回移除的项，长度-1

  队列方法 FIFO
  (1) push(): 末尾添加
  (2) shift(): 移除数组第一项并返回该项， 长度-1

  unshift(): 从数组前端添加任意长度项，返回新的数组长度。(排在前面的参数加入后排在数组前面)【unshift() + pop() : 模拟反向队列】

• 重排序
  (1) arr.reverse(): 返回反向排列数组
  (2) arr.sort(): 先把每项转化为String, 按String升序排列
  (3) 比较函数排数字：arr.sort(compare);

  function compare(a, b){
  	return a - b; //升序
  	/*return b - a; 为降序*/
  }
  

• 操作方法
  (1) var arr3 = arr1.concat(item, arr2); 原数组不变，连接成新数组.
  (2) slice(start, end) 返回subarray, 不影响原数组, end < start 返回空。
  (3) splice() 向数组中插入项，原数组变化

  • 删除：splice(开始Index, 删除的项数)
  • 插入：splice(开始Index, 删除的项数，加入的项 )
  • 替换：删除+插入

  //arr的第3项换成“red”,“green”
  var newArr = arr.splice(2,1,"red","green");
  //newArr为被删除的项的数组
  

• 位置方法A
  (1) indexOf()：从前往后查找，返回第一次出现的index或 -1未找到, 参数为 (要查找的项 , 查找起始位置（Array前端）)
  (2) lastIndexOf() ：从后往前查找， 返回最后一次出现的index或 -1未找到, 参数为 (要查找的项 , 查找起始位置（Array后端）)

• 迭代方法：ES5 规定5种
  (1) every(function) : 对每项都运行函数function，若对每项都返回true，则返回true。

  array.every(function(currentValue,index,arr){} <, thisValue>)
  //function return Boolean
  

  (2) some(function)：对每项都运行函数function，若对任意一项返回true，则返回true。

  array.some(function(currentValue,index,arr){} <, thisValue>)
  //function return Boolean
  

  (3) filter(function): 对每项都运行函数function，返回对function返回true的项组成的数组。

  array.filter(function(currentValue,index,arr){} <, thisValue>)
  //function return Boolean
  

  (4) forEach(function)：对每项都运行函数function，无返回值

  array.forEach(function(currentValue, index, arr){} <, thisValue>)
  

  (5) map(function)：对每项都运行函数function，返回被function处理的结果组成的数组。

  array.map(function(currentValue,index,arr){} <, thisValue>)
  

• 归并方法
  (1) reduce() 从前往后
  (2) reduceRight() 从后往前
  参数为(function, 作为归并的基础值)
  function(前一项值，当前值，项的索引，数组对象)

  var sum = nums.reduce(function(prev, curr, index, array){
  	return prev + curr;
  })
  

以下为ES6新增方法：

1. ES6新增了Set, Map结构，可反应在数组操作：【Array.from()】将对象转化为数组

   //object key必须为index数字
   Array.from({ 0: "a", 1: "b", 2: "c", length: 3 }) //object转["a","b","c"]
   Array.from({0: "x", 1: "y", 2: "z", length: 3}, x => x+"n");//["xn", "yn", "zn"]	
   

2. 【Array.of()】将一组数值转为数组，弥补Array()的不足

   var arr = Array.of(1,2,3,4); // [1,2,3,4]
   Array(3); //[empty, empty, empty]
   

3. 【arrayInstance.find(()=>{})】:返回第一个符合条件(回调函数返回true)的数组元素

   [1, 3, -7, 4, 10].find((x)=> x>3); 	//4
   

   【arrayInstance.findIndex(function(value, index, arr) {})】:第一个符合条件的元素位置

   [1, 5, 10, 15].findIndex(function(value) {
   	 return value >= 5;
   }) // 1
   

   find & findIndex都弥补了indexOf()不能找到NaN的不足。

4. 【arrayInstance.fill()】:给定值填充数组

   	var array1 = [1,3,0];
   	// 从位置1开始填充5
   	console.log(array1.fill(5, 1)); // [1, 5, 5]
   	console.log(array1.fill(6)); // [6, 6, 6]
   

5. 【entries(); keys(); values() 可用for…of进行遍历数组的键值对，键， 值】

6. 【扩展运算符…】：将数组转化为用逗号分隔的参数序列，可运用于函数调用等。

   console.log(...[1,2,3,4]);	//1 2 3 4
   
   //函数调用
   function add(array, ...items){
   	array.push(...items);
   }
   let list = [1, 2];
   let toAdd = [3, 4, 5];
   add(list, ...toAdd); //list = [1,2,3,4,5]
   

7. 【includes(item <, 起始查找位置index>)】：检查数组中是否包含某项

   [1,2,3].includes(3);	//true
   [1,2,3].includes(4);	//false
   [1,2,3].includes(1, -1);	//false：从倒数第一位开始查1 =>没有
   
   [NaN].includes(NaN);	//true
   [NaN].indexOf(NaN);	//false: indexOf 使用‘===’严格查找，NaN !== NaN
   

8. 【flat() & flatMap()】:数组扁平化 (都返回新数组，原数组不变)

   1. flat(): 默认拉平一层， 可添加需拉平的层数为参数

      let res = [1,2,[3,4,[5]]].flat();	//res=[1,2,3,4,[5]]
      let res2 = [1,2,[3,4,[5]]].flat(2);	//res=[1,2,3,4,5]
      

   2. flatMap(): 对每个成员执行map函数, 形成二维数组，再用flat降成一维

      	let res = [2,3,4].flatMap((x)=>[x, x * 2]);
      	//相当于将[2,3,4] 转化为[[2, 4], [3, 6], [4, 8]] 再扁平化为 [2,4,3,6,4,8]
      	//res = [2,4,3,6,4,8]