js数组

数组的创建

字面量方式

1. 直接赋值
   var a = [1, 2, 3]；// [1,2,3]

2. 构造器（new Array === Array）
   var a = Array(3); // [ , , ];只传一个参数的时候是指明数组长度；
   var a = new Array(1,2,3); //[1,2,3];

ES6的方法

1. Array.of()：返回所有参数组成的数组/空数组；
   let a = Array.of(3); //[3];
   解决上面构造器因参数个数不同导致的差异问题；

2. Array.from()：将对象转为真正的数组，不改变原对象，返回新的数组；

• 可以转化的对象
  • 拥有length属性的对象；
  • 有Iterator接口的数据结构的对象：Array／Map／Set／String／TypedArray／函数的arguments对象／NodeList对象；
• 参数
  • 第一个参数(必需)：要转换为真正数组的对象（以上那两类）；
  • 第二个参数(可选)：类似数组的map方法，对每个元素进行处理，将处理后的结果作为返回的值；
  • 第三个参数(可选)：绑定this；

let obj = {0: 'a', 1: 'b', length: 2}; //具有length属性
let arr = Array.from(obj); //['a', 'b']
let arr = Array.from('ha'); //['h', 'a']，字符串具有Iterator接口；

---

数组的方法

改变原数组的方法

1. ES5

• array.splice(index[,howmany,item1,.....,itemX])：添加/删除数组元素，返回空数组/被删除的元素组成的数组；
  • 参数
    • index(必需)：整数，添加/删除项目的位置，若为负数从数据尾部处规定位置；
    • howmany(可选)：整数，要删除的项目数量，数组元素如果不够会删除到最后一个元素为止；
    • item1,...itemX(可选)：向项目添加的新元素，在index前面添加；

//删除元素
let a = [1, 2, 3];
let b = a.splice(-1, 3); //b:[3], a:[1,2]，因为-1是最后一个元素，只能删除3；
//删除并添加
let a = [1, 2, 3];
let b = a.splice(-2,1, 5); // b:[2], a:[1,5,3]，
//不删除只添加
let a = [1, 2, 3];
let b = a.splice(-2,0, 5); // b:[], a:[1,5,2,3]，

• array.sort([function])：对元素进行排序；

  • 参数(可选)
    • 默认情况：调用toString()方法将元素转为字符串后按字母升序排列
    • function(a,b)：比较函数，a/b是数组中要比较的两个元素：
    1. 若比较函数返回值<0，那么a排到b的前面；
    2. 若比较函数返回值=0，那么a和b的相对位置不变；

    3. 若比较函数返回值>0，那么a排到b的后面；

       
       结果为:[{name: 'lily', name: 'lily', name: 'bob', name: 'alice'}]

• array.pop()：删除数组中的最后一个元素，并返回被删除的这个元素；

• array.push(item1...)：在数组末尾添加一个或多个元素item1...返回新的数组长度；

• array.shift()：删除数组中的第一个元素，并返回被删除的这个元素；

• array.unshift(item1...)：在数组开头添加一个或多个元素item1...返回新的数组长度；

• array.reverse()：颠倒数组中元素的顺序；

2. ES6

• array.copyWithin(index[, start = 0, end = this.length])：复制start到end-1的元素从index处开始替换，并返回这个数组，数组的长度不会改变，即读了几个元素就从index处替换几个元素；
  • index(必需)：从这个位置开始替换数据，若为负数，则和数组长度相加换为正数；
  • start(可选)：开始读取数据的位置，若为负数，则和数组长度相加换为正数；
  • end(可选)：停止读取数据的位置+1，默认为数组长度，若为负数，则和数组长度相加换为正数；
    [1,2,3,4].copyWithin(0,-3,-1); //[2,3,3,4]
• array.fill(target, start, end)：使用target替换掉start到end-1的元素；
  • target(必需)：要填充数组的值；
  • start(可选)：填充的开始位置，默认值是0,若为负数，则和数组长度相加换为正数；；
  • end（可选）：填充结束的位置，默认值是数组的长度,若为负数，则和数组长度相加换为正数；；

