工作笔记

Object.assign(target, ...sources)  // 【target：目标对象】，【source： 源对象(源对象可以有多个)】
Object.assign() //方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

// 举例：
const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object1)  // { a: 1, b: 2, c: 3 }
console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }
// 注意：
// 1.如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
//2.Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 

针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

let obj1 = { a: 0 , b: { c: 0}}; 

let obj2 = Object.assign({}, obj1); 

console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

 
obj1.a = 1; 

console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 

console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

 

obj2.a = 2; 

console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 

console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

  

obj2.b.c = 3; 

console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 

console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 

最后一次赋值的时候，b是值是对象的引用，只要修改任意一个，其他的也会受影响

// Deep Clone （深拷贝）

obj1 = { a: 0 , b: { c: 0}}; 

let obj3 = JSON.parse(JSON.stringify(obj1)); 

obj1.a = 4; 

obj1.b.c = 4; 

console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

const o1 = { a: 1 };

const o2 = { b: 2 };

const o3 = { c: 3 };

 

const obj = Object.assign(o1, o2, o3);

console.log(obj); // { a: 1, b: 2, c: 3 }

console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

其实就是对象的拷贝，o1就是目标对象，后面的是源对象，后面的属性等会拷贝到目标对象

const o1 = { a: 1, b: 1, c: 1 };

const o2 = { b: 2, c: 2 };

const o3 = { c: 3 };

 

const obj = Object.assign({}, o1, o2, o3);

console.log(obj); // { a: 1, b: 2, c: 3 }

1.属性被后续参数中具有相同属性的其他对象覆盖。

2.目标对象的属性与源对象的属性相同，源的会覆盖目标的属性

const obj = Object.create({foo: 1}, { // foo 是个继承属性。
    bar: {
        value: 2  // bar 是个不可枚举属性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是个自身可枚举属性。
    }
});
创建对象时，如果没有设置enumerable的值，默认为false（不可枚举属性），设置为true，则为可枚举属性
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 

// 原始类型会被包装，null 和 undefined 会被忽略。

// 注意，只有字符串的包装对象才可能有自身可枚举属性。

console.log(obj); // { "0": "a", "1": "b", "2": "c" }

const target = Object.defineProperty({}, "foo", {

    value: 1,

    writable: false

}); // target 的 foo 属性是个只读属性。

 

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});

// TypeError: "foo" is read-only

// 注意这个异常是在拷贝第二个源对象的第二个属性时发生的。

console.log(target.bar);  // 2，说明第一个源对象拷贝成功了。

console.log(target.foo2); // 3，说明第二个源对象的第一个属性也拷贝成功了。

console.log(target.foo);  // 1，只读属性不能被覆盖，所以第二个源对象的第二个属性拷贝失败了。

console.log(target.foo3); // undefined，异常之后 assign 方法就退出了，第三个属性是不会被拷贝到的。

console.log(target.baz);  // undefined，第三个源对象更是不会被拷贝到的。

git tag 标签名    --用于新建一个标签，默认为HEAD
git  tag -a 标签名  -m "标签说明"  --可以指定标签信息
git tag    --可以查看所有标签
git  tag -d 标签名    --删除标签
git  push  origin   --推送一个本地标签


打tag
git  tag  标签名
git pull 
git  push orign 标签名

var proxy = new Proxy({},{
    get:function(target,propKey){
        return 35;
    }
});
//Proxy实例也可以作为其他对象的原型对象
let obj = Object.create(proxy);
//是把现有对象的属性，挂到新建对象的原型上，新建对象为空对象

//Object.create()的第二个参数，为添加的可枚举属性(即自身属性，不是原型的，)例子见下文

fetch('https://mock.apifox.cn/m1/1201147-0-default/study?apifoxResponseId=61655474')
     .then(response => {
         console.log('@',response);
       return response.json();
     }).then(data => {
         console.log('data',data);
     })

var query = {
      apifoxResponseId:61655474,
     
  }
  fetch('https://mock.apifox.cn/m1/1201147-0-default/teacher?apifoxToken=UHdcUcSGyGJFKcAUjA0eWz4WfRcbQUJn',{
      method:'POST',
      body:JSON.stringify(query),
  }).then(response => {
      return response.json();
  }).then(data => {
      console.log('data',data);
  }).catch(err => {
      console.log('err',err);
  })

if(type === 'query'){
  this.setState({
  queryLoading:true
  })
}
if(type === 'refresh'){
  this.setState({
  refreshLoading:true
  })
}

this.setState({
[type === 'query' ? 'queryLoading' : 'refreshLoading']:true,
})

[1,2,3,[1,2,6,7,[1,6,7]]].toString().split(',').map((item) => Number(item) ); // [1, 2, 3, 1, 2, 6, 7, 1, 6, 7]

[...'abcdefg'] //['a', 'b', 'c', 'd', 'e', 'f', 'g']

