一、数组常用方法二「这些方法会改变原有数组」

1.1、concat数组拼接

  1.         // 数组常用方法二：这些方法都会改变原来的数组
  2.         // concat: 数组拼接
  3.         var arr1 = [1, 2, 3, 4];
  4.         var arr2 = ['a', 'b', 'c', 'd'];
  5.         var res = null;
  7.         res = arr1.concat(arr2);
  8.         console.log(res);
  10.         res = arr2.concat(arr1);
  11.         console.log(res);

1.2、toString把数组转换为字符串

  1.         // toString：把数组转换为字符串
  2.         var arr1 = [1, 2, 3, 4, 5];
  3.         console.log(arr1.toString());
  5.         var arr2 = ['a', 'b', 'c', 'd'];
  6.         console.log(arr2.toString());

1.3、slice实现数组截取

  • 不传参数
  • 传一个参数
  • 传递两个参数

  • 传递负数参数

    1.       // slice：实现数组截取
    2.       var arr = [1, 2, 3, 4, 5, 6];
    3.       var res = null;
    5.       // 不传递参数，可以实现数组克隆
    6.       res = arr.slice();
    7.       console.log(res);
    9.       // 传递一个参数, 从该索引处截取到末尾「注意会包括该索引」
    10.       res = arr.slice(2);
    11.       console.log(res);
    13.       // 传递两个参数，从索引1开始「包含」，截取到索引4之前
    14.       res = arr.slice(1, 4);
    15.       console.log(res);
    17.       // 传递负数索引，从索引-4开始(包含)，截取到索引-1之前
    18.       res = arr.slice(-4, -1);
    19.       console.log(res);

    1.4、join按照指定分隔符把数组拆分成字符串

    1.       // join按照指定分隔符把数组拆分成字符串
    2.       var arr = [1, 2, 3, 4, 5];
    3.       var res = null;
    5.       res = arr.join('-');
    6.       console.log(res);
    8.       res = arr.join('^');
    9.       console.log(res);

    1.5、split把一个字符串变成数组「字符串方法」

  • 分隔符必须和字符串一样 ```javascript

    1.   // split：把一个字符串变成数组，分隔符必须和字符串的一致
    2.   var arr = [1, 2, 3, 4];
    3.   var res = null;
    5.   res = arr.join('+');
    6.   console.log(res);
    8.   console.log(res.split('+'));

    // 可以实现数组截取

    1.   console.log(res.split('+', 3));
  1. <a name="vUMOd"></a>
  2. # 二、类数组
  3. <a name="De95K"></a>
  4. ## 2.1、类数组基础知识
  6. - 类数组没有继承Array.prototype上的方法，所以不能直接使用数组原型上的方法
  7. - 元素集合HTMLCollction也是类数组
  8. - 类数组的原型是Object
  9. ```javascript
  10.         function func(){
  11.             console.log(arguments);
  12.         }
  14.         func(1, 2, 3, 4);

image.png

2.2、元素集合也是类数组

  1.     <div></div>
  2.     <div></div>
  3.     <div></div>
  5.     var oDiv = document.getElementsByTagName('div');
  6.     console.log(oDiv);

image.png

2.3、类数组借用数组原型上的方法

  1.         // 类数组借用数组原型上的方法
  2.         var obj = {
  3.             '2': 3,
  4.             '3': 4,
  5.             'length': 2,
  6.             'splice': Array.prototype.slice,
  7.             'push': Array.prototype.push
  8.         }
  10.         obj.push(1);
  11.         obj.push(2);
  13.         console.log(obj);

将方法写到对象原型上

  1.         var obj = {
  2.             '2': 3,
  3.             '3': 4,
  4.             'length': 2,
  5.         }
  7.         Object.prototype.splice = Array.prototype.splice;
  8.         Object.prototype.push = Array.prototype.push;
  10.         obj.push(1);
  11.         obj.push(2);
  13.         console.log(obj);

2.4、类数组继承数组push方法后如何实现push方法的

  1.         // 注意这里有面试题：类数组继承数组push方法后，是如何实现push方法的
  2.         var obj = {
  3.             '2': 3,
  4.             '3': 4,
  5.             'length': 2,
  6.         }
  8.         Object.prototype.splice = Array.prototype.splice;
  9.         Object.prototype.push = Array.prototype.push;
  11.         // 类数组继承数组push方法后，是如何实现push方法的
  12.         Array.prototype.push = function(elem){
  13.             obj[obj.length] = elem;
  14.             obj.length++;
  15.         }
  17.         obj.push(5);
  18.         obj.push(100);
  19.         console.log(obj);

三、一道关于类数组的阿里面试题

  1.         // 一道关于类数组的阿里面试题
  2.         var obj = {
  3.             '2': 3,
  4.             '3': 4,
  5.             'length': 2,
  6.             'splice': Array.prototype.splice,
  7.             'push': Array.prototype.push
  8.         }
  10.         obj.push(1);
  11.         obj.push(2);
  13.         console.log(obj);
  14.         console.log(obj.length);
  16.         // 类数组继承数组原型push方法后，是如何实现push方法的
  17.         Array.prototype.push = function(elem){
  18.             this[this.length] = elem;
  19.             this.length++;
  20.         }

四、对象有length属性且属性名是数组的才算类数组

  1.         // 对象有length属性且属性名是数组的才算类数组
  2.         var obj1 = {
  3.             '0': '张一',
  4.             '1': '张二',
  5.             '2': '张三',
  6.             'age': 18,
  7.             'height':170,
  8.             'length': 2 // 这里指的是类数组的长度
  9.         }
  11.         var obj2 = {
  12.             '0': 1,
  13.             length: 1
  14.         }

五、类数组借用数组原型方法和循环类数组

  1.         // 对象有length属性且属性名是数组的才算类数组
  2.         var obj1 = {
  3.             '0': '张一',
  4.             '1': '张二',
  5.             '2': '张三',
  6.             'age': 18,
  7.             'height':170,
  8.             'length': 2 // 这里指的是类数组的长度
  9.         }
  11.         var obj2 = {
  12.             '0': 1,
  13.             length: 1
  14.         }
  16.         // 类数组借用数组原型上的方法
  17.         Object.prototype.push = Array.prototype.push;
  18.         Object.prototype.splice = Array.prototype.splice;
  20.         // 循环类数组
  21.         for(var key in obj1){
  22.             // 排除原型链上自定义的属性或者是方法
  23.             if(obj1.hasOwnProperty(key)){
  24.                 console.log(obj1[key]);
  25.             }
  26.         }

六、作业