ES6查漏補缺掃清知識盲區-筆記

let和var區別

for (let i = 0; i < 2; i++) {
    setTimeout(() => {
        console.log(i)
    })
}   // 1, 2
二者的區別
for (var i = 0; i < 2; i++) {
    setTimeout(() => {
        console.log(i)
    })
}  // 2 2
babel是怎麼將es6轉成es5的呢?
var _loop = function _loop(i) {
    setTimeout(function () {
        console.log(i)
    }, 1000)
}
for(var i = 0; i< 2; i++) {
    _loop(i)
}
複製代碼

模板字符串前面是一個函數

let name = 'nanfeiyan';
let age = 23
function desc () {
    console.log(arguments)
}
let str = desc`${name} 今年 ${age}歲了`;
複製代碼

結果

字符串的方法

include  indexOf  repeat  split  startWith  endsWith padStart  padEnd 
複製代碼

reduce的實現原理

let arr = [1,2,3]
Array.prototype.reduce1 = function (callback, initVal) {
    for (let i = 0; i < this.length; i++) {
        initVal = callback(initVal, this[i])
    }
    return initVal
}
let res = arr.reduce1((current, item) => {
    return current + item
},0)
console.log(res);  // 6
複製代碼

push和數組的解構進行數組合並

let arr = [1,2,3];
let arr1 = [4,5,6];
arr.push(...arr1)
console.log(arr); //[1,2,3,4,5,6]

let res = [...arr,...arr1]
console.log(res);  //[1,2,3,4,5,6]
複製代碼

箭頭函數沒有本身的this,他會使用上層的this

var name = 'nanfeiyan'
let obj8 = {
    name: 'zhangsan',
    sayname: () => {
        console.log(this.name)
    }
}
let obj9 = {
    name: 'lisi',
    GN: obj8.sayname
}
obj8.sayname() //nanfeiyan
obj9.GN()  //nanfeiyan
複製代碼

filter的實現原理

Array.prototype.filter1 = function (callback) {
    let arr = []
    for (let i = 0; i < this.length; i++) {
        callback(this[i],i, this) && arr.push(this[i])
    }
    return arr
}
var arr = [1,2,3,4,5];
let a = arr.filter1(item => item> 2)
console.log(a);  // [3,4,5]
複製代碼

find的方法實現原理

Array.prototype.find = function (callback) {
    for (let i = 0; i < this.length; i++) {
        let flag = callback(this[i])
        if(flag) return this[i]
    }
}
var arr = [1,2,3,4,5];
let a = arr.find(item => item === 2)
console.log(a); // 2
複製代碼

Object.setPrototypeOf爲什麼物

let obj3 = {}
let obj1 = {age:1}
let obj2 = {age: 2};
Object.setPrototypeOf(obj3,obj1) // 其實就是給__proto__賦值
console.log(obj3); {}
console.log(obj3.age); // 1
// 爲啥呢,由於obj3的原型是obj1,這個函數的做用就是obj3.__proto__ = obj1
複製代碼

做用域

var a=10,b=11,c=12;
function test(a){
    // var a =10 這裏至關於
     a=1;
     var b=2;
     c=3;
     console.log(a)  // 1
}
test(10);
console.log(a); // 10
console.log(b);  // 11
console.log(c);  //3
複製代碼

// 第一個
var foo=1;
function bar(){
    if(!foo){
          var foo=10;
      }
    console.log(foo);  // 10
}
bar();
// 第二個
if(!true){
    var a = 10;
}
console.log(a);  // undefined
複製代碼

閉包的造成

var a=9;
function fn(){
    a=0;
    return function(b){
          return b+a++;
      }
}
var f=fn();
console.log(f(5)); //5
console.log(fn()(5));//5
console.log(f(5));  //6
console.log(a);  //2
複製代碼

new Object()和Object.create()的區別

new Object() 經過構造函數來建立對象, 添加的屬性是在自身實例下。

Object.create() 添加的屬性是在原型下。

// new Object() 方式建立
var a = {  rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.rep) // {rep: "apple"}

// Object.create() 方式建立
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // {rep: "apple"}
複製代碼

Object.create的簡單原理

Object.create = function (prototype) {
    function F () {}
    F.prototype = prototype;
    return new F()
}
複製代碼

模擬一個next()迭代器

function read (books) {
    let index = 0;
    return {
        next () {
            let done = index === books.length;
            let value = done ? undefined : books[index++];
            return {
                value,
                done
            }
        }
    }
}
let books = ['node','php'];
let it = read(books);
//console.log(it.next());
//console.log(it.next());
do{
    result = it.next()
    console.log(result);
}while (!result.done)
複製代碼

結果:

爲何須要調用Object原型上的方法進行類型檢測呢

function isString (param) {
    return Object.prototype.toString.call(param) == '[object String]'
}
// 由於Object.prototype使用的一個統一的方法,字符串對象已經將toString()改寫了,
複製代碼

高階函數: 又能當參數又能當返回值

throw new TypeError('類型錯誤') 拋出一個類型錯的信息

throw new Error('錯誤信息')

hasOwnProperty() 方法會返回一個布爾值，指示對象自身屬性中是否具備指定的屬性（也就是是否有指定的鍵