温故而知新（巩固js基础第一篇）

_白墙
323 阅读8分钟

该文章只用于记录以及分享自己的理解

js为什么要单独开一个文件存放： js在浏览器作为单独文件有一个好处就是浏览器会下载它，然后保存到浏览器的缓存中。 之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。 这可以节省流量，并使得页面（加载）更快。

代码结构

代码结构的第一件事就是学会构建代码块。为什么？提高可读性

语句： 通常，每条语句独占一行，以提高代码的可读性

分号： 一个很少被重视的问题，因为在大多数情况下可以省略分号。但是“大多数情况”并不意味着“总是”！

/** 举个栗子 */

alert("There will be an error")

[1, 2].forEach(alert)

如果我们运行代码，只有第一个 alert 语句的内容被显示了出来，随后我们收到了一个错误！为什么？因为在js并不会在方括号 [...] 前添加一个隐式的分号。

第一个例子中的代码改为一条简单的语句，我们从引擎看到的是这样的：

alert("There will be an error")[1, 2].forEach(alert)

怎么解决： 我们在第一个 alert("There will be an error"); 语句末尾加上一个分号，就工作正常了 。

tips： 避免这种情况除了习惯的写完一条语句后在后面添加分号，还可以使用快捷格式化方式也可以达到语句后面自动加上分号。在vscode编译器的情况下要去除自动添加分号的话，安装  prettier 插件，在settings.json中添加

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false,
        "singleQuote": true
    } 
 }

注释： 利用好注释可以省很多代码上的沟通和理解，但也要减少没必要的注释，栗子name // 姓名。

  单行注释 //
  多行注释 /* */
  jsDoc注释 更多用于构造函数
/**

*  解释该函数有什么作用

* @constructor

* @param {参数类型} title - 参数

*/

tips： 注释不能嵌套注释，否则会报错

现代模式（严格模式），"use strict"

什么是现代模式（严格模式） js是不断进步的，一些新功能出来就有一些旧功能的抛弃，但为了兼容旧功能的代码就会保留着旧功能的使用。 "use strict" 这个指令看上去像一个字符串 "use strict" 或者 'use strict'。当它处于脚本文件的顶部时，那么整个脚本的文件都将进行 严格模式。 同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

为什么要使用 为了避免写js语法的一些不合理、不严谨之处，减少一些怪异行为

  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。

tips： "use strict" 指令只允许出现在脚本或函数的开头。否则严格模式可能无法启用。

变量

变量是数据的“命名存储”。我们可以使用变量来保存商品、访客和其他信息。 使用let var const声明，才能使用变量

注意事项： 1.大小写之分。2.允许非英文字母，但不推荐。3.不能用保留字来声明变量。4.未采用 use strict 下的赋值，在严格模式下直接赋值没有声明是会报错的，在普通模式下仍然可以正常工作，这是为了保持对旧脚本的兼容，所以要按严格模式变量都要进行声明。

// 注意：这个例子中没有 "use strict" 
num = 5; 
// 如果变量 "num" 不存在，就会被创建 
alert(num); // 5

// 这个是有 "use strict" 
"use strict"; 
num = 5; // 错误：num 未定义

数据类型

在 js 中有 8 种基本的数据类型（译注：7 种原始类型和 1 种引用类型）。 Number（数字）bigint（整数）String（字符串）Object（对象 特殊类型）Boolean（布尔值）Undefined（独立类型）Null（独立类型）Array（数组）Function（函数）Symbol（新增类型）typeof（运算符）

基本数据类型

  • number 用于任何类型的数字：整数或浮点数，在 ±(253-1) 范围内的整数。
  • bigint 用于任意长度的整数。
  • string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
  • boolean 用于 true 和 false。
  • null 用于未知的值 —— 只有一个 null 值的独立类型。
  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
  • symbol 用于唯一的标识符。
  • object 用于更复杂的数据结构 其他数据类型 -Array用于数组[]数据结构
  • Function用于函数

类型转换

字符串（string）转换

let value = true;
alert(typeof value); // boolean
value = String(value); // 现在，值是一个字符串形式的 "true" 
alert(typeof value); // string

