封装数组的方法

标签（空格分隔）：未分类

push

/** 1: 封装一个函数，这个函数的名字叫做 push 2: 这个函数的参数，第一个是一个数组，第二个以后是任意的数据 3: 调用这个函数，那么会把第二个以后的所有参数，依次放到第一个参数也就是那个数组的最后一个位置。 4: 这个函数返回值，是放入这些数据之后数组的长度。 */
var arr = ['a','b','c'];
function push(arr){
    var arg = arguments;
    for(var i = 1; i<arg.length; i++){
        arr[arr.length] = arg[i];
    }
    return arr;
}

push(arr,1,2,3)
console.log(arr); // (6) ["a", "b", "c", 1, 2, 3]

封装 unshift（向第一个添加）

/** * 1 封装一个函数，这个函数的名字叫做 unshift * 2 这个函数的参数，第一个是一个数组，第二个以后是任意的数据 * 3 调用这个函数，那么会把第二个以后的所有参数，依次放到第一个参数也就是那个数组的开头的位置。 * 4 这个函数返回值，是放入这些数据之后数组的长度。 */

    function unshift(arr){
      var arg = arguments, len = arg.length;

      for(var j=1; j<len; j++){
        for(var i=arr.length; i>0; i--){
          arr[i] = arr[i-1];
        }
        arr[0] = arg[j];
      }

      return arr.length;
    }


    // -------------------------------
    var arr = [1, 2, 3];

    console.log(unshift(arr, 'a', 'b', 'c', 'd'));
    console.log(arr);

    // ===> [1, 1, 2, 3];

    // for(var i=arr.length; i>0; i--){
    // arr[i] = arr[i-1];
    // }

    // arr[3] = arr[2] ==> [1, 2, 3, 3];
    // arr[2] = arr[1] ==> [1, 2, 2, 3];
    // arr[1] = arr[0] ==> [1, 1, 2, 3];
    // arr[0] = 4; // ===> [4, 1, 2, 3]
    // 
    // console.log(arr);

pop（删除最后一个）

1 封装一个函数，名字叫做pop
2 pop函数的参数是唯一的数组
3 调用pop函数，删除数组中最后一个数据
4 如果这个数组是空，那么调用这个函数，返回值是 undefined
5 如果不是空数组返回值为被删除的数据

    // var arr = [1, 2, 3];

    function pop(arr){
      var len = arr.length, last = arr[len-1];
      if(!len) return;
      arr.length--;
      return last;
    }
    // console.log(pop(arr));  // 3
    // console.log(arr); // [1, 2]

shift (删除第一个)

1 封装一个函数，名字叫做 shift
2 shift函数的参数是唯一的数组
3 调用shift函数，删除数组中第一个数据
4 如果这个数组是空，那么调用这个函数，返回值是 undefined
5 如果不是空数组返回值为被删除的数据
···

function shift(arr){
  var len = arr.length, first = arr[0];
  if(!len) return;
  for(var i=0; i<len-1; i++){
    arr[i] = arr[i+1];
  }
  arr.length--;
  return first;
}
var arr = ['a', 'b', 'c'];

console.log(shift(arr));  // 'a'
console.log(arr);  // ['b', 'c']

indexOf

1 封装一个函数叫 indexOf
2 indexOf 函数的第一个参数为要查找的数组，第二个参数为要查找的数据
3 调用这个函数，如果要查找的数据未找到，那么函数的返回值为-1，如果找到那么返回这个数据的位置

function indexOf(arr, item){
  for(var i=0,len=arr.length; i<len; i++){
    if(arr[i] === item){
      return i;
    }
  }
  return -1;
}

var arr = [1, 2, 'a', 4];

console.log(indexOf(arr, 'a'));  // 2
console.log(indexOf(arr, 10));  // -1

spliceOne

1 封装一个函数叫做 spliceOne
2 该函数的第一个参数是数组，第二个参数是索引
3 调用这个函数，可以删除这个索引对应的数据
4 如果是空数组，那么返回undefined，否则返回这个被删除的数据


    function spliceOne(arr, index){
      var len = arr.length, ret = arr[index];
      if(!len) return;
      for(var i=index, j=i+1; j<len; i++,j++){
        arr[i] = arr[j];
      }
      arr.length--;
      return ret;
    }

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

    console.log(spliceOne(arr, 2));  // 3
    console.log(arr);  // [1, 2, 4];

