JavaScript

Array

array.at

方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

  1. const array1 = [5, 12, 8, 130, 44];
  3. let index = 2;
  5. console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
  6. // expected output: "Using an index of 2 the item returned is 8"
  8. index = -2;
  10. console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
  11. // expected output: "Using an index of -2 item returned is 130"

array.concat

用于合并两个或更多个数组，此方法不改变现有的数组，而是返回一个新的数组。

  1. const array1 = ['a', 'b', 'c'];
  2. const array2 = ['d', 'e', 'f'];
  3. const array3 = array1.concat(array2);
  4. console.log(array3);
  5. // expected output: Array ["a", "b", "c", "d", "e", "f"]

array.copyWithin

用于将该数组的一部分覆写到另一部分上，用法：arr.copyWithin(target, start, end)

  1. const array1 = ['a', 'b', 'c', 'd', 'e'];
  3. // copy to index 0 the element at index 3
  4. console.log(array1.copyWithin(0, 3, 4));
  5. // expected output: Array ["d", "b", "c", "d", "e"]
  7. // copy to index 1 all elements from index 3 to the end
  8. console.log(array1.copyWithin(1, 3));
  9. // expected output: Array ["d", "d", "e", "d", "e"]

array.entries

用于获取数组的Iterator，但是比正常的多了当前的index

  1. const array1 = ['a', 'b', 'c'];
  3. const iterator1 = array1.entries();
  5. console.log(iterator1.next().value);
  6. // expected output: Array [0, "a"]
  8. console.log(iterator1.next().value);
  9. // expected output: Array [1, "b"]
  11. let iterator2 = array1[Symbol.iterator]();
  12. console.log(iterator2.next().value);
  13. // expected output: String "a"

array.every

传入一个方法，会遍历该数组到方法里，方法返回true或者false，只要有一个是false就返回false，用于检测该数组的内容是不是都符合某条件

  1. const isBelowThreshold = (currentValue) => currentValue < 40;
  3. const array1 = [1, 30, 39, 29, 10, 13];
  5. console.log(array1.every(isBelowThreshold));
  6. // expected output: true

array.fill

用于填充数组的指定段，用法：arr.fill(value[, start[, end]])

  1. const array1 = [1, 2, 3, 4];
  3. // fill with 0 from position 2 until position 4
  4. console.log(array1.fill(0, 2, 4));
  5. // expected output: [1, 2, 0, 0]
  7. // fill with 5 from position 1
  8. console.log(array1.fill(5, 1));
  9. // expected output: [1, 5, 5, 5]
  11. console.log(array1.fill(6));
  12. // expected output: [6, 6, 6, 6]

array.filter

用于过滤数组内容，传入一个方法，遍历数组到该方法里，方法返回true则将该元素放进新数组，然后返回新数组

  1. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
  2. const result = words.filter(word => word.length > 6);
  3. console.log(result);
  4. // expected output: Array ["exuberant", "destruction", "present"]

array.find

找到数组中第一个满足条件的元素并返回，如果没有满足的元素就返回undefined

  1. const array1 = [5, 12, 8, 130, 44];
  2. const found = array1.find(element => element > 10);
  3. console.log(found);
  4. // expected output: 12

array.findIndex

找到数组中第一个满足条件的元素的下标并返回，如果没有满足的元素就返回-1

  1. const array1 = [5, 12, 8, 130, 44];
  2. const isLargeNumber = (element) => element > 13;
  3. console.log(array1.findIndex(isLargeNumber));
  4. // expected output: 3

array.forEach

遍历数组，如果有第二个参数就绑定到第一个方法的this

  1. const array1 = ['a', 'b', 'c'];
  3. array1.forEach(element => console.log(element));
  5. // expected output: "a"
  6. // expected output: "b"
  7. // expected output: "c"

Array.from

生成一个新数组，还可以传入一个遍历的函数，对每个元素进行遍历操作，用法：Array.from(arrayLike[, mapFn[, thisArg]])

可转化Set和Map还有arguments为真实的数组

  1. console.log(Array.from('foo'));
  2. // expected output: Array ["f", "o", "o"]
  4. console.log(Array.from([1, 2, 3], x => x + x));
  5. // expected output: Array [2, 4, 6]
  7. Array.from({length: 5}, (v, i) => i);
  8. // [0, 1, 2, 3, 4]

array.includes

查询数组是否包含某元素

  1. const array1 = [1, 2, 3];
  2. console.log(array1.includes(2));
  3. // expected output: true
  4. const pets = ['cat', 'dog', 'bat'];
  5. console.log(pets.includes('cat'));
  6. // expected output: true
  7. console.log(pets.includes('at'));
  8. // expected output: false

