ES6 filter 过滤数组 | 图片onload同步等待获取图片宽高

过滤普通元素

var a=[1,2,3,4,5]

var b=[2,3,7,8,9]

a.filter(item=>b.indexOf(item)==-1)

过滤对象

let arr1 = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
let arr2 = [{ id: 1 }, { id: 2 }, { id: 3 }];

const all = [...arr1, ...arr2].reduce((all, n) => {
  n = JSON.stringify(n);
  all.set(n, (all.get(n) || 0) + 1);
  return all;
}, new Map());

// 找交集
for(const dataset of  all){
    const [key,num] = dataset;
    if(num > 1){
        const {id} = JSON.parse(key) ?? 0;
        arr1.splice(arr1.findIndex(item => item.id === id), 1)
        arr2.splice(arr2.findIndex(item => item.id === id), 1)
      } 
}
console.log(arr1);
console.log(arr2);

图片onload同步等待获取图片宽高

let images = [
    '1.jpg',
    '2.jpg'
  ];
  let promiseAll = [], imgs = [], total = images.length;
  for (let i = 0; i < total; i++) {
    promiseAll[i] = new Promise((resolve, reject) => {
      imgs[i] = new Image();
      imgs[i].src = images[i];
      imgs[i].onload = function() {
        resolve(imgs[i]);
      };
    })
  }
  Promise.all(promiseAll).then(img => {
    // 全部图片加载完成
  })

handleChange = ({ file, fileList }) => {
    const { dispatch } = this.props;
    // 【重要】将 图片的base64替换为图片的url。 这一行一定不会能少。
    // 图片上传成功后，fileList数组中的 thumbUrl 中保存的是图片的base64字符串，这种情况，导致的问题是：图片上传成功后，点击图片缩略图，浏览器会会卡死。而下面这行代码，可以解决该bug。
    fileList.forEach(imgItem => {
      if (imgItem && imgItem.status == 'done' && imgItem.response && imgItem.response.imgUrl) {
        imgItem.thumbUrl = imgItem.response.imgUrl;
      }
    });

    dispatch({
      type: 'mymodel/setImgList',
      payload: fileList,
    });
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = file => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  // 参考链接：https://www.jianshu.com/p/f356f050b3c9
  handleBeforeUpload = file => {
    //限制图片 格式、size、分辨率
    const isJPG = file.type === 'image/jpeg';
    const isJPEG = file.type === 'image/jpeg';
    const isGIF = file.type === 'image/gif';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!(isJPG || isJPEG || isGIF || isPNG)) {
      Modal.error({
        title: '只能上传JPG 、JPEG 、GIF、 PNG格式的图片~',
      });
    } else if (!isLt2M) {
      Modal.error({
        title: '超过2M限制，不允许上传~',
      });
    }

  }

    // 参考链接：https://github.com/ant-design/ant-design/issues/8779
    return new Promise((resolve, reject) => {
      if (!(isJPG || isJPEG || isGIF || isPNG)) {
        reject(file);
      } else {
        resolve(file && this.checkImageWH(file));
      }
    });

  };

  //返回一个 promise：检测通过则返回resolve；失败则返回reject，并阻止图片上传
  checkImageWH(file) {
    let self = this;
    return new Promise(function(resolve, reject) {
      let filereader = new FileReader();
      filereader.onload = e => {
        let src = e.target.result;
        const image = new Image();
        image.onload = function() {
          // 获取图片的宽高，并存放到file对象中
          console.log('file width :' + this.width);
          console.log('file height :' + this.height);
          file.width = this.width;
          file.height = this.height;
          resolve();
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
    });
  }

// for循环中应用 async await
function getData(n){//通过该接口改变数据
    // console.log('n',n)
    return  new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(n+1)//原来的数据上+1
        },400)
    })
}

let data = [0,1,2,3,4,5,6,7,8,9]

async function subData(){//提交数据保存
    for(let i = 0;i<data.length;i++){
        const res = await getData(data[i])
        console.log(res)
    } //改变数据

    console.log('sub')//提交数据
}

subData()


// 递归中应用 async await
function getData(n){//通过该接口改变数据
    // console.log('n',n)
    return  new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(n+1)//原来的数据上+1
        },400)
    })
}

let data = [0,1,2,3,4,5,6,7,8,9]

async function digui(index,arr){
    if(index<data.length){
       let res = await getData(data[index])
       console.log(res)
       arr.push(res)
       await digui(index+1,arr)
    }

    return arr
}

async function subData(){
    const newList = await digui(0,[])
    // console.log(newList)
    console.log('sub')
}

subData()

// for循环和递归中同时应用 async await
async function setKey(childList, unique) {
	for (let a = 0; a < childList.length; a++) {
		let temp = childList[a]
		const nestedPath = unique ? `${unique}/${temp.name}` : temp.name
		const node = psd.tree().childrenAtPath(nestedPath)[0]
		if (node && node.layer && node.layer.image) {
			const savePath = `./temp/${node.get('name')}.png`
			const layerId = `node-${node.layer.width}${node.layer.height}${node.layer.left}${node.layer.right}${node.layer.top}${node.layer.bottom}`
			if (layerId !== 'node-000000') {
				temp.layerId = `node-${node.layer.width}${node.layer.height}${node.layer.left}${node.layer.right}${node.layer.top}${node.layer.bottom}`
				await node.layer.image.saveAsPng(savePath)
				const data = await request.post({
					url: 'http://admin-test***/upload',
					headers: {
						'X-Access-Token':'eyJ0eXAiOiYWRtaW4ifQ.uP5UouVppQwPardG0WqmCdz2piw0q9HO5b8BgR_7rCk'
					},
					formData: {
						file: fs.createReadStream(savePath)
					}
				})
				temp.imgSrc = JSON.parse(data)?.result?.thumbnailUrl
				console.log(data, 'result data')
			}
		}
		temp.nestedPath = nestedPath
		if (temp.children && temp.children.length) {
			await setKey(temp.children, temp.name)
		}
	}
}
;(async () => {
	await setKey(childrens)
	console.log(childrens, '🔥🔥🔥')
	fs.writeFileSync('schemaNew.json', JSON.stringify(childrens, null, 2))
})()