java script数组常见操作

Tip: 右键在新标签中打开查看清晰大图

下面介绍java script中的数组对象遍历、读写、排序等操作以及与数组相关的字符串处理操作

创建数组

• 一般使用数组字面量[]创建新数组，除非想要创建指定长度的数组

  // good
  var arr = [];
  var arr = ['red', 'green', 'blue'];
  var arr = [
      ['北京', 90],
      ['上海', 50], 
      ['广州', 50]
  ];
  
  // bad 
  var arr = new Object();

• 使用push()动态创建二维数组实例<ul id = "source"><li>北京空气质量：<b>90</b></li></ul>

  var sourceList = document.querySelector('#source');
  // 取得<ul>标签下所有<li>元素
  var lis = sourceList.querySelectorAll('li');
  // 取得<ul>标签下所有<b>元素
  var bs = sourceList.querySelectorAll('li b');
  var data = [];
  for (var i = 0, len = lis.length; i < len; i++) {
      // 法一：先对data添加一维空数组，使其成为二维数组后继续赋值
      data.push([]);
      // 分割文本节点，提取城市名字
      var newNod = lis[i].firstChild.splitText(2);
      data[i][0] = lis[i].firstChild.nodeva lue;
      // 使用+转换数字
      data[i][1] = +bs[i].innerHTML;
  
      // 法二：先对一维数组赋值，再添加到data数组中，使其成为二维数组
      var li = lis[i];
      var city = li.innerHTML.split("空气质量：")[0];
      var num = +li.innerText.split("空气质量：")[1];
      data.push([city,num]);
  }

  • String.prototype.split() 方法用于把一个字符串分割成字符串数组。 split() 方法不改变原始字符串。
    li.innerHTML.split("空气质量：")-----这个拆成的数组为["北京"，"90"]的数组，再取数组
    的第一项，即城市值。

  • Text.splitText()方法会将一个文本节点分成两个文本节点，原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点
  • querySelector()方法接收一个CSS选择符，返回与改模式匹配的第一个元素，如果没有找到，则返回null

  • querySelectorAll()方法接受一个CSS选择符，返回一个NodeList对象，如果没有找到，则为空

读取和设置

• 存取数组元素

  • 一维数组

    arr[下标索引]

  • 多维数组

    arr[外层数组下标][内层元素下标]

• length属性

  • 添加新项

    arr[array.length] = []

  • 清空数组或清除

    arr.length = 0 || (少于项数的数值)

  • 判断数组非空

    if(arr.length) {}

数组遍历

遍历数组不使用for in，for...in不能够保证返回的是按一定顺序的索引，因为数组对象可能存在数字以外的属性，这种情况下for in不会得到正确结果。
推荐使用forEach()方法,从首部开始遍历Array[index]，从末尾遍历Array[Array.length - index - 1]

• 使用传统的for循环

  for(var i = 0, len = arr.length; i < len; i++){}

• for...in

  for (var index in arrayObj){
      var obj = arrayObj[index];
  }   

• forEach()

  arr.forEach(function callback(currentValue, index, array) {
      //your iterator
  }[, thisArg]);

  • 应用

    data.forEach(function (item, index) {
        li = document.createElement('li');
        fragment.appendChild(li);
        li.innerHTML = '第' + digitToZhdigit(index + 1) + '名：' + item[0] + '空气质量：' + '<b>' + item[1] + '</b>';
    });
    
    const numbers = [1, 2, 3, 4];
    let sum = 0;
    
    numbers.forEach(function(numer) {
        sum += number;
    });
    console.log(sum);       

  引申1：在ES6中，可以使用let或const声明所有局部变量，不使用var关键字。默认使用const，除非需要重新分配变量。const用于声明常量，let是新的声明变量方式，具有块级作用域即由花括号封闭起来，这样就不用考虑各种嵌套下变量的访问问题了。

  var foo = true;
  if(foo) {
      let bar = foo*2；
      bar =something(bar);
      console.log(bar);
  }
  console.log(bar);  // RefenceError

  详情见https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md

  引申2：可以使用箭头函数=>写出更简短的函数
  MDN Arrow functions

  numbers.forEach(numer => {
  });

  引申3：apply()方法,调用一个函数，并具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。

  语法：fun.apply(thisArg, [argsArray])
  
  function SecialArray() {
      var arr = new Array();
      for(var i = 0, len = arr.length; i < len; i++){
          arr.push(arguments);
      }
      // 上面的for循环可以替换为
      // values.push.apply(values, arguments);
  }

  引申4：Array.prototype.slice.call(类数组)能将具有length属性的对象转换为数组 详细可以见文章Array-like Objects in java script和Array.prototype.slice.call()方法详解

  var testFunction = function() {
      var bars = [].slice.call(document.querySeletorAll('.bar'));
  }