join(将数组转换成字符串)

1 封装一个函数叫做 join
2 join函数的第一个参数是一个数组，第二个参数是分割符
3 调用join，那么数组中的每一项就会被指定的分割符链接起来，如果不指定分隔符，默认就是 ‘,’，如果分隔符传入的不是一个字符串，那么就返回false
4 返回值为字符串，原数组不变。

function join(arr, spliter){
  if(typeof spliter === 'undefined'){
    return arr.toString();
  }
  if(typeof spliter !== 'string'){
    return false;
  }
  for(var i=0, str='', len = arr.length; i<len; i++){
    str += i<len-1 ? arr[i] + spliter : arr[i];
  }
  return str;
}

var arr = [1, 2, 3];

console.log(join(arr));  // '1,2,3'
console.log(join(arr, '')); // '123'
console.log(join(arr, '--'));  //'1--2--3';
console.log(join(arr, 123));  // false

console.log(arr); // [1, 2, 3];

reverse(反转)

1 封装一个函数叫做reverse
2 该函数的参数是一个数组
3 调用这个函数，那么数组将会反转
4 返回反转后的数组

    function reverse(arr){
      var len = arr.length;
      if(len < 2) return arr;
      for(var i=0; i<len; i++){
        var indexA = i;
        var indexB = len - i - 1;
        if(indexA < indexB){
          var middle = arr[indexA];
          arr[indexA] = arr[indexB];
          arr[indexB] = middle;
        }
      }
      return arr;
    }

    var arr = [1, 2, 3];

    console.log(reverse(arr));  // [3, 2, 1]
    console.log(arr);  // [3, 2, 1]

filter

1 封装一个函数叫做filter
2 该函数的第一个参数是要过滤的数组，第二个参数是一个函数成为过滤函数
3 调用这个方法，会对数组进行遍历
4 每次遍历，都会把数组的当前这项和索引值当作参数传给过滤函数
5 这个过滤函数的规则一旦符合就返回这个值
6 filter函数最终返回所有符合条件的数据的集合，一个新数组。

    function push(arr){
      var arg = arguments, len = arg.length;
      for(var i=1; i<len; i++){
        arr[arr.length] = arg[i];
      }
      return arr.length;
    }

    function filter(arr, cb){
      var result = [], len = arr.length;
      for(var i=0; i<len; i++){
        var ret = cb(arr[i], i);
        if(ret){
          push(result, arr[i]);
        }
      }
      return result;
    }

    var arr = [11, 4, 7, 12, 17, 9];

    var result = filter(arr, function (item, i){
      console.log(i);
      return item > 10;
    });

    console.log(result);  // [11, 12, 17];

封装简单的css 函数

1 封装一个函数名字叫做css
2 这个函数的参数有3个，对应：元素、元素的样式、样式对应的值
3 如果只传前2个参数，那么是获取元素的样式，如果传了3个参数，那么是设置这个元素对应的样式。

var normalAttr = [
  'width',
  'height',
  'left',
  'top',
  'bottom',
  'right',
  'marginLeft',
  'marginTop',
  'marginBottom',
  'marginRight'
];
var box = document.querySelector('.box');
function indexOf(arr, item){
  for(var i=0,len=arr.length; i<len; i++){
    if(arr[i] === item){
      return i;
    }
  }
  return -1;
}

function css(ele, attr, val){
  // 如果attr是一个字符串并且val不存在，那么才是获取某个属性对应的值
  if(typeof val === 'undefined'){
    var ret = getComputedStyle(ele)[attr];

    // return indexOf(normalAttr, attr) !== -1 ? parseFloat(ret) : ret * 1 === ret * 1 ? ret*1 : ret;

    if(indexOf(normalAttr, attr) !== -1){
      return parseFloat(ret);
    }else{
      return ret * 1 === ret * 1 ? ret * 1 : ret;
    }

  }

  function setAttr(attr, val){
    if(indexOf(normalAttr, attr) !== -1){
      ele.style[attr] = val + 'px';
    }else{
      ele.style[attr] = val;
    }
  }

  // 批量设置
  if(typeof attr === 'object'){
    for(var key in attr){
      setAttr(key, attr[key]);
    }
    return;
  }

  setAttr(attr, val);
}
css(box,'background','yellow');

秒客网

封装数组方法