【JS从入门到精通】02-JS基础

JS基础

1、JS编写位置

可以将js代码编写到标签的onclick属性中当我们点击按钮时，js代码才会执行

HTML
<button onclick="alert(\"Fuck! Do not touch me!\")"></button>

可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

HTML
<a href="alert(\"What's up, man?\")">Try to click me</a>

虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

可以将js代码编写到script标签

HTML
<script type="text/javascript">
    alert("I'm inner script.");
</script>

可以将js代码编写到外部js文件中，然后通过script标签引入

HTML
<script src="/js/script.js" type="text/javascript"></script>

script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略

如果需要则可以在创建一个新的script标签用于编写内部代码

2、JS的输出

        alert（）  -- 直接弹框
        document.write() --向文档页面中输入内容 输出到浏览器中
        prompt() 输入框
        confirm() 判断框
        console.log() 向控制台输出

3、JS注释

多行注释

多行注释，注释中的内容不会被执行，但是可以在源代码中查看

JAVASCRIPT
/*
   多行注释...
   多行注释...
   多行注释...
*/

单行注释

JAVASCRIPT
// 单行注释

4、注意点

  1. JS中严格区分大小写

  2. JS中每一条语句以分号;结尾

    如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写

  3. JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

5、JavaScript变量

作用：为了方便程序的使用，存储数据的，存储什么数据根据需求来定。

5.1 定义变量

var x = 1；x 叫做变量名，1 叫做字面量（直接量）

说明：

  • 变量相当于容器，值相当于容器内装的东西，而变量名就是容器上贴着的标签，

    通过标签可以找到变量，以便读、写它存储的值

  • ECMAScript 的变量是松散类型（弱类型，动态类型）

    所谓松散类型就是可以用来保存任何类型的数据

5.2 声明变量

在 js中，声明变量使用 var 语句，

在一个 var 语句中，可以声明一个或多个变量，也可以为变量赋值，

未赋值的变量初始化为 undefined（未定义）值。

当声明多个变量时，应使用逗号运算符分隔。

<body>
        <script>
            var a;  //声明一个变量
            var a,b,c;  //声明多个变量
            var b = 1; //声明并赋值
            console.log(a);  //返回 undefined
            console.log(b);  //返回 1
        </script>
</body>

在 js中，可以重复声明同一个变量，也可以反复初始化变量的值。

<body>
        <script>
            var a = 1;
            var a = 2;
            var a = 3;
            console.log(a); // 3
        </script>
</body>

当多个变量的值是一样的时候，也可以使用连等定义

var a = b = 1,c = 2;
console.log(a);   // 1
console.log(b);   // 1
console.log(c);   // 2

JavaScript代码分为严格模式和非严格模式两种

  • 非严格模式

    JavaScript 允许不声明变量就直接赋值，这是因为 JavaScript 解释器能够自动隐式声明变量，

    隐式声明的变量总是作为全局变量使用。

    //var x;
x = 3.14;
console.log(x); //3.14

  • 严格模式

    变量必须先声明，然后才能使用。

    注意：一定是置顶第一句（script标签后的第一句话）

    "use strict";
x = 3.14;// 报错 Uncaught ReferenceError: x is not defined

5.3 变量的命名规范

  • 名称可包含字母、数字、下划线和美元符号($)

  • 名称必须以字母开头

  • 名称也可以 $ 和 _ 开头

  • 名称对大小写敏感（Animal和 animal 是不同的变量）

  • 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

标识符：系统征用的有特殊功能的单词；指的是变量、函数、属性的名字，或者函数的参数。

标识符命名规范：

  • 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）

    其他字符可以是字母、下划线、美元符号或数字

  • 不能含有空格 不能以关键字或保留字命名

  • 关键字

    if else do while for
    break continue try catch finally
    throw true false function return
    switch case null typeof instanceof
    new var void in with
    default debugger delete this  

    保留字

    class enum extends super const export
    import implements let private public yield
    interface package protected static    

    其他不建议使用的标识符

    boolean byte short char int long
    float double String Boolean Number Object
    Date Array Math Error SyntaxError EvalError
    TypeError URIError RangeError ReferenceError encodeURI decodeURI
    parselnt parseFloat NaN isNaN undefined transient
    throws native goto eval JSON Infinity
    arguments isFinite volatile abstract RegExp Function
    synchronize final encodeURICOmponent decodeURIComponent    

    JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符

  • 不能使用JS内置的事件作为变量的名称

  • 标识符命名要做到顾名思义。

    起一个有意义的名字，尽量做到看一眼就知道是什么意思(提高代码可读性)

    比如: 名字就定义为 name，学生定义用 student

    a = "zhangsan"  # bad
