JavaScript基础入门01

JavaScript能用来做什么?
    页面分为:结构、样式、行为。
 
JavaScript的组成:
    ECMAScript、BOM、DOM
 
    ECMAScript是一个标准,它规定了语法、类型、语句、关键字、保留子、操作符、对象。(相当于法律)
 
 
    BOM(浏览器对象模型):可以访问浏览器窗口的浏览器对象模型,对浏览器窗口进行操作。
 
 
    DOM(文档对象类型):DOM把整个页面映射成一个多层节点结构。HTML页面组成都是某种类型的节点,这些节点又包含着不同类型的数据
 
 

js代码位置

  首先是如何编写JavaScript代码,说到这,我们首先要来说明一个需要新人们关注的点,因为我们的js是一门跨平台的语言,所以说,我们的代码可以运行在不同的平台之上。这也就导致了可能相同的代码放在不同的平台运行就会有所出入。

这里面说的平台其实被称之为宿主环境

  同时,代码在不同的平台上的运行方式也有所不同。

  如果运行在服务端,那么更多的时候我们需要通过命令行的形式去运行,而如果是代码运行在客户端,则需要通过启动浏览器来运行代码。

  我们在学习的初期建议是在浏览器中运行代码,减少学习成本。

  首先,我们的js代码可以写在script标签内部并且将script标签放在网页的任何位置。

  

 外联JS的写法为:
        <script src="相对路径"></script>
        这是一条html语句,原则上可以放在html页面的任意位置,不用和link标签一样非得放在head部分
        相对路径链接的是JavaScript文件,文件的扩展名为.js,如index.js
    
    内部JS的写法为:
        <script>
            //在script标签内写js脚本
        </script>
    
    错误的写法:
        <script src="相对路径">
            //在script标签内写js脚本
        </script>
  
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script>
        // js code ...
    </script>
</head>
<body>
    <script>
        // js code ...
    </script>
</body>
<script>
    // js code ... 
</script>
</html>

在上面的代码中,我们把包含有js代码的script标签放在了head标签、body标签、和body标签之后的位置。从语法的层面来说,上面的这几种写法都是正确的。但是较为推荐的写法是将scirpt标签放在body标签的闭合标签的后面。

推荐的原因,是因为js代码经常需要操作html标签,而放在后面可以等到html标签加载完毕之后再来执行js代码。避免因为html标签未加载而导致的报错。

js语句

js当中的语句表示js向宿主环境发送的命令。

例如下面的语句是向页面中输出计算10 + 2的结果。

document.write(10+2);

在每一条语句的后面都带有一个分号,表示语句结束。

当然js允许我们将分号省略掉,但是无论是从代码的维护成本还是其他因素考虑,都不建议将每条语句后面的分号省略掉。

需要注意的是,如果分号前面的语句为空,则没有意义。

 向页面中打印内容:
        document.write(“这是一些文本内容”);
 
    可以直接解析标签:
        document.write(“<strong>加粗的内容</strong>”);
 
    转义字符:
        &lt;  ====  <
        &gt;  ====  >
        document.write(“&lt;strong&gt;这是一些加粗的内容</strong>”);
 
 
console.log("hello world")
向浏览器的控制台打印信息,跟document.write()原理类似
 

注释

注释是任何编程语言当中必不可少的一环。通过注释,可以让我们开发过的代码具有更好的可读性,也能变相的提升后期代码的维护和升级速度。

一般情况下,注释的内容可以包含很多,例如参数信息代码功能使用方式等等。

js中,注释分为两种,一种是单行注释,一种是多行注释

单行注释通过//表示,一般写在语句的后面或者语句的上方。

// 这里是代码注释

多行注释通过/**/的形式来创建,一般写在代码的上方。

/*
这里是多行注释...
*/

直接量

js中,直接使用的量,我们称之为叫做直接量

例如,在代码中,我们要使用10,那么这个10就是一个直接量

表达式

一般情况下,表达式需要得到一个结果。

例如10+2就是一个表达式,我们在创建这个表达式的时候,就希望得到10+2的结果。

