资讯专栏INFORMATION COLUMN

第一天 重新认识JavaScript

fizz / 1613人阅读

摘要:使用表明你的比较不会涉及任何的隐形的类型转换。当对不同类型的数据进行比较的时候你要首先把它们进行显示的类型转换。然后再进行比较这样会使你的程序更加清晰。

1、JavaScript 严格模式

通过在程序最开始假如一个字符串字面量 use strict ,即可开启严格模式

严格模式可以让JS代码拥有更好的兼容性,更强的健壮性

在严格模式下,重新声明 arguments 会报错,非严格模式则不会

</>复制代码

  1. "use strict";
  2. function say() {
  3. var arguments = [];
  4. // Uncaught SyntaxError: Unexpected eval or arguments in strict mode
  5. }

如果连接两个不同模式的JavaScript文件的话,如果是严格模式的文件放在开始的话,那么整个文件都是处于严格模式

如果连接两个不同模式的JavaScript文件的话,如果是非严格模式的文件放在开始的话,那么整个文件都是处于非严格模式

在文件中间使用use strict是没有作用的

为了同时使用严格和非严格模式的文件,可以通过立即调用函数达到分离作用域的目的

</>复制代码

  1. (function() {
  2. // file1.js 使用了严格模式
  3. "use strict";
  4. function say() {
  5. }
  6. })();
  7. (function() {
  8. // file2.js 使用非严格模式
  9. function sayWithNoStrict() {
  10. var arguments = [];
  11. }
  12. })();
2、注意javascript的浮点数

JavaScript中的数字都是 Number 类型,即双精度浮点数,JS中整数是双精度浮点数的一个子集

JavaScript存在精度缺陷,如 0.1+0.2 ,应该尽量通过单位转换使用整数运算 1+2

注意 toString()parseInt() 方法的参数

</>复制代码

  1. console.log(typeof 36); // number
  2. console.log(typeof 36.36); // number
  3. console.log(typeof -36.36); // number
  4. console.log(0.1 * 3.6); // 0.36000000000000004
  5. console.log(1 * 36); // 36
  6. console.log(1 - 0.6); // 0.4
  7. console.log(25 / 5); // 5
  8. console.log(2.5 / 5); // 0.5
  9. console.log(25 % 4); // 1
  10. console.log(25 % 0.4); // 0.19999999999999862
  11. console.log(8 | 1); // 9
  12. console.log((10).toString(7)); // 13 参数表示返回值的进制数
  13. console.log(parseInt("1010", 2)); // 10 第二个参数表示需要转换的数据的进制数,返回值为10进制
  14. console.log(0.1 + 0.2); // 0.30000000000000004
  15. console.log(0.1 + (0.2 + 0.3)); // 0.6
  16. console.log((0.1 + 0.2) + 0.3); // 0.6000000000000001
  17. console.log(((1 + 2) + 3) / 10); // 0.6
  18. console.log(10 + (20 + 30)); // 60
  19. console.log((10 + 20) + 30); // 60
3、当心隐式的强制转换

String + NumberNumber会被转为String

String * NumberString会被转为Number

要当心 NaNisNaN 的判断与使用

</>复制代码

  1. console.log(3 + true); // 4
  2. console.log(1 + 1); // 2
  3. console.log("hello" + " world"); // hello world
  4. console.log(2 + "3"); // 23
  5. console.log("2" + 3); // 23
  6. console.log("2" + "3"); // 23
  7. console.log(1 + "2" + 3); // 123
  8. console.log(2 * "3"); // 6
  9. console.log("8" | "1"); // 9
  10. var x = NaN;
  11. console.log(x === x); // false
  12. var a = {};
  13. console.log(a === a); // true
  14. var b = null;
  15. console.log(b === null); // true
  16. console.log(isNaN(NaN)); // true;
  17. console.log(isNaN({})); // true
  18. console.log(isNaN(undefined)); //true
  19. console.log(isNaN("foo")); // true 不能用isNaN来判断字符串
  20. console.log(isNaN(1)); // false
  21. console.log(isNaN({valueOf: "foo"})); // true
  22. console.log(isNaN({valueOf: function(){return 1}})); // false
  23. console.log("J" + {toString: function(){return "S"}}); // JS
  24. console.log(1 + {valueOf: function(){return 2}}); // 3
  25. var obj = {
  26. toString: function() {
  27. return "obj";
  28. },
  29. valueOf: function() {
  30. return 1;
  31. }
  32. };
  33. console.log(1 + obj); // 2
  34. console.log("1" + obj); // 11
  35. // bad
  36. function badPoint(x, y) {
  37. if(!x) {
  38. x = 1;
  39. }
  40. if(!y) {
  41. y = 1;
  42. }
  43. return {
  44. x: x,
  45. y: y
  46. }
  47. }
  48. // good
  49. function point(x, y) {
  50. if(typeof x === undefined || y === undefined) {
  51. return {
  52. x: x || 1,
  53. y: y || 1
  54. }
  55. }
  56. return {
  57. x: x,
  58. y: y
  59. }
  60. }
  61. console.log(badPoint(0, 0)); // { x: 1, y: 1 }
  62. console.log(point(0, 0)); // { x: 0, y: 0 }
  63. console.log(point()); // { x: 1, y: 1 }
