JavaScript · 有关Array

2019-09-11

原型方法

  • join()

    var arr = [1,2,3];
    var str = arr.join('-');
    console.log(arr); // [1,2,3]
    console.log(str); // '1-2-3'
  • push()、pop()

    var arr = [1,2,3];
    var length = arr.push(8,9);
    console.log(length); // 5
    console.log(arr); // [1,2,3,8,9]
    var ele = arr.pop();
    console.log(ele); // 9
    console.log(arr); // [1,2,3,8]
  • shift()、unshift()

    var arr = [1,2,3];
    var ele = arr.shift();
    console.log(ele); // 1
    console.log(arr); // [2,3]
    var length = arr.unshift(0,1); // 在[2,3]基础上
    console.log(length); // 4
    console.log(arr); // [0,1,2,3]
  • indexOf()、lastIndexOf()

    var arr = [1,3,5,5,7,9];
    console.log(arr.indexOf(5)); // 2
    console.log(arr.lastIndexOf(5)); // 3
    console.log(arr.indexOf(5,2)); // 2
    console.log(arr.indexOf(5,3)); // 3
    console.log(arr.indexOf(5,4)); // -1
    console.log(arr.indexOf('5')); // -1
  • find()、findIndex()

    var arr = [1,3,5,7,9];
    arr.find((item,index) => item === 3); // 3
    arr.find((item,index) => index === 3); // 7
    arr.find((item,index) => item === 0); // undefined
    arr.find((item,index) => index === 5); // undefined
    arr.findIndex((item,index) => item === 5); // 2 
    arr.findIndex((item,index) => index === 2); // 2
    arr.findIndex((item,index) => item === 2); // -1
    arr.findIndex((item,index) => index === 5); // -1
  • keys()、values()、entries()

    let keys = [1,3,5].keys();
    for(let k of keys) {
        console.log(k);
    }
    // 0
    // 1
    // 2
    let values = [1,3,5].values();
    for(let v of values) {
        console.log(v);
    }
    // 1
    // 3
    // 5
    let entries = [1,3,5].entries();
    for(let e of entries) {
        console.log(e);
    }
    // [0,1]
    // [1,3]
    // [2,5]
  • reduce()、reduceRight()

    var arr = [1,2,3,4,5];
    var sum = arr.reduce((prev,cur,index,arr) => prev + cur);
    console.log(arr); // [1,2,3,4,5]
    console.log(sum); // 15
    var sub = arr.reduceRight((prev,cur,index,arr) => prev - cur);
    console.log(arr); // [1,2,3,4,5]
    console.log(sub); // -5
  • every()、some()

    var arr = [1,3,5,7];
    arr.every(item => item > 1); // false
    arr.every(item => item >= 1); // true
    arr.some(item => item > 1); // true
    arr.some(item => item > 9); // false
  • includes()

    var arr = [1,3,5];
    arr.includes(3); // true
    arr.includes(7); // false
    arr.includes('1'); // false
  • reverse()

    var arr = [1,3,5,7,9];
    var rev = arr.reverse();
    console.log(arr); // [9,7,5,3,1]
    console.log(rev); // [9,7,5,3,1]
  • sort()

    var arr = [2,11,7,9];
    var newArr = arr.sort((prev,cur) => {
      if(prev-cur > 0) {
          return 1;
      } else if(prev-cur < 0) {
          return -1;
      } else {
          return 0;
      }
    });
    console.log(arr); // [2,7,9,11]
    console.log(newArr); // [2,7,9,11]
  • concat()

    var arr1 = [1,2,3];
    var arr2 = [4,5];
    var newArr = arr1.concat(arr2);
    console.log(arr1); // [1,2,3]
    console.log(arr2); // [4,5]
    console.log(newArr); // [1,2,3,4,5]
    var arr3 = ['a','b'];
    var arr4 = [1,[2,3]];
    var newArr = arr3.concat(arr4);
    console.log(newArr); // ['a','b',1,[2,3]]
    var arr5 = ['A','B'];
    var newArr = arr5.concat(1,[2,3]); // ['A','B',1,2,3]
    console.log(newArr.length); // 5
  • slice()

    var arr = [1,3,5,7,9];
    var newArr = arr.slice(1,4);
    console.log(arr); // [1,3,5,7,9] 
    console.log(newArr); // [3,5,7]
  • splice()

    // 3个参数:起始index,要删除的项数,要插入的项
    var arr = [1,2,3,5,6,7];
    var del = arr.splice(4,1);
    console.log(del); // [6] 
    console.log(arr); // [1,2,3,5,7]
    var add = arr.splice(3,0,4);
    console.log(add); // []
    console.log(arr); // [1,2,3,4,5,7]
    var upd = arr.splice(4,2,5,6,7);
    console.log(upd); // [5,7]
    console.log(arr); // [1,2,3,4,5,6,7]
    // 可见:返回给del,add,upd的都是被删的项的数组
  • map()

    var arr = [1,2,3];
    var newArr = arr.map((item,index) => item * item);
    console.log(arr); // [1,2,3]
    console.log(newArr); // [1,4,9]
  • fill()

    // 以覆盖的方式填充
    // 3个参数:要填充的项,起始填充index,结束填充index (前闭后开)
    var arr = [1,2,3];
    var newArr = arr.fill(0,1);
    console.log(arr); // [1,0,0]
    console.log(newArr); // [1,0,0]
    var arr2 = [1,2,3,4,5];
    arr2.fill(0,1,1); // [1,2,3,4,5]
    arr2.fill(0,1,3); // [1,0,0,4,5]
    var arr3 = [1,2];
    arr2.fill(0,1,5); // [1,0,0,0,0]
  • filter()

    var arr = [1,2,3,4,5,6,7,8,9,10];
    var newArr = arr.filter((item,index) => {
        return item%3 === 0 && index > 2
    })
    console.log(arr); // [1,2,3,4,5,6,7,8,9,10]
    console.log(newArr); // [6,9]

    filter()、find()、map()三者作用完全不同,见文末补充

  • forEach()

    var arr = [1,2,3];
    var newArr = arr.forEach(item => item*2);
    console.log(arr); // [1,2,3]
    console.log(newArr); // undefined
    arr.forEach(item => console.log(item*item));
    // 1
    // 4
    // 9