document.write(10+2);// 通过document.write()方法将10+2这个表达式的结果输出到网页当中

输出方式

我们在编写js代码的时候,经常需要得到计算的值,用以判断得到的值与我们预期的值是否相符,所以我们需要了解下面的基本的输出方式。

// console.log() 将内容输出到浏览器的控制台
console.log(10+2);
// document.write() 将内容输出到网页当中
document.write(10+2);

通常情况下我们通过console.log()这种形式输出代码我们称之为代码打印

弹窗

js中,如果你的代码运行环境是在浏览器当中,那么就可以使用浏览器给我们提供的弹窗。

alert(10+2);
confirm(10+2);
prompt(10+2);

上述的三个弹窗只能够在运行环境为浏览器的情况下使用。

变量

我们上面说到了表达式,通过表达式能够得到计算的结果,但是如果我们计算的逻辑较为复杂,那么如果单纯的依赖表达式将会变得不那么方便。

这个时候,就可以使用变量

什么是变量呢?

我们可以把变量理解为是一个代名词或者说叫做临时的容器

我们可以把一个具体的值存入到变量中。那么此时这个变量就代表着我们这个具体的值。我们如果想要重新的使用这个值,不再需要重新的计算或者其他操作,直接使用变量就可以得到之前存储的这个值。

而想要创建一个变量(也可以说是声明一个变量),需要通过var关键字(es6中通过let声明)。

var val = 10 + 2;

在上面的代码中,我们创建了一个变量val,并且使用这个变量val存储了表达式10+2的计算结果。那么如果想要第二次使用10+2的结果,可以直接使用变量val即可。

在我们使用变量的时候,还有一点需要理解,变量之所以叫变量,是因为变量随时可以根据我们的需要更改其中存储的值。

var a = 10;
a = 20; // 当我们重新的向变量中存储数据的时候,不需要再加var
console.log(a); // 此时再打印a结果就为20

需要注意的是,上面我们将变量a内存储的数据由10变成了20,在重新存储的过程中,我们并没有使用var,那么上面的代码就相当于我们将20的值存储到之前创建的变量a中。

而如果在重新的存储的过程中使用了var,如同下面的案例:

var a = 10; // 第一次声明变量a
var a = 20; // 再一次通过var声明变量a,并且使用了var
consoloe.log(a);

需要注意的是,虽然最后的结果和上面的打印结果相同,但是变量a本质上已经发生了变化。

如果在重新存储数据的过程中,没有在变量名前面加var,那么相当于是更改变量a中存储的值,而如果前面加了var,则相当于重新的创建了一个变量a,并且存储了20这个数据

变量提升:

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)

console.log(a);
var a = 1;

上面代码首先使用console.log方法,在控制台(console)显示变量a的值。这时变量a还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。

var a;
console.log(a);        //undefined
a = 1;

标识符

标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感,所以aA是两个不同的标识符。

标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符,就会报错。

简单说,标识符命名规则如下。

  • 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
  • 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9

数据类型

变量用来临时存储数据(如果想要永久的存储数据,需要通过数据库)。而在任何一门编程语言当中,数据都是分为不同类型的。就如同人类也分为男人和女人一样。

下面就来说一下在JavaScript中数据的不同类型。

js当中数据类型分为两类,一类是原始类型,一类是引用数据类型原始类型又称之为基础数据类型引用类型也称之为对象类型

原始类型的数据包含有下面几个:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol(ES6中新增加的内容)

引用类型的数据包含有下面几个:

  • Object
  • Array
  • Function

Boolean

在计算机科学中,布尔值是一种逻辑数据类型,其值只能为真或假。例如,在JavaScript中,布尔条件 常用于决定执行哪一部分代码(例如在if语句中)或重复(例如在For循环中)。

布尔值包含有两个值truefalse。其中true表示false表示

例如我们判断一个条件,如果这个条件满足,那么对应着布尔值true,如果这个条件不满足,那么就对应着布尔值false

下列运算符会返回布尔值:

  • 前置逻辑运算符: ! (Not)
  • 相等运算符:===!====!=
  • 比较运算符:>>=<<=

