本两周学习总结

Array.from 达到map的效果

let arr=[
  {name:'小智1',age:23},
  {name:'小智2',age:13},
  {name:'小智3',age:43},
  {name:'小智4',age:33},
];
console.log(Array.from(arr, ({name}) => name));
// [ '小智1', '小智2', '小智3', '小智4' ]
console.log(arr.map(val => val.name));
// [ '小智1', '小智2', '小智3', '小智4' ]

将数组转换为对象

let arr = ['小智1', '小智2', '小智3', '小智4'];
let obj={...arr};
console.log(obj);
// { '0': '小智1', '1': '小智2', '2': '小智3', '3': '小智4' }

是否有这个属性

const hasKey = (obj, key) => {
  if (key.includes('.')) {
    let _key = key.split('.')[0];
    if (typeof obj[_key] === 'object')
      return hasKey(obj[_key], key.slice(key.indexOf('.') + 1))
  }
  return Object.keys(obj).includes(key);
}

let obj = {
  a: 1, b: { c: 4 }, 'd.e': 5
}
hasKey(obj, 'a'); // true
hasKey(obj, 'b'); // true
hasKey(obj, 'b.c'); // true
hasKey(obj, 'd.e'); // true
hasKey(obj, 'd'); // false
hasKey(obj, 'f'); // false

// 优化

const hasKey = (obj, keys) => {
  return (keys.length > 0) && keys.every(key => {
    //当没有这个属性
    if (typeof obj !== 'object' || !Reflect.ownKeys(obj,key)) {
      return false
    }
    obj = obj[key];
    return true
  })
};
let obj = {
  a: 1,
  b: { c: 4 },
  'b.d': 5,
};
console.log(hasKey(obj, ['b','c']));
console.log(hasKey(obj, ['b.d']));

对象转成网址的那种

const objectToQueryString = query => {
  if (query) {
    return Object.entries(query).reduce((acc, [key, val], index) => {
      const symbols = index === 0 ? '?' : '&';
      acc += typeof val === 'string' ? `${symbols}${key}=${val}` : '';
      return acc
    }, '')
  } else {
    return ''
  }
};
console.log(objectToQueryString({page: '1', size: '2ky', key: undefined}));
// ?page=1&size=2ky

equals

const equals = (a, b) => {
  if (a === b) return true;
  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
  //判断 NaN
  if ([a, b].every(val => typeof val === 'number') && a !== b) return Object.is(a, b);
  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) return a === b;
  if (a.prototype !== b.prototype) return false;
  let keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;
  return keys.every(k => equals(a[k], b[k]));
};

console.log(equals({a: [2, {e: NaN}], b: [4,1,2], c: 'foo'}, {a: [2, {e: NaN}], b: [4,1,2], c: 'foo'}));//true

判断偶数(从0开始)

const odd=num=>num%2===1;
console.log(odd(5));

获取当前时间

const currentTime = () => {
  let t = new Date();
  t.setHours(t.getHours() + 8);
  let arr = t.toISOString().split(/[T.]/);
  return arr[0]+' '+arr[1]
};

如果给span设置宽度

span{
  display:flex;
   100px;
  height: 100px;
  background-color: khaki;
}

flex 有点类型`inline-block`

高斯模糊

filter:blur(20px);
span::before{
  content:'';
   60px;
  height: 60px;
  margin:auto;
  filter:blur(20px);//设置高斯模糊
  background-color: #3795cf;
}

去重

let arr = [
  {age: 1, name: '张三'},
  {age: 1, name: '张三'},
  {age: 2, name: '李四'},
  {age: 3, name: '张三'},];
let arr1 = arr.map(val => val.name);
console.log(arr.filter((val, index) => arr1.indexOf(val.name) === index));
// [ { age: 1, name: '张三' }, { age: 2, name: '李四' } ]

中文与阿拉伯数字的转化

https://blog.whyoop.com/nzh/docs/#/

好看的动画

https://github.com/cmiscm/leonsans

这个要好好研究下

npx 使用

npx 想要解决的主要问题,就是避免全局安装模块,例如安装react

npx create-react-app 项目名

React

花括号不能写对象可以写对象的属性

在react中用htmlFor,className

<label htmlFor="inp">
        <input type="text"/>
</label>

行内样式要包含一个对象

<div style={{color:'red'}}>1212</div>
ReactDOM.render(ele, document.getElementById('root'),()=>{
    //当DOM渲染到页面之后会触发改函数
    console.log(document.getElementById('root'))
})

珠峰react网址

lodash源码解读

isNaN的理解

判断是不是NaN,如果传入的参数不为number类型,会尝试转成number类型之后,再判断NaN

所以isNaN('notNaN') //true