name = "zhangsan"  # good
b = 23   # bad
age = 23 # good

    遵守一定的命名规范：驼峰命名法，又分为大驼峰命名法和小驼峰命名法

    • 小驼峰式命名法（lower camel case）：

      第一个单词以小写字母开始；第二个单词的首字母大写，例如：myName、aDog

    • 大驼峰式命名法（upper camel case）：

      每一个单词的首字母都采用大写字母。例如：FirstName、LastName.

    • 下划线 user_name

5.4 赋值变量

使用等号=运算符可以为变量赋值，等号左侧为变量，右侧为被赋的值

<body>
        <script>
            var user_name = '张三';
            console.log(user_name); // 张三
        </script>
</body>

5.5 变量提升

声明变量放在最后，赋值操作放在前面，JavaScript 在预编译期会先预处理声明的变量

<script>
    console.log(a_name); //undefined
    a_name = '张三'
    console.log(a_name); //张三
    var a_name;
</script>

由于 JavaScript 在预编译期对变量声明语句进行了预解析，所以第一行代码读取变量值时不会抛出异常，

而是返回未初始化的值 undefined，第三行代码是在赋值操作之后读取，故显示为张三。

JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行，这样所有声明的变

量都会被提升到代码的头部，这就叫作变量提升。

 

6、JavaScript数据类型

JavaScript的数据类型在ES5版本中分为两种：值类型（基本数据类型）、址类型（引用数据类型）

基本数据类型  
  字符串类型（String）
  数字(Number)
  布尔(Boolean)
  未定义（Undefined）
  空（Null）
引用数据类型  
  数组(Array)
  函数(Function)
  对象(Object)

 

其中String、Number、Boolean、Null、Undefined属于基本数据类型，而Object、 Array、Function属于引用数据类型

6.1 字符串（String）

在JS中，字符串需要使用引号引起来，使用单引号或双引号都可以，但不要混合使用

同一种引号不能嵌套，双引号不能放双引号，单引号不能放单引号

如果一定要想双包裹双，单包裹单，必须使用转义字符，在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义

  • \"表示"
  • \'表示'
  • \n表示换行
  • \t制表符
  • \\表示\
var name = '张\'三\'';
var name1 = "张\"三\"";
console.log(name); //张三
console.log(name1); // 张三
console.log ("子曰："学而时习之，不亦乐乎"");
//添加转义字符
console.log ("子曰：\"学而时习之，不亦乐乎\"");

6.2 数字（Number）

在JS中，所有的数值都是Number类型，包括整数和浮点数（小数）

可以使用一个运算符typeof，来检查一个变量的类型。语法：typeof 变量

  • 检查字符串时，会返回string
  • 检查数值时，会返回number

最大值MAX_VALUE

JS中可以表示的数字的最大值 Number.MAX_VALUE=1.7976931348623157e+308

如果使用Number表示的数字超过了最大值，则会返回一个Infinity

JAVASCRIPT
var a = Number.MAX_VALUE * Number.MAX_VALUE;
console.log(a); // Infinity

最小值MIN_VALUE

大于0的最小值 Number.MIN_VALUE=5e-324

JAVASCRIPT
var a = Number.MIN_VALUE * Number.MIN_VALUE;
console.log(a); // 0

6.3 布尔（Boolean）

布尔值只有两个，主要用来做逻辑判断

  • true表示真
  • false表示假

使用typeof检查一个布尔值时，会返回boolean

6.4  空对象（Null）

Null类型的值只有一个，就是null

null这个值专门用来表示一个为空的对象，表示这个变量里面啥都没有，就是空的

使用typeof检查一个null值时，会返回object

JAVASCRIPT
var a3 = null;
console.log(a3); // null
console.log(typeof a3); // object

