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.isNaNNumber.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()方法会返回一个由给定对象的自身可枚举属性的数组
算法
一定范围内的质数数组
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