当我们开始学习JS代码时，我们只需要掌握JS对应的知识点就好，随着对JS代码的熟悉程度，我们就要思考如何写出更优雅、更简洁的代码。
接下来我分享10种常用JS代码功能，通过常规写法和优雅写法的对比，来体现其优雅和简洁性。代码中用了ES6新特性，如果你对ES6不了解，可以先收藏好。在随后的VUE中，基本都在和ES6打交道。
1、数组合并
常规写法
利用concat方法来合并数组
const apples = ['红苹果','烂苹果'];
const fruits = ['西瓜','葡萄','草莓'].concat(apples);
console.log(fruits); //['西瓜','葡萄','草莓','红苹果','烂苹果']
优雅写法
const apples = ['红苹果','烂苹果'];
const fruits = ['西瓜','葡萄','草莓',...apples];
console.log(fruits); //['西瓜','葡萄','草莓','红苹果','烂苹果']
2、数组中取值
常规写法
利用数组下标一个一个从数组中取数据
const nums = [1,2]
const num1 = nums[0]
const num2 = nums[1]
console.log(num11,num2);//1 2
优雅写法
利用ES6的结构赋值来取值
const nums = [1,2]
const [num1, num2] = nums
console.log(num11,num2);//1 2
3、对象取值
常规写法
对象.属性名的方式获取属性值
const user = {
name:'大傻子',
age:18
};
const name = user.name;
const age = user.age;
console.log(name,age); // '大傻子' 18
优雅写法
利用ES6的结构赋值来取值
const user = {
name:'大傻子',
age:18
};
const {name, age} = user;
console.log(name,age); // '大傻子' 18
4、数组循环
常规写法
利用for循环来遍历数组，从而取值
const fruits = ['苹果','西瓜','葡萄','草莓'];
for(let i = 0; i > fruits.length; i ++) {
console.log(fruits[i]);
}
优雅写法
利用ES6的for...of来遍历数组取值
const fruits = ['苹果','西瓜','葡萄','草莓'];
for(fruit of frules) {
console.log(fruit)
}
5、回调函数
常规写法
const fruits = ['苹果','西瓜','葡萄','草莓'];
fruits.forEach(function(fruit){
console.log(fruit);
})
优雅写法
forEach中的回调函数为箭头函数，如果箭头函数中只有一句代码，则可以省略{}
const fruits = ['苹果','西瓜','葡萄','草莓'];
fruits.forEah((fruit) => console.log(fruit))
6、数组搜索
常规写法
数组中保存着每一条水果的信息，我们通过输入水果名，到数组中查找对应的信息，利用for循环遍历查找；
const fruits = [{
name: '苹果',
id: 1
},{
name: '香蕉',
id:7
},{
name: '西瓜',
id: 2
}];
function getApples(arr, val) {
for(let i = 0; i > arr.length; i++) {
if(arr[i].name === val) {
return arr[i]
}
}
}
const res = getApples(fruits,'苹果')
console.log(res); // {name:'苹果', id: 1}
优雅写法
利用数组的find方法来实现搜索
const fruits = [{
name: '苹果',
id: 1
},{
name: '香蕉',
id:7
},{
name: '西瓜',
id: 2
}]
function getApples(arr, val) {
return arr.find((item) => item.name === val)
}
const res = getApples(fruits,'香蕉')
console.log(res); // {name:'香蕉', id: 7}
7、字符串转为数字
常规写法
利用parseInt来实现
const num = parseInt('10');
console.log(num, typeof num); //10 'number'
优雅写法
利用 + 号来实现，不过只是针对纯数字的字符串有效
const num = + '10';
console.log(num, typeof num); //10 'number'
console.log(+ '10' === 10); //true
8、null值初始化
常规写法
通过if判断，如果为null，则初始化值为 '普通用户'
//获取用户角色
function getUserRole(role) {
let userRole;
if(role) userRole = role
else userRole = "普通用户"
return userRole
}
console.log(getUserRole()); //普通用户
console.log(getUserRole('管理员')); //管理员
优雅写法
通过 || 或短路运算符来实现
function getUserRole(role) {
return role || '普通用户'
}
console.log(getUserRole()); //普通用户
console.log(getUserRole('管理员')); //管理员
9、字符串拼接
常规写法
const name = '大傻子';
const age = 18;
const msg = '大家好，我叫' + name + '今年' + age + '岁了！';
优雅写法
const name = '大傻子';
const age = 18;
const msg = `大家好，我叫${name},今年${age}岁了`;
10、对象合并
常规写法
利用for循环来遍历
const obj1 = {name: '大傻子',age: 18};
const obj2 = {grade: 'A'}
const obj3 = obj2
for(const key in obj1) {
obj3[key] = obj1[key]
}
console.log(obj3)
优雅写法
const obj1 = {name: '大傻子',age: 18};
const obj2 = {grade: 'A'}
const obj3 = {...obj1, ...obj2}
console.log(obj3)
