每日三问之JavaScript数据类型、JavaScript操作符、关于vue路由守卫知识点

 JavaScript数据类型

ECMAScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number 和 String。还有 1种复杂数据类型——Object，Object 本质上是由一组无序的名值对组成

的。

• typeof操作符

鉴于 ECMAScript 是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符。

"undefined"——如果这个值未定义
"boolean"——如果这个值是布尔值
"string"——如果这个值是字符串
"number"——如果这个值是数值
"object"——如果这个值是对象或 null
"function"——如果这个值是函数

下面是几个使用 typeof 操作符的例子：

var message = "some string"; 
alert(typeof message); // "string" 
alert(typeof(message)); // "string" 
alert(typeof 95); // "number"

•  Undefined类型

Undefined 类型只有一个值，即特殊的 undefined。在使用 var 声明变量但未对其加以初始化时，这个变量的值就是undefined。

例如：

var message; 
alert(message == undefined); //true

这个例子只声明了变量 message，但未对其进行初始化。比较这个变量与 undefined 字面量，结果表明它们是相等的。这个例子与下面的例子是等价的：

var message = undefined; 
alert(message == undefined); //true

这个例子使用 undefined 值显式初始化了变量 message。但我们没有必要这么做，因为未经初始 化的值默认就会取得 undefined 值。

var message; // 这个变量声明之后默认取得了 undefined 值
// 下面这个变量并没有声明
// var age
alert(message); // "undefined"
alert(age); // 产生错误

运行以上代码，第一个警告框会显示变量 message 的值，即"undefined"。而第二个警告框—— 由于传递给 alert()函数的是尚未声明的变量 age——则会导致一个错误。对于尚未声明过的变量，只 能执行一项操作，即使用 typeof 操作符检测其数据类型。

var message; // 这个变量声明之后默认取得了 undefined 值
// 下面这个变量并没有声明
// var age 
alert(typeof message); // "undefined" 
alert(typeof age); // "undefined"

结果表明，对未初始化和未声明的变量执行 typeof 操作符都返回了 undefined 值；

• Null类型

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因，如下面 的例子所示：

var car = null;
alert(typeof car); // "object"

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null 而不是其他值。

• Boolean类型

Boolean 类型是 ECMAScript 中使用得最多的一种类型，该类型只有两个字面值：true 和 false。这两个值与数字值不是一回事，因此 true 不一定等于 1，而 false 也不一定等于 0。以下是为变量赋

Boolean 类型值的例子：

var found = true; 
var lost = false;

需要注意的是，Boolean 类型的字面值 true 和 false 是区分大小写的。也就是说，True 和 False （以及其他的混合大小写形式）都不是 Boolean 值，只是标识符。

虽然 Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值。要将一个值转换为其对应的 Boolean 值，可以调用转型函数 Boolean()，如下例所示：

var message = "Hello world!"; 
var messageAsBoolean = Boolean(message);

这些转换规则对理解流控制语句（如 if 语句）自动执行相应的 Boolean 转换非常重要，请看下面的代码：

var message = "Hello world!"; 
if (message){ 
 alert("Value is true"); 
}

• Number类型 

Number 类型应该是 ECMAScript 中最令人关注的数据类型了，这种类型使用 IEEE754 格式来表示整数和浮点数值（浮点数值在某些语言中也被称为双精度数值）。

最基本的数值字面量格式是十进制整数，十进制整数可以像下面这样直接在代码中输入：

var intNum = 55; // 整数

浮点数值

所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。虽然小数点前面可以没有整数，但我们不推荐这种写法。以下是浮点数值的几个例子：

var floatNum1 = 1.1; 
var floatNum2 = 0.1; 
var floatNum3 = .1; // 有效，但不推荐

对于那些极大或极小的数值，可以用 e 表示法（即科学计数法）表示的浮点数值表示。 

var floatNum = 3.125e7; // 等于 31250000

也可以使用 e 表示法表示极小的数值，如 0.00000000000000003，这个数值可以使用更简洁的3e-17 表示。

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。例如，0.1 加 0.2 的结果不是 0.3，而是 0.30000000000000004。

if (a + b == 0.3){ // 不要做这样的测试！
 alert("You got 0.3."); 
}

数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值。ECMAScript 能够表示的最小数保 存在 Number.MIN_VALUE 中——在大多数浏览器中，这个值是 5e-324；能够表示的最大数值存在Number.MAX_VALUE 中——在大多数浏览器中，这个值是 1.7976931348623157e+308。如果某次计算的结果得到了一个超出 JavaScript 数值范围的值，那么这个数值将被自动转换成特殊的 Infinity 值。具体来说，如果这个数值是负数，则会被转换成-Infinity（负无穷），如果这个数值是正数，则会被转换成 Infinity（正无穷）。

NaN

alert(isNaN(NaN)); //true 
alert(isNaN(10)); //false（10 是一个数值）
alert(isNaN("10")); //false（可以被转换成数值 10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值 1）

数值转换 

• Number()函数的转换规则如下。
• 如果是 Boolean 值，true 和 false 将分别被转换为 1 和 0。

• 如果是数字值，只是简单的传入和返回。

• 如果是 null 值，返回 0。

• 如果是 undefined，返回 NaN。

1. 如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即"1"会变成 1，"123"会变成 123，而"011"会变成 11（注意：前导的零被忽略了）；
2. 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
3. 如果字符串中包含有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值；
4. 如果字符串是空的（不包含任何字符），则将其转换为 0；
5. 如果字符串中包含除上述格式之外的字符，则将其转换为 NaN

