从零开始学前端 - 13. JS数组Array常用方法属性

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

---

   一个变量只能储存一个值，当我们需要储存多个值时，就需要使用到数组。数组时值的有序集合，每一个值被称为数组的一个元素，这个元素在数组中的位置，被称为下标或索引。
   实际上，JS 并没有实际意义上的数组，所有的数组其实就是个对象，只不过键名为数字而已。

一、创建数组

  我们在前面提到，JS 是弱类型的脚本语言，所以他的数组可以是任意类型，且元素也可以是任意类型的值，并不要求数组和元素的类型必须一致，例：

• Java：首先声明数组为 int 类型，数组中的元素也只能是 int 类型，否则程序就会报错。

	int[] arr = {1,2,3,4,5};

• JS：可以存放任意类型的数据，且数组长度可以随时发生改变。

	var arr = [1, "a", true, undefined, null];

  上面的代码是创建数组的最简单办法，我们推荐使用这种方法创建数组。同时也可以通过调用构造函数 Array() 来创建数组，构造函数的调用方式有三种：

• 无参数：创建一个长度为零的空数组，

 	var  arr = new Array();			// 等价于 var arr = [];

• 一个参数：创建指定长度的数组，当预先知道所需元素个数时，可以使用该方法进行创建。使用这种方式时，数组在内存中预分配了一个空间，但没有储存值。所以数组为空，访问时得到的是 undefined。

	var arr = new Array(3)			// 等价于 var arr = [ , ,];

• 多个参数：

	var arr = new Array(1,2,3,4,5)		// 等价于 var arr = [1, 2, 3, 4, 5];

二、数组常用方法

1. Array.concat() 拼接数组

  语法：Array.concat(arr1,arr2...)
  作用：将多个数组拼接为一个新数组。
  实例：

	var arr = [1, 2, 3];
	var arr1 = [1, 4, 5];
	var arr2 = arr.concat(arr1);		// [1, 2, 3, 1, 4, 5]
	var arr3 = arr.concat(4);			// [1, 2, 3, 4]

• 返回值是一个新数组，不会修改原数组；
• 该方法不仅可以拼接数组对象，也可以是具体的值。。

2. Array.join() 数组转字符串

  语法：Array.join(separator)
  作用：返回一个使用指定分隔符将所有元素转换一个字符串。
  实例：

	var arr = [1, 2, 3, 4, 5];
    console.log(arr.join());        // 1,2,3,4,5
    console.log(arr.join("_"));     // 1_2_3_4_5

• 若不填写分隔符，默认使用,进行拼接；
• 不修改原数组，返回的是一个新的字符串；

3. Array.pop() 删除数组最后一项

  语法：Array.pop()
  作用：改变原数组，返回数组被删除的最后一项元素。
  实例：

	var arr = [1, 2, 3, 4, 5];
    var lastStr = arr.pop();        //  5

• pop()方法不仅删除了最后一项，同时会修改数组长度；
• 若数组为空，该方法的返回值为 undefined；
• 也可以使用 delete 操作符来删除数组元素，但之后删除数组的值，并不会改变数组长度。

4. Array.push() 向数组的末尾添加元素

  语法：Array.push(item1,item2...)
  作用：改变原数组，向数组的末尾添加一个或多个元素，并返回新的长度。
  实例：

	var arr = [1, 2, 3, 4, 5];
    var newLength = arr.push("a",6);        //  7

• push()方法，同时会修改数组长度；
• 若数组为空，该方法的返回值为 undefined；

5. Array.reverse() 反转数组

  语法：Array.reverse()
  作用：改变原数组，反转数组中元素的排列顺序。
  实例：

	var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.reverse();         //  [5, 4, 3, 2, 1]

6. Array.shift() 删除数组第一项

  语法：Array.shift()
  作用：改变原数组，返回数组被删除的第一项元素。
  实例：

	var arr = [1, 2, 3, 4, 5];
    var firstStr = arr.shift();        //  1

7. Array.slice() 截取数组

  语法：Array.slice(start , end)
  作用：从原数组中提取 start 到 end 间的元素，组成一个新数组返回。
  实例：

	var arr = [1, 2, 3, 4, 5];
    var arr2 = arr.slice(2);        // [3, 4, 5]
    var arr3 = arr.slice(-2);       // [4, 5]
    var arr3 = arr.slice(2,4);      // [3, 4]
    var arr3 = arr.slice(-4,-2);    // [2, 3]

