weixin_43915401的博客

中遇到的问题，如何根据图片url获取到图片存储大小。

在只有图片地址的情况下，将图片压缩后显示，一开始用的browser-image-compression插件，这是js压缩，是个异步函数，速度有点慢，于是大佬提出用canvas压缩，一番百度之后，抽出了一个基础版。试了下"image/jpg"和"image/png"，同一张图，原图尺寸的情况下，压缩文件变大了，如果使用缩略图尺寸，那倒是压缩了，毕竟图片是真变小了，但效果没有"image/jpeg"好。但是它自带的图片压缩功能，把4.93M的图片压成了33.8k，它都压那么好了我还能压什么。

上面的代码，可能存在设置addEventListener之前，图片已经加载完了，onload事件不处罚。调换一下img.src和img.addEventListener顺序试试。

1 array.sort()数组自带的sort，按照字符串规则排序console.log([5,4,3,2,11].sort()) // 11,2,3,4,5console.log(["5","4","3","2","11"].sort()) // 11,2,3,4,5console.log(["5五","4四","3三","2二","11一"].sort()) // 11一,2二,3三,4四,5五console.log(["五","四","三","二","一"].sort())// 一，二，三，

1 split、2 replace、3 replaceAll1 split(separator,howmany)返回一个字符串数组。该数组是通过在 separator 指定的边界处将字符串分割成子串创建的。返回的数组中的字串不包括 separator 自身。但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）1.1 separator必需。字符串或正则表达式，从该参数指定的地方分割字符串1.2 howm

