Heim > Web-Frontend > js-Tutorial > Techniken zur Prägnanz von JavaScript-Code

Techniken zur Prägnanz von JavaScript-Code

coldplay.xixi
Freigeben: 2021-03-15 09:35:03
nach vorne
1575 Leute haben es durchsucht

Techniken zur Prägnanz von JavaScript-Code

这篇文章主要是想和大家一起学习一下,工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。

注意:下面的代码对比没有绝对的正确和错误,有些写法的使用场景会比较单一,根据大家的习惯和喜好判断即可,如果有更好或不同意见欢迎留言交流哦~

(免费学习推荐:javascript视频教程

1. 短路操作:

当我们遇到这样的情况的时候,你会是

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁
Nach dem Login kopieren

还是利用js逻辑运算来实现呢?

const res1 = item.a || item.b;const res1 = item.a && item.b;
Nach dem Login kopieren

2. 通过条件判断给变量赋值布尔值的正确姿势:

当我们需要比较单一的值来获取结果的时候,利用直接的运算,要不if判断要简洁的多~

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'
Nach dem Login kopieren

3. 在if中判断数组长度不为零的正确姿势:

场景:如果数组内存在元素,则进行操作:

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}
Nach dem Login kopieren

以此类推,当我们需要判断数组的长度为为空时:

if(!arr.length){
	// todo}
Nach dem Login kopieren

4. 使用includes简化if判断:

场景:如果参数等于1、2、3、4,就进行下一步操作

写第一版代码:

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}
Nach dem Login kopieren

看完感觉异常的头疼,遂修改为:

if([1,2,3,4].includes(a)){
	// todo}
Nach dem Login kopieren

5. 使用some判断是否存在符合条件的值:

场景:寻找是否存在价格小于n的商品

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}
Nach dem Login kopieren

方法写完了,但既然js为我们提供了那么多数组的方法,用起来:

const itemList = [
	{name: &#39;手机&#39;, price: 1000},
	{name: &#39;手机壳&#39;, price: 10},
	{name: &#39;帽子&#39;, price: 50},]const checkData = (n) => itemList.some(item => item.price < n)
Nach dem Login kopieren

再次优化

const checkData = (n, itemList) => itemList.some(item => item.price < n)
Nach dem Login kopieren

6. 使用filter方法过滤原数组,形成新数组

情景:剔除某些不需要的元素,例如每一条数据的id是之后操作的必须数据,为了剔除缺陷数据,我们会这么做:

const data = [
    { name: &#39;手机&#39;, price: 1000, id: 1 },
    { name: &#39;手机壳&#39;, price: 10, id: 2 },
    { name: &#39;帽子&#39;, price: 50, id: &#39;&#39; },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}
Nach dem Login kopieren

掌握“过滤”思想,我们这样处理:

const afterData = data.filter(item => item.id);
Nach dem Login kopieren

7. 使用map对数组内的元素进行批量处理:

情景:在涉及到价格的交互中,我们拿到的价格字段通常是以分为单位的,我们要怎么做展示呢?

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)
Nach dem Login kopieren

8. 解构数组进行变量值的替换

情景:需要将两个值进行交换

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]
Nach dem Login kopieren

9. 解构融到代码中:

情景:获取对象中的某个元素,并设置默认值

写第一版代码:

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}
Nach dem Login kopieren

10. 多个方法合体时都能做什么?(举例一)

这是最后一条代码简洁思路,拿一个具体的场景距离,抛砖引玉,欢迎大家在评论区留言~

场景:

前端拿到的数据是

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]
Nach dem Login kopieren

我们需要形成及联关系,如:

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]
Nach dem Login kopieren

于是我借助数组提供的多个api:

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);
Nach dem Login kopieren

思路:

  1. 寻找存在父级的元素
  2. 将它发到正确的位置上
  3. 返回所有没有父级字段(pid)的数据

如果大家有更多类似的思路和操作请一定要留言哦

相关免费学习推荐:javascript(视频)

Das obige ist der detaillierte Inhalt vonTechniken zur Prägnanz von JavaScript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage