javascript

• LazyMan

  • 實(shí)現(xiàn)LazyMan（什么是LazyMan视译？請(qǐng)自行g(shù)oogle）

  function _LazyMan(_name) {
      var _this = this;
      _this.tasks = [];
      _this.tasks.push(function() {
          console.log('Hi! This is ' + _name + '!');
          // 這里的this是window嬉荆，所以要緩存this
          _this.next();
      });
      setTimeout(function() {
          _this.next();
      }, 0);
  }
  
  // push函數(shù)里面的this和setTimeout函數(shù)里面的this都指向全局作用域，所以要緩存當(dāng)前this指向
  _LazyMan.prototype.next = function() {
      var _fn = this.tasks.shift();
      _fn && _fn();
  }
  _LazyMan.prototype.sleep = function(_time) {
      var _this = this;
      _this.tasks.push(function() {
          setTimeout(function() {
              console.log('Wake up after ' + _time);
              _this.next();
          }, _time);
      });
      return _this;
  }
  _LazyMan.prototype.sleepFirst = function(_time) {
      var _this = this;
      _this.tasks.unshift(function() {
          setTimeout(function() {
              console.log('Wake up after ' + _time);
              _this.next();
          }, _time);
      });
      return _this;
  }
  _LazyMan.prototype.eat = function(_eat) {
      var _this = this;
      _this.tasks.push(function() {
          console.log('Eat ' + _eat);
          _this.next();
      });
      return _this;
  }
  
  // 封裝對(duì)象
  var LazyMan = function(_name) {
      return new _LazyMan(_name);
  }
  

• 數(shù)據(jù)類型

  • 6種原始值（不可變酷含”稍纾“除非重置當(dāng)前變量，否則不能改變?cè)刂狄窝恰限番！保?
    1. Null(只有一個(gè)值： null)
    2. Undefined(一個(gè)沒(méi)有被賦值的變量會(huì)有個(gè)默認(rèn)值 undefined)
    3. Number
    4. Boolean(兩個(gè)值：true 和 false)
    5. String
    6. Symbol
  • 和Object(對(duì)象指內(nèi)存中的可以被標(biāo)識(shí)符引用的一塊區(qū)域)

• 數(shù)據(jù)類型檢測(cè)

  • typeof(對(duì)變量或值調(diào)用 typeof 運(yùn)算符將返回(字符串)下列值之一)
    1. undefined - Undefined類型
    2. number - Number類型
    3. boolean - Boolean類型
    4. string - String類型
    5. symbol - Symbol類型(ECMAScript6新增)
    6. function - 函數(shù)對(duì)象([[Call]]在ECMA-262條款中實(shí)現(xiàn)了)
    7. object - 引用類型 或 Null類型

  typeof(Function) // function (Function是函數(shù)對(duì)象)
  typeof(new Function) // function (new Function也是是函數(shù)對(duì)象，同等：var func = function(){})
  typeof(Array) // function (Array是函數(shù)對(duì)象)
  typeof(new Array) // object（實(shí)例化的Array就是object）
  

• 變量賦值時(shí)候的返回值：

  var name = 123; // 返回undefined
  name = 456; // 返回456
  

  結(jié)語(yǔ)：定義變量的時(shí)候賦值返回:undefined
  給已聲明變量賦值時(shí)候返回當(dāng)前賦值呀舔。

• 獲取元素距離頁(yè)面的top弥虐、left

  function getRec(ele) {
      var _t = document.documentElement.clientTop,
          _l = document.documentElement.clientLeft,
          rect = ele.getBoundingClientRect();
      return {
          top: rect.top - _t,
          right: rect.right - _l,
          bottom: rect.bottom - _t,
          left: rect.left - _l
      }
  }
  

  注意：IE、Firefox3+媚赖、Opera9.5躯舔、Chrome、Safari支持省古，在IE中粥庄，默認(rèn)坐標(biāo)從(2,2)開始計(jì)算，導(dǎo)致最終距離比其他瀏覽器多出兩個(gè)像素豺妓，我們需要做個(gè)兼容惜互。

• 數(shù)字的固定小數(shù)位數(shù)

  var a=8.88888,
      b=8;
  console.log(a.toFixed(2)); // 8.89 或者 8.88
  console.log(b.toFixed(2)); // 8.00
  

• js是編譯語(yǔ)言，數(shù)組長(zhǎng)度是隨時(shí)程序變化而變化的

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

• 矩陣的轉(zhuǎn)置

  var arr = [ // 定義一個(gè)矩陣（二維數(shù)據(jù)）
      [1, 2, 3, 4],
      [5, 6, 6, 6],
      [7, 6, 7, 8],
      [8, 5, 3, 3]
  ];
  
  function changeArr(arr) { // 矩陣轉(zhuǎn)置函數(shù)
      var c;
      for (var i = 1; i < arr.length; i++) {
          for (var j = 0; j < i; j++) {
              c = arr[i][j];
              arr[i][j] = arr[j][i];
              arr[j][i] = c;
          }
      }
  }
  changeArr(arr);
  console.table(arr);
  

• 冒泡排序方法

  // 第一輪是對(duì)n-1的位置定位
  // 第二輪是 每一個(gè)位置的數(shù)的 確定
  var arr = [1, 4, 5, 6, 99, 111, 112, 113, 133],
      temp = 0,
      flag = false;
  for (var i = 0; i < arr.length - 1; i++) {
      document.writeln('come');
      for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
              temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
              flag = true;
          }
      }
      if (flag) {
          flag = false;
      } else {
          break;
      }
  }
  for (var i = 0; i < arr.length; i++) {
      document.writeln(arr[i]);
  };
  