[1,2,3].fill('a'); // ['a', 'a', 'a']
[1,2,3,4].fill(0, -3, -1); //[1,0,0,4]

• copyWithin()与fill()都是替换，只是一个用start到end-1的值去替换，一个用target的值去替换start到end-1的值 *

---

不改变原数组的方法

1. ES5

• array.slice(start, end)：浅拷贝(只拷贝栈内的值)start到end-1的数组元素到一个新的数组。并返回新的数组；
  • 元素是简单数据类型：新旧数组互相不干扰；
  • 元素是复杂数据类型(对象/数组等)：栈内是复杂数据类型的地址，新旧数组都指向同一个堆—新旧数组其中一个改变，另一个也会改变；

let a = {name: 'lily'};
let b = a.slice(); //a/b:{name: 'lily'}
b.name = 'bob'; //a/b:{name: 'bob'};

string.slice()是提取字符串的

• array.join(str)：将数组转为字符串，元素之间通过str(默认逗号)分隔放进一个字符串；
  • 数组元素是数组：对里面的数组也调用join()；
  • 数组元素是对象：对象会被转为[object object]字符串；
    toString()方法也是符合上面的转换原则
    let s = [1, [2,3],4].join(); // s: "1,2,3,4"
• array.toLocalString()：数组转字符串,主要用在数组对象有Date类型的情况；
• array.toString()：数组转字符串，当数组和字符串操作时，js会调用这个方法将数组自动转为字符串再操作；不推荐
• array.concat(...arr)：合并两个或多个数组，返回一个新数组，ES6的扩展运算符(...)一样的效果；
  • arr：可以是具体的值，也可以是数组，可以是任意多个；
    ** 当合并嵌套数组，会浅拷贝嵌套数组**

let a = [1,[2]];
let b = [3].concat(a); // b:[3,1,[2]]
b[2].push(4);//a:[1,[2,4]]; b:[3,1,[2,4]];

• array.indexOf(element[, fromIndex=0])：从fromIndex处查找数组是否存在某个元素，返回下标/-1；不能识别NaN
  • fromIndex(可选)：查找的开始位置，若>=数组长度，不查找返回-1，若为负值则与数组长度相加再查找；
  • 使用场景：数组去重/获取元素下标对其操作/判断元素是否存在；
• array.lastIndexOf(element[, fromIndex=length-1])：从fromIndex处逆向查找，返回下标/-1；
  • fromIndex：若负值的绝对值大于数组长度，数组不会查找返回-1；

2. ES7

• array.includes(element[, fromIndex=0])：查找数组是否包含某个元素，返回boolean值；可以识别NaN
  [NaN].includes(NaN);//true

3. 遍历数组且不改变原数组的方法

• array.forEach()
  • 无法中途退出循环，只能return退出本次回调，进行下一次回调；
  • 即使return了一个值，最终返回undefined；
  • for..of可以通过break中途退循环
• array.every(function)：检测数组所有元素是否都符合判断条件；
  • 若数组中检测到一个元素不满足，则整个表达式返回false，且剩余的元素不再进行检测；
  • 若所有的元素都满足条件，则返回true；
    [1,2,3].every((item) => {return item > 2}); //false
• array.some(function)：检测数组是否存在元素符合判断条件；
  • 如果有一个元素满足条件，则表达式返回true, 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素，则返回false。
• array.filter(function)：返回一个新数组, 其包含通过所提供函数实现的测试的所有元素；
• array.map(function)：返回一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果；
• array.reduce(function，initialValue)：对数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。
• array.find()/array.findIndex()：根据条件查找数组成员/下标；可以识别NaN
• array.keys()/values()/entries()：遍历键名/键值/[键名,键值]的一个Array Iterator对象，结合for...of遍历取出其值；
  遍历