JS三板斧——变量

JS三板斧——变量

1.变量类型

概念：变量顾名思义为可变的量，在Javascript(以下简称js)中变量包含6个基础类型和3个引用类型。可以使用typeof进行类型判断。

基本类型：数字(Number) 、字符串(String)、布尔(Boolean) 、对空(Null)、未定义(Undefined)、唯一类型（Symbol）。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

• 数字(Number)

  js将整数、负数、浮点数等数值相关的变量统称为数字（Number）类型

  123; // 整数
  0.456; // 浮点数0.456
  1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
  -99; // 负数
  NaN; // NaN(Not a Number) 表示不是一个数，将英文字符等不是数字类型的字符强转为数字类型时会碰到。
  	注：NaN类型的判断比较特殊，nan == nan 的结果会是false,要使用Nuber.isNaN()函数才能进行判断。
  Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
  

---

• 字符串(String)

  在js中，不区分单个字符与多个字符，使用 单引号'' 或则双引号""括号起来的都为字符串类型。

  字符串中”\n“表示换行”\t“表示制表符，还有其他字符可以自行百度搜索。
  可以使用\进行转义，如：'I can\'t read.'结果显示："I can' t read."
  在Vue中存在单双引号复用的情况，用于字符串绑定变量。如 :name = "'zs' + index" 
  如果对字符串进行 + 操作，建议将字符串变量自身也加入其中，从而减少临时变量的产生。如 str = str + "a" + "b",少了str js会创建一个临时变量来用于接收str添加a添加b的结果，然后再将结果赋值给str。
  

• 布尔(Boolean)

  js中的布尔类型与其他语言相同，分为true和false，有些特别的是在if判断中其他类型的也会被当做true或false。

     undefined-false 已定义-true
     null-false 存在对象-true
     0-false 除0以外的任何数字-true
     “”-false 除空字符串以外任意字符-true
     nan-false 
     注：可以巧妙的用！运算符将其他类型转为boolean类型
  

---

• 对空(Null)、未定义(Undefined)

  js语言有两种类型表示"无"的值：undefined和null,他们本质上没有太大的区别，都是表示不存在，最主要的区别是他们所在的场景不同。

  null： object类型，代表一个空的对象。在我们发送ajax请求时，一般会返回一个对象，这时就会出现null的情况。
  
  undefined： undefined类型，表示变量未被赋值。一般我们用var/let(const 声明变量会强制要求赋值) 声明了一个对象但是未进行赋值。
  

---

• 唯一类型（Symbol）

  js在es6中引入了一个新的数据类型symbol,表示独一无二的意思，即使定义了两个一模一样的值，他们的比较也会是false。在项目中用的会比较少，一般在框架中用的比较多，能保证框架中的变量和业务代码中的变量不冲突。

  // 没有参数的情况
  let s1 = Symbol();
  let s2 = Symbol();
  
  s1 === s2 // false
  
  // 有参数的情况
  let s1 = Symbol('foo');
  let s2 = Symbol('foo');
  
  s1 === s2 // false	
  

• 对象(Object)

  1.js中使用{}来定义对象,中括号的值包含key值和value值。如： let obj = {name: “zs”}

  2.js对象的key值全是String类型，即使定义的时候我们不加上引号，也会自动变成String类型，对象的自身还会绑定一些多余的参数，所以es6引入了一个比较干净的数据类型map来解决这个问题。

  3.ES6中提供了简便的命名方式。如 let obj={name,age} 会自动转为{name: name,age:age},注意value中的name和age是变量，未定义的话会报错

• 数组(Array)

  1.js中使用[]来定义数组，数组中的对象可以包含任意值，甚至是数组自身。如：[“zs”, 12,{‘name’:“ls”},[1,2,3], true]

  2,数组使用length来获得长度，可以直接的改变length的值。

  3.ES6中提供了扩展运算符：... 来快速的展开数组。如 let arr = […arr1],注意展开类型要和定义的类型相同，数组展开数组，对象展开对象。

• 函数(Function)

  函数内容比较大，请移步Javascript三板斧——函数部分。

2.变量定义

1. 变量的命名

   1.变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，不允许数字开头，不允许包含空格和其他标点符号
   2.不能使用关键字、js保留字命名。如果使用vue的话要注意_和$，这两个符号vue内部有使用到
   3.尽量避免没有意义的命名，遵循小驼峰的方式命名，能简短就尽量的简短。
   

2. 变量的声明

   在es6之前，js使用var来命名变量，这样会有作用域的问题，所以es6之后引入了let定义变量，const定义常量。

   

   

   使用let之后，i就存在作用域了，再次访问就会报i未找到的错误，这就是es6为我们解决没有作用域变量互相干扰的错误的方式。

   所以如果能使用let进行定义的话尽量使用let定义变量。

   

   

   const是es6为我们提供的定义常量的关键字，使用const定义的常量js还会给与特殊的优化，所以如果在项目中一个变量在后续

   不会在改变的话尽量定义成常量吧。

   

   

3.变量互转

