封装思想

先写几个最近学到的写法

1.字符串转字符数组

[...'abcdefg']  //['a', 'b', 'c', 'd', 'e', 'f', 'g']

当你new一个字符串的时候，字符串给实例身上加一个Symbol(Symbol.iterator): ƒ Symbol.iterator 属性

所以你是可以使用...（扩展运算符）了

总结一下原生具备Iterator接口的数据结构如下： Array、Map、Set、String、TypedArray、函数的argumens对象、NodeList对象

2.数组扁平化(在不确定多少层时也可)

[1,2,3,[1,2,6,7,[1,6,7]]].toString().split(',').map((item) => Number(item) );

3.Array.of()方法(用来弥补数组构造函数Array的不足)

Array(7)  //[ , , , , , , ] 。 一个参数代表声明数组的长度
Array()  // []
Array(1,2,3) // [1, 2, 3]。参数是数组的项
Array.of() // []
Array.of(3) // [3]
Array.of(undefined) // [undefined]
Array.of(1,2,3) //[1, 2, 3]

4.手动实现一个Array.of(兼容旧环境)

  function ArrayOf(){
    return [].slice.call(arguments); // Array.prototype.slice.call(arguments)
 }

5.封装思想（隐藏实现细节，对外只提供公共的访问方式）

模拟数据

let e = {
    variables:{ 
    endDate:'20220720',
    issueDate:'20220719',
    payDate:'20220620',
    deliveryDate:'20220630',
    issueAmount:'12321321434'
    }
} //一个数据
//两个处理函数
formatter = () => {
}
withDateFormat = () => {
}

5.1初始化代码

   const dateArr = ['endDate','issueDate','payDate','deliveryDate','issueAmount'];
      for( let value of dateArr){
        e.variables[value] = value ==='issueAmount' ?  formatter( e.variables[value]) : this.withDateFormat(e.variables[value]);
      }

5.2优化代码(使用forEach)

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => {
    e.variables[item] = item ==='issueAmount' ?  formatter( e.variables[item]) : this.withDateFormat(e.variables[item]);
})

5.3优化代码(使用封装的思想提取公共部分)

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => {
 let CB = item ==='issueAmount' ? formatter : this.withDateFormat;
 e.variables[item] = CB(e.variables[item]);
})

5.4优化代码(使用自执行函数)

['endDate','issueDate','payDate','deliveryDate','issueAmount'].forEach((item) => {
        e.variables[item] = (item ==='issueAmount' ?  formatter : this.withDateFormat)(e.variables[item]);
 })

6.计算属性名

if(type === 'query'){
	this.setState({
	queryLoading:true
	})
}
if(type === 'refresh'){
	this.setState({
	refreshLoading:true
	})
}

使用js中对象的计算属性 : ES6增加了可计算属性名，可以在文字形式中使用[ ]包裹一个表达式来 当做属性名

this.setState({
[type === 'query' ? 'queryLoading' : 'refreshLoading']:true,
})

本文正在参加技术专题18期-聊聊Go语言框架