如果 JavaScript 预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false,其他值都视为true

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''(空字符串)

Null

在计算机科学中,空值表示一个引用,该引用通常有意指向不存在或无效的对象或地址。空引用的含义因语言实现而异。

在JavaScript中,null是一个基本值(原始数据)。

Null类型里面只有一个值,就是null
关于null,你可以把它理解为,它表示一个空值。

var a = null;

例如上面的代码当中,你可以理解为此事的变量a表示的值为空。当我们在一些需要传递值的地方,如果我们没有值进行传递,那么就可以传递一个null,表示传递的值为空。

undefined

Undefined类型当中只有一个值就是undefined

在代码的编写过程中,一个没有被赋值的变量的类型就是undefined

var a;
console.log(a); // 会在浏览器的控制台中输出undefined

Number

Number类型即为数字类型

MDN中关于Number类型的描述如下:

根据 ECMAScript 标准,JavaScript 中只有一种数字类型:基于 IEEE 754 标准的双精度 64 位二进制格式的值(-(263 -1) 到 263 -1)。它并没有为整数给出一种特定的类型。除了能够表示浮点数外,还有一些带符号的值:+Infinity-Infinity 和 NaN (非数值,Not-a-Number)。

JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,11.0是相同的,是同一个数。

1 === 1.0 // true

这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算。

由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

String

0个或者任意多个字符排列起来放在单引号或者双引号当中,就是一个字符串(String)

var a = "hello,world!";
var b = 'hello,JavaScript!';

上面的变量ab当中存储的数据就是字符串,其中一个使用了单引号,一个使用了双引号,两者都是合法的。

单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。

运算符

在编程语言当中,运算符是处理数据的基本方法,能够根据现有的值得到新的值。

JavaScript当中,存在下列的运算符。

  • 赋值运算符
  • 比较运算符
  • 算数运算符
  • 位运算符
  • 逻辑运算符
  • 字符串运算符
  • 条件(三元)运算符
  • 逗号运算符
  • 一元运算符
  • 关系运算符

顺序是从右向左的进行赋值操作。

下面的列表中包含全部的赋值运算符

  • 赋值 x = y
  • 加赋值 x += y
  • 减赋值 x -= y
  • 乘赋值 x *= y
  • 除赋值 x /= y
  • 模赋值 x %= y
  • 指数赋值 x **= y
  • 左移赋值 x <<= y
  • 右移赋值 x >>= y
  • 无符号右移赋值 x >>>= y
  • 按位与赋值 x &= y
  • 按位异或赋值 x ^= y
  • 按位或赋值 x |= y

比较运算符

比较运算符包括下列内容:

  • 等于 == 如果两边操作数相等时返回true。
  • 不等于 != 如果两边操作数不相等时返回true
  • 全等 === 两边操作数相等且类型相同时返回true。
  • 不全等!== 两边操作数不相等或类型不同时返回true。
  • 大于> 左边的操作数大于右边的操作数返回true
  • 大于等于>= 左边的操作数大于或等于右边的操作数返回true
  • 小于< 左边的操作数小于右边的操作数返回true
  • 小于等于<= 左边的操作数小于或等于右边的操作数返回true

算数运算符

js当中,除了提供基础的+,-,*,/以外,还提供了一些其他的运算符,下面是所有的算术运算符:

  • +加法运算
  • - 减法运算
  • *乘法运算
  • / 除法运算
  • %求余运算(求模运算)
  • ++自增运算
  • --自减运算
  • +一元正值符
  • -一元负值符
  • **指数运算符

逻辑运算符

逻辑运算符常用于布尔(逻辑)值之间; 当操作数都是布尔值时,返回值也是布尔值。 不过实际上&&||返回的是一个特定的操作数的值,所以当它用于非布尔值的时候,返回值就可能是非布尔值。

下面是逻辑运算符:

  • 逻辑与(&&)
  • 逻辑或(||)
  • 逻辑非(!)

数据类型转换

JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。

隐式类型转换:

 
    但是:
 
    if(1){
        alert("会弹出来么?");
    }
    1是数值型,不是布尔值,更不是true?为什么会执行花括号内的语句了呢?
 
    在一些特定的情况下,计算机会进行一些隐式转换,他和强制类型转换不一样,他不需要你做什么,会自动对数据类型进行转换
    在运算中,if(小括号)中的语句会发生隐式类型转换。
 
    1.运算中的隐式类型转换:
    var a = "1",b = 2;
    a + b = ???
    
    +号有两种含义:数学中的+号运算符;字符串的拼接。优先字符串拼接,所以在检测到+号左右两边存在字符串的时候,会自动将另一边不是字符串的数据,转成字符串,再进行操作
 
    a - b = ???
    
    除了+号有两层意义为外,-*/%号只有数学意义,所以当进行-*/%的时候,默认将运算符两边的数据类型隐式转换成数字类型再进行运算
    
    2.if(小括号)内的隐式类型转换。
    if()中只需要布尔值,那么在if判断中,会把括号内所有的数据类型,都隐式转换成布尔型。
    在if()中,非零数字都会转成true,非空字符串都会转成true;这是两条基础规则
 
    alert(1 == true)

强制类型转换

强制转换主要指使用Number()String()Boolean()三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。

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

对象:
简单的规则是,Number方法的参数是对象时,将返回NaN,除非是包含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

String()

String函数可以将任意类型的值转化成字符串,转换规则如下。
(1)原始类型值

    • 数值:转为相应的字符串。
    • 字符串:转换后还是原来的值。
    • 布尔值:true转为字符串"true",false转为字符串"false"。
    • undefined:转为字符串"undefined"。
    • null:转为字符串"null"。
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()函数可以将任意类型的值转为布尔值。

它的转换规则相对简单:除了以下五个值的转换结果为false,其他的值全部为true

  • undefined
  • null
  • 0(包含-0+0
  • NaN
  • ""(空字符串)
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

------------恢复内容结束------------

JavaScript能用来做什么?
    页面分为:结构、样式、行为。
 
JavaScript的组成:
    ECMAScript、BOM、DOM
 
    ECMAScript是一个标准,它规定了语法、类型、语句、关键字、保留子、操作符、对象。(相当于法律)
 
 
    BOM(浏览器对象模型):可以访问浏览器窗口的浏览器对象模型,对浏览器窗口进行操作。
 
 
    DOM(文档对象类型):DOM把整个页面映射成一个多层节点结构。HTML页面组成都是某种类型的节点,这些节点又包含着不同类型的数据
 
 

js代码位置

  首先是如何编写JavaScript代码,说到这,我们首先要来说明一个需要新人们关注的点,因为我们的js是一门跨平台的语言,所以说,我们的代码可以运行在不同的平台之上。这也就导致了可能相同的代码放在不同的平台运行就会有所出入。

这里面说的平台其实被称之为宿主环境

  同时,代码在不同的平台上的运行方式也有所不同。

  如果运行在服务端,那么更多的时候我们需要通过命令行的形式去运行,而如果是代码运行在客户端,则需要通过启动浏览器来运行代码。

  我们在学习的初期建议是在浏览器中运行代码,减少学习成本。

  首先,我们的js代码可以写在script标签内部并且将script标签放在网页的任何位置。

  

 外联JS的写法为:
        <script src="相对路径"></script>
        这是一条html语句,原则上可以放在html页面的任意位置,不用和link标签一样非得放在head部分
        相对路径链接的是JavaScript文件,文件的扩展名为.js,如index.js
    
    内部JS的写法为:
        <script>
            //在script标签内写js脚本
        </script>
    
    错误的写法:
        <script src="相对路径">
            //在script标签内写js脚本
        </script>
  
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script>
        // js code ...
    </script>
</head>
<body>
    <script>
        // js code ...
    </script>
</body>
<script>
    // js code ... 
</script>
</html>

在上面的代码中,我们把包含有js代码的script标签放在了head标签、body标签、和body标签之后的位置。从语法的层面来说,上面的这几种写法都是正确的。但是较为推荐的写法是将scirpt标签放在body标签的闭合标签的后面。

推荐的原因,是因为js代码经常需要操作html标签,而放在后面可以等到html标签加载完毕之后再来执行js代码。避免因为html标签未加载而导致的报错。

js语句

js当中的语句表示js向宿主环境发送的命令。

例如下面的语句是向页面中输出计算10 + 2的结果。

document.write(10+2);

在每一条语句的后面都带有一个分号,表示语句结束。

当然js允许我们将分号省略掉,但是无论是从代码的维护成本还是其他因素考虑,都不建议将每条语句后面的分号省略掉。

需要注意的是,如果分号前面的语句为空,则没有意义。

 向页面中打印内容:
        document.write(“这是一些文本内容”);
 
    可以直接解析标签:
        document.write(“<strong>加粗的内容</strong>”);
 
    转义字符:
        &lt;  ====  <
        &gt;  ====  >
        document.write(“&lt;strong&gt;这是一些加粗的内容</strong>”);
 
 
console.log("hello world")
向浏览器的控制台打印信息,跟document.write()原理类似
 

注释

注释是任何编程语言当中必不可少的一环。通过注释,可以让我们开发过的代码具有更好的可读性,也能变相的提升后期代码的维护和升级速度。

一般情况下,注释的内容可以包含很多,例如参数信息代码功能使用方式等等。

js中,注释分为两种,一种是单行注释,一种是多行注释

单行注释通过//表示,一般写在语句的后面或者语句的上方。

// 这里是代码注释

多行注释通过/**/的形式来创建,一般写在代码的上方。

/*
这里是多行注释...
*/

直接量

js中,直接使用的量,我们称之为叫做直接量

例如,在代码中,我们要使用10,那么这个10就是一个直接量

表达式

一般情况下,表达式需要得到一个结果。

例如10+2就是一个表达式,我们在创建这个表达式的时候,就希望得到10+2的结果。

document.write(10+2);// 通过document.write()方法将10+2这个表达式的结果输出到网页当中

输出方式

我们在编写js代码的时候,经常需要得到计算的值,用以判断得到的值与我们预期的值是否相符,所以我们需要了解下面的基本的输出方式。

// console.log() 将内容输出到浏览器的控制台
console.log(10+2);
// document.write() 将内容输出到网页当中
document.write(10+2);

通常情况下我们通过console.log()这种形式输出代码我们称之为代码打印

弹窗

js中,如果你的代码运行环境是在浏览器当中,那么就可以使用浏览器给我们提供的弹窗。

alert(10+2);
confirm(10+2);
prompt(10+2);

上述的三个弹窗只能够在运行环境为浏览器的情况下使用。

变量

我们上面说到了表达式,通过表达式能够得到计算的结果,但是如果我们计算的逻辑较为复杂,那么如果单纯的依赖表达式将会变得不那么方便。

这个时候,就可以使用变量

什么是变量呢?

我们可以把变量理解为是一个代名词或者说叫做临时的容器

我们可以把一个具体的值存入到变量中。那么此时这个变量就代表着我们这个具体的值。我们如果想要重新的使用这个值,不再需要重新的计算或者其他操作,直接使用变量就可以得到之前存储的这个值。

而想要创建一个变量(也可以说是声明一个变量),需要通过var关键字(es6中通过let声明)。

var val = 10 + 2;

在上面的代码中,我们创建了一个变量val,并且使用这个变量val存储了表达式10+2的计算结果。那么如果想要第二次使用10+2的结果,可以直接使用变量val即可。

在我们使用变量的时候,还有一点需要理解,变量之所以叫变量,是因为变量随时可以根据我们的需要更改其中存储的值。

var a = 10;
a = 20; // 当我们重新的向变量中存储数据的时候,不需要再加var
console.log(a); // 此时再打印a结果就为20

需要注意的是,上面我们将变量a内存储的数据由10变成了20,在重新存储的过程中,我们并没有使用var,那么上面的代码就相当于我们将20的值存储到之前创建的变量a中。

而如果在重新的存储的过程中使用了var,如同下面的案例:

var a = 10; // 第一次声明变量a
var a = 20; // 再一次通过var声明变量a,并且使用了var
consoloe.log(a);

需要注意的是,虽然最后的结果和上面的打印结果相同,但是变量a本质上已经发生了变化。

如果在重新存储数据的过程中,没有在变量名前面加var,那么相当于是更改变量a中存储的值,而如果前面加了var,则相当于重新的创建了一个变量a,并且存储了20这个数据

变量提升:

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)

