整理一些js写法

2020-10-22

字数统计: 1.1k | 阅读时长≈ 5 分钟

整理一些js写法

从元素为对象的数组中提取出对象的某属性为x的快速写法，摘自vuex教程

说到底是Array的find()、filter()方法

find返回的是数组里第一个符合条件的选项，

filter返回的是数组里符合条件的选项集合，是一个数组

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

filter 其他用法

去掉数组中值为index的项目

this.arr = this.arr.filter((item) => item !== index);

判断数组中有没有值为index的项目

this.arr.filter((item) => item === index).length !== 0

反转对象的key和value的值

如果直接将对象传进去，将会改变原有对象，建议传{…obj}进去

const reverseKV = (obj) => {
 Object.keys(obj).forEach(k => {
  let value = obj[k];
  obj[value] = k;
  delete obj[k];
 });
 return obj;
}

查找数组中，对象某个属性值为val的索引(index)

优雅一点，可以用lodash的findIndex()

const findElem = (arrayToSearch, attr, val) => {
 for (let i = 0; i < arrayToSearch.length; i++) {
  if (arrayToSearch[i][attr] === val) {
   return i;
  }
 }
 return -1;
}

判断页面上的字符是否溢出

const isOverflow = (element) => {
 return element ? element[0].offsetWidth >= element[0].scrollWidth : false;
}

集成为一个vue组件

时间格式化

const timeFormat = (value) => {
 return value === 0 ? '-' : moment(value).format('YYYY-MM-DD HH:mm:ss');
}

复制到剪贴板

const copyToClipboard = (content) => {
	let tempEl = document.createElement('input');
	tempEl.setAttribute('value', content);
	document.body.appendChild(tempEl);
	tempEl.select();
	if (document.execCommand('copy')) {
		this.$message.success('复制成功');
	} else {
		this.$message.error('复制失败');
	}
	document.body.removeChild(tempEl);
}

事件中的offsetX，offsetY，只有chrome能算准，火狐firefox会时常为0，这时候就需要换一种算法

//firefox event.offsetX 时常为0
// let ox = event.offsetX; //
// let oy = event.offsetY;
let srcObj = event.target || event.srcElement;
let ox = event.offsetX || (event.clientX - srcObj.getBoundingClientRect().left);
let oy = event.offsetY || (event.clientY - srcObj.getBoundingClientRect().top);

div支持拖动并限制四周不超过浏览器页面

需要拖动的元素：@mousedown.prevent="move"

元素中拖动无法点击的元素：@mousedown.stop

const move = (e) => {
    let draggableElement = this.$refs['popper'] || e.target;        //获取目标元素
    // 算出鼠标相对元素的位置
    let disX = e.clientX - draggableElement.offsetLeft;
    let disY = e.clientY - draggableElement.offsetTop;
    document.onmousemove = (e) => {       //鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        let bottom = window.innerHeight - draggableElement.offsetHeight;
        let right = window.innerWidth - draggableElement.offsetWidth;
        // 限制拖出页面
        top <= 0 && (top = 0);
        left <= 0 && (left = 0);
        left >= right && (left = right);
        top >= bottom && (top = bottom);
        // 移动当前元素
        draggableElement.style.left = left + 'px';
        draggableElement.style.top = top + 'px';
        // 这两句如果拖动元素没有设置bottom和right可以去掉
        draggableElement.style.bottom = 'unset';
        draggableElement.style.right = 'unset';
    };
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

手动排队等待请求，一次仅允许发送n个请求

如果真的请求特别多，建议去使用更好的（官方一些的）方法

const handleRequestQueue = (paramsArr, maxLength, callback) => {
    const paramsLength = paramsArr.length;
    const requestsQueue = [];
    const results = [];
    let i = 0;
    const handleRequest = (param) => {
        const req = api.getSomething(param).then(res => {
            const len = results.push(res);
            typeof callback === 'function' && callback(res);
            if (len < paramsLength && i + 1 < paramsLength) {
                requestsQueue.shift();
                handleRequest(paramsArr[++i]);
            }
            // 所有请求发送完毕
        }).catch(e => {
            results.push(e);
        });
        if (requestsQueue.push(req) < maxLength) {
            handleRequest(paramsArr[++i]);
        }
    };
    handleRequest(paramsArr[i]);
}

30 seconds of code

javascript-switch-object 代替switch switch的优雅写法

const switchFn = (lookupObject, defaultCase = '_default') =>
  expression => (lookupObject[expression] || lookupObject[defaultCase])();

const knownFruit = () => console.log('Known fruit');
const unknownFruit = () => console.log('Unknown fruit');

const logFruit = {
  'apples': knownFruit,
  'oranges': knownFruit,
  'default': unknownFruit
};

const fruitSwitch = switchFn(logFruit, 'default');

fruitSwitch('apples'); // Logs: 'Known fruit'
fruitSwitch('pineapples'); // Logs: 'Unknown fruit'

getURLParameters

JavaScript

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );

Examples

getURLParameters('google.com'); // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith');
// {name: 'Adam', surname: 'Smith'}

createElement

JavaScript

const createElement = str => {
  const el = document.createElement('div');
  el.innerHTML = str;
  return el.firstElementChild;
};

Examples

const el = createElement(
  `<div class="container">
    <p>Hello!</p>
  </div>`
);
console.log(el.className); // 'container'

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！