ES6查漏补缺扫清知识盲区-笔记_nanfeiyan的专栏文章_微信文章

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) {
    let result = initVal
    for (let i = 0; i < this.length; i++) {
        result += callback(initVal, this[i])
    }
    return result
}
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() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是是否有指定的键

ES6查漏补缺扫清知识盲区-笔记