JavaScript基础视频教程总结（011-020章）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>011-020章总结</title>

</head>

<body>

<pre>

011. 强制类型转换-String

强制类型转换

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

- 类型转换主要指，将其他的数据类型，转换为

String Number Boolean

将其他的数据类型转换为String

 方式一：

- 调用被转换数据类型的toString()方法

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

- 但是注意：null和undefined这两个值没有toString()方法，报错。

如果调用他们的方法，会报错

toString()函数的返回值为String类型。返回当前对象的字符串形式。

JavaScript的许多内置对象都重写了该函数，以实现更适合自身的功能需要。

对于Number调用toString()时可以在方法中传递一个整数作为参数

此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制

方式二：

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

- 使用String()函数做强制类型转换时，

对于Number和Boolean实际上就是调用的toString()方法

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

它会将 null 直接转换为 "null"

将 undefined 直接转换为 "undefined".

</pre>

<script type="text/javascript">

    console.log("第011");

    // 调用对象的toString()方法

    // 调用xxx的yyy()方法，就是xxx.yyy()

    var ts_123 = 123;

    var ts_true = true;

    var ts_null = null;

    var ts_undefined = undefined;

    var s_null = null;

    var s_undefined = undefined;

    ts_123 = ts_123.toString();

    ts_true = ts_true.toString();

    //ts_null = ts_null.toString();

    //ts_undefined = ts_undefined.toString();

    s_null = String(null);

    s_undefined = String(undefined);

    console.log("toString(123) ->" + ts_123 ); //123

    console.log("toString(true) ->" + ts_true ); //true

    //console.log("toString(null) ->" + ts_null ); // 没有报错

    //console.log("toString(undefined) ->" + ts_undefined ); // 没有报错

    console.log("String(null) ->" + s_null );  // null

    console.log("String(undefined) ->" + s_undefined ); //undefined

    //对于Number调用toString()时可以在方法中传递一个整数作为参数

    //此时它将会把数字转换为指定的进制,如果不指定则默认转换为10进制

    var at =55

    at = at.toString(16);

    console.log(at); //37

    console.log(typeof at); //string

</script>

<pre>

012. 强制类型转换-Number

将其他的数据类型转换为Number

转换方式一：

使用Number()函数

- 字符串 --> 数字

1.如果是纯数字的字符串，则直接将其转换为数字

2.如果字符串中有非数字的内容，则转换为NaN

3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

- 布尔 --> 数字

true 转成 1

false 转成 0

- null --> 数字  0

- undefined --> 数字  NaN

转换方式二：

- 这种方式专门用来对付字符串

- parseInt() 把一个字符串转换为一个整数

- parseFloat() 把一个字符串转换为一个浮点数

</pre>

<script type="text/javascript">

    console.log("第012");

    var n_123 = Number("123");

    var n_123safsd = Number("123safsd");

    var n_ = Number("");

    var n_true = Number(true);

    var n_false = Number(false);

    var n_null = Number(null);

    var n_undefined = Number(undefined);

    var p_123safsd = parseInt("123safsd");

    var p_float = parseFloat("4323.54353fsdfasd");

    console.log("Number('123') ->" + n_123 ); // 123

    console.log("Number('123safsd') ->" + n_123safsd ); //NaN

    console.log("Number('') ->" + n_ ); //0

    console.log("Number(true) ->" + n_true ); //1

    console.log("Number(false) ->" + n_false ); //0

    console.log("Number(null) ->" + n_null ); //0

    console.log("Number(undefined) ->" + n_undefined );//NaN

    console.log("parseInt('123safsd') ->" + p_123safsd ); //123

    console.log("parseFloat('4323.54353fsdfasd') ->" + p_float ); //4323.54353

</script>

<pre>

013. 其他进制的数字

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

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

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

</pre>

<script type="text/javascript">

    console.log("第013");

    var a ;

    //十六进制

    a = 0x10;

    a = 0xff;

    a = 0xCafe;

    //八进制数字

    a = 070;

    //二进制数字

    //a =0b10;

    //向"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析

    a = "070";

    //可以在parseInt()中传递一个第二个参数，来指定数字的进制

    a = parseInt(a,10);

    console.log(typeof a); // number

    console.log(a); //70

</script>

<pre>

014. 转换为Boolean