Tips 1

  • 改变了原数组的方法(操作数组本身):
*   push():向末尾添加元素 / 返回添加后长度
*   pop():删除末尾的元素 / 返回删除的元素
*   shift():删除开头的元素 / 返回删除的元素
*   unshift():向开头添加元素 / 返回添加后长度
*   reverse():颠倒数组顺序 / 返回颠倒后数组
*   sort():按规则给数组排序 / 返回排序后数组
*   splice():删除、插入或替换数组元素 / 返回删除的元素的数组
*   fill():以覆盖方式填充数组 / 返回填充后数组
  • 不改变原数组的方法(构建新数组或判断数组元素):
*   join():
*   find()、findIndex():
*   indexOf()、lastIndexOf():
*   keys()、values()、entries():
*   every()、some()、includes():
*   reduce()、reduceRight():
*   concat()、slice()、map()、filter():
*   forEach():

Tips 2

  • filter()、find()、map()各自的作用
*   **filter()**:以当前数组为基,筛选出符合条件的元素,并构建一个新数组
    实例: `[1,2,3] -> [1,2]`
*   **find()**:找到数组中符合查询条件的第一个元素
    实例:`[1,2,3] -> 2`
*   **map()**:以当前数组为基,遍历数组,并对各元素执行map表达式,构建出一个新数组
    实例: `[1,2,3] -> [1,4,9]`

Tips 3

  • sort()的默认排序
*   `['Google','Apple','Microsoft'].sort(); // ['Apple','Google','Microsoft']`

解释:字符串按首字母的ASCII码进行排序

  • ['Google','apple','Microsoft'].sort(); // ['Google','Microsoft','apple']

解释:字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后

  • [10,20,1,2].sort(); // [1,10,2,20]

解释:sort()默认排序会先把所有元素转换成String再排序

对象属性

  • Array.from()

    // 根据伪数组对象或可迭代对象,返回包含这些元素的数组
    Array.from([1,3,5].values()); // [1,3,5]
    Array.from([1,3,5].keys()); // [0,1,2]
    Array.from([1,3,5].entries()); // [[0,1],[1,3],[2,5]]
    Array.from('123'); // ['1','2','3']
    Array.from([1,2,3]); // [1,2,3]
    Array.from(new Set([1,2,3])) // [1,2,3]
    Array.from(new Map([[1,2],[3,4],[5,6]])) // [[1,2],[3,4],[5,6]]
    Array.from('123',n => n*2) // [2,4,6]
    
    function func(){
      return Array.from(arguments)
    }
    func(1,2,3,4) // [1,2,3,4]
  • Array.of()

    // 根据给的元素,返回包含这些元素的数组
    Array.of(1);
    // [1]
    Array.of(1,2,3,4,5);
    // [1,2,3,4,5]
原文链接:segmentfault.com

上一篇:七牛文件上传的前后端部署
下一篇:纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部