array.indexOf

用于查询数组中第一个该元素的位置，没有该元素就返回-1，用法：arr.indexOf(searchElement[, fromIndex])，fromIndex可省，指定开始搜索的位置

  1. const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  2. console.log(beasts.indexOf('bison'));
  3. // expected output: 1
  4. // start from index 2
  5. console.log(beasts.indexOf('bison', 2));
  6. // expected output: 4
  7. console.log(beasts.indexOf('giraffe'));
  8. // expected output: -1

Array.isArray

用于判定传入的参数是否是数组，返回boolean

  1. Array.isArray([1, 2, 3]);  // true
  2. Array.isArray({foo: 123}); // false
  3. Array.isArray('foobar');   // false
  4. Array.isArray(undefined);  // false

array.join

用于将数组的内容拼成字符串，传入的参数就是分割符

  1. const elements = ['Fire', 'Air', 'Water'];
  2. console.log(elements.join());
  3. // expected output: "Fire,Air,Water"
  4. console.log(elements.join(''));
  5. // expected output: "FireAirWater"
  6. console.log(elements.join('-'));
  7. // expected output: "Fire-Air-Water"

array.lastIndexOf

返回给定的内容在数组中最后一次出现的位置，如果没有返回-1，用法：arr.lastIndexOf(searchElement[, fromIndex])，fromIndex可省，指定开始搜索的位置

  1. const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
  3. console.log(animals.lastIndexOf('Dodo'));
  4. // expected output: 3
  6. console.log(animals.lastIndexOf('Tiger'));
  7. // expected output: 1

Array.length

获取数组的长度，是一个32位整数

  1. const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];
  2. console.log(clothing.length);
  3. // expected output: 4

array.map

根据遍历函数的返回值返回一个新的数组

  1. const array1 = [1, 4, 9, 16];
  2. // pass a function to map
  3. const map1 = array1.map(x => x * 2);
  4. console.log(map1);
  5. // expected output: Array [2, 8, 18, 32]

Array.of

根据参数创建一个新数组，与直接new的差别在于对整数的处理，传入数字表示创建一个包含该数字的数组而不是创建一个长度为该数字的空数组

  1. Array.of(7);       // [7] 
  2. Array.of(1, 2, 3); // [1, 2, 3]
  4. Array(7);          // [ , , , , , , ]
  5. Array(1, 2, 3);    // [1, 2, 3]

array.pop

弹出数组的最后一个元素，返回该元素，同时会改变原数组

  1. const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
  2. console.log(plants.pop());
  3. // expected output: "tomato"
  4. console.log(plants);
  5. // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

array.push

向数组末尾添加一个元素，返回添加后的数组长度

  1. const animals = ['pigs', 'goats', 'sheep'];
  2. const count = animals.push('cows');
  3. console.log(count);
  4. // expected output: 4
  5. console.log(animals);
  6. // expected output: Array ["pigs", "goats", "sheep", "cows"]
  7. animals.push('chickens', 'cats', 'dogs');
  8. console.log(animals);
  9. // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

可以用这个模拟cancat，但是没什么用就是了

  1. var vegetables = ['parsnip', 'potato'];
  2. var moreVegs = ['celery', 'beetroot'];
  4. // Merge the second array into the first one
  5. // Equivalent to vegetables.push('celery', 'beetroot');
  6. Array.prototype.push.apply(vegetables, moreVegs);
  7. console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

array.reduce

执行传入的方法最终返回一个值，传入的方法有四个参数，依次是：累加器(acc)，当前遍历的值(cur)，当前遍历的下标(idx)，整个数组(src)，第二个参数是一个初始的默认值，可以不加

  1. const array1 = [1, 2, 3, 4];
  2. const reducer = (accumulator, currentValue) => accumulator + currentValue;
  4. // 1 + 2 + 3 + 4
  5. console.log(array1.reduce(reducer));
  6. // expected output: 10
  8. // 5 + 1 + 2 + 3 + 4
  9. console.log(array1.reduce(reducer, 5));
  10. // expected output: 15

array.reduceRight

和上边一样，不过是从右边开始遍历

  1. const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  2.   (accumulator, currentValue) => accumulator.concat(currentValue)
  3. );
  5. console.log(array1);
  6. // expected output: Array [4, 5, 2, 3, 0, 1]

array.reverse