var name='window上的name'var obj ={ name: "obj上的name", getName: function(i){ console.log(this.name, i); }}var obj2 = { name: "obj2上的name"}1 返回函数Function.prototype.myBind = function(context) { // 获取调用`myBind`的函数本身，用this获取 var self

var name='window上的name'var obj ={ name: "obj上的name", getName: function(i){ console.log(this.name, i); }}var obj2 = { name: "obj2上的name"}1 绑定上下文Function.prototype.myApply=function(context){ // 获取调用`myApply`的函数本身，用this获取 context.f

1 下载npm install --save react-to-print2 引用import ReactToPrint from 'react-to-print';3 调用 //触发按钮<ReactToPrint trigger={() => <a href="#">点此打印</a>} content={() => this.ref}/>//打印内容<div ref={el => (this.ref = el)}

https://es6.ruanyifeng.com/

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。同步任务会在调用栈中按照顺序等待主线程依次执行异步任务会先进入Event Table并注册函数，当指定的事情完成后，Event Table会将注册的回调函数放入移入Event Queue，等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。宏任务 MacroTask：script全部代码、setTimeout、setInterval、se

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(function/code, milliseconds, param1, param2, ...)1 参数1.1 function/code必需。要调用一个代码串，也可以是一个函数。1.2 milliseconds可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。1.3 param1, param2, …可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参

在javascript中定义二进制需使用0b开头console.log(0b1001); // 9console.log(1001); // 1001

1获取当前时间let date = new Date(); // 时间戳console.log(date); // Wed Feb 24 2021 11:28:56 GMT+0800 (中国标准时间)// 当前年console.log(date.getFullYear()); // 2021// 当前月份（0-11，0代表1月） console.log(date.getMonth()); // 1// 当前日（1-31) console.log(date.getDate()); // 24

let a = [1, 2, 3];let b = { a: 1 };function fn() {}fn.prototype = [];clet c = new fn();1 Array.isArray(a)es6方法，推荐console.log(Array.isArray(a)); // trueconsole.log(Array.isArray(b)); // false;console.log(Array.isArray(c)); // false2 a instanceof

https://blog.youkuaiyun.com/lyc2786161648/article/details/86429375

1、深拷贝的的方法递归循环引用时不能用递归可以用栈保存json.parse(json.stringify(obj))

1 typeof可以确定值的原始类型1.2 使用typeof value1.2 返回值boolean：布尔值function：函数number：数值object：对象或nullstring：字符串symbol：符号undefined：未定义1.3 缺点不能具体细分对象console.log(typeof null) // objectconsole.log(typeof []) // objectconsole.log(typeof undefined) // undefi

1、基本数据类型undefined null Boolean number string1.1 基本类型值指的是简单的数据段1.2 在内存中占据固定大小的空间，被保存在栈内存中1.3 按值访问，可以操作保存在变量中的实际的值1.4 不能给基本数据类型的值添加属性，尽管这样做不会导致错误var name = 'abc';name.type = 'string';console.log(name.type); // undefined1.5 复制时会创建值的副本，两个变量的操作不会互相影响

let test = {}console.log(test.flag) // undefinedconsole.log('flag' in test) // falseconsole.log(test.hasOwnProperty('flag')) // false1 点（.）或者方括号（[]）如果对象自身和原型链上不存在该属性，返回undefined，但是无返区别值为undefined的属性2 in 运算符如果对象自身或原型链上存在该属性，返回true，否则返回false3 hasOwn

window.location中的属性1 hostname 不带端口号的服务器名称“www.wrox.com”2 port URL中指定的端口号如果没有指定端口号，返回空字符串“80”3 host 服务器名称和端口号如果没有指定端口号，返回值和hostname相同“www.wrox.com:80”4 protocal 页面使用的协议通常是http或https“http”5 pathName URL中的目录和（或）文件“WileyCAD/page”6 search URL的查询字符

1 基本用法let f = (x = 1, y = 2) => { console.log('x:', x, 'y:', y);}f(); // x: 1 y: 2f(100); // x: 100 y: 2f(100, 200); // x: 100 y: 200f(100, 200, 300); // x: 100 y: 2002 使用解构赋值let f = ({ x= 1, y = 2 }) => { // 是等号不是冒号 console.log('x:'

1 存储window.localStorage.setItem('key', value)2 读取window.localStorage.getItem('key', value)3 删除window.localStorage.removeItem('key', value)4 清空window.localStorage.clear()

1 typeofconsole.log(typeof 123) // numberconsole.log(typeof 'abc') // stringconsole.log(typeof true) // booleanconsole.log(typeof undefined) // undefinedconsole.log(typeof null) // objectconsole.log(typeof {a: 1}) // objectconsole.log(typeof [1,2,3]

ip 保存在localStorage中export default function getUserIP(finished) { // console.log(window.RTCPeerConnection,window.webkitRTCPeerConnection,window.mozRTCPeerConnection) var RTCPeerConnection = window.RTCPeerConnection || window.webkitR

谷歌解决办法搜索chrome://flags/#enable-webrtc-hide-local-ips-with-mdns将Anonymize local IPs exposed by WebRTC置为disabled据说Google webrtc 的ip地址之前是暴露的，然后有了mDNS功能，把ip地址隐藏了，要获取ip的话，要把mDNS关闭，但是这个插件开关，只在85版本及以前可以找到，86开始就找不到了，更别提关闭，太难了火狐解决办法搜索about:config将media.pee..

1 forEach(回调函数)1.1 遍历数组，对数组没做任何改变，返回undefined1.2 回调函数(当前元素，当前元素的索引，当前元素所属的数组对象)let a = ['a','b','c'];// 遍历数组alet b = a.forEach((item, index, arr) => { console.log(item, index, arr);})console.log(b);// a 0 ["a", "b", "c"]// b 1 ["a", "b",

render中直接执行事件导致onChange={this.onChange()}

Promise是异步编程的一种解决方法。简单说就是一个容器，保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取一步操作的消息。Promise对象有两个特点：1 对象状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败），只有异步操作的结果可以决定当前是哪种状态。2 一旦状态改变，就不会再改。任何时候都可以得到这个结果。Promise对象状态改变只

使用JSON.stringify()方法时对象有一个循环引用导致的。例如let a = {};let b = {a: a};a.b = b;let c = JSON.stringify(a) // 该行报错

<Select onChange={this.select}> <Select.Option value={1} extraData={101}>选项1</Select.Option> <Select.Option value={2} extraData={102}>选项2</Select.Option> <Select.Option value={3} extraData={103}>选项3</Selec

1 与运算符的用途1.1 清零与一个各位都为零的数值想与，结果为零123 & 0// 01.2 判断奇偶123 & 1// 1122 & 1// 01.3 取一个数的指定位比如取数X = 1010 1110 的低4位，只需要找一个数Y，令Y的低四位为1，其余位为0，即Y = 0000 11111010 1110 & 0000 1111//0000 1110比如取数X = 1010 1110 的第3位，只需要找一个数，令Y的第3位为1，其余位为

render() { return <button onClick={this.handleClick}></button>}1、在constructor中绑定constructor(props) { super(props); this.handleClick = this.handleClick.bind(this);}handleClick() { 函数处理}2、类属性handleClick = () => {

1、call（）第一个参数是this指向，后面依次是参数f.call(ojb，参数1，参数2…)2、apply（）第一个参数是this指向，第二个参数是数组，用数组形式表示参数f.apply(obj, [参数1， 参数2…])3、bind()第一个参数是this指向，后面依次是参数只改变this指向，不会调用参数f.bind(obj，参数1，参数2…)...

for in 用于遍历数组或者对象的属性let nums = ['a', 'b', 'c'];for (let key in nums) { console.log(nums[key]);}// a b clet nums = {1: 'a', 2: 'b', 3: 'c'};for (let key in nums) { console.log(nums[key]);}// a b cfor of 用于循环可迭代的对象（数组/map/set），object对象不可迭代

JSON.stringify(data) == "{}"

Math.max(...array)Math.min(...array)let array = [4,6,83,2,35,84,2,9,34];/**最大值 */console.log( Math.max(...array) // 84)/**最小值 */console.log( Math.min(...array) // 2)

1、数组中是否有某个元素1.1 a.indexOf()1.2 a.find(）1.2 a.findIndex()let array = ['a', 'b', 'c'];console.log(array.indexOf('d')) // -1// 用于找出第一个符合条件的数组元素/** * 它的参数是一个回调函数，所有数组元素依次遍历该回调函数， * 直到找出第一个返回值为true的元素，然后返回该元素，否则返回undefined。 */console.log(array.find(

使用a.localeCompare(b）用本地特定的顺序来比较两个字符串。let a = ['第一', '第三', '第二', '第一','c','b','a','3','2','1','12']a.sort((a, b) => { return a.localeCompare(b) })console.log(a) // [ '1', '12', '2', '3', 'a', 'b', 'c', '第一', '第一', '第三', '第二' ]...

1、取整1.1 向下取整Math.floor() 和 parseInt()Math.floor(2.345) // 2parseInt(2.345) // 21.2 向上取整Math.ceilMath.ceil(2.345) // 31.3 四舍五入取整Math.round(2.5) // 3Math.round(2.45) // 22、四舍五入保留小数点后n位(2.35).toFixed(1) // 2.4(2.35124).toFixed(7) // 2.351240

闭包函数：声明在一个函数中的函数闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）之后特点：1、让外部访问函数内部变量变成可能2、局部变量会常驻在内存中3、可以避免使用全局变量，防止全局变量污染4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）官话版闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行时，外部函数的引用地址不同，都会重新创建一个新的地址但凡是当前活动对象中有被内