标识符命名规则
对于变量名,键值对中的键名应满足如下要求:
- 开头必须是字母、下划线(
_
)或美元符号($
) - 除了开头以外的字符也可以是数字
- 不可以是关键字和保留字
- 最好不要和全局变量/函数同名,会把原有变量/函数覆盖的风险
这里,关键字就是在 js 中有特殊意义的单词,而保留字是为了以后使用预留的词语。但不要求背它们,随着学习的深入,自然就都记住了。
常见的关键字有:
break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、debugger、finally、new、true、const、with、let、default、for、null、try、async 等等
常见的保留字有:
class、enum、export、extends、import 、super等等
本文可能会直接用到的有:
- var: 定义一个变量
- console.log(): 在浏览器控制台或后台终端输出一个值
- alert(): 在浏览器弹窗输出一个值
基本数据类型
Javascript 基本类型包括:数值,字符串,null,undefined 和布尔型。还有 ES6 中的 Symbol 类型,这篇博客暂时先不提 Symbol 类型。
比如:
var num = 1; //数值型
var str = 'hello world; //字符串,双引号也可以
var flag = true; //布尔型,取值 true 或 false
var obj = null; //空类型
var it = undefined; //undefined
这里简单解释一下需要注意问题:
- 数值类型是不区分整型与浮点型的;
- 数值类型默认都是以 double 浮点数形式储存的;
- 数值类型范围在 5e-324 至1.7976931348623157e+308,即 `Number.MIN_VALUE 至 Number.MAX_VALUE;
- js 没有字符类型,只有字符串类型;
- null 表示正常的、意料之中的空值,而 undefined 表示以外的空值。对于只声明未赋值的变量,默认值为 undefined;
- 数值类型有几个特殊值:
- Infinity: 正无穷
- -Infinity:负无穷
- NaN:非法数值(Not a Number),但他还是个数值(好矛盾)
复杂数据类型
基本数据类型对应的对象
js 中其实除了基本类型以外其他类型的本质都是对象,就算是基本类型变量,除了 undefined 和 null 以外,都有其对应的对象类型。如下:
var num = new Number(2);
var str = new String('hello');
var flag = new Boolean(true);
这里一定要清楚,其对象类型和基本类型不是一个东西,具体的看完类型转换就一切都清楚了。
js中其他常见的对象
当然,下面继续说对象,js 常用的对象有:Array,Object,Date,RegExp等等。定义方法如下:
var arr = new Array(); //得到一个空数组
var arr2 = new Array(5); //得到一个长度为5的数组,初值为undefined
var arr3 = new Array('b','a','c'); //得到一个长为3,对应值为'b','a','c' 的数组
var obj = new Object(); //得到一个空对象
var now = new Date(); //得到当前时间
var reg = RegExp('^[A-Za-z][\w\d]*$'); //得到一个正则表达式
对于数组、正则表达式和对象还有一种字面量的定义方法,这个方法和上面是完全等价的:
var arr = []; //得到一个空数组
var arr3 = ['b','a','c']; //得到一个长为3,对应值为'b','a','c' 的数组
var obj = {}; //得到一个空对象
var reg = /^[A-Za-z][\w\d]*$/; //得到一个正则表达式
数组和对象的访问
这个部分直接举例子:
- 数组:一些数据的集合,这里不要求数据必须是同样类型的
var arr = [1, 2, 3, 'a']; //定义一个数组
arr[0]; //1 访问数组的第1个元素,注意索引从0开始
arr[1]; //2 访问数组的第2个元素
arr[3]; //'a' 访问数组的第4个元素
arr[-1], arr[4], arr[1.3]; //undefined 访问数组越界或索引不正确都返回 undefined
- 对象: 键值对的集合,键值对之间由逗号分开,键和值由冒号分开
var obj = {
name: 'Bob',
age: 18,
gender: 'M'
};
obj.name; //'Bob' 获取 obj 对象的姓名
obj.age; //18 获取 obj 对象的年龄
obj.gender; //'M' 获取 obj 对象的性别
注意当键名中有符号也需要加引号。
其余的对象会在以后用到的时候再仔细讲
基本运算和运算符
运算符就像我们数学中的加减乘除,也像数学中的计算规定的先后顺序,这里我直接给出所以运算符的运算顺序和实例,必要的解释在表格后面,没有解释到的属于比较深奥的运算符,记住它的顺序即可,功能后续再理解。
优先级 | 运算符 | 结合性 | 举例 | 说明 | |||
---|---|---|---|---|---|---|---|
20 | 圆括号 | n/a | (…) | - | |||
19 | 成员访问 | 从左到右 | obj.name | - | |||
19 | 需计算的成员访问 | 从左到右 | obj["name"] | - | |||
19 | new(带参数列表) | n/a | new Person() | - | |||
18 | 函数调用 | 从左到右 | fun(args) | - | |||
18 | new(无参数列表) | 从右到左 | new fun | - | |||
17 | 后置递增 | n/a | a++ | 相当于 a = a + 1; | |||
17 | 后置递减 | n/a | a-- | 相当于 a = a - 1; | |||
16 | 逻辑非 | 从右到左 | !a | - | |||
16 | 按位非 | 从右到左 | ~a | - | |||
16 | 一元加法 | 从右到左 | +a | - | |||
16 | 一元减法 | 从右到左 | -a | - | |||
16 | 前置递增 | 从右到左 | ++a | - | |||
16 | 前置递减 | 从右到左 | --a | - | |||
16 | typeof | 从右到左 | typeof 4 | 得到值的类型 'number' | |||
16 | void | 从右到左 | void(0) | 执行表达式并返回 undefined | |||
16 | delete | 从右到左 | deleteobj.age | 删除对象属性 | |||
15 | 幂 | 从右到左 | 2**4 | 得 16 | |||
14 | 乘法 | 从左到右 | 2*3 | 得 6 | |||
14 | 除法 | 从左到右 | 4/2 | 得 2 | |||
14 | 取模(求余) | 从左到右 | 4%3 | 得 1 | |||
13 | 加法 | 从左到右 | 1+3 | 得 4 | |||
13 | 减法 | 从左到右 | 2-3 | 得 -1 | |||
12 | 按位左移 | 从左到右 | 32<<5 | 得 1024 | |||
12 | 按位右移 | 从左到右 | 32>>2 | 得 -8 | |||
12 | 无符号右移 | 从左到右 | -32>>>2 | 得 1073741816 | |||
11 | 小于 | 从左到右 | -1 < 2 | 得 true | |||
11 | 小于等于 | 从左到右 | -1 <= 2 | 得 true | |||
11 | 大于等于 | 从左到右 | -1 >= 2 | 得 false | |||
11 | 大于 | 从左到右 | -1 > 2 | 得 false | |||
11 | in | 从左到右 | "name" in obj | - | |||
11 | instanceof | 从左到右 | li instanceof HTMLElement | - | |||
10 | 等号 | 从左到右 | 5 == '5' | 得 true | |||
10 | 非等号 | 从左到右 | 5 != '5' | 得 false | |||
10 | 全等号 | 从左到右 | 5 === '5' | 得 false | |||
10 | 非全等号 | 从左到右 | 5 !== '5' | 得 true | |||
9 | 按位与 | 从左到右 | 10 & 40 | 得 8 | |||
8 | 按位异或 | 从左到右 | 10 ^ 40 | 得 34 | |||
7 | 按位或 | 从左到右 | 10 | 40 | 得 42 | ||
6 | 逻辑与 | 从左到右 | 0 && 3 | 得 0,不得 false | |||
5 | 逻辑或 | 从左到右 | 0 | 3 | 得 3,不得 true | ||
4 | ?: | 从右到左 | 8 !=0 ? 1 : 3 | 得 1 | |||
3 | 赋值 | 从右到左 | a = 2 | - | |||
3 | += | 从右到左 | a += 2 | 相当于 a = a + 2 | |||
3 | -= | 从右到左 | a -= 2 | 相当于 a = a - 2 | |||
3 | *= | 从右到左 | a *= 2 | 相当于 a = a * 2 | |||
3 | /= | 从右到左 | a /= 2 | 相当于 a = a / 2 | |||
3 | &= | 从右到左 | a &= 2 | 相当于 a = a & 2 | |||
3 | = | 从右到左 | a | = 2 | 相当于 a = a | 2 | |
3 | ^= | 从右到左 | a ^= 2 | 相当于 a = a ^ 2 | |||
3 | %= | 从右到左 | a %= 2 | 相当于 a = a % 2 | |||
3 | <<= | 从右到左 | a <<= 2 | 相当于 a = a << 2 | |||
3 | >>= | 从右到左 | a >>= 2 | 相当于 a = a >> 2 | |||
3 | >>>= | 从右到左 | a >>>= 2 | 相当于 a = a >>> 2 | |||
2 | yield | 从右到左 | yield returnValue; | - | |||
2 | yield* | 从右到左 | yield* returnValue; | - | |||
1 | 展开运算符 | n/a | arr1.push(...arr2) | - | |||
0 | 逗号 | 从左到右 | a=1,b=2 | 返回最后一个表达式的值 2 |
需要说明的是:
- 优先级越高的优先计算,同优先级的从左到右依次计算;
- a++ 与 ++a 的区别: 前者先返回值后自加,后者先自加再返回值(a-- 与 --a 同理);
- 涉及到位运算的部分不是十分重要,但以后的文章会细谈;
- == 和 === 的区别,前者比较是发生自动类型转换,后者不发生自动类型转换(!= 与 !== 同理);
- 对于
exp ? val1 : val2;
如果 exp 的结果为 true,整个表达式得 val1, 否则得 val2;