(66)Wangdao.com第十一天_JavaScript 数组Array

时间  2019-11-08
标签 wangdao.com wangdao com 第十 一天 1天 javascript 数组 array 栏目 JavaScript 繁體版
原文   原文链接

数组 Array数组

本质上，数组属于一种特殊的对象。typeof 运算符会返回数组的类型是 object函数

  • 数组的特殊性体如今，它的键名是按次序排列的一组整数（0，1，2...） 
    // Object.keys方法返回数组的全部键名。

var arr = ['a', 'b', 'c'];
Object.keys(arr);    // ["0", "1", "2"]    // 能够看到数组的键名就是整数0、一、2。
  • 数组的键名其实也是字符串。之因此能够用数值读取，是由于非字符串的键名会被转为字符串
  • JavaScript 使用一个32位整数，保存数组的元素个数。这意味着，数组成员最多只有 4294967295 个（232 - 1）个，也就是说length属性的最大值就是 4294967295

与普通对象的区别是 "数组使用数字做为索引 [index] 来操做属性"。index 从 0 开始。性能

数组的存储性能相对较好。this

var arr = ['唐僧','孙悟空','猪八戒','沙和尚','白龙马'];spa

 

1. 建立数组对象prototype

  • var arr = new Array();    // typeof arr    返回 object

2. 给数组添加对象code

  • arr[0] = 1;     // console.log(arr)    打印 "1"
arr[1] = 11;    // console.log(arr)    打印 "1,11"
arr[2] = 22;    // console.log(arr)    打印 "1,11,22"

3. 读取数组对象对象

  • console.log(arr[0]);    // 1
console.log(arr[1]);    // 11
console.log(arr[2]);    // 22
console.log(arr[3]);    // undefined    不会报错

4. 获取数组长度blog

  • arr.length 老是返回  "最大索引值+1" ，因此尽可能避免建立不连续数组 
    var arr = [1,2,3];
console.log(arr.length);    // 返回 3 ，由于有 3 个元素 arr[0],arr[1],arr[2]

arr.[100] = 100;     // 此时数组有4个元素 arr[0],arr[1],arr[2],arr[100]
console.log(arr.length);    // 可是会返回 101 , 实际只有 4 个元素, 这四个元素之外的其余 97 个元素值都为 undefined, 且用 in 判断时返回 false
  • 清空数组的一个有效方法，就是将 arr.length属性设为 0 
    var arr = [ 'a', 'b', 'c' ];

arr.length = 0;
arr    // []

     

  • b
  • b
  •  

5. 在数组最后添加元素排序

  • // 根据上一个特性，能够在数组最后追加一个元素
arr[arr.length] = 666;

     

 

1. 使用字面量来建立数组

  • var arr = [];    // 和 new Array() 效果相同

2. 在建立时指定元素

  • var arr = [0,1,2,3,4];

// 等同于
var arr = new Array(0,1,2,3,4);

3. 建立一个只有一个元素的数组

  • var arr = [10];    // 此时数组只有1个元素，arr[0] = 10;


var arr = new Array(10);    // 此时建立了一个长度为10的数组！！！
// 每一个元素的值都为 undefined

4. 数组中元素能够听任意数据类型的数据

  •  

    var arr = ["Hello","How",1,2,3,null,undefined,true,false];

// 数组元素是对象
var sun = {name:"孙悟空"};
arr[arr.length] = sun;
console.log(arr[arr.length-1].name);    // 将会打印 "孙悟空"