• 二分查找

  var arr = [41, 55, 76, 87, 88, 99, 123, 432, 546, 577, 688, 786];
  
  function twoFind(arr, wantVal, leftIndex, rightIndex) {
      if (leftIndex > rightIndex) {
          document.writeln('SORRY: 找不到 ' + wantVal + ' 琳拭！');
          return;
      }
      var minIndex = Math.floor((leftIndex + rightIndex) / 2);
      if (arr[minIndex] > wantVal) {
          twoFind(arr, wantVal, leftIndex, minIndex - 1);
      } else if (arr[minIndex] < wantVal) {
          twoFind(arr, wantVal, minIndex + 1, rightIndex);
      } else {
          document.writeln('找到了 ' + wantVal + ' ,下表為' + minIndex);
      }
  }
  twoFind(arr, 9, 0, arr.length - 1);
  

• js對(duì)象訪問(wèn)屬性的二種方式

  function Person () {};
  var new1 = new Person ();
  new1.name='馮杰';
  new1.age=21;
  window.alert(new1.name);
  window.alert(new1["age"]);
  

• js之delete只能刪除對(duì)象的屬性

  function Person () {};
  var me = new Person();
  me.name='馮杰';
  console.log(me.name);
  delete me.name;
  console.log(me.name);
  

• 在js中對(duì)象的方法不是通用的训堆，如果生成n個(gè)對(duì)象，那么就有n個(gè)內(nèi)存堆棧

  // js 中 一切類 繼承自 Object 而Object 有propotype
  // 下面是解決辦法 prototype 獲得類的static性質(zhì)
  function God() {}
  God.prototype.shout = function() {
      window.alert('小狗叫');
  }
  var dog1 = new God();
  var dog2 = new God();
  dog1.shout();
  dog2.shout();
  

• 對(duì)象

  // js里要想創(chuàng)建對(duì)象 除了一般的創(chuàng)建方式 還有 通過(guò)Object 方式創(chuàng)建類
  // Object 類是所有js類的基類 Object 就表示對(duì)象（一切的對(duì)象）
  var p1 = new Object();
  p1.name = 'fj';
  window.alert(p1.name);
  window.alert(p1.constructor);
  
  // 原型鏈上新增默認(rèn)對(duì)象方法
  var num = new Number(1);
  var num2 = 10;
  window.alert(num.constructor);
  window.alert(num2.constructor);
  // 上面2個(gè)彈出是一樣的
  Number.prototype.add = function(a) { //prototype是屬于類的
      return this + a;
  }
  window.alert(num.add(1).add(2));
  
  // 小實(shí)驗(yàn) 為Array 添加 find(val) 方法
  Array.prototype.find = function(a) {
      for (var i = 0; i < this.length; i++) {
          if (this[i] == a) {
              return i;
          }
      }
      return 'find fail.';
  }
  var arr = [0, 1, 2, 77, 4, 5];
  window.alert(arr.find(77));
  

• arguments

  function abc() {
      var sum = 0;
      for (var i = 0; i < arguments.length; i++) {
          sum += arguments[i];
      }
      return sum;
  }
  window.alert(abc(1, 2, 3));
  

• call函數(shù)目的就是改變對(duì)象的this指向

  var Person = {
      name: 'fjj'
  };
  
  function test() {
      window.alert(this.name);
  }
  test.call(Person);
  

• 體會(huì)js的封裝

  function Person() {
      var name = 'fj'; //私有
      this.age = 21; //共有
  }
  var p1 = new Person();
  window.alert(p1.name); //undefined
  window.alert(p1.age); //21
  

• prototype的方法不能訪問(wèn)私有屬性和方法

  function Person() {
      var name = 'fj'; //私有
      this.age = 21;
  }
  Person.prototype.showName = function() {
      window.alert(this.name);
  }
  Person.prototype.showAge = function() {
      window.alert(this.age);
  }
  var p1 = new Person();
  p1.showName();
  p1.showAge();
  

• 繼承

  // js 里面是對(duì)象冒充來(lái)繼承的 不算是真正的繼承 通過(guò)對(duì)象冒充 js可以實(shí)現(xiàn)多重繼承和繼承的效果 但是沒(méi)有Extends關(guān)鍵字
  function Father(name, age) {
      this.name = name;
      this.age = age;
      this.show = function() {
          window.alert(this.name + '---' + this.age);
      }
  }
  
  function Son(name, age) {
      this.Father = Father;
      this.Father(name, age); //通過(guò)對(duì)象冒充 實(shí)現(xiàn)繼承 這一句非常重要 js是動(dòng)態(tài)語(yǔ)言 不是編譯語(yǔ)言 要執(zhí)行才會(huì)分配空間
  }
  var me = new Son('fj', 21);
  window.alert(me.name);
  me.show();
  

• 重載

  // js從常理來(lái)說(shuō)是不支持重載的 但是又可以說(shuō)是天然支持重載 因?yàn)閖s天然支持可變參數(shù) 而且我們可以通過(guò)arguments[]數(shù)組的長(zhǎng)度判斷 而做出相應(yīng)的處理
  

• 閉包

  // 閉包實(shí)際上設(shè)計(jì)一個(gè)對(duì)象的屬性白嘁，何時(shí)被gc處理的問(wèn)題 閉包和gc是相關(guān)聯(lián)的
  

• 數(shù)組長(zhǎng)度

  // 數(shù)組的長(zhǎng)度是根據(jù)下標(biāo)的最大而確定的
  var arr = new Array();
  arr['a'] = 1;
  arr['b'] = 2;
  window.alert(arr.length); // 打出0