您的位置是:网站首页>Javascript编程Javascript编程

JavaScript的代码简洁技巧

少儿编程网2021-04-01 13:47:31Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介这篇文章主要是想和大家一起学习一下,工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。注意:下面的代码对比没有绝对的正确和错误,有些写法的使用场景会比较单一,根据大家的习惯和喜好判断即可,如果有更好或不同意见欢迎留言交流哦~(免费学习推荐:javascript视频教程)1.短路操作:

版权所有:https://wWw.pxcodeS.com
kPj少儿编程网-https://www.pxcodes.com

这篇文章主要是想和大家一起学习一下,工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。kPj少儿编程网-https://www.pxcodes.com

注意:下面的代码对比没有绝对的正确和错误,有些写法的使用场景会比较单一,根据大家的习惯和喜好判断即可,如果有更好或不同意见欢迎留言交流哦~kPj少儿编程网-https://www.pxcodes.com

(免费学习推荐:javascript视频教程kPj少儿编程网-https://www.pxcodes.com

1. 短路操作:kPj少儿编程网-https://www.pxcodes.com

当我们遇到这样的情况的时候,你会是kPj少儿编程网-https://www.pxcodes.com

const res1 = item.a ? item.a : item.b // 看起来很是简洁const res2 = item.a ? item.b : item.a // 看起来很是简洁

还是利用js逻辑运算来实现呢?kPj少儿编程网-https://www.pxcodes.com

const res1 = item.a || item.b;const res1 = item.a && item.b;

2. 通过条件判断给变量赋值布尔值的正确姿势:kPj少儿编程网-https://www.pxcodes.com

当我们需要比较单一的值来获取结果的时候,利用直接的运算,要不if判断要简洁的多~kPj少儿编程网-https://www.pxcodes.com

let res;if(a === '余光'){
	res = true }else{
	res = false;}// good?const res = a === '余光'

3. 在if中判断数组长度不为零的正确姿势:kPj少儿编程网-https://www.pxcodes.com

场景:如果数组内存在元素,则进行操作:kPj少儿编程网-https://www.pxcodes.com

// badif (arr.length !== 0) {
    // todo}// goodif (arr.length) {
    // todo}

以此类推,当我们需要判断数组的长度为为空时:kPj少儿编程网-https://www.pxcodes.com

if(!arr.length){
	// todo}

4. 使用includes简化if判断:kPj少儿编程网-https://www.pxcodes.com

场景:如果参数等于1、2、3、4,就进行下一步操作kPj少儿编程网-https://www.pxcodes.com

写第一版代码:kPj少儿编程网-https://www.pxcodes.com

if(a === 1 || a === 2 || a === 3 || a ===4){
	// todo}

看完感觉异常的头疼,遂修改为:kPj少儿编程网-https://www.pxcodes.com

if([1,2,3,4].includes(a)){
	// todo}

5. 使用some判断是否存在符合条件的值:kPj少儿编程网-https://www.pxcodes.com

场景:寻找是否存在价格小于n的商品kPj少儿编程网-https://www.pxcodes.com

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]function checkData(n){
	for(let i = 0; i < item.length; i++){
		if(item.price < n){
			return true;
		}
	}
	return false;}

方法写完了,但既然js为我们提供了那么多数组的方法,用起来:kPj少儿编程网-https://www.pxcodes.com

const itemList = [
	{name: '手机', price: 1000},
	{name: '手机壳', price: 10},
	{name: '帽子', price: 50},]const checkData = (n) => itemList.some(item => item.price < n)

再次优化kPj少儿编程网-https://www.pxcodes.com

const checkData = (n, itemList) => itemList.some(item => item.price < n)

6. 使用filter方法过滤原数组,形成新数组kPj少儿编程网-https://www.pxcodes.com

情景:剔除某些不需要的元素,例如每一条数据的id是之后操作的必须数据,为了剔除缺陷数据,我们会这么做:kPj少儿编程网-https://www.pxcodes.com

const data = [
    { name: '手机', price: 1000, id: 1 },
    { name: '手机壳', price: 10, id: 2 },
    { name: '帽子', price: 50, id: '' },]// badlet newArr = []for (let i = 0; i < data.length; i ++) {
    if (data.id) {
        newArr.push(arr[i])
    }}

掌握“过滤”思想,我们这样处理:kPj少儿编程网-https://www.pxcodes.com

const afterData = data.filter(item => item.id);

7. 使用map对数组内的元素进行批量处理:kPj少儿编程网-https://www.pxcodes.com

情景:在涉及到价格的交互中,我们拿到的价格字段通常是以分为单位的,我们要怎么做展示呢?kPj少儿编程网-https://www.pxcodes.com

const data = [10000, 20000, 980000]const afterData = data.map(price => price / 100)

8. 解构数组进行变量值的替换kPj少儿编程网-https://www.pxcodes.com

情景:需要将两个值进行交换kPj少儿编程网-https://www.pxcodes.com

// badlet a = 1,
    b = 2let temp = a
a = b
b = temp// goodlet a = 1,
    b = 2[b, a] = [a, b]

9. 解构融到代码中:kPj少儿编程网-https://www.pxcodes.com

情景:获取对象中的某个元素,并设置默认值kPj少儿编程网-https://www.pxcodes.com

写第一版代码:kPj少儿编程网-https://www.pxcodes.com

// badsetForm (person) {
    this.name = person.name    this.age = person.age 
}// goodsetForm ({name = '余光', age}) {
    this.name = name    this.age = age 
}