console.log(a);
var a = 1;

上面代码首先使用console.log方法,在控制台(console)显示变量a的值。这时变量a还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。

var a;
console.log(a);        //undefined
a = 1;

标识符

标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感,所以aA是两个不同的标识符。

标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符,就会报错。

简单说,标识符命名规则如下。

  • 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号($)和下划线(_)。
  • 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字0-9

数据类型

变量用来临时存储数据(如果想要永久的存储数据,需要通过数据库)。而在任何一门编程语言当中,数据都是分为不同类型的。就如同人类也分为男人和女人一样。

下面就来说一下在JavaScript中数据的不同类型。

js当中数据类型分为两类,一类是原始类型,一类是引用数据类型原始类型又称之为基础数据类型引用类型也称之为对象类型

原始类型的数据包含有下面几个:

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol(ES6中新增加的内容)

引用类型的数据包含有下面几个:

  • Object
  • Array
  • Function

Boolean

在计算机科学中,布尔值是一种逻辑数据类型,其值只能为真或假。例如,在JavaScript中,布尔条件 常用于决定执行哪一部分代码(例如在if语句中)或重复(例如在For循环中)。

布尔值包含有两个值truefalse。其中true表示false表示

例如我们判断一个条件,如果这个条件满足,那么对应着布尔值true,如果这个条件不满足,那么就对应着布尔值false

下列运算符会返回布尔值:

  • 前置逻辑运算符: ! (Not)
  • 相等运算符:===!====!=
  • 比较运算符:>>=<<=

如果 JavaScript 预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false,其他值都视为true

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''(空字符串)

Null

在计算机科学中,空值表示一个引用,该引用通常有意指向不存在或无效的对象或地址。空引用的含义因语言实现而异。

在JavaScript中,null是一个基本值(原始数据)。

Null类型里面只有一个值,就是null
关于null,你可以把它理解为,它表示一个空值。

var a = null;

例如上面的代码当中,你可以理解为此事的变量a表示的值为空。当我们在一些需要传递值的地方,如果我们没有值进行传递,那么就可以传递一个null,表示传递的值为空。

undefined

Undefined类型当中只有一个值就是undefined

在代码的编写过程中,一个没有被赋值的变量的类型就是undefined

var a;
console.log(a); // 会在浏览器的控制台中输出undefined

Number

Number类型即为数字类型

MDN中关于Number类型的描述如下:

根据 ECMAScript 标准,JavaScript 中只有一种数字类型:基于 IEEE 754 标准的双精度 64 位二进制格式的值(-(263 -1) 到 263 -1)。它并没有为整数给出一种特定的类型。除了能够表示浮点数外,还有一些带符号的值:+Infinity-Infinity 和 NaN (非数值,Not-a-Number)。

JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,11.0是相同的,是同一个数。

1 === 1.0 // true

这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算。

由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

String

0个或者任意多个字符排列起来放在单引号或者双引号当中,就是一个字符串(String)

var a = "hello,world!";
var b = 'hello,JavaScript!';

上面的变量ab当中存储的数据就是字符串,其中一个使用了单引号,一个使用了双引号,两者都是合法的。

单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。

运算符

在编程语言当中,运算符是处理数据的基本方法,能够根据现有的值得到新的值。

JavaScript当中,存在下列的运算符。

  • 赋值运算符
  • 比较运算符
  • 算数运算符
  • 位运算符
  • 逻辑运算符
  • 字符串运算符
  • 条件(三元)运算符
  • 逗号运算符
  • 一元运算符
  • 关系运算符

顺序是从右向左的进行赋值操作。

