本两周学习总结

博客

https://github.com/timqian/chinese-independent-blogs

珠峰100小时打实基础知识

https://space.bilibili.com/25729112/channel/detail?cid=87464&spm_id_from=333.788.b_636f6d6d656e74.6

call和apply

call的性能要比apply好那么一些(传递的函数的参数超过三个的时候)

new

new 操作符到底干了什么?

• 创建一个空对象obj
• 空对象的__proto__ 成员指向了Base函数对象prototype成员对象
• Base函数的this指针替换成obj
• 如果有返回返回为对象,否则返回空对象obj

function New(Base) {
  let obj = {};
  if (Base.prototype !== null) {
    obj.__proto__ = Base.prototype;
  }
  let ret = Base.call(obj);
  if ((typeof ret === 'object' || typeof ret === 'function') && ret !== null) {
    return ret
  } else {
    return obj
  }
}

instanceof

function _instanceof(left, right) {
  //获取类型的原型
  let prototypes = right.prototype;
  //获取对象的原型
  left = left.__proto__;
  //判断对象的类型是否等于类型的原型
  while (true) {
    if (left === null) return false;
    if (prototypes === left) return true;
    left = left.__proto__;
  }
}

MVVM

//获取数据
//查询的对象,字符串,
const getVMap = (vm, str) => {
  return str.split('.').reduce((acc, val) => acc[val], vm)
};

let obj = {
  a: {
    b: {
      c: 'd'
    }
  }
};
console.log(getVMap(obj, 'a.b.c'));// d
// 设置数据
//查询的对象,字符串,设置的值
const setVMVal = (vm, exp, newVal) => {
  let val = vm;
  exp = exp.split('.');
  exp.forEach((key, i) => {
    if (i < exp.length - 1) {
      val = val[key]
    } else {
      val[key] = newVal
    }
  })
};
setVMVal(obj, 'a.b.c', 'd');
console.log(obj); // { a: { b: { c: 'd' } } }

for in, Object.keys(), Object.getOwnPropertyNames()的区别

这三种是遍历对象属性的常用方法

var person = {
  name: 'lifuya',
  age: 22,
}

var user = Object.create(person, {
  height: {
    value: 173,
    writable: true,
    enumerable: true, //可枚举
    configurable: false,
  },
  weight: {
    value: 73,
    writable: true,
    enumerable: false, //不可枚举
    configurable: false,
  },
})

for in

for(let i in user){
  console.log(i)   //height name  age
}

for in 会遍历出所有的可枚举属性，包括原型属性

Object.keys()

console.log(Object.keys(user))

// height

Object.keys()会遍历出自身的可枚举属性

Object.getOwnPropertyNames(user)

// height weight 

Object.getOwnPropertyNames()会遍历出自身的所有属性

原生实现indexOf

const indexOf = (target, str) => {
  let len = str.length, i = -1;
  if (len === 0 || str == null || target.length < len) return -1;
  while (++i < target.length - len + 1) {
    if (target.substr(i, len) === str) {
      return i
    }
  }
  return -1
};

const indexOf = (target, str) => {
  let reg = new RegExp(str),
    res = reg.exec(target);
  return res == null ? -1 : res.index;
};

属性求值

let a = {}, b = Symbol('123');
c = Symbol('123');
a[b]='b';
a[c]='c';
console.log(a);
// { [Symbol(123)]: 'b', [Symbol(123)]: 'c' }

let a = {};
let b = {name: 'xxx'};
let c = {name: 'xxx'};
// 对象的属性名不能是一个对象(遇到对象属性名,会默认转换为字符串)
console.log(b.toString());
// [object Object]
a[b] = 'ggg';
a[c] = 'bbb';
console.log(a);
// { '[object Object]': 'bbb' }

一道面试题

function Foo(){
  Foo.a=function(){
    console.log(1);
  };
  this.a=function () {
    console.log(2);
  }
}
Foo.prototype.a=function(){
  console.log(3);
};
Foo.a=function(){
  console.log(4);
};
Foo.a();// 4
let obj=new Foo();// Foo.a   1      obj.a   2
obj.a(); //2
Foo.a();// 1

JSON.stringify

let obj = {
  b: undefined,
  c: Symbol('ddd'),
  d: 'xxx',
  fn:function(){
    return true
  }
};
console.log(JSON.stringify(obj));
// {"d":"xxx"}

JSON.stringify(["aaa", undefined, function aa() {
    return true
  }, Symbol('dd')]) 
// // "["aaa",null,null,null]"

undefined,任意的函数以及Symbol 作用对象属性值时,JSON.stringify()将跳过(忽略) 对它们进行序列化

undefined、任意的函数以及 symbol 作为数组元素值时，JSON.stringify() 会将它们序列化为 null

undefined、任意的函数以及 symbol 被 JSON.stringify() 作为单独的值进行序列化时都会返回 undefined

JSON.stringify({
    say: "hello JSON.stringify",
    toJSON: function() {
      return "today i learn";
    }
  })
// "today i learn"

如果有 toJSON() 函数，该函数返回什么值，序列化结果就是什么值，并且忽略其他属性的值。

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

// 不可枚举的属性默认会被忽略：
JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: 'json', enumerable: false }, 
            y: { value: 'stringify', enumerable: true } 
        }
    )
);
// "{"y":"stringify"}"

其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

位运算符

乘以2的幂

x = x << 1; // x = x * 2
x = x << 6; // x = x * 64

除以2的幂

x = x >> 1; // x = x / 2
x = x >> 3; // x = x / 8

交换没有临时变量的整数

a ^= b; // int temp = b
b ^= a; // b = a
a ^= b; // a = temp

翻转

10    -10
i = ~i + 1;  // console.log(~10+1); //-10

检查整数是偶数还是奇数

(i & 1) == 0;   //偶数
(i%2)==0;      // 偶数

相等

(a^b) == 0; // a == b

round ceil floor

(x + 0.5) >> 0; // round(x)
(x + 1) >> 0; // ceil(x)
x >> 0; // floor(x)

修改地理坐标的文字位置

http://life.chacuo.net/postion  拿到地理坐标
打开js或Json文件，找到地图描述的的（"properties":{"name":"XX省","cp":[101.04524,23.062507],"childNum":1},）内容，将（"cp":[xx,xx]）内容删除，省名就会自动在该省的地图中间了，否则会默认在省会或首府位置显示
或者设置下坐标

Object.fromEntries()

方法把键值对列表转换为对象

Object.fromEntries() 是 Object.entries 的反转

可迭代对象,类似Array,Map 或者其他实现可迭代协议的对象

// Map => Object
const map=new Map([['a','b'],['c','d']]);
console.log(Object.fromEntries(map));
// {a: "b", c: "d"}

// Array => Object
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

其实我觉得可以用reduce完美解决,这个api没啥用的