创建数组

推荐使用中括号直接创建数组。

new Array

  1. var arr = new Array();
  2. var arr = new Array(10); // 10为个数
  3. var arr = new Array(1,2,3,4); // 效果同var arr = [1,2,3,4];

[ ]

  1. var arr = [1,2,3,4];

增删元素

let number = [0,1,2,3,4,5,6,7,8,9];

添加元素

在数组末尾添加元素

  1. 1.
  2. numbers[numbers.length] = 10;
  4. 2.
  5. numbers.push(10,11);
  7. ***push改变数组，返回push后的长度***
  8. var arr = [1,2,3];
  9. var arr2 = arr.pus(4,5);
  10. console.log(arr); // [1,2,3,4,5];
  11. console.log(arr2); // 5

在数组开头添加元素

  1. 1.
  2. let number = [1, 2, 3, 4, 5, 6, 7];
  3. Array.prototype.insertFirstPosition = function (value) {
  4.   console.log("start", this);
  5.   for (let i = this.length - 1; i >= 0; i -= 1) {
  6.     this[i + 1] = this[i];
  7.   }
  8.   this[0] = value;
  9. };
  10. number.insertFirstPosition(-1);
  11. console.log(number);
  12. // [-1,1,2,3,4,5,6,7]
  14. 2.
  15. number.unshift(-1,0);
  17. ***unshift改变数组，unshift返回数组长度***
  18. const res = number.unshift(-1,0);
  19. console.log(number); // [-1, 0, 1, 2, 3, 4, 5, 6, 7]
  20. console.log(res); // 9

方法1知识点：若多数数组都需调用此方法，可直接将方法写入数组原型中，用this指代数组（注意，insertFirstPosition不能用箭头函数，因此箭头函数的this指向不为number数组。）

Tips: 使用splice添加元素
number.splice(2,4,9876,6789)，
从下标2的位置开始，删除4个，返回的值为被删除的这四个值**。
在下标2的位置开始，添加9876和6789

  1. let number = [1, 2, 3, 4, 5, 6, 7];
  2. const res = number.splice(2,4,9876,6789);
  3. console.log(res); // [3, 4, 5, 6]
  4. console.log(number); // [1, 2, 9876, 6789, 7]

删除元素

在数组末尾删除元素

  1. number.pop();
  3. ***pop改变数组，返res回被删除的那个值***
  4. const res = number.pop();
  5. console.log(number); // [1, 2, 3, 4, 5, 6]
  6. console.log(res); // 7,返回被pop的那个值。

tips: 使用splice删除末尾几个
若想删除末尾多个，可使用number.splice(-3)，来改变原数组，且根据返回值获取后三个值。
附：使用number.slice(-3)，不改变原数组，返回值为后三个值。

在数组开头删除元素

  1. number.shift();
  3. ***shift改变数组，res返回被删除的那个值***
  4. const res = number.pop();
  5. console.log(number); // [2, 3, 4, 5, 6, 7]
  6. console.log(res); // 1,返回被shift的那个值。

使用遍历移动数组：

  • 删除数组开头的元素，可使用遍历将数组全部后移一位，此时数组长度不变，会有一项为undefined，这时需要重新format数组，删除空值，增删都不建议使用遍历，推荐用数组方法。
  • delete运算符可以删除元素，但是delete number[0]，实质上是将number[0]置为undefined。

二维or多维数组

JavaScript不支持矩阵，但可以通过数组套数组，实现矩阵或任一多维数组。

  1. var arr = [];
  2. arr[0][0]=1; // VM2602:1 Uncaught TypeError: Cannot set property '0' of undefined
  4. arr[0] = [];
  5. arr[0][0] = 1;

JavaScript的数组方法参考

数组合并

不改变参与合并的数组本身，返回一个新数组。

  1. var a = [1,2,3];
  2. var b = [4,5,6];
  3. var c = [];
  5. var d = c.concat(a,b);
  7. console.log(a); // [1, 2, 3]
  8. console.log(b); // [4, 5, 6]
  9. console.log(c); // []
  10. console.log(d); // [1, 2, 3, 4, 5, 6]

快速复制一个数组 **arr.concat()**

迭代器函数

