js--知識點擴充

1.Promise

2.Canvas

3.jQuery函數attr()和prop()的區別

• a.操做對象不一樣:"attr"和"prop"分別是單詞"attribute"和"property"的縮寫，而且它們均表示"屬性"的意思。不過，在jQuery中，"attribute"和"property"倒是兩個不一樣的概念。attribute表示HTML文檔節點的屬性，property表示JS對象的屬性。

<!-- 這裏的id、class、data_id均是該元素文檔節點的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 這裏的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>

• 在jQuery中，prop()函數的設計目標是用於設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property)；attr()函數的設計目標是用於設置或獲取指定DOM元素所對應的文檔節點上的屬性(attribute)。

<!-- attr()函數針對的是該文檔節點的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函數針對的是該DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

• 在jQuery的底層實現中，函數attr()和prop()的功能都是經過JS原生的Element對象(如上述代碼中的msg)實現的。attr()函數主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法。prop()函數主要依賴的則是JS中原生的對象屬性獲取和設置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依賴的是Element對象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 至關於 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 至關於 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145

/* *** prop()依賴的是JS原生的 element[property] 和 element[property] = value; *** */

// 至關於 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 至關於 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

• 因爲attr()函數操做的是文檔節點的屬性，所以設置的屬性值只能是字符串類型，若是不是字符串類型，也會調用其toString()方法，將其轉爲字符串類型。
• prop()函數操做的是JS對象的屬性，所以設置的屬性值能夠爲包括數組和對象在內的任意類型。

4.jQuery off()函數的應用

• off()函數用於移除元素上綁定的一個或多個事件的事件處理函數。

5.Map與Set

• Map是一組鍵值對的結構，具備極快的查找速度。 Map 經過set(xx, yy)來設置值。

var m = new Map([['tom', 89], ['jetty', 59]]);
m.get('jetty');//59
m.has('tom');

• 在Set中，沒有重複的key. 經過add(key)方法能夠添加元素到Set中，能夠重複添加，但不會有效果

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

6.具備iterable類型的集合能夠經過新的for ... of循環來遍歷。

for ... of循環和for ... in循環有何區別？ for ... in循環因爲歷史遺留問題，它遍歷的其實是對象的屬性名稱。一個Array數組實際上也是一個對象，它的每一個元素的索引被視爲一個屬性。

當咱們手動給Array對象添加了額外的屬性後，for ... in循環將帶來意想不到的意外效果：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}
for ... in循環將把name包括在內，但Array的length屬性卻不包括在內。
for ... of循環則徹底修復了這些問題，它只循環集合自己的元素：
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}
然而，更好的方式是直接使用iterable內置的forEach方法，它接收一個函數，每次迭代就自動回調該函數。以Array爲例：
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當前元素的值
    // index: 指向當前索引
    // array: 指向Array對象自己
    alert(element);
});

function isNumber(num){
  if(typeof num !== 'Number'){
    throw 'Not a number';
  }
  console.log(num);
}

• JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起做用，而且永遠指向當前函數的調用者傳入的全部參數

• var, let, const

• apply與call 要指定函數的this指向哪一個對象，能夠用函數自己的apply方法，它接收兩個參數，第一個參數就是須要綁定的this變量，第二個參數是Array，表示函數自己的參數。 apply 與call的區別：apply()把參數打包成Array再傳入；call()把參數按順序傳入。

var count = 0;
var old_ParseInt = parseInt;

window.parseInt = function(){
  count +=1;
//對普通函數調用，咱們一般把this綁定爲null。
  old_ParseInt.apply(null, arguments);
}

parseInt('23');
parseInt('33');
parseInt('43');
console.log(count);

• 8. 閉包

function lazy_sum(arr){
  var sum = function(){
    return arr.reduce(function(x, y){
      return x + y;
    });
  }
  return sum;
}

var f = lazy_sum([1,3,5,7,9]);
console.log(f());

function count(){
  var arr=[];
  for(var i=1; i<=3; i++){
    arr.push(function(){
      return i*i;
    });
  }
  return arr;
}

var results = count();
var f0 = results[0];
var f1 = results[1];
var f2 = results[2];

console.log(f0());//16
console.log(f1());//16
console.log(f2());//16
//測試i變成了4；

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f0 = results[0];
var f1 = results[1];
var f2 = results[2];

console.log(f0());//1
console.log(f1());//4
console.log(f2());//9

function create_counter(initial){
  var x = initial || 0;
  return {
    inc: function(){
      return x +=1;
    }
  }

}
var counter = create_counter(10);
console.log(counter.inc());
console.log(counter.inc());
console.log(counter.inc());

function make_pow(n){
  return function(x){
     return Math.pow(x, n);
  }
}
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(3));
console.log(pow3(3));

箭頭函數

x => x * x 至關於：
function(x){return x*x;}

var obj = {
  birth : 1990,
  getAge: function(){
    var b  =this.birth;
    var fn = () => new Date().getFullYear() - this.birth;
    return fn();
  }
}
console.log(obj.getAge());

generator generator（生成器）是ES6標準引入的新的數據類型。一個generator看上去像一個函數，但能夠返回屢次。