第一句子网 > JavaScript从入门到精通之入门篇（一）概念与语法

JavaScript从入门到精通之入门篇（一）概念与语法

时间：2021-09-15 19:56:31

入门篇大纲

第一部分概念与语法

1.JavaScript的历史

2.基本概念

3.JavaScript的使用、调试和异常处理

4.基本词法和变量

5.数据类型和类型转换

6.运算符

算数运算符

赋值运算符

一元运算符

使用一元运算符，将会把所有的内容转换为数值运算，不使用字符运算

例子：

var i = “10”;i++; // 与 i += 1 或者 i = i + 1 类似console.log(i) // 输出： 11

注意： i++ 和 ++i 的区别

i++和++i 独立运算时，运算的结果是完全相同的；但是如果将i++和++i进行赋值、打印、获取时，运算的先后顺序就会影响赋值的先后顺序；如果是i++，变量在前，先赋值，再运算如果是++i，变量在后，先运算，再赋值

例子：

var i = '10';i++;console.log(i); // 输出： 11++i;console.log(i); // 输出： 12var i = '10';var x = i++;var y = ++i;console.log(x); // 输出：10console.log(y); // 输出：12

位运算符

进制

2进制和16进制的互转技巧:8421法

二进制数值： 1101 0001 0011 0011 1101二进制比值： 8421 8421 8421 8421 8421 16进制下标： 1313 313 16进制结果： d13 3d所以：11010001001100111101（二进制） = d133d （16进制）

位非运算符 ~

位与运算符 &

有一个0为0，没有0为1

1 & 1 = 1， 1 & 0 = 0，0 & 1 = 0，0 & 0 = 0

var a = 20; // 转成二进制：10100var b = 10; // 转成二进制：01010// 位与运算后：00000 转成10进制 --> 0console.log(a&b); // 输出：0

位或运算符 |

有一个1为1，没有1为0

1 | 1 = 1， 1 | 0 = 1，0 | 1 = 1，0 | 0 = 0

var a = 20; // 转成二进制：10100var b = 10; // 转成二进制：01010// 位或运算后：11110 转成10进制 --> 30console.log(a|b); // 输出：30

位异或运算符^

相同为0，不同为1

1 ^ 1 = 0， 1 ^ 0 = 1，0 ^ 1 = 1，0 ^ 0 = 0

var a = 20; // 转成二进制：10100var b = 10; // 转成二进制：01010// 异或运算后：11110 转成10进制 --> 30console.log(a^b); // 输出：30

左移位运算符、右移位运算符

console.log(8<<2); // 10000 --> 32console.log(8>>2); // 10 --> 2console.log(1<<n); // 可以求2的n次幂console.log((0x0000FF<<16).toString(16)); // 颜色值

关系运算符

常见的关系运算符：< >

重点关注 == 和 === 的区别:

== 自带隐式转换

null == undefined

0 == “” == false

NaN与任何内容都不同，NAN也不等于NaN，常使用isNaN判断某值是否为数字

console.log(1 == "1");// trueconsole.log(null == undefined); // trueconsole.log(0 == ""); // trueconsole.log(0 == false); // trueconsole.log(isNaN(parseInt('10a'))); // falseif(!x) {// 满足条件的x值有： "" 0 false undefined null NaN}

=== 表示两者之间的类型和值是否都相等

逻辑运算符

常用的逻辑运算符有： ! && ||

7.循环语句

所谓循环，具体有以下几个特点：

必须要有条件初始变量必须要有进入循环的条件必须有向条件外发展的表达式

while循环

例子：

<div id="btn0">按钮0</div><div id="btn1">按钮1</div><div id="btn2">按钮2</div><div id="btn3">按钮3</div><div id="btn4">按钮4</div><div id="btn5">按钮5</div><div id="btn6">按钮6</div><div id="btn7">按钮7</div><script>var i = 0;while (i <= 7) {var btn = document.getElementById("btn" + i);btn.onclick = function() {console.log(i); // 无论点击哪个按钮，始终输出 8console.log(this); // 点击按钮时，会输出你点击的按钮本身}i++;}</script>