// 数组元素是函数
var arr = [
    function(){console.log("Hello!"},
    function(){console.log("Hi!")}
];

// 数组 里面放 数组
var newArr = [["01","02","03"],[0,1,2],["11","22","33"]];

// 混合着放
var arr = [
  {a: 1},    // 对象
  [1, 2, 3],    // 数组
  function() {return true;}    // 函数
];

arr[0]    // Object {a: 1}
arr[1]    // [1, 2, 3]
arr[2]    // function (){return true;}

     

5. 遍历数组

  • for...in 循环不只能够遍历对象，也能够遍历数组，毕竟数组只是一种特殊对象 
    var a = [1, 2, 3];

for (var i in a) {
    console.log(a[i]);    // 1 2 3
}

     

  • 可是，for...in不只会遍历数组全部的数字键，还会遍历非数字键。因此，不推荐使用 for...in 遍历数组。 
    var a = [1, 2, 3];
a.foo = true;

for (var key in a) {
    console.log(key);    // 0 1 2 foo
    console.log(key);    // 1 2 3 true
}

     

  • 数组的遍历能够考虑使用 for循环 或 while循环 
    var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
    console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
    console.log(a[i]);
    i++;
}

// 逆向遍历
var l = a.length;
while (l--) {
    console.log(a[l]);
}

     

  • 数组的 arr.forEach() 方法，也能够用来遍历数组 
    var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
    console.log(color);    // red green blue
});

     

  • 数组的空位 hole        不影响length属性
    • 当数组的某个位置是空元素，即两个逗号之间没有任何值，咱们称该数组存在空位（hole）
    • 若是最后一个元素后面有逗号，并不会产生空位。也就是说，有没有这个逗号，结果都是同样的。 
      var a = ['a' , , 'c'];
a.length     // 3
      // 数组的空位是能够读取的，返回a[1]    // undefined
      a[2]    // 'c'

      undefined
      a[0] // 'a'
      a.length     // 3var a = [1, 2, 3,];
  • delete 命令删除一个数组成员，会造成空位，而且不会影响length属性 
    var a = [1, 2, 3];
delete a[1];

a[1]    // undefined
a.length    // 3

     

  • 数组的某个位置是空位，与某个位置是undefined，是不同的。
    • 若是是空位，使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历，空位都会被跳过。 
      var a = [, , ,];

a.forEach(function (x, i) {
    console.log(i + '. ' + x);    // 不产生任何输出
})

for (var i in a) {
    console.log(i);    // 不产生任何输出
}

Object.keys(a)    // []
    • 若是某个位置是 undefined，遍历的时候就不会被跳过 
      var a = [undefined, undefined, undefined];

a.forEach(function (x, i) {
    console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {
    console.log(i);    // 0 1 2
}

Object.keys(a)    // ['0', '1', '2']

       

6. 相似数组对象

  • 若是一个对象的全部键名都是正整数或零，而且有length属性，那么这个对象就很像数组，语法上称为“相似数组的对象”（array-like object）。 
    var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d')    // TypeError: obj.push is not a function
// 由于它们不具有数组特有的方法。
// 对象obj没有数组的push方法，使用该方法就会报错。

     

  • 有一个问题，这种length属性不是动态值，不会随着成员的变化而变化
  • 典型的“相似数组的对象”有 函数的arguments对象，以及大多数 DOM 元素集，还有字符串。
  • 数组的slice方法能够将 “相似数组的对象” 变成真正的数组 
    • var arr = Array.prototype.slice.call(arrayLike);

       

  • 经过call()，能够把 forEach() 嫁接到 arrayLike 上面调用
    • 如：在arguments对象上面调用forEach方法。 
      // forEach 方法
function logArgs() {
    Array.prototype.forEach.call(arguments, function (elem, i) {
        console.log(i + '. ' + elem);
    });
}

// 等同于 for 循环
function logArgs() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(i + '. ' + arguments[i]);
    }
}

       

  • 注意，这种方法比直接使用数组原生的forEach要慢，
  • 因此最好仍是先将“相似数组的对象”转为真正的数组，而后再直接调用数组的forEach方法。 
    var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
      console.log(chr);    // a b c
});

     

7. 数组的静态方法

  • Array.isArray()    判断变量是不是数组 
    var arr = [1, 2, 3];

