JavaScript基础入门01

Posted wuziqiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

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

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

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

 

数据类型

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

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

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

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

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

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

  • Object
  • Array
  • Function

Boolean

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

布尔值包含有两个值true和false。其中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位浮点数形式储存，即使整数也是如此。所以，1与1.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!‘;

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

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

运算符

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

在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 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

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

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

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

 

数据类型

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

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

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

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

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

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

  • Object
  • Array
  • Function

Boolean

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

布尔值包含有两个值true和false。其中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位浮点数形式储存，即使整数也是如此。所以，1与1.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!‘;

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

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

运算符

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

在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基础入门01的主要内容，如果未能解决你的问题，请参考以下文章

19 01 11 javascript ?????????????????????(???????????????) ??????????????????????????????(代码片段

JavaScript基础入门01

javascript基础入门之js中的数据类型与数据转换01

JavaScript教程-从入门到精通

Javascript JSON 的问题

JavaScript从入门到放弃JS基础-01