const dateArr = ['endDate','issueDate','payDate','deliveryDate','issueAmount'];
   for( let value of dateArr){
     e.variables[value] = value ==='issueAmount' ?  formatter( e.variables[value]) : this.withDateFormat(e.variables[value]);
   }

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => {
    e.variables[item] = item ==='issueAmount' ?  formatter( e.variables[item]) : this.withDateFormat(e.variables[item]);
})

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => {
 let CB = item ==='issueAmount' ? formatter : this.withDateFormat;
 CB(e.variables[item]);
})

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => (item ==='issueAmount' ? formatter : this.withDateFormat)(e.variables[item]))

function compose(f,g) {
    return function(...args) {
      return f.call(this, g.apply(this, args));
    }
  }

  console.log(compose(x => x**2, (x,y) => x + y)(2,3)); //25

"#" + ("0000"+ (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)

parseInt(0.5)  // 0
parseInt(0.0005) // 0
parseInt(0.000005) // 0
parseInt(0.0000005) // 5
parseInt('5a5') // 5
parseInt(999999999999999999999) // 1

0.5.toString() // '0.5'
0.0005.toString() // '0.0005'
0.000005.toString() // '0.000005'
0.0000005.toString() // '5e-7'
String(999999999999999999999) //'1e+21'

Math.floor(0.5);      // => 0
Math.floor(0.05);     // => 0
Math.floor(0.005);    // => 0
Math.floor(0.0005);   // => 0
Math.floor(0.00005);  // => 0
Math.floor(0.000005); // => 0

Math.floor(0.0000005); // => 0

2. 提取组件的公共逻辑，利用高级组件的形式，整合到每一个组件中，代码复用

import React from "react";

function enhanceProps(Component) {
  return (props) => {
    return <Component {...props} region="台湾省"></Component>;
  };
}

function City(props) {
  return (
    <div>
      <h2>
        {" "}
        Home: {props.name}, 等级: {props.level} 区域：{props.region}
      </h2>
    </div>
  );
}

const EnhanceCity = enhanceProps(City);

function Country(props) {
  return (
    <div>
      <h2>
        {" "}
        Home: {props.name}, 等级: {props.level} 区域：{props.region}
      </h2>
    </div>
  );
}
const EnhanceCountry = enhanceProps(Country);

function CithComponent() {
  return (
    <div>
      hoc
      <EnhanceCity name="jack" level={1}></EnhanceCity>
      <EnhanceCountry name="tom" level={2}></EnhanceCountry>
    </div>
  );
}

export default CithComponent;

import React, { useState } from "react";

// 高阶组件抽离state
// 1.将input抽离出来,变成一个单独的组件,但是这个组件不受控,所有我们就定义了一个高阶组件
const NameInput = (props) => {
  return (
    <input type="text" value={props.value} onChange={props.handleChange}></input>
  );
};

// 2.在高阶组件中返回一个新的组件，我们在这个组件中定义属性和方法
function withChange(Component) {
  return () => {
    const [value, setValue] = useState("");
    const handleChange = (e) => {
      setValue(e.target.value);
    };
    return <Component value={value} handleChange={handleChange}></Component>;
  };
}
// 3.返回一个新组件
const WrappedNameInput = withChange(NameInput);

// 4.这个时候WithComponent就是一个无状态组件，他的组件都被抽离了
function WithComponent() {
  return (
    <div>
      <h2>状态抽离</h2>
      <WrappedNameInput></WrappedNameInput> <br/>
      <WrappedNameInput></WrappedNameInput> <br/>
      <WrappedNameInput></WrappedNameInput>
    </div>
  );
}

export default WithComponent;

function UserPage() {
  return <h2>用户页面</h2>;
}

function AdminPage() {
  return <h2>管理员页面</h2>;
}

function withAuth(Component) {
  const newComponent = function (props) {
    console.log('props',props);
    const { isAdmin } = props;
    if (isAdmin) {
      return <AdminPage {...props}> </AdminPage>;
    } else {
      return <Component {...props}> </Component>;
    }
  };
  newComponent.displayName = 'AuthCpn'
  return newComponent;
}

const AuthComponent = withAuth(UserPage);

function ChangeComponent() {
  return (
    <div>
      高阶组件实现登录鉴权
      <AuthComponent isAdmin={true}> </AuthComponent>
      {/* <AuthComponent isAdmin={false}> </AuthComponent> */}
    </div>
  );
}

export default ChangeComponent;

const uniqueArr = (arr) => [...new Set(arr)];
uniqueArr([1,2,3,2,3,3,5,6,6,7,7,7]) //[1, 2, 3, 5, 6, 7]

const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`)
getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1"); //{q: 'js+md', newwindow: '1'}

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 &&  obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b

const isTabActive = () => !document.hidden; 

isTabActive()
// true|false

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素处于焦点返回true，反之返回false

const judgeDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';
judgeDeviceType()

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码 前端世界')

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
// 返回选中的内容

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16

import { useEffect, useState } from 'react';

function Dong() {

    const [count,setCount] = useState(0);

    useEffect(() => {
        setInterval(() => {
            setCount(count + 1);
        }, 500);
    }, []);

    useEffect(() => {
        setInterval(() => {
            console.log(count);
        }, 500);
    }, []);

    return <div>guang</div>;
}

export default Dong;

res.writeHead(200,{
    'Cache-Control':'max-age=10'
});