字符串转换最明显。`false` 变成 `"false"`，`null` 变成 `"null"` 等。

数字型（number）转换 在算术函数和表达式中，会自动进行 number 类型转换。 但 + 等于拼接， 栗子'1'+'1'会等于11，要手动转为数字才会相加Number()函数进行转换。如果该字符串不是一个有效的数字，转换的结果会是 NaN

  • undefined 会变成 NaN
  • null 会变成 0
  • true 和 false 会变成0 and 1
  • string 会变成去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

基础运算符

  1. 运算元： 运算符应用的对象。比如说乘法运算 5 * 2，有两个运算元：左运算元 5 和右运算元 2。更多称为“参数”而不是“运算元”。
  2. 一元运算符： 如果一个运算符对应的只有一个运算元，那么它是 一元运算符。
  3. 二元运算符： 如果一个运算符拥有两个运算元，那么它是 二元运算符。
  4. 赋值运算符： = 也是一个运算符
  5. 链式运算符 可读性不高，所以不常使用
  6. 位运算符： 位运算符把运算元当做 32 位整数，并在它们的二进制表现形式上操作 。Web 开发中很少使用它们
  7. 逗号运算符： 是最少见最不常使用的运算符之一。有时候它会被用来写更简短的代码。可读性不高，所以不常使用
一元运算符作用是对数字进行正负转换
let x = 1;
x = -x;
alert( x ); // -1，一元负号运算符生效

二元运算符作用是对数字的算术
let x = 1, y = 3;
alert( y - x ); // 2，二元运算符减号做减运算

链式运算符作用是对多个互相关联二元运算符以及赋值运算符时的简写，缺点可读性不高
let a, b, c;
a = b = c = 2 + 2;
alert( a ); // 4 alert( b ); // 4 alert( c ); // 4
出于可读性，最好将这种代码分成几行
c = 2 + 2;
b = c;
a = c;

缩写运算符
let n = 2;
n = n + 5;
n = n * 2;
可缩写为
let n = 2;
n += 5; // 现在 n = 7（等同于 n = n + 5）
n *= 2; // 现在 n = 14（等同于 n = n * 2）
alert( n ); // 14
自增
let counter = 2;
counter++; // 和 counter = counter + 1 效果一样，但是更简洁 
alert( counter ); // 3
自减
let counter = 2;
counter--; // 和 counter = counter - 1 效果一样，但是更简洁 
alert( counter ); // 1

逗号运算符
let a = (1 + 2, 3 + 4);
alert( a ); // 7（3 + 4 的结果）

二元运算符支持以下数学运算：

  • 加法 +
  • 减法 -
  • 乘法 *
  • 除法 /
  • 取余 %： 取余运算符是 %，尽管它看起来很像百分数，但实际并无关联。一个表达式的值除以另一个表达式的值，返回余数。公式：result = numberA % numberB 返回值：result，任何变量 参数：numberA，任何数值表达式。；numberB，任何数值表达式。 说明：取余（或余数）运算符用 number1 除以 number2 （把浮点数四舍五入为整数），然后只返回余数作为 result。
  • 求幂 **：求幂运算 a ** b 是 a 乘以自身 b 次。

位运算符：

  • 按位与 ( & )
  • 按位或 ( | )
  • 按位异或 ( ^ )
  • 按位非 ( ~ )
  • 左移 ( << )
  • 右移 ( >> )
  • 无符号右移 ( >>> ) tips： 一元运算符优先级高于二元运算符，自增/自减只能应用于变量。运算符都有优先级。

值的比较

  • < 小于
  • > 大于
  • >= 大于等于
  • <= 小于等于
  • == 等于
  • === 全等
  • != 不等于
  • !== 不全等 等于与全等区别：等于不进行数据类型判断，全等会进行判断。 栗子：
它们不相等，因为它们属于不同的类型。
alert( null === undefined ); // false
仅仅等于对方而不等于其他任何的值
alert( null == undefined ); // true

tips： undefined 不应该被与其他值进行比较

avatar
文章
阅读
粉丝