介绍

  • 任何类型的数据，都可以放入数组
  1. var arr = [
  2.     1,
  3.     2,
  4.     'abc',
  5.     {p:1},
  6.     function(){
  7.         console.log(this.p);
  8.     }
  9. ]
  • 数组属于一种特殊的对象,键名是按次序排列的一组整数
  1. typeof [1, 2, 3]  //"object"
  3. var arr = ['a', 'b', 'c'];
  4. Object.keys(arr)
  5. //["0", "1", "2"]
  7. arr['0'] // 'a'
  8. arr[0] // 'a'
  10. a[1.00] = 6;
  11. a[1] // 6
  13. arr.0 // SyntaxError
  • length

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值

  1. var arr = [ 'a', 'b', 'c' ];
  2. arr.length // 3
  4. arr.length = 2;
  5. arr // ["a", "b"]
  6. arr.length = 0;
  7. arr // []

如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位
var a = ['a']; a.length = 3; a[1] // undefined

由于数组本质上是一种对象，所以可以为数组添加属性，但是这不影响length属性的值

var a = []; a['p'] = 'abc'; a.length // 0 a[2.1] = 'abc'; a.length // 0

in

  1. var arr = [ 'a', 'b', 'c' ];
  2. 2 in arr  // true
  3. '2' in arr // true
  4. 4 in arr // false
  6. var arr = [];
  7. arr[100] = 'a';
  8. 100 in arr // true
  9. 1 in arr // false

数组遍历

不要使用for in，它会把非数字键也遍历出来

  1. var arr = [1,2,3]
  2. arr.xxx = 'xxx'
  3. "xxx"
  4. arr.forEach(function(item){console.log(item)})
  5. VM406:1 1
  6. VM406:1 2
  7. VM406:1 3
  9. for(let a in arr){console.log(a)}
  10. VM478:1 0
  11. VM478:1 1
  12. VM478:1 2
  13. VM478:1 xxx

for

  1. for(var i = 0; i < a.length; i++) {
  2.   console.log(a[i]);
  3. }

while

  1. var i = 0;
  2. while (i < a.length) {
  3.   console.log(a[i]);
  4.   i++;
  5. }

foreach

  1. var colors = ['red', 'green', 'blue'];
  2. colors.forEach(function (color) {
  3.   console.log(color);
  4. });
  5. // red
  6. // green
  7. // blue

数组空位

  • 当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位

var a = [1, , 1]; a.length // 3

  • 如果最后一个元素后面有逗号，并不会产生空位

var a = [1, 2, 3,]; a.length // 3 a // [1, 2, 3]

  • 数组的空位是可以读取的，返回undefined

var a = [, , ,]; a[1] // undefined

  • 遍历空位都会被跳过,是undefined遍历的时候就不会被跳过
  1. var a = [, , ,];
  3. a.forEach(function (x, i) {
  4.   console.log(i + '. ' + x);
  5. })
  6. // 不产生任何输出
  8. var a = [undefined, undefined, undefined];
  9. a.forEach(function (x, i) {
  10.   console.log(i + '. ' + x);
  11. });
  12. // 0. undefined
  13. // 1. undefined
  14. // 2. undefined

类似数组的对象

典型的“类似数组的对象”是函数的arguments对象，以及大多数 DOM 元素集，还有字符串

  • 属性要为索引
  • 必须有length属性
  • 最好加上push方法
  1. var obj = {
  2.     0: 'a',
  3.     1: 'b',
  4.     2: 'c',
  5.     name: 'abc',
  6.     age: 123,
  7.     length: 3,
  8.     push: Array.prototype.push,
  9.     splice: Array.prototype.splice,
  10. }
  12. console.log(obj)
  1. // arguments对象
  2. function args() { return arguments }
  3. var arrayLike = args('a', 'b');
  5. arrayLike[0] // 'a'
  6. arrayLike.length // 2
  7. arrayLike instanceof Array // false
  9. // DOM元素集
  10. var elts = document.getElementsByTagName('h3');
  11. elts.length // 3
  12. elts instanceof Array // false
  14. // 字符串
  15. 'abc'[1] // 'b'
  16. 'abc'.length // 3
  17. 'abc' instanceof Array // false
  1. //通过call()，可以把forEach()嫁接到string上面调用
  2. Array.prototype.forEach.call('abc', function (chr) {
  3.   console.log(chr);
  4. });
  5. // a
  6. // b
  7. // c
  9. //数组的slice方法可以将“类似数组的对象”变成真正的数组
  10. var arr = Array.prototype.slice.call('abc');
  11. arr.forEach(function (chr) {
  12.   console.log(chr);
  13. });
  14. // a
  15. // b
  16. // c