下面的列表中包含全部的赋值运算符

  • 赋值 x = y
  • 加赋值 x += y
  • 减赋值 x -= y
  • 乘赋值 x *= y
  • 除赋值 x /= y
  • 模赋值 x %= y
  • 指数赋值 x **= y
  • 左移赋值 x <<= y
  • 右移赋值 x >>= y
  • 无符号右移赋值 x >>>= y
  • 按位与赋值 x &= y
  • 按位异或赋值 x ^= y
  • 按位或赋值 x |= y

比较运算符

比较运算符包括下列内容:

  • 等于 == 如果两边操作数相等时返回true。
  • 不等于 != 如果两边操作数不相等时返回true
  • 全等 === 两边操作数相等且类型相同时返回true。
  • 不全等!== 两边操作数不相等或类型不同时返回true。
  • 大于> 左边的操作数大于右边的操作数返回true
  • 大于等于>= 左边的操作数大于或等于右边的操作数返回true
  • 小于< 左边的操作数小于右边的操作数返回true
  • 小于等于<= 左边的操作数小于或等于右边的操作数返回true

算数运算符

js当中,除了提供基础的+,-,*,/以外,还提供了一些其他的运算符,下面是所有的算术运算符:

  • +加法运算
  • - 减法运算
  • *乘法运算
  • / 除法运算
  • %求余运算(求模运算)
  • ++自增运算
  • --自减运算
  • +一元正值符
  • -一元负值符
  • **指数运算符

逻辑运算符

逻辑运算符常用于布尔(逻辑)值之间; 当操作数都是布尔值时,返回值也是布尔值。 不过实际上&&||返回的是一个特定的操作数的值,所以当它用于非布尔值的时候,返回值就可能是非布尔值。

下面是逻辑运算符:

  • 逻辑与(&&)
  • 逻辑或(||)
  • 逻辑非(!)

数据类型转换

JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。

隐式类型转换:

 
    但是:
 
    if(1){
        alert("会弹出来么?");
    }
    1是数值型,不是布尔值,更不是true?为什么会执行花括号内的语句了呢?
 
    在一些特定的情况下,计算机会进行一些隐式转换,他和强制类型转换不一样,他不需要你做什么,会自动对数据类型进行转换
    在运算中,if(小括号)中的语句会发生隐式类型转换。
 
    1.运算中的隐式类型转换:
    var a = "1",b = 2;
    a + b = ???
    
    +号有两种含义:数学中的+号运算符;字符串的拼接。优先字符串拼接,所以在检测到+号左右两边存在字符串的时候,会自动将另一边不是字符串的数据,转成字符串,再进行操作
 
    a - b = ???
    
    除了+号有两层意义为外,-*/%号只有数学意义,所以当进行-*/%的时候,默认将运算符两边的数据类型隐式转换成数字类型再进行运算
    
    2.if(小括号)内的隐式类型转换。
    if()中只需要布尔值,那么在if判断中,会把括号内所有的数据类型,都隐式转换成布尔型。
    在if()中,非零数字都会转成true,非空字符串都会转成true;这是两条基础规则
 
    alert(1 == true)

强制类型转换

强制转换主要指使用Number()String()Boolean()三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。

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

对象:
简单的规则是,Number方法的参数是对象时,将返回NaN,除非是包含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

String()

String函数可以将任意类型的值转化成字符串,转换规则如下。
(1)原始类型值

    • 数值:转为相应的字符串。
    • 字符串:转换后还是原来的值。
    • 布尔值:true转为字符串"true",false转为字符串"false"。
    • undefined:转为字符串"undefined"。
    • null:转为字符串"null"。
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()函数可以将任意类型的值转为布尔值。

它的转换规则相对简单:除了以下五个值的转换结果为false,其他的值全部为true

  • undefined
  • null
  • 0(包含-0+0
  • NaN
  • ""(空字符串)
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

------------恢复内容结束------------

------------恢复内容结束------------

------------恢复内容结束------------

猜你喜欢

转载自www.cnblogs.com/wuziqiang/p/11916961.html