• 如果是对象，则调用对象的 valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是 NaN，则调用对象的 toString()方法，然后再次依照前面的规则转换返回的字符 串值。

var num1 = Number("Hello world!"); //NaN 
var num2 = Number(""); //0 
var num3 = Number("000011"); //11 
var num4 = Number(true); //1

由于 Number()函数在转换字符串时比较复杂而且不够合理，因此在处理整数的时候更常用的是 parseInt()函数。

var num1 = parseInt("1234blue"); // 1234 
var num2 = parseInt(""); // NaN 
var num3 = parseInt("0xA"); // 10（十六进制数）
var num4 = parseInt(22.5); // 22 
var num5 = parseInt("070"); // 56（八进制数）
var num6 = parseInt("70"); // 70（十进制数）
var num7 = parseInt("0xf"); // 15（十六进制数）

为了消除在使用 parseInt()函数时可能导致的上述困惑，可以为这个函数提供第二个参数：转换时使用的基数（即多少进制）。

var num = parseInt("0xAF", 16); //175
var num1 = parseInt("10", 2); //2 （按二进制解析）
var num2 = parseInt("10", 8); //8 （按八进制解析）
var num3 = parseInt("10", 10); //10 （按十进制解析）
var num4 = parseInt("10", 16); //16 （按十六进制解析）

除了第一个小数点有效之外， parseFloat() 与 parseInt() 的第二个区别在于它始终都会忽略前导的零。

var num1 = parseFloat("1234blue"); //1234 （整数）
var num2 = parseFloat("0xA"); //0 
var num3 = parseFloat("22.5"); //22.5 
var num4 = parseFloat("22.34.5"); //22.34 
var num5 = parseFloat("0908.5"); //908.5 
var num6 = parseFloat("3.125e7"); //31250000

• String类型

 String 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列，即字符串。

var firstName = "Nicholas"; 
var lastName = 'Zakas';

字符字面量

String 数据类型包含一些特殊的字符字面量，也叫转义序列，用于表示非打印字符，或者具有其他用途的字符。

\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\\ 斜杠
\' 单引号（'），在用单引号表示的字符串中使用。例如：'He said, \'hey.\''
\" 双引号（"），在用双引号表示的字符串中使用。例如："He said, \"hey.\""
\xnn 以十六进制代码nn表示的一个字符（其中n为0～F）。例如，\x41表示"A"
\unnnn 以十六进制代码nnnn表示的一个Unicode字符（其中n为0～F）。例如，\u03a3表示希腊字符Σ

任何字符串的长度都可以通过访问其 length 属性取得，例如： 

alert(text.length); // 输出 28

字符串的特点

ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变 某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该量， 例如：

var lang = "Java"; 
lang = lang + "Script";

转换为字符串

  要把一个值转换为一个字符串有两种方式。第一种是使用几乎每个值都有的 toString()方法。 

var age = 11; 
var ageAsString = age.toString(); // 字符串"11" 
var found = true; 
var foundAsString = found.toString(); // 字符串"true"

数值、布尔值、对象和字符串值（没错，每个字符串也都有一个 toString()方法，该方法返回字符串的一个副本）都有 toString()方法。但 null 和 undefined 值没有这个方法。

而通过传递基数，toString()可以输出以二进制、八进制、十六进制，乃至其他任意有效进制格式表示的字符串值。

var num = 10; 
alert(num.toString()); // "10" 
alert(num.toString(2)); // "1010" 
alert(num.toString(8)); // "12" 
alert(num.toString(10)); // "10" 
alert(num.toString(16)); // "a"

• Object类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建 的对象类型的名称来创建。而创建 Object 类型的实例并为其添加属性和（或）方法，就可以创建自定义对象，如下所示：

var o = new Object();

Object 的每个实例都具有下列属性和方法。

• constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是 Object()。

• hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty("name")）。
• isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型。
• toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
• toString()：返回对象的字符串表示。
• valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
• propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用 for-in语句 （本章后面将会讨论）来枚举。与 hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
  关于vue路由守卫知识点

  • 全局守卫

  1. router.beforeEach((to,from,next)=>{})

  2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

  3. 如下例：main.js中设置全局守卫

  • 在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。
  • 如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。
  • 这样就可实现，用户在未登录状态下，展示的一直是登录界面。

  router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path == '/register'){
      next();
    }else{
      alert('您还没有登录，请先登录');
      next('/login');
    }
  })

  4. 全局后置钩子router.afterEach((to,from)=>{})

  • 只有两个参数，to：进入到哪个路由去，from：从哪个路由离。
  • 如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。 

  router.afterEach((to,from)=>{
    alert("after each");
  })

  5. 判断store.gettes.isLogin === false 是否登录

  • 组件内的守卫

  1. 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

  • 在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数 to，from参数与上面使用方法一致。next回调函数略有不同。
  • 如下例，data 组件内守卫有特殊情况，如果我们直接以

  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。

  <script>
  export default {
      data(){
          return{
              name:"Arya"
          }
      },
      beforeRouteEnter:(to,from,next)=>{
          next(vm=>{
              alert("hello" + vm.name);
          })
      }
  }
  </script>

  2. 离开这个组件时，beforeRouteLeave:(to,from,next)=>{}

  • 点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。 

  beforeRouteLeave:(to,from,next)=>{
          if(confirm("确定离开此页面吗？") == true){
              next();
          }else{
              next(false);
          }
      }

  • 路由独享的守卫

  1. beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。