嫁接方法比直接使用数组原生的forEach要慢，所以最好还是先将“类似数组的对象”转为真正的数组，然后再直接调用数组的forEach方法

数组操作

改变原数组

Array.prototype.push 最后增加
Array.prototype.unshift 开头增加
image.png

Array.prototype.pop 删除最后一位，
Array.prototype.shift 删除第一位

Array.prototype.reverse 翻转

Array.prototype.splice(第几位开始，截取长度，在切口处添加新数据) 

  1. var arr = [1, 2, 3, 4, 5, 6]
  3. // console.log(arr.splice(1, 2))//[2, 3]
  4. // console.log(arr)//[1, 4, 5, 6]
  6. // console.log(arr.splice(1, 2, 0, 0, 0)) //[2, 3]
  7. // console.log(arr) // [1, 0, 0, 0, 4, 5, 6]
  9. // console.log(arr.splice(3, 0, 10)) //[]
  10. // console.log(arr) //  [1, 2, 3, 10, 4, 5, 6]

Array.prototype.sort 排序 

  1. var arr = [1, 3, 5, 4, 10]
  3. //当返回值为负数时，那么前面的数放在前面,升序
  4. //为正数，那么后面的数在前 降序
  5. //为0 不动
  6. arr.sort(function(x, y) {
  7.     return x - y
  8. })
  9. console.log(arr)


不改变原数组

concat 连接数组 返回新数组
slice 返回截取的数组

  1. var arr = [1, 3, 5, 4, 10]
  2. //slice(从该位开始是截取，截取到该长度位)
  3. // console.log(arr.slice(2, 3)) //5
  4. //slice(从该位截取到最后)
  5. // console.log(arr.slice(1))//[3, 5, 4, 10]
  6. //slice(负数)倒着数
  7. console.log(arr.slice(-3)) //[5, 4, 10]
  8. //slice()截取整个数组

join(‘,’) 把数组里每一项用符号连接
split(‘,’) 分离字符串为数组

  1. var arr = [1, 3, 5, 4, 10]
  2. var arr1 = arr.join('-')
  3. console.log(arr1) //1-3-5-4-10
  4. console.log(arr1.split('-')) //['1', '3', '5', '4', '10']
  5. console.log(arr)//[1, 3, 5, 4, 10]

数组去重

  • 利用对象属性不能重复的特性
  • 利用ES6的set不能重复 ```javascript function distinctByObj(arr) { var obj = {} return arr.filter((item) => {
    1.   return obj[item] ? false : (obj[item] = 'abc')
    }) }

function distinctBySet(arr) { return Array.from(new Set(arr)) }

var arr = [1, 2, 3, 4, 3, 5, 4, ‘true’, ‘true’] var newArr = distinctByObj(arr) var newArr1 = distinctBySet(arr)

console.log(newArr1) //[1, 2, 3, 4, 5, ‘true’]

  1. 找到第一个不重复的
  2. ```javascript
  3. var a = 'opkhijpokhiajpokijhpokipohjkpojhkpohjkphbjpokopkijhkijhpo'
  5. function findSingleChar(str) {
  6.     var len = str.length
  7.     for (var i = 0; i < len; i++) {
  8.         var firStr = str.slice(i + 1)
  9.         var secStr = str.slice(0, i)
  10.         if (firStr.indexOf(str[i]) == -1 && secStr.indexOf(str[i]) == -1) {
  11.             return str[i]
  12.         } else {
  13.             continue
  14.         }
  15.     }
  16. }
  18. console.log(findSingleChar(a)) //a