使用 let/const
-
var
命令会发生“变量提升”现象,既变量可以在声明之前使用,值为undefined
。个人认为,对声明的变量确定后面不会发生更改时,即使性能上没有太大提升差异在,但使用const
,代码的可读性也会增强很多。 -
const
实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。 -
let 变量指向的内存地址,保存的只是一个指向实际数据的指针。
解构赋值
-
ES6
允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 -
好处就是解决了访问多层嵌套的对象或数组的命名,减少代码量
-
补充
const
定义的变量不是数据不可变,而是保存的引用地址不能发生改变。例子如下:
const person = { age: 22 }
person.age = 1
console.log(person.age) // 1
复制代码
声明多个变量
// 声明变量
let age = 22;
let name = 'guodada';
let sex = 1;
// 更好的方法 (better)
let [age, name, sex] = [22,'hehe',true]
console.log(age,name,sex) // 22, hehe, true
复制代码
使用在对象中
const obj = {
name: {
firstName: '小明',
lastName: '小红'
}
}
// 提取变量
const firstName = obj.name.firstName;
const lastName = obj.name.lastName;
// 更好的方法 (better)
const {
firstName,
lastName
} = obj.name;
复制代码
使用在函数中
// 在参数中结构赋值,获取参数,当参数多的使用时候十分方便
function Destructuring({ name, age}){
return {name, age} // 相当于 {name:name, age:age} 可以简写
}
const params = { name: 'guodada', age:22 }
Destructuring(params)
复制代码
ES6 允许在对象之中,直接写变量。这时属性名为变量名,属性值为变量的值。
function f(x, y){
return {x:x, y:y}
}
// better
function f(x, y){
return {x, y};
}
f(1, 2) // Object {x:1, y:2}
复制代
扩展符的运用
-
ES6 扩展符有很多用法,他可以使你的代码更加简洁,易懂。这里就举例常用的用法。
在对象中的用法:
let obj = {
name: 'guodada',
age: 22,
sex: 1
}
// 复制对象。扩展符为浅复制!!!
const copy = { ...obj }
// 修改对象属性值(生成新对象) 相当于 Object.assgin({}, obj, { age: 18 })
const newObj = { ...obj, age: 18 }
// 结合结构赋值
let { sex, ...hehe } = obj
console.log(hehe) // hehe { name: 'guodata', age: 22}
复制代码
在数组中的用法
const arr = [1, 2, 3];
const arr2 = [4, 5, 6, 4];
// 复制数组。扩展符为浅复制!!!
const newArr = [...arr]; // ...[1,2,3] => 相当于展开数组:1,2,3
// 合并数组
const conbineArr = [...arr, ...arr2];
// 结合求最大值函数
Math.max(...arr)
// 结合 Set 实现数组去重。注意:json 等对象数组不可用;
let arr3 = [...new Set(arr2)] // [4,5,6]
复制代码
数组的用法
使用 reduce 代替 filter + map
const arr = [{
sex: 1,
age: 10
}, {
sex: 1,
age: 19
}, {
sex: 0,
age: 12
}]
const result = arr.reduce((list, item) => {
item.sex === 1 && list.push({
sex: '男',
age: item.age > 18 ? '成年' : '未成年'
})
return list
},[])
console.log(result)
复制代码
基本用法
const arr = [1,2,3,4];
Array.isArray(arr) // 判断是否为数组
arr.includes(2) // true 判断数组中是否包含某项
arr.findIndex(d => d === 3) // 2 找出第一个符合条件的数组成员并返回数组下标, 找不到返回 -1
arr.find(d => d === 3) // 3 找出第一个符合条件的数组成员并返回,找不到返回 undefined
// es5 其他还有filter map forEach 等
arr.every(d => d > 2) // false 每一项都满足条件则返回true
arr.some(d => d > 2) // true 只要有一项满足条件则返回true
复制代码
-
find/findIndex
:找出第一个符合条件的数组成员之后不再匹配,一定程度下优化查找。 -
includes
:返回true/false
,相对于indexOf
,使用多了
常用的对象转数组的用法:
const obj = { name: 'guodada' }
Object.keys(obj) // ['name']
Object.values(obj) // ['guodada']
Object.entries(obj) // [['name', 'guodada']]
复制代码
flat()
: 扁平化数组, 常用于讲数组转化为一维数组。
const arr = [1, 2, [3, 4]]
arr.flat() // [1, 2, 3, 4] 扁平化数组, 默认展开一层。
const arr2 = [1, 2, [3, 4, [5, 6]]]
arr2.flat() // [1, 2, 3, 4, [5, 6]]
arr2.flat(2) // [1, 2, 3, 4, 5, 6] flat(3) 也是展开两层...
复制代码
-
flatMap()
: 在数组执行map
方法后执行flat
, 用的不多,其实可以写map
后写flat
更好懂点。注意兼容性问题!!
[2, 3, 4].flatMap(x => [x, x * 2]) // [ 2, 4, 3, 6, 4, 8 ]
// 1. [2, 3, 4].map(d => [d, d * 2]) => [[2, 4], [3, 6], [4, 8]]
// 2. [[2, 4], [3, 6], [4, 8]].flat()
复制代码
附扁平化另外的实现方法:
function flatten(arr) {
return arr.reduce((list, item) => list.concat(Array.isArray(item) ? flat(item) : item), [])
}
复制代码
Js数组深度去重
var arr = [
{id: 1, name: '周瑜1'},
{id: 3, name: '王昭君1'},
{id: 2, name: '李白1'},
{id: 1, name: '周瑜2'},
{id: 2, name: '李白1'},
{id: 3, name: '王昭君2'}
];
let newobj = {};
arr = arr.reduce((preVal, curVal) => {
newobj[curVal.name] ? '' : newobj[curVal.name] = preVal.push(curVal);
return preVal
}, [])
console.log(arr)
复制代码
简单的数组去重
let arr = [1, 2, 3, 4, 5, 2, 4, 3,0,0]
function Uniq(arr = []) {
return arr.reduce((t, v) => t.includes(v) ? t : [...t, v], []);
}
console.log(Uniq(arr)) // 1,2,3,4,5,0
复制代码
模板字符串
用的挺多的,注意不兼容IE
!
const name = 'guodada'
const newStr = `welcome ${name}` // welcome guodada
// the same as
const newStr = 'welcome ' + name
复制代码
使用 async / await
-
async/await
实际上就是generator
的语法糖, 主要用来解决异步问题,具体网上很多文章都有介绍,这里就不做多的解释吧。
async function test() {
const data = await axios.get('https://randomuser.me/api/')
console.log(data)
}
// 等同于
function test() {
axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 对象
}
// 结合try/catch
async function test() {
try {
const data = await axios.get('https://randomuser.me/api/')
console.log(data)
} catch (err) {
console.log(err)
}
}
复制代码
ps 虽然好用,但是有时候适用场景不好,比如我们在拉取列表和用户信息需要同时进行时,await 后才执行下一条语句,这不是我们希望看到的。解决方法如下:
// 结合 Promise.all
const [result1, result2, result3] = await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
复制代码
利用 class 封装代码
主要是抽离代码逻辑,使得服用性加强。同时,class
的形式会让结构变得更加清晰,譬如:
class MyForm {
/**
* @func defaultLimit - 默认表单输入限制条件, value 为空时返回 true
* @param {Number} type - 代表表单类型的节点!
* @param {String} value - 需要被验证的值
* @return Boolean
*
* 根据 type 属性对输出进行验证
* 1 0≤x≤50 整数
* 2 -1000≤x≤2000 整数
* 3 1≤x 整数
* 4 0≤x≤10
*/
static defaultLimit(type, value) {
const typeLimitMap = {
1: /^(\d|[1-4]\d|50)$/g,
2: /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/,
3: /^[1-9]\d*$/,
4: value => value <= 10 && value >= 0 // 0≤ x ≤ 10 可以为小数
}
if (!typeLimitMap[type] || !value) return true
if (typeof typeLimitMap[type] === 'function') return typeLimitMap[type](value)
else return typeLimitMap[type].test(value)
}
/**
* @func translateLimit - 转换操作符
* @param {String} operator - 运算符
* @param {*} value - 被匹配的值
* @param {*} compareValue - 匹配的值
* @return Boolean
* 'eq': '='
* 'ne': '≠'
* 'gt': '>'
* 'lt': '<'
* 'ge': '≥'
* 'le': '≤'
*/
static translateLimit(operator, value, compareValue) {
const type = {
eq: value === compareValue,
ne: value !== compareValue,
gt: value > compareValue,
lt: value < compareValue,
ge: value >= compareValue,
le: value <= compareValue
}
if (!Object.keys(type).includes(operator) || !value || value === '-') return true
return type[operator]
}
// ...
}
export default MyForm
复制代码
使用:
import MyForm from './MyForm'
MyForm.defaultLimit(1, 20)
复制代码
-
static
:静态属性,类可以直接调用; -
constructor
:实例化类的时候调用,既new MyForm()
,这里没用到
优化 if/else 语句
当逻辑或 || 时,找到 true 的分项就停止处理,并返回该分项的值,否则执行完,并返回最后分项的值。
当逻辑与 && 时, 找到 false 的分项就停止处理, 并返回分项的值。
const a = 0 || null || 3 || 4
console.log(a) // 3
const b = 3 && 4 && null && 0
console.log(b) // null
复制代码
减少 if/else
地狱般的调用
const [age, name, sex] = [22, 'guodada', 1]
if (age > 10) {
if (name === 'guodada') {
if (sex > 0) {
console.log('all right')
}
}
}
// better 使用 &&
if (age > 10 && name === 'guodada' && sex > 0) {
console.log('all right')
}
// 或者(太长了不推荐)
age > 10 && name === 'guodada' && sex > 0 && console.log('all right')
复制代码
提一下 React 的坑点,在 render 中
render(){
const arr = []
return arr.length && null
}
// 渲染出 0 !
// Boolean / undefind / null / NaN 等才不会渲染。我们可以使用 !! 强制转化为 boolean 解决这个问题
return !!arr.length && null
// 使用 && 控制组件的渲染
this.state.visible && <Modal />
复制代码
使用 Array.includes
来处理多重条件:
const ages = [18, 20, 12]
if (age === 18 || age === 12) {
console.log('match')
}
// better
if ([18, 12].includes(age)) {
console.log('match')
}
复制代码
如果是较少的判断逻辑则可以使用三元运算符:
const age = 22
const isAdult = age >= 18 ? true : false // 这里可以写为 const isAdult = age > 18
const type = age >= 18 ? 'adult' : 'child'
复制代码
优化 switch/case 语句
switch/case
比 if/else
代码结构好点,但也和它一样有时十分冗长。
-
这里以自己实际项目中代码举例:有时我们可能需要对不同类型的字段进行不一样的正则验证,防止用户错误地输入。譬如
const [type, value] = [1, '20']
/**
* 根据 type 属性对输出进行验证
* 1 0≤x≤50 整数
* 2 -1000≤x≤2000 整数
* 3 1≤x 整数
*/
function func1(type, value) {
if (type === 1) {
return /^(\d|[1-4]\d|50)$/.test(value)
} else if (type === 2) {
return /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/.test(value)
} else if (type === 3) {
return /^[1-9]\d*$/.test(value)
} else {
return true
}
}
func1(type, value)
// 使用 switch/case
function fun2(type, value) {
switch (type) {
case 1:
return /^(\d|[1-4]\d|50)$/.test(value)
case 2:
return /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/.test(value)
case 3:
return /^[1-9]\d*$/.test(value)
default:
return true
}
}
func2(type, value)
复制代码
我们如何巧妙的解决这个代码冗长的问题呢,如下:
function func3(type, value) {
const limitMap = {
1: /^(\d|[1-4]\d|50)$/g,
2: /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/,
3: /^[1-9]\d*$/
}
return limitMap[type].test(value)
}
复制代码
利用对象去匹配属性值,可以减少你的代码量,也使你的代码看起来更加简洁。你也可以用Map对象去匹配。
function func4(type, value) {
const mapArr = [
[1, /^(\d|[1-4]\d|50)$/g],
[2, /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/],
[3, /^[1-9]\d*$/]
]
const limitMap = new Map(mapArr)
return limitMap.get(type).test(value)
}
复制代码
Map
是一种键值对的数据结构对象,他的匹配更加严格。它会区分开你传递的是字符串还是数字,譬如:
limitMap.get(1) // /^(\d|[1-4]\d|50)$/g
limitMap.get('1') // undefined
复制代码
其他
函数参数默认值
function func(name, age = 22) {}
// 等同于
function func(name, age) {
age = age || 12
}
复制代码
-
使用 === 代替 ==。其实大家都懂这个的。。。
-
箭头函数,es6 最常用的语法。
return boolean
const a = 1
return a === 1 ? true : false
// 多此一举了,其实就等于
return a === 1
复制代码