4.5 未定义（Undefined）

Undefined（未定义）类型的值只有一个，就是undefind

当声明一个变量，但是并不给变量赋值时，它的值就是undefined

使用typeof检查一个undefined时，也会返回undefined

JAVASCRIPT
var a4;
console.log(a4); // undefind
console.log(typeof a4); // undefind

7、JavaScript数据类型高级

7.1 字符串

JavaScript字符串(String)就是由零个或多个Unicode字符组成的字符序列。零个字符表示空字符串。

  • 字符串字面量/字符串直接量

    • 字符串必须包含在单引号或双引号中

    • 如果字符串包含在双引号中,则字符串内可以包含单引号;反之,也可以在单引号中包含双引号

    • 在ECMAScript 3中,字符串必须在一行内表示,换行表示是不允许的，

      如果要换行显示字符串,可以在字符串中添加换行符(\n)

    • 在ECMAScript 5中,字符串允许多行表示。

      实现方法:在换行结尾处添加反斜杠(\).反斜杠和换行符不作为字符串直接量的内容

    • 在字符串中插入特殊字符,需要使用转义字符\,如单引号,双引号等

    • 字符串中每个字符都有固定的位置.第1个字符的下标位置为0,第2个字符的下标位置为1...

      ···以此类推,最后一个字符的下标位置是字符串长度减1

<script>
        var str1 = '09328"4yrc091708)("*&(^&(*&T';
        var str2 = "kajhx  askjh &*(";
        var str3 = '9287O&*b';
        var str4 = "小王他妈妈说：'他要把翠花嫁给我'";
        console.log(str4);
​
        var str5 = "今天天气\n真好"
        console.log(str5);
​
        var str6 = "今天天气\
        真好";
        console.log(str6);  
​
        var str7 = "大爱尚硅谷";
        console.log(str7[0]); //大
        console.log(str7[str7.length-1]); //谷
</script>

  • 转义字符

    转义字符是字符的一种间接表示方式。在特殊语境中,无法直接使用字符自身

    var str = "请看\"这个是一个双引号";
console.log(str); //请看"这是一个双引号

    如果在一个正常字符前添加反斜杠,JavaScript会忽略该反斜杠

    <script>
    var str = "小明妈妈说:\"今天天气真好\"";
    console.log(str); //小明妈妈说:"今天天气真好"
    var str2 = "小明妈妈说:\"\今\天\天\气\真\好\"";
    console.log(str2);//小明妈妈说:"今天天气真好"
    var str3 = "看我斜杠：\\"
    console.log(str3);//看我斜杠\