4、使用原始类型替代对象包裹

注意变量声明,原始对象和封装对象是不一样的

</>复制代码

  1. var s = new String("hello");
  2. console.log(s); // String {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", length: 5, [[PrimitiveValue]]: "hello"}
  3. var str = s + " world";
  4. console.log(str); // hello world
  5. console.log(str[4]); // o
  6. console.log(typeof "hello"); // string
  7. console.log(typeof s); // object
  8. var s1 = new String("hello");
  9. var s2 = new String("hello");
  10. console.log(s1 === s2); // false
  11. console.log(s1 == s2); // false
  12. console.log(str.toUpperCase()); // HELLO WORLD
  13. str.someProperty = "some";
  14. console.log(str.someProperty); // undefined
  15. s.someProperty = "some";
  16. console.log(s.someProperty); // "some"
5、混合类型避免使用 == 比较

当使用 == 操作符进行相等的比较操作的时候,如果它的两个参数的类型是不一样的; 那么==会把它们先强制转换为相同类型参数,然后再进行比较。

使用 === 表明你的比较不会涉及任何的隐形的类型转换。

当对不同类型的数据进行比较的时候,你要首先把它们进行显示的类型转换。 然后再进行比较,这样会使你的程序更加清晰。

6、分号的插入机制

编译器仅在 { 标记之前,一行的结束和程序的结束处推导分号

仅在紧接着的标记不能被解析的时候推导分号

在以(,[,+,-或/字符开头的语句前决不能省略分号

当脚本连接的时候,应在脚本之间显式地插入分号

return, throw, break, continue, ++-- 的参数之前决不能换行

</>复制代码

  1. var b = 12;
  2. function f() {}
  3. // 当@1和@2连在一起不能够解析的时候,分号才会自动插入
  4. var a = b // @1
  5. f() // @2
  6. // 当@3和@4连在一起能够解析(虽然可能会解析失败)的时候,分号就不会自动插入了
  7. var c = b // @3
  8. (f()) // @4
  9. // 在以`[`,`(`,`+`,`-`,`/`开头的语句前,永远不要省略分号
  10. var d = 8;
  11. var e = 3 //此处的分号绝不能省略
  12. +d
  13. console.log(e); // 11
  14. // 当连接不同的脚本的时候,要在不同的脚本之间插入分号。
  15. (function() {
  16. console.log("hello")
  17. })()
  18. ;(function() { //编写库函数的时候,常常在立即调用函数前添加分号,防止上一个文件最后一行无分号导致未知错误
  19. console.log("world")
  20. })()
  21. // 不然就会解析出错
  22. //(function() {
  23. // console.log("hello")
  24. //})()(function() {
  25. // console.log("world")
  26. //})()
  27. // 参数之前含有`return`,`throw`,`break`,`continue`,`++`,`--`的,参数与它们之间不要换行,否则会变为 `return;`
  28. function demoFunc() {
  29. return
  30. 1
  31. }
  32. console.log(demoFunc()) // undefined 没有返回预期的结果
  33. // 在循环语句的头部,分号不是用来当分隔符或者空语句使用的。
  34. for(var i = 0; i < 3; i++) {
  35. console.log(i);
  36. }
  37. // 解析出错
  38. //for(var i = 0
  39. // i < 3
  40. // i++) {
  41. // console.log(i);
  42. //}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80945.html

相关文章

  • 一个前端菜鸟的成长历程

    摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。   从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉...

    lieeps 评论0 收藏0
  • 一个前端菜鸟的成长历程

    摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。   从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉...

    SHERlocked93 评论0 收藏0
  • JS对象(1)重新认识面向对象

    摘要:对象重新认识面向对象面向对象从设计模式上看,对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外,允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象 从设计模式上看,对象是...

    superw 评论0 收藏0
  • 好文章必读 - 收藏集 - 掘金

    摘要:方法即为收集器,它接收高阶函数和的后端掘金年的第一天,我坐在独墅湖边,写下这篇文章。正因如此,所以最全系列教程后端掘金是从版本开始引入的一个新的,可以替代标准的。 设计模式之单例模式 - 掘金前言 作为一个好学习的程序开发者,应该会去学习优秀的开源框架,当然学习的过程中不免会去阅读源码,这也是一个优秀程序员的必备素养,在学习的过程中很多人会遇到的障碍,那就是设计模式。很多优秀的框架会运...

    FrozenMap 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<