JavaScript数组方法总结篇
# 一、数组预览图
# 二、会改变原数组的方法
# 2.1 push()
- 方法在数组的尾部添加一个或多个元素，并返回数组的长度
参数: item1, item2, …, itemX ,要添加到数组末尾的元素
let arr = [1,2,3];
let length = arr.push('末尾1','末尾2'); // 返回数组长度
console.log(arr,length)
// [1, 2, 3, "末尾1", "末尾2"] 5
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 数组的长度
# 2.2 pop()
- 方法删除数组的最后一个元素，减小数组长度并返回它删除的值
//组合使用push()和pop()能够用JavaScript数组实现先进后出的栈
let stack = [];
stack.push(1,2) // 返回长度2，这时stack的值是[1,2]
stack.pop() // 返回删除的值2，这时stack的值是[1]
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 从数组中删除的元素(当数组为空时返回undefined)。
# 2.3 unshift()
方法在数组的头部添加一个或多个元素，并将已存在的元素移动到更高索引的位置来获得足够的空间，最后返回数组新的长度
let arr = [3,4,5];
let length = arr.unshift(1,2); // 返回长度是5
console.log(arr, length)
//[1, 2, 3, 4, 5] 5
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 返回数组新的长度
# 2.4 shift()
方法删除数组的第一个元素并将其返回，然后把所有随后的元素下移一个位置来填补数组头部的空缺，返回值是删除的元素
let arr = [1,2,3];
let item = arr.shift(); // 返回删除的值1
console.log(arr, item)
// [2, 3] 1
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 从数组中删除的元素; 如果数组为空则返回undefined
# 2.5 splice()
方法是在数组中插入或删除元素的通用方法
// start不超过数组长度(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(2) // arr是[1,2]，返回值是[3,4,5]
arr.splice(1,1) // arr是[1]，返回值是[2]
arr.splice(0,3) // arr是[]，返回值是[1],因为此时数组从第0位开始不够3位，所以是删除从0开始到最后的所有元素。
// start大于数组长度(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(5) // arr是[1,2,3,4,5]，返回值是[]
arr.splice(5,3,6) // arr是[1,2,3,4,5,6]，返回值是[]
arr.splice(5,3,7) // arr是[1,2,3,4,5,7] 返回值是[6]
// start是负数(以下操作是连续的)
let arr = [1,2,3,4,5];
arr.splice(-3,2); // arr是[1,2,5], 返回值是[3,4]
arr.splice(-4); // arr是[],返回值是[1,2,5]
// 插入数组时，是插入数组本身，而不是数组元素
let arr = [1,4,5];
arr.splice(1,0,[2,3]) // arr是[1,[2,3],4,5]，返回值是[]
@前端进阶之旅: 代码已经复制到剪贴板
# 2.6 sort()
sort()方法将数组中的元素排序并返回排序后的数组
var stringArray = ["Blue", "Humpback", "Beluga"];
var numberArray = [40, 1, 5, 200];
function compareNumbers(a, b){
return a - b;
}
console.log('stringArray:' + stringArray.join());
console.log('Sorted:' + stringArray.sort());
console.log('numberArray:' + numberArray.join());
// 没有使用比较函数时，数字并不会按照我们设想的那样排序
console.log('Sorted without a compare function:'+ numberArray.sort());
console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers));
//打印如下
// stringArray: Blue,Humpback,Beluga
// Sorted: Beluga,Blue,Humpback
// numberArray: 40,1,5,200
// Sorted without a compare function: 1,200,40,5
// Sorted with compareNumbers: 1,5,40,200
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 返回排序后的数组。原数组已经被排序后的数组代替
# 2.7 reverse()
方法将数组中的元素颠倒顺序，返回逆序的数组
let arr = [1,2,3];
arr.reverse() // arr是[3,2,1]，返回值是[3,2,1]
@前端进阶之旅: 代码已经复制到剪贴板
返回值： 返回顺序颠倒后的数组。原数组已经被排序后的数组代替
# 2.8 fill()
方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
arr.fill(value[, start[, end]])
@前端进阶之旅: 代码已经复制到剪贴板
value用来填充数组元素的值。start(可选) 起始索引，默认值为0。end(可选) 终止索引，默认值为 this.length。- 如果 start 是个负数, 则开始索引会被自动计算成为
length+start, 其中 length 是 this 对象的length属性值. 如果 end 是个负数, 则结束索引会被自动计算成为length+end
返回值： 修改后的数组
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5); // [1, 2, 3]
Array(3).fill(4); // [4, 4, 4]
//fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。
[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
@前端进阶之旅: 代码已经复制到剪贴板
# 三、不改变原数组的方法
# 3.1 slice()
方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改
- 返回值： 一个含有提取元素的新数组
let arr = [1,2,3,4,5];
let arr1 = arr.slice(1,3); // arr是[1,2,3,4,5]， arr1是[2,3]
let arr2 = arr.slice(-2,-1); // arr是[1,2,3,4,5], arr2是[4]
// 开始位置在结束位置后面，得到的数组是空
let arr3 = arr.slice(-2, -3); // arr是[1,2,3,4,5], arr3是[]
let arr4 = arr.slice(2, 1); // arr是[1,2,3,4,5], arr4是[]
//如果元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
let arr = [{name: 'xiaoming'}];
let arr1 = arr.slice(); // arr是[{name: xiaoming}]，arr1是[{name: 'xiaoming'}]
arr1[0].name = 'xiaogang'; // arr是[{name: 'xiaogang'}]，arr1是[{name: 'xiaogang'}]
// 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。
let arr = [1,2,3];
let arr1 = arr.slice(); // arr是[1,2,3]，arr1是[1,2,3]
arr1[1] = "two"; // arr是[1,2,3]，arr1是[1,"tow",3]
// 当然，如果向两个数组任一中添加了新元素（简单或者引用类型），则另一个不会受到影响
@前端进阶之旅: 代码已经复制到剪贴板
# 3.2 join()
方法将数组（或一个类数组对象）中所有元素都转化为字符串并连接在一起，返回最后生成的字符串
- 返回值： 一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串
let num = [1,2,3];
let str1 = num.join(); // 1,2,3
let str2 = num.join(', ') // 1, 2, 3
let str3 = num.join('') // 123
//所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null， 则会转化成空字符串。
let num = [1,null,3];
let str1 = num.join(); // 1,,3
//如果数组中的元素是数组，会将里面的数组也调用join()
let num = [[1,2],3];
let str1 = num.join('-'); // 1,2-3
// 如果数组中的元素是对象，对象会被转为[object Object]字符串
let num = [{num: 1},2,3];
let str1 = num.join('-'); // [object Object]-2-3
@前端进阶之旅: 代码已经复制到剪贴板
// 扁平化简单的二维数组
const arr = [11, [22, 33], [44, 55], 66];
const flatArr = arr.join().split(','); // ["11", "22", "33", "44", "55", "66"]
@前端进阶之旅: 代码已经复制到剪贴板
# 3.3 toString()
方法将数组的每个元素转化为字符串(如有必要将调用元素的
toString()方法)并且输出用逗号分割的字符串列表。返回一个字符串表示数组中的元素
注意： 当数组和字符串操作的时候，js 会调用这个方法将数组自动转换成字符串
[1,2,3]+'abc' //1,2,3abc
@前端进阶之旅: 代码已经复制到剪贴板