为了修复isNaN 可以使用 Number.isNaN

Number.isNaN('sss') // false

类似lastIndexOf

const assocIndexOf = (array, key) => {
    let {length}=array;
    while (length--) {
        if (Object.is(array[length], key)) {
            return length
        }
    }
    return -1
}

baseFinedIndex

function baseFindIndex(array, predicate, fromIndex, fromRight) {
  const { length } = array
  let index = fromIndex + (fromRight ? 1 : -1)
//这个判断,差点产生误解
//true   index--
//false  ++index<length 
//外面套上一个括号是为了保证三元表达式的优先级
  while ((fromRight ? index-- : ++index < length)) {
    if (predicate(array[index], index, array)) {
      return index
    }
  }
  return -1
}

汉字拼音转换工具

https://github.com/hotoo/pinyin/blob/master/README.md

中国传统颜色手册

https://colors.ichuantong.cn/

typeof

typeof a   //undefined
一个不存在的数,返回的是undefined

判断两个数组的每一项是否相等

// a是小的,b是大的
const arrayEqual = (a, b) => {
  if (!(Array.isArray(a) && Array.isArray(b))) {
    return false
  }
  if (a.length !== b.length||a.length > b.length) {
    return false;
  }
  return a.reduce((acc, val, index) => val === b[index])
};
console.log(arrayEqual([1, 2, 3], [1, 2, 3])); //true

Generator 函数遍历数组

let arr = [
  {name: 'zs',age: 38,gender: 'male'},
  {name: 'yw',age: 48,gender: 'male'},
  {name: 'lc',age: 28,gender: 'male'},
];
function* loop(arr) {
  for(let item of arr){
    yield item;
  }
}
let repoGen = loop(arr);
console.log(repoGen.next());
// { value: { name: 'zs', age: 38, gender: 'male' }, done: false }
console.log(repoGen.next());
// { value: { name: 'yw', age: 48, gender: 'male' }, done: false }

jit.js

https://github.com/philogb/jit/blob/master/Jit/jit.js

reduce

const reduce = (array, f, opt) => {
  let l = array.length;
  if (l == 0) return opt;
  let i = -1;
  while (++i < l) {
    opt = f(opt, array[i], i)
  }
  return opt
};
console.log(reduce([1, 2, 3, 4], (acc, val) => acc + val, 0)); //10
console.log(reduce([1, 2, 3, 4, 5], (acc, val, i) => (acc.push(val * i), acc), []));
// [ 0, 2, 6, 12, 20 ]

for in 可遍历原型链上扩展的属性,Object.keys()只能遍历自身的属性

Object.prototype.say="cgl"; 
 var person ={ age: 18 };
    for (var key in person) {
        console.log(key, person[key]);
    }   //结果： age 18 
               // say cgl

只遍历对象自身的属性,而不遍历继承与原型链的属性,使用hasOwnProperty

Object.keys()方法会返回一个由给定对象的自身可枚举属性的数组

算法

https://github.com/TheAlgorithms/Javascript

一定范围内的质数数组

const sieveOf = n => {
  //因为不需要考虑0,1,所有0,1为false
  let primes = Array.from({length: n + 1}, (val, i) => i > 1 ? true : false);
  //开平方
  let sqrtn = Math.ceil(Math.sqrt(n));
  for (let i = 2; i < sqrtn; i++) {
    if (primes[i]) {
      //不能被2整除,i的倍数累加
      for (let j = 2 * i; j <= n; j += i) {
        primes[j] = false;
      }
    }
  }
  return primes.reduce((acc, val, index) => (val && acc.push(index), acc),[]);
};

最小子数组的和

const kadane = array => {
  let sum = 0;
  let maxSum = 0;
  for (let i = 0; i < array.length; i++) {
    sum = sum + array[i];
    if (sum < 0) {
      sum = 0
    }
    if (maxSum < sum) {
      maxSum = sum
    }
  }
  return maxSum
};

转换成二进制

const decimalToBinary = (num) => {
  var bin = [];
  while (num > 0) {
    bin.unshift(num % 2);
    //   num/=2
    // num>>1  相当于 num/2
    num >>= 1;
  }
  return bin.join('')
};

(47).toString(2).padStart(16,'0')

转换成八进制

const decimalTo = num => {
  let oct = 0;
  let c = 0;
  while (num > 0) {
    let r = num % 8;
    oct = oct + r * Math.pow(10, c++);
    num = Math.floor(num / 8)
  }
  return oct
};

反转字符串新写法

const reverse = arr => arr.reduce((acc, val) => [val, ...acc], []);

WebAssembly

字节码技术

一定要好好看看

https://github.com/chai2010/awesome-wasm-zh

紫云妃(微博)紫云飞(知乎)