typeof arr // "object"
Array.isArray(arr) // true

     

8. 数组的实例方法

  • .valueOf()    数组的 valueOf方法 返回数组自己。。。不一样对象的valueOf方法不尽一致
  • .toString()    数组的toString方法 返回数组的字符串形式
  • .push()    用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组 
    • var arr = [];

arr.push(1);    // 1
arr.push('a');    // 2
arr.push(true, {});    // 4

// arr = [1, 'a', true, {}]

       

  • .pop()    用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组 
    • var arr = ['a', 'b', 'c'];

arr.pop()    // 'c'

// arr = ['a', 'b']

      对空数组使用pop方法，不会报错，而是返回undefined

    • push和pop结合使用，就构成了“后进先出”的栈结构（stack）

 

  • .shift()    用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组
    • shift方法能够遍历并清空一个数组。 
      var list = [1, 2, 3, 4, 5, 6];
var item;

while (item = list.shift()) {
    console.log(item);
}

list     // []
    • push和shift结合使用，就构成了“先进先出”的队列结构（queue）

 

  • .unshift()    用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
    • unshift方法能够接受多个参数，这些参数都会添加到目标数组头部

 

  • .join()    以指定参数做为分隔符，将全部数组成员链接为一个字符串返回。若是不提供参数，默认用逗号分隔。 
    • var a = [1, 2, 3, 4];

a.join(' ');    // '1 2 3 4'
a.join(' | ');    // "1 | 2 | 3 | 4"
a.join();    // "1,2,3,4"
      [undefined, null].join('#') // '#' ['a',, 'b'].join('-') // 'a--b'

      若是数组成员是undefined或null或空位，会被转成空字符串

    • 经过call方法，这个方法也能够用于字符串或相似数组的对象 
      Array.prototype.join.call('hello', '-')    // "h-e-l-l-o"

var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-')    // 'a-b'

       

  • .concat()    用于多个数组的合并。
    • 它将新数组的成员，添加到原数组成员的后部，而后返回一个新数组，原数组不变
    • ['hello'].concat(['world']);    // ["hello", "world"]

['hello'].concat(['world'], ['!']);    // ["hello", "world", "!"]

[].concat({a: 1}, {b: 2});    // [{ a: 1 }, { b: 2 }]

[2].concat({a: 1});    // [2, {a: 1}]

       

    • 若是数组成员包括对象，concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是新数组拷贝的是对象的引用
      • 改变原对象之后，新数组跟着改变

 

  • .reverse()    颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组

 

  • .slice(start, end)    用于提取目标数组的一部分，返回一个新数组，原数组不变
    • 它的第一个参数为起始位置（从0开始），
    • 第二个参数为终止位置（但该位置的元素自己不包括在内）。若是省略第二个参数，则一直返回到原数组的最后一个成员
    • 若是slice方法的参数是负数，则表示倒数计算的位置
    • 若是第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。
    • var a = ['a', 'b', 'c'];
a.slice(-2);    // ["b", "c"]
a.slice(-2, -1);    // ["b"]

var a = ['a', 'b', 'c'];
a.slice(4);    // []
a.slice(2, 1);    // []

       

    • Array.prototype.slice().call()方法的一个重要应用，是 将相似数组的对象转为真正的数组 
      Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })    // ['a', 'b']

Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

       

  • .splice(start, count, addElement1, addElement2, ...)    
    • 用于删除原数组的一部分红员，并能够在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组
    • 第一个参数是删除的起始位置（从0开始），起始位置若是是负数，就表示从倒数位置开始删除。
    • 第二个参数是被删除的元素个数，
    • 若是后面还有更多的参数，则表示这些就是要被插入数组的新元素。
    • 若是只提供第一个参数，从起始位置开始，删除后面全部元素组成一个数组返回

 

  • .sort()    对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变
    • 数值会被先转成字符串，再按照字典顺序进行比较因此101排在11的前面
    • 若是想让sort方法按照自定义方式排序，能够传入一个函数做为参数
      • 函数自己接受两个参数，表示进行比较的两个数组成员。若是该函数的返回值大于0，表示第一个成员排在第二个成员后面；其余状况下，都是第一个元素排在第二个元素前面。 
        [10111, 1101, 111].sort(function (a, b) {
    return a - b;
});    // [111, 1101, 10111]
        [
    { name: "张三", age: 30 },
    { name: "李四", age: 24 },
    { name: "王五", age: 28  }
].sort(function (o1, o2) {
    return o1.age - o2.age;
});