1. 自动转换

   js中“==” 会进行自动转换，自动转换的优先级为Number>Boolean>String越小越先转换

   Number与Boolean:

   console.log(0==false); //true

   console.log(1==true); //true

   console.log(2==true); //flase

   //由于优先级的关系，js会将boolean类型进行提升，false变为0，true为1。

   Number与String:

   console.log(""==0); //true

   console.log(“12”==12); //true

   console.log(“12a”==12); //false

   //String自动转换时只能转换纯数字的字符串，带有其他字符时会被转为NaN

   String和Boolean:

   console.log(""==false); //true

   console.log(“s”==true); //true

   // 除了空字符串外其他字符转为boolean值都为true

   null自动转化

   // null 本质是空对象，进行自动转化时会将其转换为对应的数字地址，但不为0

   console.log(null==0); //false

   //地址是数字，但不是0

   console.log(null==false); //false

   console.log(null==true); //false

   //地址是数字，因为转化优先级的原因，比较时会将boolean转换为数字

   console.log(null==“null”); //false

   // 对象类型null，和字符串类型的"null",本质上不是一种类型，故不相等。

   console.log(null==""); //false

   // null不等于是空字符串

   undefined自动转化

   // undefined表示未定义，除了与null自动转化的类型相等外，其余都不相等。

   console.log(undefined==0); //false

   //无法自动转换数字

   console.log(undefined==false); //false

   console.log(undefined==true); //false

   //无法自动转换boolean

   console.log(undefined==""); //false

   console.log(undefined==“undefined”); //false

   //无法自动转换为String

   console.log(undefined==null); //true

   console.log(undefined===null); //false

   //null是空对象，会被认为是undefined，但本质上一个指变量未定义，一个指对象为空，还是有所区别。

2. 强制转换

   Number:

   Number(需要转换的数):Number会将传入的参数转为数字类型。

   // 数值：转换后还是原来的值
   Number(324) // 324

   // 字符串：如果可以被解析为数值，则转换为相应的数值
   Number(‘324’) // 324

   // 字符串：如果不可以被解析为数值，返回 NaN
   Number(‘324abc’) // NaN

   // 空字符串转为0
   Number(’’) // 0

   // 布尔值：true 转成 1，false 转成 0
   Number(true) // 1
   Number(false) // 0

   // undefined：转成 NaN
   Number(undefined) // NaN

   // null：转成0
   Number(null) // 0

   parseInt():函函数解析一个字符串参数并返回一个整数。相对于Number会没那么严格一些。如果数字部分开头，他会解析出数字部分，但是Number会直接转为Nana。如：parseInt(‘42 cats’) // 42Number(‘42 cats’) // NaN

   parseFloat() : 函数解析一个字符串参数并返回一个浮点数。

   +符号也能将Boolean类型转为数字，但是不能将String类型转为数字。优先级String > Number>Boolean

   console.log(1+false); //1

   console.log(1+true); //2

   String:

   +：最常用的转换，如果想要将其他变量转为字符串，只要变量拼接一个空字符串就可以了。如 + “”；

   toString():toString()方法也是比较常用的方式，但是碰到null和undefined时这个方式会报错。

   String(需要转换的数):String会将传入的参数转为字符类型。

   String(123) // “123”
   String(‘abc’) // “abc”
   String(true) // “true”
   String(undefined) // “undefined”
   String(null) // “null”

   String({a: 1}) // “[object Object]”
   String([1, 2, 3]) // “1,2,3”

   Boolean:

   Boolean(需要转换的数):Boolean会将传入的参数转为布尔类型。

   Boolean(undefined) // false
   Boolean(null) // false
   Boolean(0) // false
   Boolean(NaN) // false
   Boolean(’’) // false

   //注意，所有对象（包括空对象）的转换结果都是true，甚至连false对应的布尔对象new Boolean(false)也是true

   Boolean({}) // true
   Boolean([]) // true
   Boolean(new Boolean(false)) // true

4.变量扩展

在es6中,js的变量得到了进一步的增强。

1. String增强:

   新增方法：

   • includes()：返回布尔值，表示是否找到了参数字符串。
   • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
   • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
   • **repeat()：**方法返回一个新字符串，表示将原字符串重复n次。
   • **padStart()：**用于头部补全，
   • **padEnd()：**用于尾部补全。
   • replaceAll():替换所有元素

   模板字符串：

   ​ es6中引入了模板字符串：``符号来让String与变量拼接更加方便。传统使用+符号拼接字符串，不仅时表达式过长，有些时候还会使字符串的格式发生改变。使用模板字符串的方式就很好的解决了这个问题。

   ​ 传统方式：“name: ” + name

   ​ 模板字符串方式：`name: ${name}`

2. Array增强:

   新增方法：

   • **Array.from()：**方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象
   • **Array.of()：**方法用于将一组值，转换为数组。
   • **find()：**方法，用于找出第一个符合条件的数组成员
   • **findIndex()：**方法返回第一个符合条件的数组成员的位置
   • **includes()：**方法返回一个布尔值，表示某个数组是否包含给定的值
   • **flat()：**将嵌套的数组拉平，默认拉一层
   • **flatMap()：**将嵌套的数组拉平并转换，相当于flat和map结合

   扩展运算符：

   ​ es6引入了扩展运算符:... 用于快速的展开数组。扩展运算符还有两个比较有用的功能。

   复制数组

   const a1 = [1, 2];
   // 写法一
   const a2 = […a1];
   // 写法二
   const […a2] = a1;

   上面的两种写法，a2都是a1的克隆。

   合并数组

   const arr1 = [‘a’, ‘b’];
   const arr2 = [‘c’];
   const arr3 = [‘d’, ‘e’];

   […arr1, …arr2, …arr3]
   // [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ]

   注意：如果展开的是对象，会是浅拷贝，原数组改变会影响展开后的数组。

5.优质推荐

JavaScript的变量 (biancheng.net)

数据类型和变量 - 廖雪峰的官方网站 (liaoxuefeng.com)

JavaScript 变量 | 菜鸟教程 (runoob.com)

Symbol - ECMAScript 6入门 (ruanyifeng.com)

【详解JavaScript系列】JavaScript之变量 - Alan_beijing - 博客园 (cnblogs.com)

JavaScript变量转换 - 辰焉Failte - 博客园 (cnblogs.com)

数据类型转换 – JavaScript 标准参考教程（alpha） (ruanyifeng.com)