搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

JavaScript 初学者容易犯的几个错误,你中招没?

[复制链接]
查看: 59|回复: 0

1万

主题

1万

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
45261
发表于 2020-2-14 18:30 | 显示全部楼层 |阅读模式
JavaScript 是对初学者比力和睦的一门编程说话,底子上花个半小时看下语法就能写出能运转的代码。JavaScript 是静态剧本说话,对数据典范没有太多的限制,写起来很是灵活。但正由于如此,初学者假如不深入了解说话自己,常常会犯一些毛病,从而致使一些很难发现的 bug。
抛开 JavaScript 说话筹划层面的题目不说,究竟它是 Brendan Eich 昔时用短短十天时候筹划出来的,有点缺点也是在所难免。作为开辟者,我们该怎样禁止一些常见的低级毛病呢?本文就列举几个常见毛病,看看你有没有似曾了解。
肴杂 undefined 和 null

JavaScript 中的undefined和null都可用来表现没有值,可是两者之间有所区分。undefined字面意义是“未界说”,但它的寄义实在已经超越了变量未界说的范围:尝试读取工具不存在的属性、没有return语句的函数的返回值、声明后没有赋值的变量以致显式赋值为undefined的变量等,它们的结果都是undefined。用typeof测试它的典范,是字符串'undefined'。而null就比力纯洁了,变量只要设备为null才有这个值。此外,null是工具典范,即typeof(null)的值是字符串'object'。
需要留意的是,用if判定这两个值都是false,而且null==undefined是建立的,这一点初学者凡是轻易搞混。是以,尽管同一把“没有值”都设备为undefined,这样就省去了判定区分的麻烦。
返回undefined的函数:
  1. const f = () => {}
复制代码
设备变量的值为undefined:
  1. x = undefined;
复制代码
判定属性能否为undefined:
  1. typeof obj.prop === 'undefined'obj.prop === undefined
复制代码
判定变量能否为undefined:
  1. typeof x === 'undefined'
复制代码
变量声明后没有赋值,自动就有了undefined值。
假如必定要判定null,用全等判定:
  1. obj.prop === nullx === null
复制代码
利用typeof是没法判定null的,由于它是工具典范。
肴杂数字相加和字符串拼接

在 JavaScript 中,加号+操纵符既可用于数字相加,也可以用于字符串拼接。由于 JavaScript 是静态说话,操纵符会自动将变量转成类似数据典范再运算。比如:
  1. let x = 1 + 1; // 2
复制代码
结果是 2,是我们盼望的数字相加操纵,由于两个值都是数字。
可是,假如是下面这类表达式:
  1. let x = 1 + '1'; // “11”
复制代码
结果是'11',由于第一个数字会转换成字符串。这里的加号+运算符被用作字符串拼接,而不是数字相加。这里能间接看到表达式的值还算清楚,假如是由多个变量组成的表达式就很难判定典范了。
为了治理这个题目,我们可以把字符串都转成数字典范,再举交运算。例如:
  1. let x = 1;  let y = '2';  let z = Number(x) + Number(y);
复制代码
这样,运转结果就是3了。Number函数罗致尽情典范的值,假如能转成数字就返回数字,否则返回NaN。还可以用new Number(...).valueOf()函数:
  1. let x = 1;  let y = '2';  let z = new Number(x).valueOf() + new Number(y).valueOf();
复制代码
由于new Number(...)是实例化一个机关函数,返回的是一个工具,并不是数字典范。假如要获得原始的数字典范,需要用该工具的valueOf方式。实在另有个更简洁的方式:
  1. let x = 1;  let y = '2';  let z = +x + +y;
复制代码
变量前面的 + 感化是将它转换成数字,大要NaN,跟Number函数的感化类似。
return 语句换行题目

JavaScript 语律例定换行代表语句竣事。例如:
  1. const add = (a, b) => {    return    a + b;  }add(1,2); // undefined
复制代码
本以为会返回 3,现实上是undefined。这是由于在a + b之前,函数已经实行了return。要治理这个题目,有两个做法:要末把表达式跟return放在一行,要末把表达式套一层括号。
  1. const add = (a, b) => {    return a + b;  }// 大要const add = (a, b) => {    return (      a + b    );  }
复制代码
加括号为什么可以换行呢?由于括号里的是表达式,不是语句。表达式可以拆成多行,假如很长的话。用箭头函数会更直观:
  1. const add = (a, b) => a + b
复制代码
箭头函数里的单行表达式自带return结果,固然也可以在表达式表面套一层括号:
  1. const add = (a, b) => (a + b)
复制代码
这个括号在返回工具字面量的箭头函数里有点用处,由于不加圆括号()的话,{}只是函数体的起头和竣事标志,要返回工具字面量,还要显式return {...}。
假如某行代码中的语句不完整,JavaScript 分解器会将下一行的语句合并一路分解。比如:
  1. const power = (a) => {    const      power = 10;    return a ** 10;  }// 同即是:const power = (a) => {    const  power = 10;    return a ** 10;  }
复制代码
可是对于完整的语句,比如return,就不会合并多行。
用 return 跳出 forEach 循环

JavaScript 数组有个 forEach 方式,用于对数组元素举行循环操纵。初学者很轻易联想到 for循环的break或continue关键字,用来中断循环。可是对不起,forEach没有这两个关键字。那用return行不成?可以用,但它的感化就是提早返回函数,跟continue的结果类似,用于竣事本次循环。要跳出全部循环,return做不到。
  1. const nums = [1, 2, 3, 4, 5, 6];let firstEven;nums.forEach(n => {  if (n % 2 ===0 ) {    firstEven = n;    return n;  }});console.log(firstEven); // 6
复制代码
代码本意是想找出第一个偶数,找到就退出循环。但现实并没有退出循环,是以最终成果是末端一个偶数。
有治理法子吗?这类情况可以用for循环,大要用数组filter、find之类的方式。
总结

固然 JavaScript 很轻易上手,但略不留意还是比力轻易出错。本文简单先容了几种轻易犯的错,渴望对你有所帮助。
更多前端技夺目货尽在微信公众号:1024译站
JavaScript 初学者容易犯的几个错误,你中招没?  热点新闻 1618526-c4aea894cd19c794


免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 全椒百姓网-全椒知名**,发布及时新鲜的全椒新闻资讯 生活信息 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表