// [
//     { name: "李四", age: 24 },
//     { name: "王五", age: 28  },
//     { name: "张三", age: 30 }
// ]

         

  • .map()    方法
    • 将数组的全部成员依次传入参数函数，
    • 而后把每一次的执行结果组成一个新数组返回。。。原数组没有变化 
      • var numbers = [1, 2, 3];

numbers.map(function (n) {
    return n + 1;
});    // [2, 3, 4]

numbers    // [1, 2, 3]

         

    • 该函数调用时，map方法向它传入三个参数：当前成员 elem、当前位置 index、数组自己 arr 
      • [1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});    // [0, 2, 6]

         

    • map方法还能够接受第二个参数，用来绑定回调函数内部的this变量 
      • var arr = ['a', 'b', 'c'];

[1, 2].map(function (e) {
    return this[e];
}, arr)    // ['b', 'c']

         

    • 若是数组有空位，map方法的回调函数在这个位置不会执行，会跳过数组的空位 (不会跳过不会跳过undefined和null) 
      • var f = function (n) { return 'a' };

[1, undefined, 2].map(f);    // ["a", "a", "a"]
[1, null, 2].map(f);    // ["a", "a", "a"]
[1, , 2].map(f);    // ["a", , "a"]

         

  • .forEach()    
    • 与map方法很类似，也是对数组的全部成员依次执行参数函数
    • 可是，forEach方法不返回值，只用来操做数据。
    • 这就是说，若是数组遍历的目的是为了获得返回值，那么使用map方法，不然使用forEach方法
    • 参数是一个函数，该函数一样接受三个参数：当前成员 elem、当前位置 index、数组自己 arr
    • forEach方法也能够接受第二个参数，绑定参数函数的 this 变量
    • forEach方法也会跳过数组的空位 , 不会跳过undefined和null
    • var out = [];

[1, 2, 3].forEach(function(elem) {
   this.push(elem * elem);
}, out);

out    // [1, 4, 9]

       

    • 注意 : 
      • forEach方法没法中断执行，老是会将全部成员遍历完。
      • 若是但愿符合某种条件时，就中断遍历，要使用for循环

 

  • .filter()    用于过滤数组成员，知足条件的成员组成一个新数组返回
    • 参数是一个函数，全部数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。 
      • [1, 2, 3, 4, 5].filter(function (elem) {
    return (elem > 3);
});    // [4, 5]    将大于3的数组成员，做为一个新数组返回


var arr = [0, 1, 'a', false];

arr.filter(Boolean);    // [1, "a"]    获取全部布尔值为true的成员

         

    • 函数能够接受三个参数：当前成员 elem、当前位置 index、数组自己 arr 
      • [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
    return index % 2 === 0;
});    // [1, 3, 5]

         

    • filter方法还能够接受第二个参数，用来绑定参数函数内部的this变量 
      • var obj = { MAX: 3 };
var myFilter = function (item) {
    if (item > this.MAX) return true;
};