• 若省略 end 参数，默认为 数组结尾；
• 若参数为负值，则表示倒数第 x 个元素；
• 提取的数组包括下标为 start 的元素，不包括下标为 end 的元素；

8. Array.sort()

  语法：Array.sort(callback)
  作用：按照 callback 的规则将原数组进行排序。
  实例：

    [10,1,20,2].sort()          // [1, 10, 2, 20]
	[2, 3, 1, 5, 4].sort(function (a, b) { return a - b; })         // [1, 2, 3, 4, 5]
	[2, 3, 1, 5, 4].sort(function (a, b) { return b - a; })         // [5, 4, 3, 2, 1]

  由 callback 决定排序规则，该函数接受两个参数 a 和 b 。参数 a 是数组的后一项，参数 b 为数组的前一项。

• callback 函数的返回值如果小于0，则位置互换。
• callback 函数的返回值如果大于等于0，则位置不变。
• 默认按照字符编码进行排序

9. Array.splice() 添加、替换、或删除数组

  语法：Array.splice(index,length,item1,item...)
  作用：修改原数组，返回值为删除元素组成的数组。
  实例：

// 删除
    var arr1_1 = [1, 2, 3, 4, 5];
    var arr1_2 = arr1_1.splice(0, 2);       
    console.log(arr1_1)         // [3,4,5]
    console.log(arr1_2)         // [1,2]

    var arr2_1 = [1, 2, 3, 4, 5];
    var arr2_2 = arr2_1.splice(2);
    console.log(arr2_1)         // [1,2]
    console.log(arr2_2)         // [3,4,5]

//  替换元素
    var arr3_1 = [1, 2, 3, 4, 5];
    var arr3_2 = arr3_1.splice(0,2,"a","b");
    console.log(arr3_1)         // ["a", "b", 3, 4, 5]
    console.log(arr3_2)         // [1, 2]

//  添加元素
    var arr4_1 = [1, 2, 3, 4, 5];
    var arr4_2 = arr4_1.splice(0,0,"a","b");
    console.log(arr4_1)         // ["a", "b", 1, 2, 3, 4, 5]
    console.log(arr4_2)         // []

• index 为必填参数，代表数组开始的下标
• length 为要操作的元素个数。如果省略 length，则表示从 index 开始到原数组结尾的所有元素；
• length 为 0 表示不删除元素，配合 item 参数可以实现插入功能；
• item为插入的元素，可以为多个。

10. Array.toString() 转为字符串

  语法：Array.toString()
  作用：返回一个数组转化的字符串，不修改原数组。
  实例：

    var arr = [1,2,3,4,5];
    var arr1 = arr.toString();      // 1,2,3,4,5

11. Array.unshift() 向数组的开头添加元素

  语法：Array.unshift()
  作用：向数组的开头添加一个或多个元素，返回数组的新长度。
  实例：

    var arr = [1,2,3,4,5];
    var newLength = arr.unshift("a","b")      // 7

三、JS稀疏数组

  稀疏数组就是索引不连续的数组，数组中大部分的位置都为空，仅有少部分元素有值。这样会造成内存空间的浪费，为了节省内存空间，并且不影响数组中原有的内容值，我们可以使用稀疏数组去压缩数据。
  文字解释可能看的不是很清晰，我们以五子棋为例：

  如果我们想要将棋盘数据储存起来，毫无疑问，数组是最好的储存方式。但因为有太多的地方还没有下旗子，所以存在很多的 0 ，记录了很多没有意义的数据。这里就可以使用稀疏数组来进行优化。

	var arr1 = [
		[0, 0, 0, 0, 0],
		[0, 0, 1, 0, 0],
		[0, 1, 0, 0, 0],
		[0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0]
	];
	
	var arr2 = [
		[5, 5, 2],			// 横 5 竖 5 2棋子
		[2, 1, 1],			// 横 2 竖 1 位置 有 1 棋子
		[1, 2, 1]			// 横 1 竖 2 位置 有 1 棋子
	]

  我们很直白的就能看出来两种存储方式的优劣，稀疏数组更多的是在数据结构和算法中应用较多，目前只做了解即可，如果工作遇到了类似的需求，在来学习相应的知识，目前只需有印象即可。

---

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

---

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。

都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。