10. 多个方法合体时都能做什么?(举例一)kPj少儿编程网-https://www.pxcodes.com

这是**后一条代码简洁思路,拿一个具体的场景距离,抛砖引玉,欢迎大家在评论区留言~kPj少儿编程网-https://www.pxcodes.com

场景:kPj少儿编程网-https://www.pxcodes.com

前端拿到的数据是kPj少儿编程网-https://www.pxcodes.com

data = [
    { id: 1, name: '一级标题-1' },
    { id: 2, name: '一级标题-2' },
    { id: 3, name: '二级标题-1', pid: 1 },
    { id: 3, name: '一级标题-3' },
    { id: 3, name: '二级标题-2', pid: 2 },]

我们需要形成及联关系,如:kPj少儿编程网-https://www.pxcodes.com

needData = [
    {
        id: 1,
        name: '一级标题-1',
        children: [
            { id: 3, name: '二级标题-1', pid: 1 }
        ]
    },
    {
        id: 2,
        name: '一级标题-2',
        children: [
            { id: 5, name: '二级标题-2', pid: 2 }
        ]
    },
    { id: 4, name: '一级标题-3' },]

于是我借助数组提供的多个api:kPj少儿编程网-https://www.pxcodes.com

newList = data.reduce((result, item, _, arr) => {
    if (!item.pid) {
        return [...result, item];
    }
    const parentItem = arr.find(({ id }) => id === item.pid);
    if (parentItem) {
        const { children = [] } = parentItem;
        parentItem.children = [...children, item];
    }
    return result;}, []);

思路:kPj少儿编程网-https://www.pxcodes.com

  1. 寻找存在父级的元素
  2. 将它发到正确的位置上
  3. 返回所有没有父级字段(pid)的数据

如果大家有更多类似的思路和操作请一定要留言哦kPj少儿编程网-https://www.pxcodes.com

相关免费学习推荐:javascript(视频)kPj少儿编程网-https://www.pxcodes.com

以上就是JavaScript的代码简洁技巧的详细内容,更多请关注少儿编程网其它相关文章!kPj少儿编程网-https://www.pxcodes.com

来源:php中文网kPj少儿编程网-https://www.pxcodes.com

版权所有:https://wWw.pxcodeS.com

相关文章:

支持一下 ( )

JavaScript的代码简洁技巧

      匿名评论
    • 评论
    人参与,条评论
    JavaScript的代码简洁技巧

微信公众号

免费视频教程

先知道