image.png

  1. var arr = [9,8,7,6,5,4,4,3,2,1,2,3,4,5,6,7,8,9];
  2. undefined
  3. arr.indexOf(7); // 2
  4. arr.lastIndexOf(7); // 15
  5. arr.toString(); // "9,8,7,6,5,4,4,3,2,1,2,3,4,5,6,7,8,9"
  6. arr.valueOf(); // [9,8,7,6,5,4,4,3,2,1,2,3,4,5,6,7,8,9]，结果上来看，和toString()不一样。

ES6的数组新特性

image.png

for…of

迭代中无法修改原数组，因此建议写成**const n in number**。

  1. let number = [1,2,3,4,5,6,7];
  2. for(const n of number) {
  3.   console.log(n % 2 === 0 ? 'even' : 'odd');
  4. }

使用@@iterator对象

  1. let number = [2,2,1,2,3,4,5,6,7];
  2. let iterator = number[Symbol.iterator]();
  4. iterator.next().value; // 2
  5. iterator.next().value; // 2
  6. iterator.next().value; // 1
  7. iterator.next().value; // 2
  8. iterator.next().value; // 3
  9. ...
  11. *** for..of此时可以结合iterator使用 ***
  12. let number = [2,2,1,2,3,4,5,6,7];
  13. let iterator = number[Symbol.iterator]();
  14. for(const n of iterator) {
  15.   console.log(n);
  16. }

entries/key/values （不同于Object的方法）

entries 返回包含键值对的@@iterator

  1. let myarr = [5,8,1,5,1,0,3];
  2. const entry = myarr.entries();
  3. console.log(entry); // Array Iterator {}
  5. entry.next().value; // [0, 5]
  6. entry.next().value; // [1, 8]
  7. entry.next().value; // [2, 1]
  8. entry.next().value; // [3, 5]
  10. *** 也可以使用for...of ***
  11. for(const n of entry) {
  12.   console.log(n);
  13. }

key 返回包含数组索引的@@iterator

  1. myarr; // [5, 8, 1, 5, 1, 0, 3]
  2. const keys = myarr.keys();
  3. console.log(keys); // Array Iterator {}
  5. keys.next() // {value: 0, done: false}
  6. keys.next() // {value: 1, done: false}
  7. keys.next() // {value: 2, done: false}
  8. keys.next() // {value: 3, done: false}
  9. keys.next() // {value: 4, done: false}
  10. keys.next() // {value: 5, done: false}
  11. keys.next() // {value: 6, done: false}
  12. keys.next() // {value: undefined, done: true},没有可迭代的值时会返回此结果。

values 返回包含数组的值的@@iterator

  1. myarr; // [5, 8, 1, 5, 1, 0, 3]
  2. const values = myarr.values();
  4. values.next(); // {value: 5, done: false}
  5. values.next(); // {value: 8, done: false}
  6. values.next(); // {value: 1, done: false}
  7. values.next(); // {value: 5, done: false}
  8. values.next(); // {value: 1, done: false}
  9. values.next(); // {value: 0, done: false}
  10. values.next(); // {value: 3, done: false}
  11. values.next(); // {value: undefined, done: true}

Array.from(arr,fun)

fun参数选填，是用来format数组的函数。

  1. const myarr = [2,1,5,7,1,2,1,6];
  2. const arrFrom = Array.from(myArr);
  4. arrFrom; // [2, 1, 5, 7, 1, 2, 1, 6]
  5. myArr; // [2, 1, 5, 7, 1, 2, 1, 6]
  7. *** Array.from(myArr, fun) ***
  8. let evens = Array.from(myArr, x => x%2 === 0);
  9. evens; // [true, false, false, false, false, true, false, true]
  10. myArr; // [2, 1, 5, 7, 1, 2, 1, 6]
  12. let evens = Array.from(myArr, x => x+1);
  13. evens; // [3, 2, 6, 8, 2, 3, 2, 7]

Array.of(…)

参数为一堆数值，而非一个数组

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

fill(n,index,endIndex)

