简介: 在刚进入项目时候,很可能遇到一些问题,我这里分成了三个模块,第一个模块是ES6的一些方法的妙用,整理了一些可能会被人忽略的函数以及一些参数的使用;第二个模块是有关if else的一。..
简介: 在刚进入项目时候,很可能遇到一些问题,我这里分成了三个模块,第一个模块是ES6的一些方法的妙用,整理了一些可能会被人忽略的函数以及一些参数的使用;第二个模块是有关if else的一些技巧,说来也是刚到阿里园区受到一位老哥影响,做了一些学习,对一些使用做了下整理;最后一个模块是有关react hook的入门,对于hook来说,最常用的一些地方就是组件传值以及组件传方法,在这里我对这部分所涉及的各种情况做了一些整理,希望对大家有所帮助,当然我也是能力有限,一些笔误或者使用上不够规范的欢迎留言或私我讨论。
一、ES6篇
1 | ### 二、Array.from() |
使用规则为
1 | Array.from(arrayLike, mapFn, thisArg) |
功能上他能实现什么呢?
三、将string类型转为数组
1 | const str = 'wangjingyu'; |
1 | 通过Array.from()方法,我们可以使用更少的代码完成我们需要做到的功能。 |
四、解构原始数据
我们大多数在使用对象时候,会将一个大对象分出小的属性,属性值来使用,其中,我们可能会觉得某一个对象里面的属性值太多,而我们只需要其中的若干个,这里我们就可以使用这种方法来做解构。
1 | const rawUser = { |
}
1 | let user = {}, userDetails = {}; |
1 |
|
我们可以把attName作为变量名,但是只能在对象之外对他做赋值操作,并不能做到让person对象的属性动态变化。可能有的人要说,那我把那么当成一个变量就好了,就比如:
1 | attName : 'wjy', |
}
1 | console.log(person[attName],person.attName) |
1 |
|
这样我们就可以动态设定对象的属性名了。
六、symbol的对象使用
作为ES6新提出的变量类型,虽然symbol属性已经出来很久了,但是很多时候我们还是很少使用它,这里提到一种小小的用法,仅仅作为抛砖,更多的方法等着各位dalao来补充扩展。
对于一个已经存在的对象,里面可能存在一个属性key,名字暂且为’id’,在多人开发时候可能会有其他人也对此对象做了内部属性命名为id操作,或者说他继承了这个对象,并且对这个对象做了重写,那么这样会导致这个对象的id被覆盖。从而出现一些问题。这个时候就可以让symbol大显身手了。
1 | const custId = Symbol.for('id'); |
'id' : '23322232',
'iq' : '150',
};
1 | console.log(obj); |
`那么问题来了,我们怎么把他取出来呢,如果采用常规的for循环,结果是这样的:```java
1 | for(let [key,value] of Object.entries(obj)){ |
}
1 | // let of id 23322232 |
`确实不太行,我们可以用symbol的api去获取:```java
1 | Object.getOwnPropertySymbols(obj).forEach((item) => { |
})
1 | // 0100110100 |
`确实是可以的,但是如果我们想for循环整体obj呢,这时候可以使用反射Reflect的相关api:```java
1 | Reflect.ownKeys(obj).forEach(item => { |
})
1 | // 23322232 |
1 |
|
在工作中其实这种已经是我们的常态了,不过我们可以更进一步,借助其他数据类型帮助我们简化代码,比如用个对象存储if else的各种情况:
1 | 1 : ['one','oneEvent'], |
}
1 | const consoleLog = (status) => { |
}
1 | const consoleRun = (status) => { |
}
1 | const objOperation = (status) => { |
}
1 | objOperation('222') |
`这样就清爽很多了,比如我在做播放录音点击修改倍速时候可以写得更加精简,比如:```javascript
1 | // 设置点击修改倍速条件 |
};
1 | const operation = obj[status]; |
};
1 | objOperation(speed); |
`当然,如果你不想用Object表示,你还可以用Map来表示呀:```java
1 | const map = new Map([ |
])
}
}
1 | const mapOperation = (status) => { |
}
1 | mapOperation(222) |
1 |
|
1 | 这。。。看起来也太长了,如果说单层判断还可以接受,那么这种长度的判断,看起来确实有点难受,不过这种情况也很普遍,可能我遇到了这样的问题,也会首先采用这种模式去进行代码的编写。但是我们要知道,一旦判断层级多了一级,那么我们增加的条件就是2(n)倍,这时候要怎么去写呢?我们仍然可以采用map或者object去处理: |
1 | ['ly_1', () => {consoleLog('lyone');consoleRun('ly_1')}], |
])
1 | const mapOperation = (status,roommate)=>{ |
}
1 | mapOperation(1,'wjy') |
`用Object来写也是一样,如下:```javascript
1 | 'ly_1': () => {consoleLog('lyone');consoleRun('ly_1')}, |
}
1 | const objOperation = (status,roommate)=>{ |
}
1 | objOperation(1,'wjy') |
1 |
|
这样我们就可以看到Object和Map的一个主要区别了,在使用Map类型时候我们可以选择通过对象来作为key值。当然还有可能出现这种情况,比如同一个方法在某几个条件中都被同时使用,并且传了相同的参数比如:
1 | [{status:'1',roommate:'ly'}, () => {consoleRun('ly')}], |
])
`这个时候就可以采用正则去进行了,把前四条作为一个整体去匹配正则,比如:```javascript
1 | const ) => { |
])
}
1 |
|
这里可以发现,和前面只有一点不同,就是三个else分别是三个不同的条件,这样用default处理就要分成三部分,这里采用正则试试看咯:
1 | [/^ly_1$/, () => consoleLog('lyone')], |
])
}
1 | const mapArray = new Map([ |
])
1 | const mapOperation = (status,roommate) => { |
}
1 | }); |
}
1 | mapOperation(10000,'ly1') |
1 |
|
这是最简单的,也是最常用的,基本任何一个项目都会用到,也是我们一般抽出业务组件最基本的类型。
十、父组件传方法给子组件/子组件传值给父组件
个人理解这两类其实是一类,只是一个大的集合和一个小的集合的区别,就是说父组件传方法给子组件是一个大的模块,而恰巧这个模块中囊括了子组件传值给父组件这个功能。举个例子:
父组件:
1 | const [value, setvalue] = useState('') |
}
1 | <Children method={method} /> |
)
}
`子组件:```java
1 | const { method } = props; |
);
};
1 | method:PropTypes.func |
};
1 | method:() => {} |
};
1 |
|
说起来useRef也是很神奇的,在这里,我们的子组件暴露给父组件的方法是childrenMethod,并且做了一个指代,父组件通过这个指代获取到子组件方法,从而进行调用。当然这里我只是针对hook做的分析,如果是类组件里,就要使用createRef了。需要了解的也可以看看这个文章,个人感觉还不错:https://zhuanlan.zhihu.com/p/269580627
到这里,对于父子组件传值,传函数都做了一个介绍和描述,作为新上手项目的同学来说,可以从我这个基础例子出发,去感受React编程更为神秘的地方。
十二、结语
之前在分享React生命周期之后,就想对JS一些我用到的以及一些想要在接下来项目中用到的小知识点做一些整理,当然我接触项目时间也不久,暂时就统计到了这些,后续有新的收获,还会持续统计更新。
https://developer.aliyun.com/article/783279?utm_content=g_1000259721
本文为阿里云原创内容,未经允许不得转载。
本文标题: 初入项目JS可能遇
发布时间: 2021年02月08日 00:00
最后更新: 2025年12月30日 08:54
原始链接: https://haoxiang.eu.org/6b403914/
版权声明: 本文著作权归作者所有,均采用CC BY-NC-SA 4.0许可协议,转载请注明出处!