</script>

  • 字符串操作

    • 借助String类型的原型方法,可以灵活操作字符串

    • 在JavaScript中,可以使用加号(+)运算符连接两个字符串

    • 使用字符串的length属性获取字符串的字符个数(长度）

    • 在ES5中，字符串可以作为只读数组使用，可以通过中括号运算符添加下标访问某一个值。

      下标从0开始，最大位置的下标是length-1

<script>
    var str = "老师说";
    var say = "你好啊";
    console.log(str+say); //老师说你好啊
    console.log(str + 666); //老师说666
    console.log(str + 888); //老师说888
    console.log(1 + 1); // 2
    console.log("1" + 1); // 11
    console.log(1 + "1"); // 11
    var str1 = "今天是个好天气12345";
    console.log(str1.length); //12
    console.log(str1[0]); //今
    //获取最后一个字符
    console.log(str1[str1.length-1]); //5
</script>

  • String方法

    String方法是可以将其他类型转换成字符串类型，所有转化类型都是在转化的代码当前行上起作用,原本的数据类型是不变的

    情况1：针对于null和undefined类型

    转换成对应的null和undefined字符串

    情况2：针对于number类型

    普通数字直接转换成字符串

    情况3：针对于boolean类型

    都转换成对应的true和false字符串

<script>
    //1.null类型的转换
    console.log(String(null));//字符串的 'null'
​
    //2.undefined转换
    console.log(String(undefined));//字符串的'undefined'
​
    //3.number类型的转换
    //转换规则：普通数字直接变成字符串 
    console.log(String(123));//'123'
    console.log(String(-123));//'-123'
    console.log(String(Infinity));//'Infinity'
    console.log(String(-Infinity));//'-Infinity'
    console.log(String(12.3));//'12.3'
    console.log(String(NaN));//'NaN'
​
    //4.布尔值的转换
    console.log(String(true));//'true'
    console.log(String(false));//'false'
</script>

  • toString方法    

           toString()方法前面是对象可以调用出来的,toString方法不能直接拿来使用

    • 我们的代码中有+（加号）运算符的情况下，它在这种情况下（字符串 + 其它什么东西），

      会调用toString()方法，将其它类型的值转化为字符串，再和原始字符串拼接成一个字符串

    • 除了null和undefined之外，其他的类型(数值、布尔、字符串)都有toString()方法，

      它返回相应值的字符串表现(并不修改原变量)。

    • 每个对象都有一个toString()方法。

    • 当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。

<script>
    console.log((1).toString());     // "1"
    console.log(true.toString());    // "true"
    console.log(null.toString());    // Uncaught TypeError: Cannot read property 'toString' of null
    console.log(undefined.toString());// Uncaught TypeError: Cannot read property 'toString' of null
</script>

总结：

String()方法和toString()方法的区别：主要针对于null和undefined类型

String()方法可以转换null和undefined，转换成对应的字符串；

toString()方法不可以转换null和undefined，会报错

7.2 数字

Infinity

  • Infinity表示正无穷
  • -Infinity 表示负无穷
  • toFixed四舍五入，保留小数点后两位，成一个字符串

使用typeof检查，Infinity会返回Number

  • 计算超出范围会得到无穷大(infinity)或者无穷小(-infinity)

  • 分母为0会构成无穷大Infinity 或负无穷大-Infinity

// 分母为0会构成无穷大Infinity 或负无穷大-Infinity
var num6 = 5/0;
console.log(num6);//Infinity
​
var num7 = -5/0;
console.log(num7);//-Infinity
​
console.log(typeof (Infinity));//无穷大和无穷小都是属于number类型

  • 关于Infinity的运算，加减乘除一个数字都是Infinity

console.log(Infinity + 100); //Infinity
console.log(Infinity - 100); //Infinity
console.log(Infinity * 100); //Infinity
console.log(Infinity / 100); //Infinity
  • Infinity和Infinity计算，加法乘法为Infinity，其他为NaN

  • Infinity和自身相等 其他比较正常

console.log(Infinity > 1);//true
console.log(Infinity < 1);//false
console.log(Infinity == 1);//false
​
console.log(Infinity > Infinity);//false
console.log(Infinity < Infinity);//false
console.log(Infinity == Infinity);//true
console.log(Infinity > -Infinity);//true

NaN

NaN是一个特殊的数字，表示Not A Number

JAVASCRIPT
var a = 'abc' * 'def';
console.log(a); // NaN

使用typeof检查一个NaN也会返回number

JAVASCRIPT
var a = 'abc' * 'def';
console.log(typeof a); // number

NaN特点：无论和谁比较都是false 无论和谁计算都是NaN，除了字符串是拼接

运算精度

在JS中整数的运算基本可以保证精确

如果使用JS进行浮点运算，可能得到一个不精确的结果

JAVASCRIPT
var a = 0.1 + 0.2;
console.log(a); // 0.30000000000000004

所以千万不要使用JS进行对精确度要求比较高的运算

isNaN

isNaN方法检测一个值是不是非纯数字 , 如果非纯数字就返回true 如果是纯数字就返回false

<script>
    document.write(isNaN(123)); //false
    document.write(isNaN(-1.23)); //false
    document.write(isNaN(5-2)); //false
    document.write(isNaN(0)); //false
    document.write(isNaN("Hello")); //true
    document.write(isNaN("2005/12/12"));//true
</script>

7.3 布尔

  • 情况1：如果遇见的是数字，则非0为true 0为false NaN为false
  • 情况2：如果遇见的是字符串，空为false 非空为true
  • 情况3：如果遇见的是null或undefined，返回的都是false

7.4 undefined

变量被声明了，但没有赋值时，就等于undefined

var a;
//输出a的值的时候，虽然已经定义了a，也找到了，但是a没有值，所以会返回一个undefined
console.log(a); //undefined
console.log(a+1); //undefined无法与number类型做四则运算 计算不了 NaN
​
//输出b的时候，会先查找b变量的声明，没有声明，js会直接报错，
//ReferenceError（引用类型错误）：b is not defined
//当代码在某一行报错时，程序将停止继续运行，待该行程序无错误后，在继续执行
console.log(b);

7.5 null

null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测null时会返回"object"的原因

var n = null;
console.log(n); //null

扩展：null和undefined基本是同义的，只有一些细微的差别。

undefined派生自null，两者都是表示空缺值，转换成布尔值都是假值，可以相等

但是并不是同一个数据类型

null表示"没有对象"，即该处不应该有值

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

而设置一个变量、参数为空的时候，建议使用null而不是undefined

8、JavaScript数据类型判断

8.1 typeof

typeof可以识别出基本类型String，、Number、Boolean、Undefined；

但是不能识别null以及引用数据类型，会把null、array、object统一归为object类型；

但是可以识别出function，所以typeof适用于用来识别一些基本类型

语法：
                           typeof 变量  --松散写法
                           typeof(变量) --严格写法
<script>
        var bool = true;
        var num = 1;
        var str = 'abc';
        var und= undefined;
        var nul = null;
        var arr = [];
        var fun = function(){}
​
        console.log(typeof bool); //boolean
        console.log(typeof num);//number
        console.log(typeof str);//string
        console.log(typeof und);//undefined
        console.log(typeof nul);//object
        console.log(typeof arr);//object
        console.log(typeof fun);//function
​
</script>

8.2 instanceof

instanceof不能识别出基本的数据类型 String、Number、Boolean、Undefined、Null

但是可以检测引用类型，如array、object、function;

 语法：
                          变量 instanceof 类型
<script>
                var bool = true;
                var num = 1;
                var str = 'abc';
                var und= undefined;
                var nul = null;
​
                console.log(bool instanceof Boolean);// false
                console.log(num instanceof Number);// false
                console.log(str instanceof String);// false
                console.log(und instanceof Object);// false
                console.log(nul instanceof Object);// false
​
                console.log([] instanceof Array); //true
                console.log({} instanceof Object);//true
                function fun(){}
                console.log(fun instanceof Function); //true
</script>

总结：在项目中使用哪个判断，还是要看使用场景，具体的选择，

一般基本的类型可以选择typeof，引用类型可以使用instanceof。

9、JavaScript数据类型转换

在JS中，数据类型转换分为两种：强制转换，自动转换(隐式转换)

9.1 强制类型转换

Number()方法

指将一个数据类型强制转换为其他的数据类型

类型转换主要指，将其他的数据类型，转换为String、Number、Boolean

Number()方法是一种严格的数据类型转换方法；

功能：将其他类型转换成number类型，会返回一个转换后的值

语法：Number(值)

方式一：使用Number()函数

  • 字符串 --> 数字

    • 如果是纯数字的字符串，则直接将其转换为对应数字
    • 如果字符串中有非数字的内容，则转换为NaN
    • 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
    JAVASCRIPT
    // **转换方式一：使用Number()函数**
// 纯数字的字符串
var a1 = '123';         
a1 = Number(a1);
console.log(typeof a1); // number
console.log(a1); 	    // 123
// 非数字的内容
// var a2 = 'abc';         
var a2 = undefined;
a2 = Number(a2);
console.log(typeof a2); // number
console.log(a2);        // NaN 
// 空串
// var a3 = ' ';      
var a3 = null;       
a3 = Number(a3);        
console.log(typeof a3); // number
console.log(a3);        // 0

  • 布尔 --> 数字

    • true转成1
    • false转成0
    JAVASCRIPT
    var a4 = true;
a4 = Number(a4);
console.log(typeof a4); // number
console.log(a4);        // 1
var a5 = false;
a5 = Number(a5);
console.log(typeof a5); // number
console.log(a5);        // 0

  • undefined --> 数字

    • undefined无法转换成对应的值，为NaN
console.log(Number(undefined));//NaN  undefined-->NaN

  • null--> 数字

    • null可以转换成数字为0
console.log(Number(null)); // 0   null--->0
parseInt()方法

parseInt是可以把值转换为整数，只针对String类型调用才有效果， 对其余类型返回的都是NaN

语法：parseInt(值)

  • parseInt()把一个字符串转换为一个整数：可以将一个字符串中的有效整数部分取出来，然后转换为Number
  • parseFloat()把一个字符串转换为一个浮点数：可以将一个字符串中的有效小数部分取出来，然后转换为Number
  • 如果对非String使用parseInt()或parseFloat()，它会先将其转换为String，然后再操作

和Number()方法不同的地方有：

情况1：parseInt如果遇到了非纯数字字符串，会尽己可能的保留数字部分，前提字符串开头是数字

console.log(Number("1a23"));//0 非纯数字的字符串-->NaN
console.log(parseInt("1a23"));//开头为数字-->1

情况2：针对于null类型

console.log(Number(null)); // 0   null--->0
console.log(parseInt(null));//无法转换 NaN

情况3：针对于布尔值类型

console.log(Number(true));//1  true-->1
console.log(parseInt(true));//无法转换 NaN
JAVASCRIPT
var a1 = "123";
a1 = parseInt(a1);
console.log(typeof a1); // number
console.log(a1);        // 123
var a2 = "123.456";
a2 = parseInt(a2);
console.log(typeof a2); // number
console.log(a2);        // 123
var a3 = "123px";
a3 = parseInt(a3);
console.log(typeof a3); // number
console.log(a3);        // 123 
// var a4 = null;
// var a4 = undefined;
// var a4 = '';
// var a4 = 'abc';
// var a4 = true;
var a4 = false;
a4 = parseInt(a4);
console.log(typeof a4); // number
console.log(a4);        // NaN
parseFloat()方法

parseFloat()也是可以把值转换成浮点数，只针对String类型调用才有效果， 对其余类型返回的都是NaN

语法：parseFloat(值)

即它能够识别第一个出现的小数点，而第二个小数点视为非法，解析过程和parseInt相同。

console.log(parseFloat(123));//123
console.log(parseFloat(12.3));//12.3
console.log(parseFloat("12.3.3"));//12.3
console.log(parseFloat("a12.1"));//NaN

9.2、其他数据类型转换为String

方式一：调用被转换数据类型的toString()方法

该方法不会影响到原变量，它会将转换的结果返回

JAVASCRIPT
// Number转换为String
var a1 = 123;
var b1 = a1.toString();
console.log(typeof a1); // number
console.log(typeof b1); // string
// Boolean转换为String
var a2 = true;
var b2 = a2.toString();
console.log(typeof a2); // boolean
console.log(typeof b2); // string

但是注意：null和undefined这两个值没有toString()，如果调用他们的方法，会报错

JAVASCRIPT
// Null转换为String
var a3 = null;
var b3 = a3.toString(); // UncaughtTypeError: Cannot read property 'toString' of null
console.log(typeof a3); 
console.log(typeof b3);
// Undefined转换为String
var a4 = undefined;
var b4 = a4.toString(); // UncaughtTypeError: Cannot read property 'toString' of undefined
console.log(typeof a4); 
console.log(typeof b4);

方式二：调用String()函数，并将被转换的数据作为参数传递给函数

使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法

但是对于null和undefined，就不会调用toString()方法，而是将

  • null直接转换为"null"
  • undefined 直接转换为"undefined"
JAVASCRIPT
// Number转换为String
var a1 = 123;
var b1 = String(a1);
console.log(typeof a1); // number
console.log(typeof b1); // string
// Boolean转换为String
var a2 = true;
var b2 = String(a2);
console.log(typeof a2); // boolean
console.log(typeof b2); // string
// Null转换为String
var a3 = null;
var b3 = String(a3);
console.log(typeof a3); // object
console.log(typeof b3); // string
// Undefined转换为String
var a4 = undefined;
var b4 = String(a4);
console.log(typeof a4); // undefined
console.log(typeof b4); // string

7.3、其他数据类型转换为Boolean

方式一：使用Boolean()函数

  • 数字-—->布尔
    • 除了0和NaN，其余的都是true
  • 字符串-—->布尔
    • 除了空串，其余的都是true
  • null和undefined都会转换为false
  • 对象也会转换为true
JAVASCRIPT
// - 数字-—->布尔
//   - 除了`0`和`NaN`，其余的都是`true`
// var a1 = 0;
var a1 = NaN;
a1 = Boolean(a1);
console.log(a1); // false
var a2 = 123;
a2 = Boolean(a2);
console.log(a2); // true
// - 字符串-—->布尔
//   - 除了空串，其余的都是`true`
var a3 = "123";
a3 = Boolean(a3);
console.log(a3); // true
var a4 = " ";
a4 = Boolean(a4);
console.log(a4); // true
var a5 = "";
a5 = Boolean(a5);
console.log(a5); // false
// - `null`和`undefined`都会转换为`false`
// var a6 = null;
var a6 = undefined;
a6 = Boolean(a6);
console.log(a6); // false

方式二：隐式类型转换

发生的场景在于四则运算上（加、减、乘、除、取余(求模)）
内部的转换机制：尽量将所有的类型都转换成number，然后再做运算

  • 当使用加法运算时

    • 针对于null会隐式转换成0
    • 针对于布尔值来说，true会转换成1，false会转换成0
      • 针对于undefined来说，运算只要不和字符串，那么都是NaN，如果和字符串就是拼接
console.log("45"+23); //4523--->string
console.log(23+45); //68--->number
console.log(undefined+34); //NaN--->number
console.log(undefined+"45"); //undefined45--->string
console.log(true+34); //35-->number
console.log(null+45); //45--->number

情况2：当使用减法运算时

  • string-number = number 这里指的是纯数字字符串；非纯数字字符串为NaN

  • number-number = number

  • undefined-number = NaN

  • undefined-string = NaN 这里的string无论是否是纯数字字符串，运算都为NaN

  • boolean-number = number

  • null-number = number

console.log("45"-23); //22--->number
console.log(45-23); //22--->number
console.log(undefined-34); //NaN--->number
console.log(undefined-"45"); //NaN--->number
console.log(true-34); //-33-->number
console.log(null-45); //-45--->number

情况3：当使用乘法运算时

  • string*number = number 这里指的是纯数字字符串；非纯数字字符串为NaN

  • number*number = number

  • undefined*number = NaN

  • undefined*string = NaN 这里的string无论是否是纯数字字符串，运算都为NaN

  • boolean*number = number

  • null*number = number

console.log("2"*1); //2--->number
console.log(2*1); //2--->number
console.log(undefined*2); //NaN--->number
console.log(undefined*"2"); //NaN--->number
console.log(true*34); //34-->number
console.log(null*45); //0--->number

情况4：当使用除法运算时

  • string/number = number 这里指的是纯数字字符串；非纯数字字符串为NaN

  • number/number = number

  • undefined/number = NaN

  • undefined/string = NaN 这里的string无论是否是纯数字字符串，运算都为NaN

  • boolean/number = number

  • null/number = number

  • number/null = infinity

console.log("2"/1); //2--->number
console.log(2/1); //2--->number
console.log(undefined/2); //NaN--->number
console.log(undefined/"2"); //NaN--->number
console.log(true/2); //0.5-->number
console.log(null/45); //0--->number
console.log(45/null); //infinity  无穷大
JAVASCRIPT
var a = "123";
var b = !!a;
console.log("a="+a+",b="+b); // a=true,b=true

8、补充

在js中，如果需要表示16进制的数字，则需要以0x开头

如果需要表示8进制的数字，则需要以0开头

如果需要表示2进制的数字，则需要以0b开头，但是不是所有的浏览器都支持

JAVASCRIPT
// 十六进制数字
var a = 0x10;
console.log(a); // 16
a = 0xff;
console.log(a); // 255
a = 0xCafe;
console.log(a); // 51966
a = "0x70";
a = parseInt(a,16);
console.log(a); // 112
// 八进制数字
a = 070;
console.log(a); // 56
a = "070";
a = parseInt(a,8);
console.log(a); // 56
// 二进制数字
a = 0b10;
console.log(a); // 2
posted @   泡芙_L  阅读(88)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· 【JS从入门到精通】03-JS运算
· 【JS从入门到精通】05-对象
· 2.JS基础
· JavaScript基础认识与数据类型
· [05] JS-基础语法(一)
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示