var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj);    // [8, 4, 9]

         

  • .some() 和 every()
      • 这两个方法相似“断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件
      • 接受一个函数做为参数，全部数组成员依次执行该函数。而后返回一个布尔值
      • 该函数接受三个参数：当前成员 elem、当前位置 index、数组自己 arr
    • some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，不然返回false 
      • var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
    return elem >= 3;
});    // true

         

    • every方法是全部成员的返回值都是true，整个every方法才返回true，不然返回false 
      • var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
    return elem >= 3;
});    // false

         

    • 注意，对于空数组，some方法返回false，every方法返回true，回调函数都不会执行

 

  • .reduce()  和  .reduceRight()  
    • 依次处理数组的每一个成员，最终累计为一个值。
    • 它们的差异是 : 
      • reduce是从左到右处理（从第一个成员到最后一个成员）
      • reduceRight则是从右到左（从最后一个成员到第一个成员），其余彻底同样
    • // 求出数组全部成员的和
      [1, 2, 3, 4, 5].reduce(function (a, b) {
    console.log(a, b);
    return a + b;
});

// 1 2    第一次执行，    是数组的第一个成员，是数组的第二个成员
// 3 3    第二次执行，    为上一轮的返回值，为第三个成员
// 6 4    第三次执行，    为上一轮的返回值，为第四个成员
// 10 5   第四次执行，    为上一轮返回值，为第五个成员
//    最后结果：15a1b2a3b3a6b4a10b5

       

    • reduce() 和 reduceRight() 的第一个参数都是一个函数。该函数接受如下四个参数
      • 累积变量，默认为数组的第一个成员
      • 当前变量，默认为数组的第二个成员
      • 当前位置（默认从0开始）
      • 原数组
      • 只有前两个是必须的，后两个则是可选的
    • 若是要对累积变量指定初值，能够把它放在reduce方法和reduceRight方法的第二个参数 
      • [1, 2, 3, 4, 5].reduce(function (a, b) {
    return a + b;
}, 10);    // 25 // 指定参数a的初值为10，因此数组从10开始累加，最终结果为25。 // 注意，这时b是从数组的第一个成员开始遍历

         

    • 因为空数组取不到初始值，reduce方法会报错。这时，加上第二个参数，就能保证老是会返回一个值
    • function substract(prev, cur) {
    return prev - cur;
}
// 比较 reduce() reduceRight()
[3, 2, 1].reduce(substract) // 0
[3, 2, 1].reduceRight(substract) // -4

       

    • 还能够用来作一些遍历相关的操做。好比，找出字符长度最长的数组成员 
      • function findLongest(entries) {
    return entries.reduce(function (longest, entry) {
        return entry.length > longest.length ? entry : longest;
    }, '');
}

findLongest(['aaa', 'bb', 'c']);     // "aaa"

         

  • .indexOf()    返回给定元素在数组中第一次出现的位置，若是没有出现则返回-1
    • 还能够接受第二个参数，表示搜索的开始位置 
      var a = ['a', 'b', 'c'];

a.indexOf('b');    // 1
a.indexOf('y');    // -1

['a', 'b', 'c'].indexOf('a', 1);    // -1    结果为-1，表示没有搜索到

       

  • .lastIndexOf()    返回给定元素在数组中最后一次出现的位置，若是没有出现则返回-1
     
    • var a = [2, 5, 9, 2];
a.lastIndexOf(2);    // 3

      
a.lastIndexOf(7);    // -1
      [NaN].indexOf(NaN) // -1
      [NaN].lastIndexOf(NaN) // -1

       

    • 不能用来搜索NaN的位置，即它们没法肯定数组成员是否包含NaN

 

  • 有很多返回的仍是数组，因此能够链式使用 
    • var users = [
    {name: 'tom', email: 'tom@example.com'},
    {name: 'peter', email: 'peter@example.com'}
];

users
.map(function (user) {
    return user.email;
})
.filter(function (email) {
    return /^t/.test(email);
})
.forEach(function (email) {
    console.log(email);
});
// 先产生一个全部 Email 地址组成的数组，而后再过滤出以t开头的 Email 地址，最后将它打印出来
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程