es6
<h3>一、取值</h3>
<pre><code class="language-javascript"> const obj={
a:1,
b:2,
c:3
}
吐槽:
const a=obj.a;
const b=obj.b;
const b=obj.c;
改进:
const {a,b,c}=obj || {} //结构对象不能为undefault或者null
const f=a+b;
优化:
const {a:a1}=obj
console.log(a1)</code></pre>
<h3>二、合并数据</h3>
<pre><code class="language-javascript"> const a=[1,2,3,4,5]
const b=[5,6,7,8,9,10]
const c=a.concat(b)
const obj1={
a:1
}
const obj2={
b:1
}
const obj=Object.assign({},obj1,obj2)
吐槽:
ES6的扩展运算符是不是忘记了,还有数组的合并不考虑去重吗?
改进:
const a=[1,2,3,4]
const b=[2,1,4,5,6]
const C={...new Set([...a,...b])}
const obj1={
a:1
}
const obj2={
b:1,
}
const obj={...obj1,...obj2}</code></pre>
<h3>三、拼接字符串</h3>
<pre><code class="language-javascript"> const name='小明';
const score=59;
let result='';
if(score>=60){
result=`${name}的考试成绩及格`
}else{
result=`${name}的考试成绩不及格`
}
吐槽:
模板字符串的使用
改进:
const name='小明'
const score=59
const result=`${name}${score>=60 ? '的考试成绩及格' : '的考试成绩不合格'}`</code></pre>
<h3>四、if中的判断条件</h3>
<pre><code class="language-javascript"> if(type==1||type==2||type==3){
......
}
吐槽:
ES6中数组实例方法includes会不会使用呢?
改进:
const condition = [1,2,3]
if(condition.includes(type)){
......
}</code></pre>
<h3>五、搜索列表</h3>
<pre><code class="language-javascript"> const a=[1,2,3,4,5]
const result=a.fittler(
item=>{
return item===3
}
)
吐槽:
如果不是精确搜索使用es6的find,有助与性能优化
改进:
const a=[1,2,3,4,5]
const result=a.find(
item=>{
return iotem===3
}
)</code></pre>
<h3>六、扁平化数组</h3>
<pre><code class="language-javascript">//将多个部门的人员提取到一个集合中
const deps={
'采购部':[1,2,3,4,5],
'人事部':[1,6,3,8,7],
}
let member=[];
for(let item in deps){
const value=deps[item];
if(Array.isArray(value)){
member=[...member,...value]
}
}
member=[...new Set(member)]
吐槽:
获取对象的全部属性值还要遍历吗?Object.values忘记了吗?还有涉及到数组的扁平化处理,为啥不用ES6提供的flat方法呢,还好这次的数组的深度最多只到2维,还要是遇到4维、5维深度的数组,是不是得循环嵌套循环来扁平化?
改进:
const deps={
'采购部':[1,2,3,4,5],
'人事部':[1,6,3,8,7],
}
let member=Object.Values(deps).float(Infinity) //其中使用Infinity作为flat的参数,使得无需知道被扁平化的数组的维度。 float不支持IE</code></pre>
<h3>七、获取对象是属性值</h3>
<pre><code class="language-javascript"> const name=obj&& obj.name;
吐槽:ES6中的可选链操作符会使用么?
改进:
const name=obj?.name?</code></pre>
<h3>八、添加对象</h3>
<pre><code class="language-javascript"> let obj={}
let index=1
let key=`topic${index}`
obj[key]='话题内容'
吐槽:
能不额外创建变量就别额外创建变量,直接使用模板字符串就可以
改进:
let obj={};
let index=1;
obj[`topic${index}`]=`话题内容`</code></pre>
<h3>九、输入框非空判断</h3>
<pre><code class="language-javascript"> if(value !== null || value !== undefault||value !==''){
//
}
吐槽:
ES6中新出的空值合并运算符了解过吗,要写那么多条件吗?
改进:
if((value??'') !==''){
//
}</code></pre>
<p>作者:常鑫</p>
<p>日期:2022.1.10</p>