填充数组，n为需要填充的内容，
index选填，表示开始替换的下标，
endIndex选填，为结束的下标，若有index，endIndex默认为填充到最后。
区间左闭右开。

  1. const arr = Array.of(1,2,3,4);
  2. arr; // [1, 2, 3, 4]
  3. arr.fill(0);
  4. arr; // [0, 0, 0, 0],虽然此处用了const,但因为是引用变量，此处可以成功修改。
  6. const arr = [9, 8, 7, 6, 5, 4, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  7. arr.fill(0,2,6);
  8. arr; // [9, 8, 0, 0, 0, 0, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9]

copyWithin

  1. let copyArray = [1, 2, 3, 4, 5, 6];
  2. copyArray.copyWithin(0, 3); // [4, 5, 6, 4, 5, 6]
  4. copyArray = [1, 2, 3, 4, 5, 6];
  5. copyArray.copyWithin(1, 3, 5);
  6. 这种情况下，会把从位置 3 开始到位置 5 结束的元素复制到位置 1，结果 是得到数组[1, 4, 5, 4, 5, 6]。

排序

反序

numbers.reverse();

自定义排序

数字排序，sort默认成字符串比较，直接sort()后11可能排在2前。

  1. numbers.sort((a, b) => a - b);
  2. 在 b 大于 a 时，这段代码会返回负数，反之则返回正数。如果相等的话，就会返回 0。也就是说返回的是负数，就说明 a 比 b 小，这样 sort 就能根据返回值的情况对数组进行排序。 之前的代码也可以表示成如下这样，会更清晰一些。
  1. let friends = [
  2.   { name: "John", age: 30 },
  3.   { name: "Ana", age: 20 },
  4.   { name: 'Chris', age: 25 },
  5. ];
  6. function comparePerson(a, b) {
  7.   if (a.age < b.age) {
  8.     return -1;
  9.   }
  10.   if (a.age > b.age) {
  11.     return 1;
  12.   }
  13.   return 0;
  14. }
  15. console.log(friends.sort(comparePerson));
  16. /*
  17.  ** res
  18.  [
  19.   { name: 'Ana', age: 20 },
  20.   { name: 'Chris', age: 25 },
  21.   { name: 'John', age: 30 }
  22. ]
  23. */

字符串排序

JavaScript 在做字 符比较的时候，是根据字符对应的 ASCII 值来比较的，导致大写的J会排在小写的a前面。
我们可在上方的sort中加入toLowerCase()，但无法区分A和a。
如果希望小写字母排在前面，那么需要使用 localeCompare 方法。

  1. names.sort((a, b) => a.localeCompare(b));
  2. // ["ana", "Ana", "john", "John"]

搜索

indexOf(value)、lastIndexOf(value)

indexOf(value); // index
lastIndexOf(value); // last index
找不到对应的值返回-1。

  1. const arr = [9, 8, 7, 6, 5, 4, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  3. arr.indexOf(7); // 2
  4. arr.lastIndexOf(7); // 15

ES6: find(fun)、findIndex(fun)

value作为参数会报错，参数为回调函数。
find(func);返回第一个满足条件的值，找不到返回undefined。
findIndex(fun);返回第一个满足条件的值的索引，找不到返回-1。

  1. arr;
  2. (18) [9, 8, 7, 6, 5, 4, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  3. arr.find(i => i%2 === 0); // 8
  4. arr.findIndex(i => i%2 === 0); // 1

ES7: includes(value)

includes(value,index)，查找index之后(包括index)是否存在value，
index选填，默认从头开始查找，存在这个元素返回true，不存在返回false。

  1. arr; // [9, 8, 7, 6, 5, 4, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  2. arr.includes(9); // true
  3. arr.includes(99); // false
  4. arr.includes(000000001); // true
  6. arr.includes(7,15); // true
  7. arr.includes(7,16); // false

arr.toString()和arr.join(‘’)

  1. arr.toString(); // "9,8,7,6,5,4,4,3,2,1,2,3,4,5,6,7,8,9"
  2. arr.join(); // "9,8,7,6,5,4,4,3,2,1,2,3,4,5,6,7,8,9"
  3. arr.join(''); // "987654432123456789
  4. arr.join('-'); // "9-8-7-6-5-4-4-3-2-1-2-3-4-5-6-7-8-9"

类型数组

let myArray = new TypedArray (length)，其中 TypedArray 需替换为下表所列之一。
image.png

  1. let length = 5;
  2. let int16 = new Int16Array(length);
  3. let array16 = []; array16.length = length;
  4. for (let i=0; i<length; i++){ int16[i] = i+1;
  5. }
  6. console.log(int16);

TS中的数组

  1. interface Person {
  2.   name: string;
  3.   age: number;
  4. }
  5. // const friends: {name: string, age: number}[];
  6. const friends = [
  7.   { name: 'John', age: 30 },
  8.   { name: 'Ana', age: 20 },
  9.   { name: 'Chris', age: 25 }
  10. ];
  11. function comparePerson(a: Person, b: Person) {
  12.   // comparePerson 函数的内容
  13. }