将其他的数据类型转换为Boolean

- 使用Boolean()函数

- 数字 ---> 布尔

- 除了0和NaN，其余的都是true

- 字符串 ---> 布尔

- 除了空串，其余的都是true

- null和undefined都会转换为false

- 对象也会转换为true

</pre>

<script type="text/javascript">

    console.log("第014");

    var b_123 =Boolean(123); //true

    var b_0 =Boolean(0); //false

    var b_nan =Boolean(NaN); //false

    var b_string =Boolean("fdada"); //true

    var b_kong =Boolean(""); //false

    var b_null =Boolean(null); //false

    var b_undefined =Boolean(undefined); //false

    var b_object =Boolean(Object); //true

    console.log("Boolean(123) ->" + b_123); //true

    console.log("Boolean(0) ->" + b_0); //false

    console.log("Boolean(NaN) ->" + b_nan); //false

    console.log("Boolean('fdada') ->" + b_string); //true

    console.log("Boolean('') ->" + b_kong); //false

    console.log("Boolean(null) ->" + b_null); //false

    console.log("Boolean(undefined) ->" + b_undefined); //false

    console.log("Boolean(Object) ->" + b_object);  //true

</script>

<pre>

015. 算数运算符

运算符也叫操作符

通过运算符可以对一个或多个值进行运算,并获取运算结果

比如：typeof就是运算符，可以来获得一个值的类型

它会将该值的类型以字符串的形式返回

number string boolean undefined object

运算符一般不会改变原变量的值。

算数运算符

当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN

+

可以对两个值进行加法运算，并将结果返回

如果对两个字符串进行加法运算，则会做拼串

会将两个字符串拼接为一个字符串，并返回

任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

- 可以对两个值进行减法运算，并将结果返回

* 可以对两个值进行乘法运算

/ 可以对两个值进行除法运算

% 取模运算（取余数）

</pre>

<script type="text/javascript">

    console.log("第015");

    var a = 123;

    var result = typeof a;

    console.log(typeof result); //string

    result = a + 1; // 124

    result = 456 + 789;

    result = true + 1; //2

    result = true + false; //1

    result = 2 + null;  //2

    result = 2 + NaN; // nan

    result = "你好" + "大帅哥";

    console.log(result); //你好大帅哥

    var str = "锄禾日当午，" +

              "汗滴禾下土，" +

              "谁知盘中餐，" +

              "粒粒皆辛苦";

    result = 123 + "1";

    console.log(result); //字符串1231

    result = true + "hello";

    console.log(result); //"truehello"

    //任何值和字符串相加都会转换为字符串，并做拼串操作

    /*

     * 我们可以利用这一特点，来将一个任意的数据类型转换为String

     *  我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String

     *  这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数

     */

    var c = 123;

    c = c + "";

    //c = null;

    //c = c + "";

    console.log(typeof c); //string

    console.log("c = "+c); //123

    result = 1 + 2 + "3";

    console.log(result); //33

    result = "1" + 2 + 3;

    console.log(result); //123

    result = 100 - 5;

    result = 100 - true;

    result = 100 - "1";

    result = 2 * 2;

    result = 2 * "8";

    result = 2 * undefined;

    result = 2 * null;

    result = 4 / 2;

    result = 3 / 2;

    console.log("result = "+result); //1.5

    /*

     * 任何值做- * /运算时都会自动转换为Number

     *  我们可以利用这一特点做隐式的类型转换

     *      可以通过为一个值 -0 *1 /1来将其转换为Number

     *      原理和Number()函数一样，使用起来更加简单

     */

    var d = "123";

    //console.log("result = "+result);

    d = d - 0;

    console.log(typeof d); //number

    console.log(d); //123

    result = 9 % 3;

    result = 9 % 4;

    result = 9 % 5;

    console.log("result = "+result); //4

</script>

<pre>

016. 一元运算符

 一元运算符，只需要一个操作数

+ 正号

- 正号不会对数字产生任何影响

- 负号

- 负号可以对数字进行负号的取反

- 对于非Number类型的值，

它会将先转换为Number，然后在运算

可以对一个其他的数据类型使用+,来将其转换为number

它的原理和Number()函数一样

</pre>

