简介
JavaScript 包含三个部分:ECMAScript是JavaScript的标准、DOM用来操作网页、BOM用来操作浏览器。
JS 特点:
- 解释型语言
- 类似C和Java语法结构
- 动态语言
- 基于原型的面向对象
JS 编写位置:
- 在标签的 onclick 属性中。(前两种是卸载标签属性中,不推荐)
- 在超链接的 href 里。会用<a href="javascript:;">xx</a>来实现超链接只可以点击而不跳转。
- 在script标签里写,代码会立即执行
- 外部文件,这样引入:<script type="text/javascript" src="./xx/xx.js"></script>。这样可以在不同页面引用,也可以利用浏览器的缓存机制。注意不能在这个引入的script标签里写代码。
JS 基本语法:
- js注释:
- 多行注释/* */
- 单行注释//
- 严格区分大小写。
- 每一条语句以分号结尾,如果不写分号浏览器会自动添加(消耗系统资源),而有的时候浏览器会加错分号,所以一定要写分号。
- 自动忽略多个空格和换行。
字面量、变量、标识符、转义字符
字面量:不可改变的值,比如12345,可以直接使用的,一般不使用。
变量:用来保存字面量,变量可以随意改变。
使用 var 关键字来声明变量
标识符:所有可以自主命名的都可以称为标识符,例如变量名、函数名、属性名,可以含有字母数字下划线和$,不能以数字开头,不可以是ES中的关键字和保留字。建议用驼峰命名法。
因为JS底层保存标识符用的是Unicode编码,所以所有的utf-8中的内容都可以作为标识符。
常用的转义字符:\'和\"表示引号,\n 换行,\t 制表符, \\表示\
数据类型
js有六种:String,Number,Boolean,Null,Undefined,Object
其中前5种是基本数据类型,Object是引用数据类型。使用 typeof 来检查变量类型。
String:
- 使用单双引号都可以,但别混着用。
Number:
- 包括整数、浮点数
- 最大值为 Number.MAX_VALUE,如果Number的数字超过了最大值,则系统会返回一个Infinity,即正无穷。
- 零以上的最小值为 Number.MIN_VALUE,注意这是一个小数,理解为无限正向接近 0。
- 正无穷 Infinity 是字面量,数据类型是Number。有-Infinity。
- NaN 是一个特殊的数字,数据类型是Number,表示 Not a Number 不是数字。
- 如果使用 JS 进行浮点元素运算,可能会得到一个不精确的结果,例如0.1 + 0.2 可能算到 0.300000000000000000004,多一个小尾巴。这是大多数编程语言存在的通病,因此不要用JS去进行对精确度要求很高的计算!
Boolean:
- 布尔值有两个:true 和 false。用于逻辑判断。
Null:
- 只有一个值就是 null,表示一个空的对象。使用 typeof 判断 null 结果是 Object
Undefined:
- 只有一个值就是 Undefined,当给一个变量声明却不赋值时,值就是Undefined
强制类型转换:
- 其他转 String:
- 方法一:toString(),比如var a = 123; a = a.toString(); 除了 null 和 undefined 都可以转字符串。
- 方法二:调用 String() 函数,并将被转换的数据作为参数传递给函数,比如 var a = 123; a = String(a); null 和 undefined 也可以用这个方法转为字符串。对于 Number 和 Boolean 用 String() 实际上就是在调用 toString() ,而其他两个是直接转换为字符串。
- 其他转 Number:
- 方法一:调用 Number() 函数。
- 字符串转数字。比如 var a = "123"; a = Number(a); 如果字符串不是纯数字,则转换为 NaN。如果是空字符串或则和都是空格的字符串,则转换为 0。
- 布尔转数字。true 转 1,false 转 0。
- 其他转数字。null 转 0,undefined 转 NaN。
- 方法二:专门对付字符串的方法,parseInt()、parseFloat()
- parseInt “智能”提取整数,比如 var a = "123px"; a = parseInt(a); 结果 a = "123"。原理:parseInt 会把字符串中有效的整数内容取出来。
- parseFloat 同理,可以 “智能”提取有效的浮点数内容,比如 var a = "123.456.789px"; a = parseInt(a); 结果 a = "123.456"。
- 对于 null 和 undefined 使用这两个函数时,会被先转为字符串,然后返回 NaN。
- 方法一:调用 Number() 函数。
- 其他转 Boolean:
- 使用 Boolean() 函数。
- 数字转布尔。除了 0 和 NaN 转出来是 false 之外,其他任何数字(包括最大值、无穷、负数、浮点数等)转出来都是 true。
- 字符串转布尔。除了空字符串是 false,其余(包括只有空格的字符串)都是 true。
- null 和 undefined 转布尔,结果都是 false。
- 对象转布尔,结果是 true。
- 使用 Boolean() 函数。
隐式类型转换:
- 任意数据类型转字符串:任意数据类型 + 空字符串(即"")。比如 123 + "" = "123",true + "" = "true"。原理:任意数据类型和字符串相加,会先自动转换为字符串再相加。本质:浏览器自动调用了 String() 方法。
- 任意数据类型转数字(利用算术运算符):任意数据类型 - 0 或 *1 或 /1。比如 "123" - 0 = 123,"123" * 1 = 123,"123" / 1 = 123。原理:除了加法之外,其他运算规律下,其它数据类型会自动转为数字再运算。本质:浏览器自动调用了 Number() 方法。
- 任意数据类型转数字(利用一元运算符,更简单常用):+任意数据类型。比如 a = "123"; a = +a; 结果 a = 123。本质也是调用了 Number() 方法。
- 任意数据类型转布尔(利用逻辑运算符!):!!任意数据类型。比如 a = 10; a = !!a; 结果 a = true。
- 坑点注意:1 + "2" + 3 = "123"、1 + +"2" + 3 = 6 。后者是有个一元运算符+把字符串隐式转换了。
其他进制的数字:
- 16 进制用 0X 开头,比如 a = 0x10; console.log(a); 结果是16(在输出时会自动变为十进制数字)。
- 8 进制用 0 开头。
- 2 进制用 0b 开头,并不是所有浏览器都支持二进制,比如 ie 就不支持。
- 注意:像 '070' 这种字符串,在使用强转数字时,不同浏览器可能会识别为不同的进制,有的会当做八进制,有的当作十进制。解决方法:可以在 parseInt 中传递第二个参数,指定数字的进制,比如 a = parseInt(a,10); 就是指定 a 为十进制。
运算符
运算符也叫操作符,通过运算符可以对一个或多个值进行运算,并获取运算结果,比如 typeof 就是运算符,获得一个值的类型,并以字符串的形式返回。
算术运算符 +、-、*、/、%:
- 当对非 Number 类型运算时,会自动转换。比如 true + false + 1 = 2,2 + null = 2。
- 任何值和 NaN 做运算,结果都为NaN。比如 123 + NaN = NaN。
- 两个字符串相加会拼接,比如 "123" + "hello“ = ”123hello“
- 任何值和字符串相加,会先转为字符串,再拼接,比如 123 + "1“ = ”1231“,true + "hello“ = ”truehello“。(这也是隐式转换的原理)
- 除了加法之外,其他运算规律下,其它数据类型会自动转为数字。比如 100 - '1' = 99, 100 - true = 99, 2 * ”8“ = 16,2 * undefined = NaN(undefined 先转为数字 NaN),2 * null = 0。(这也是隐式转换的原理)
- % 取模,即取余数。
一元运算符:
- 正号 +。不会对数字产生任何影响,比如 a = 123; a = +a; 结果 a = 123。
- 负号 -。对数字进行取反, 比如 a = 123; a = -a; 结果 a = -123。
- 对于非 Number 值,正负号会先转换为 Number 再运算。可以利用这个特性,对其它类型使用+,将其转换为数字。
自增和自减:
- ++a 和 a++的区别:a++在函数括号里先取值(先使用a),再计算,后者先计算再取值。
- 来一个坑:d = 20; result = d++ + ++d + d; console.log(result); 求问结果?结果是64。分析:事实上是20+22+22=64,第一个d是20,console.log函数里先取值再计算的原则所以第一个数是20,第二个和第三个d都是自增了两次,所以是22。
- 再来一个坑:d = 20; d = d++; console.log(d); 求问结果?结果是20。分析:d=d++ 相当于给d赋值了两次,第一次是21,第二次是根据先取值的原理,d = 20。
逻辑运算符:
- !非
- 对一个布尔值进行取反操作。
- 对非布尔值进行取反,则会先转换为布尔值再取反。
- 进行两次取反,就负负得正了。利用这一点进行隐式转换。
- && 与
- 只要有一个 false,结果就是 false。
- js 的与运算是会“短路的”:如果第一个值为 false, 系统不会取判断第二个值。
- || 或
- 只要有一个 true,结果就是 true。
- js 的或运算是会“短路的”:如果第一个值为 true, 系统不会取判断第二个值。
- 对非布尔值进行与或运算,会先转换为布尔值再运算,最后返回原值。
- 与运算中
- (罗嗦一点的规则)如果两个值都是 true 则返回第二个,比如 1 && 2 = 2,2 && 1 = 1。如果两个值有一个是false 则返回 false 的值。如果两个值都是 false 则返回第一个,比如 0 && NaN = 0,NaN && 0 = NaN。
- (简单一点的规则)如果第一个值是 true 则返回第二个,如果第一个值是 false 则返回第一个。
- 或运算中
- 如果第一个值是 true 则返回第一个,如果第一个值是 false 则返回第二个。
- 与运算中
赋值运算符:=、 +=、 -=、 *=、 /=。
关系运算符:
- 对于数值来说,> < >= <= 就不用多说了,返回一个布尔值。
- 对于非数值,会将非数值转换成数字再比较,比如(结果都是 true) 1 >= true, 1 > "0", 10 > null, true > false。
- 特殊的,
- 任何值和 NaN 比较都是 false,比如(结果都是 false)10 > NaN, 10 > "hello"。
- 如果比较双方都是字符串时,不会转成数字再比,而是分别比较字符串中字符的Unicode编码,具体规则是一位一位进行比较,如果两位一样就比较下一位。比如 "a" < "b" 是 true,"bac" < "bb" 是 true(因为先比第一位,比不出来就比第二位),"11" < "5" 是 true(咋一看好像11比5大,然而字符串要一位一位比,所以1和5比5的Unicode编码更大)。ps:
- 可以利用此特性来对英文进行排序,比如 "abc" < "bcd"。
- 在比较两个字符串型数字时,一定一定要先转型!比如 "11" 和 "5" 比较时,可以这样: "11" < +"5" 是true。
相等运算符(属于关系运算符):
- 对于非数值,会将非数值转换成数字再比较。
- null == undefined 是 true,因为undefined 是 null 衍生出来的。
- NaN 和谁比都是 false,包括自己,即 NaN == NaN 是 false。因此判断是否为NaN,只能用函数 isNaN()。
- === 全等,!==全不等。不做类型转换,直接判断,比如"123" == 123 是对的,"123" === 123 是不对的, null === undefined 是不对的。
条件运算符(也叫三元运算符)。语法:条件语句?语句1:语句2;
语句
代码块:{}中的几个语句成为一个~,~中的语句要么一起起作用,要么一起不起作用。~只起到分组的作用,其他没有用途,{}外面也是可以访问到{}里面的代码的。
语句分类
- 条件判断语句 if
- 条件分支语句 switch
- 语法。switch(条件表达式){case 表达式:...;break;...;case 表达式:...;break;default:...;break;}
- 注意,switch 轮流对 case 后的表达式和条件表达式进行的是全等比较。
- 循环语句 while、do while、for
- break 用于退出 switch 或跳过当前整个循环。
- 一般来说是结束最近的循环
- 可以用创建 label(标识,不一定要写label,写啥字母都行) 的方式来结束指定的循环。语法是 label:循环语句,并在 break 后加上 label。例如:
outer: for(var i = 0; i<5; i++){ for(var j = 0; j<5; j++){ break outer; } }
这样一来,循环就会 break 在最外层。
-
continue 用于跳过当次循环(默认也是最近的循环)。
对象 Object
为什么需要对象?---对象是JS中的引用数据类型,而 Number String Boolean Null Undefined 是基本数据类型。基本数据类型都是单一的值,比如"hello"、123、true等,值和值之间没有任何联系。而对象是一种复合的数据类型,可以保存多个不同数据类型的属性。
对象的分类:
- 内建对象
- 由ES标准中定义的对象,在任何ES的实现中都可以使用
- 比如 Math String Number Boolean Function Object......
- 宿主对象
- 由JS的运行环境提供的对象,目前来讲主要指的是浏览器提供的对象
- 比如 BOM DOM
- 自定义对象(最重要)
- 由开发人员自己创建的对象
对象的基本操作:
- 创建对象
- 使用 new 关键字调用的函数是构造函数,构造函数时专门用来创建对象的函数
var obj = new Object();
-
保存的值是属性
obj.name = "Jay"; obj.age = 16;
-
如果读取对象中没有的属性,不会保存而是返回 undefined
- 使用 new 关键字调用的函数是构造函数,构造函数时专门用来创建对象的函数
-
删除属性
delete obj.name