Ryan Shang

生死看淡，不服就干

0%

发表于 分类于

经常会遇到需要把数组展开的面试题，比如把数组['j',['a','r'],'v',['a,'n'],[5,[2,0]]]展开变成["j", "a", "r", "v", "a", "n", 5, 2, 0]。常见方式肯定是递归，今天发现了一种利用ES6新特性的方式，记录下来张张见识。

先写下比较常见的递归方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let flat1 = (arr) => {
  let res = []
  let flat = (target) => {
    if (target instanceof Array) {
      target.forEach(item => {
        flat(item);
      })
    } else {
      res.push(target);
    }
  }
  flat(arr);
  return res
};

接着是利用ES6遍历器的方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let flat2 = (arr) => {
  Array.prototype[Symbol.iterator] = function () {
    let arr = [].concat(this);
    let getFirst = (array) => {
      let first = array.shift();
      if (first instanceof Array) {
        if (first.length > 1) {
          arr = first.slice(1).concat(array);
        }
        first = first[0];
      }
      return first;
    };
    return {
      next: function () {
        let item = getFirst(arr);
        if (item !== undefined) {
          return {
            value: item,
            done: false
          };
        } else {
          return {
            done: true
          };
        }
      }
    };
  };
  let res = [];
  for (let i of arr) { res.push(i); }
  return res;
};
阅读全文 »

发表于 分类于

数组排序的几种方法。

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function bubbleSort(ary) {
  var flag = false;
  var temp = null;
  for (var i = 0; i < ary.length - 1; i++) {
    for (var j = 0; j < ary.length - 1 - i; j++) {
      if (ary[j] > ary[j + 1]) {
        temp = ary[j];
        ary[j] = ary[j + 1];
        ary[j + 1] = temp;
        flag = true;
      }
    }
    // 一轮过后没有变化，则已经是结果
    if (flag) {
      flag = false;
    } else {
      break;
    }
  }
  return ary;
}

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function insertSort(ary) {
  var newAry = [];
  newAry.push(ary[0]);
  for (var i = 1; i < ary.length; i++) {
    var cur = ary[i];
    for (var j = newAry.length - 1; j >= 0;) {
      if (cur < newAry[j]) {
        j--;
        if (j === -1) {
          newAry.unshift(cur);
        }
      } else {
        newAry.splice(j + 1, 0, cur);
        j = -1;
      }
    }
  }
  return newAry;
}
阅读全文 »

发表于 分类于

面向对象编程有三大特征：封装、继承、多态。

严格意义上来说，JavaScript是没有继承和多态的，所以需要我们自己来实现，今天来讲讲ES5的继承实现方法。

我个人认为，最好的继承方案，应该是父类私有的属性和方法拿到子类上用，父类公有的属性和方法直接通过__proto__查找到。

要实现父类的私有属性和方法拿到子类上来用，最简单的方式就是用call方法。

1
2
3
4
5
6
7
8
9
10
11
function Father() {
  this.x = 10;
  this.y = 20;
}
Father.prototype.fn=function () {
  console.log(this.x);
};
function Son() {
  //this->实例
  Father.call(this); //父类上的私有属性拷贝一份放到子类的实例上
}
阅读全文 »

发表于 分类于

1. 行内元素

1
2
3
4
5
6
.parent {
    height: X; /* X为一个绝对高度 */
}
.child {
    line-hight: X;
}

2. Table

1
2
3
4
5
6
7
.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. 绝对定位（left+height）

阅读全文 »

发表于 分类于

1. 行内元素

1
2
3
.parent {
    text-align: center;
}

2. 块级元素

1
2
3
div {
    margin: 0 auto;
}

3. 绝对定位（left+width）

阅读全文 »