<script type="text/javascript">

    console.log("第016");

    var a = 123;

    a = -a;

    a = true;

    a = "18";

    a = +a;

    /*console.log("a = "+a);

    console.log(typeof a);*/

    var result = 1 + +"2" + 3;

    console.log("result = "+result); //6

</script>

<pre>

017. 自增和自减

自增 ++

- 通过自增可以使变量在自身的基础上增加1

- 对于一个变量自增以后，原变量的值会立即自增1

- 自增分成两种：后++(a++) 和 前++(++a)

无论是a++ 还是 ++a，都会立即使原变量的值自增1

不同的是a++ 和 ++a的值不同

a++的值等于原变量的值（自增前的值）

++a的值等于新值 （自增后的值）

自减 --

- 通过自减可以使变量在自身的基础上减1

- 自减分成两种：后--(a--) 和 前--(--a)

无论是a-- 还是 --a 都会立即使原变量的值自减1

不同的是a-- 和 --a的值不同

a-- 是变量的原值 （自减前的值）

--a 是变量的新值 （自减以后的值）

</pre>

<script type="text/javascript">

    console.log("第017");

    var ziZeng = 1;

    //使ziZeng自增1

    //ziZeng++;

    //++ziZeng;

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

    console.log(ziZeng); //2

    console.log(++ziZeng); //3

    console.log(ziZeng); // 3

    var result = ziZeng++ + ++ziZeng + ziZeng; // 3+ 5 + 5 =13

    console.log(result);

    var c = 10;

    c++;

    c++;

    //第一次c++，是在10的基础上自增

    //第二次c++，是在11的基础上自增

    console.log("c = " + c); //12

    var d = 20;

    d = d++; // 20

    var e = d++; //20

    d = e; //20

    console.log("d = "+d); //20

    //num--;

    //--num;

    var num = 10;

    console.log(num--); //10

    console.log(--num); //8

    console.log("num = "+num); //8

</script>

<pre>

018. 自增练习

</pre>

<script type="text/javascript">

    console.log("第018");

    var n1=10;

    var n2=20;

    var n = n1++; //n1 = 11  n1++ = 10

    console.log('n='+n);  // 10

    console.log('n1='+n1); //11

    n = ++n1 //n1 = 12  ++n1 =12

    console.log('n='+n); //12

    console.log('n1='+n1); //12

    n = n2--;// n2=19 n2--=20

    console.log('n='+n); //20

    console.log('n2='+n2); //19

    n = --n2; //n2=18 --n2 = 18

    console.log('n='+n); //18

    console.log('n2='+n2); //18

</script>

<pre>

019. 逻辑运算

JS中为我们提供了三种逻辑运算符

! 非

- !可以用来对一个值进行非运算

- 所谓非运算就是值对一个布尔值进行取反操作，

true变false，false变true

- 如果对一个值进行两次取反，它不会变化

- 如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反

所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值

可以为一个任意数据类型取两次反，来将其转换为布尔值，

原理和Boolean()函数一样

&& 与

- &&可以对符号两侧的值进行与运算并返回结果

- 运算规则

- 两个值中只要有一个值为false就返回false，

只有两个值都为true时，才会返回true

- JS中的“与”属于短路的与，

如果第一个值为false，则不会看第二个值

|| 或

- ||可以对符号两侧的值进行或运算并返回结果

- 运算规则：

- 两个值中只要有一个true，就返回true

如果两个值都为false，才返回false

- JS中的“或”属于短路的或

如果第一个值为true，则不会检查第二个值

</pre>

<script type="text/javascript">

    console.log("第019");

    //如果两个值都是true则返回true

    var result = true && true;

    //只要有一个false，就返回false

    result = true && false;

    result = false && true;

    result = false && false;

    console.log("result = "+result); //false

    //第一个值为true，会检查第二个值

    //true && alert("看我出不出来！！"); //经常用到

    //第一个值为false，不会检查第二个值

    //false && alert("看我出不出来！！");

    //两个都是false，则返回false

    result = false || false;

    //只有有一个true，就返回true

    result = true || false;

    result = false || true ;

    result = true || true ;

    console.log("result = "+result); //true

    //第一个值为false，则会检查第二个值

    //false || alert("123");

    //第一个值为true，则不再检查第二个值

    //true || alert("123");

    var a = false;

    //对a进行非运算

    a = !a;

    console.log("a = "+a); //true

    var b = 10;

    b = !!b; // b转换为boolean为true，!b是false ,!!b为true

    console.log("b = "+b); //true

    console.log(typeof b); //boolean