反转整个数组`

  1. const array1 = ['one', 'two', 'three'];
  2. console.log('array1:', array1);
  3. // expected output: "array1:" Array ["one", "two", "three"]
  5. const reversed = array1.reverse();
  6. console.log('reversed:', reversed);
  7. // expected output: "reversed:" Array ["three", "two", "one"]
  9. // Careful: reverse is destructive -- it changes the original array.
  10. console.log('array1:', array1);
  11. // expected output: "array1:" Array ["three", "two", "one"]

注意：这个方法会改变原数组

array.shift

弹出数组的第一个元素，会改变原数组的长度

  1. const array1 = [1, 2, 3];
  3. const firstElement = array1.shift();
  5. console.log(array1);
  6. // expected output: Array [2, 3]
  8. console.log(firstElement);
  9. // expected output: 1

array.slice

获得数组某一段的浅拷贝，用法：arr.slice([begin[, end]])

  1. const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  3. console.log(animals.slice(2));
  4. // expected output: Array ["camel", "duck", "elephant"]
  6. console.log(animals.slice(2, 4));
  7. // expected output: Array ["camel", "duck"]
  9. console.log(animals.slice(1, 5));
  10. // expected output: Array ["bison", "camel", "duck", "elephant"]

array.some

和array.every相反，传入一个方法，会遍历该数组到方法里，方法返回true或者false，只要有一个是true就返回true，用于检测该数组是不是有符合某条件的元素

  1. const array = [1, 2, 3, 4, 5];
  3. // checks whether an element is even
  4. const even = (element) => element % 2 === 0;
  6. console.log(array.some(even));
  7. // expected output: true

array.sort

用于进行数组排序，可以传入自定义排序函数，默认情况下是转成UTF-16比较首字符进行排序的，会改变原数组

  1. const months = ['March', 'Jan', 'Feb', 'Dec'];
  2. months.sort();
  3. console.log(months);
  4. // expected output: Array ["Dec", "Feb", "Jan", "March"]
  6. const array1 = [1, 30, 4, 21, 100000];
  7. array1.sort();
  8. console.log(array1);
  9. // expected output: Array [1, 100000, 21, 30, 4]
  11. var numbers = [4, 2, 5, 1, 3];
  12. numbers.sort(function(a, b) {
  13.   return a - b;
  14.   // 如果大于0将a后移，如果小于0将b后移
  15. });
  16. console.log(numbers);
  18. // [1, 2, 3, 4, 5]

array.splice

用于替换数组中某一部分

  1. const months = ['Jan', 'March', 'April', 'June'];
  2. months.splice(1, 0, 'Feb');
  3. // inserts at index 1
  4. console.log(months);
  5. // expected output: Array ["Jan", "Feb", "March", "April", "June"]
  7. months.splice(4, 1, 'May');
  8. // replaces 1 element at index 4
  9. console.log(months);
  10. // expected output: Array ["Jan", "Feb", "March", "April", "May"]

array.toString

将数组转化成字符串

  1. const array1 = [1, 2, 'a', '1a'];
  3. console.log(array1.toString());
  4. // expected output: "1,2,a,1a"

array.unshift

将一个或者多个元素添加到数组的开头，并返回改变后的数组长度

  1. const array1 = [1, 2, 3];
  3. console.log(array1.unshift(4, 5));
  4. // expected output: 5
  6. console.log(array1);
  7. // expected output: Array [4, 5, 1, 2, 3]

array.keys

返回一个数组下标的迭代器

  1. const array1 = ['a', 'b', 'c'];
  2. const iterator = array1.keys();
  3. for (const key of iterator) {
  4.   console.log(key);
  5. }
  6. // expected output: 0
  7. // expected output: 1
  8. // expected output: 2

对于空元素Array.keys和Object.keys不太一样

  1. var arr = ['a', , 'c'];
  2. var sparseKeys = Object.keys(arr);
  3. var denseKeys = [...arr.keys()];
  4. console.log(sparseKeys); // ['0', '2']
  5. console.log(denseKeys);  // [0, 1, 2]

array.values

返回一个数组内容的迭代器

  1. const array1 = ['a', 'b', 'c'];
  2. const iterator = array1.values();
  4. for (const value of iterator) {
  5.   console.log(value);
  6. }
  8. // expected output: "a"
  9. // expected output: "b"
  10. // expected output: "c"
  12. var a = ['w', 'y', 'k', 'o', 'p']; 
  13. var iterator = a.values();
  15. console.log(iterator.next().value); // w 
  16. console.log(iterator.next().value); // y 
  17. console.log(iterator.next().value); // k 
  18. console.log(iterator.next().value); // o 
  19. console.log(iterator.next().value); // p

语言   js      js 基础

本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！