</script>

<pre>

020. 非布尔值的与或运算

- 对于非布尔值进行与或运算时，

会先将其转换为布尔值，然后再运算，并且返回原值

- 与运算：

- 如果第一个值为true，则必然返回第二个值

- 如果第一个值为false，则直接返回第一个值

- 或运算

- 如果第一个值为true，则直接返回第一个值

- 如果第一个值为false，则返回第二个值

</pre>

<script type="text/javascript">

    console.log("第020");

    //true && true

    //与运算：如果两个值都为true，则返回后边的

    var result = 5 && 6;

    console.log(result); //6

    //与运算：如果两个值中有false，则返回靠前的false

    //false && true

    result = 0 && 2;

    console.log(result); //0

    result = 2 && 0;

    console.log(result); //0

    //false &&　false

    result = NaN && 0;

    console.log(result); //NaN

    result = 0 && NaN;

    console.log(result); //0

    //true || true

    //如果第一个值为true，则直接返回第一个值

    result = 2 || 1;

    result = 2 || NaN;

    console.log(result); //2

    result = 2 || 0;

    console.log(result); //2

    //如果第一个值为false，则直接返回第二个值

    result = NaN || 1;

    result = NaN || 0;

    console.log(result); //0

    result = "" || "hello"; //false

    console.log("result = "+result); // hello

    result = -1 || "你好"; 

    console.log("result = "+result); // -1

</script>

</body>

</html>

所有基础课程链接：

1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）

5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）

9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）

13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）

另外，欢迎关注我的新浪微博

JavaScript基础视频教程总结（011-020章）的更多相关文章

JavaScript基础视频教程总结（081-090章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（131-140章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（121-130章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（111-120章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（101-110章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（091-100章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
JavaScript基础视频教程总结（071-080章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（061-070章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（051-060章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

Quartz的API简介及Jobs和Trigger介绍
Quartz的API: 主要api: The key interfaces of the Quartz API are: Scheduler - the main API for interactin ...
intllij IDE 中git ignore 无法删除target目录下的文件
原因: git的本地忽略设置必须保证git的远程仓库分支上没有这个要忽略的文件,如果远程分支上存在这个文件,本地在设置ignore 这个文件,将会失败,无法commit忽略.(有人说是git的bug, ...
for 没有作用域的说话
for i in range(10): passprint(i) 打印的结果就是9 打印的最后一次结果
开启safe_mode之后对php系统函数的影响
safe_mode即为PHP的安全模式,在php.ini中设置safe_mode = On重启PHP便可开启安全模式. 当安全模式开启后,PHP相应的一些系统函数,文件操作函数等将会受限.例如: ck ...
XAMPP与本地Mysql冲突解决方法
1.更改regeit目录 https://blog.csdn.net/sinat_37633633/article/details/77645463 2.更改配置文件my.ini (1)https:/ ...
生活实遇记-Kindle好久没用，屏幕一直处于电池状态，怎么解决？
2018-01-02 实遇记-Kindle好久没用,屏幕一直处于电池状态,怎么解决? 今天我翻腾出自己的kindle,好久没用了,屏幕一直是一个电池状态,充电头+线充了2个钟头,按电源键木有反应,也是 ...
php一次性大量数据入库解决方法
当有业务需求需要一次性循环n条数据,插入或更新数据库时,如果单纯的循环,插入/更新,会消耗太多的数据库资源一下是一种简单的解决方案数据库的insert 是可以批量更新的,当有大量数据循环i ...
ReactiveX 学习笔记（23）RxCpp
RxCpp RxCpp 是 ReactiveX 的 C++ 语言实现. 下载 RxCpp $ git clone --recursive https://github.com/ReactiveX/Rx ...
python入门学习0
Python 是什么类型的语言 Python是脚本语言 Python下载地址:https://www.python.org/downloads/ Python版本:Python 3.4.2 - 64b ...
springcloud-知识点总结（一）：Eureka
1.Spring Cloud简介 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载 ...

JavaScript基础视频教程总结（011-020章）

JavaScript基础视频教程总结（011-020章）的更多相关文章

随机推荐

热门专题