javascript 知识点整理 01 基础语法

这部分内容的整理都来自于《js高级程序设计》

script标签

基本语法（标识符、操作符）

语句

我个人对js的理解

就像w3c规范里定义了页面(html)、样式(css)、交互(js)三个方面，javascript从结构上来看包含了ECMAScript, DOM, BOM这三个方面。

• ECMAScript：定义了js的语法、语句、保留字和关键字、标识符等等

• DOM：定义了可供js操作文档对象的API和方法

• BOM：定义了可供js操作浏览器对象的API和方法

js就是专门为了网页交互而设计的脚本语言。尽管最开始只是为了在本地用来验证表单，但是之后的发展趋势和方向肯定会越来越好啦。

---

script标签

引入

一般来说应当把script标签放在body的最后，因为html是一行一行执行语句的，因此当文档没有渲染完毕时加载script标签，如果脚本内包含dom操作的话，会影响页面的渲染。同时，如果脚本过大的话，也会阻塞其他的请求。

2016-01-15 更新

但是最近看了一篇关于DOM渲染的文章，对于script标签的摆放位置提出了一些有趣的回答，会新开一篇文章说明一下

属性

script标签有6个属性：src, defer, async, language, charset, type.

charset用的比较少，主要是关于字符编码的

language表示脚本语言已经被废弃

src表示引入外部文件

type表示脚本内容类型，常见的是type="text/javascript"

defer表示延迟加载脚本，立即加载，但是在最后执行

asycn表示异步加载脚本，不阻塞其他加载请求

script标签内部

如果通过src引入了外部的资源，那么浏览器不会执行script标签内部的语句

---

基本语法

大小写敏感

js对于所有的变量名、函数名、操作符都区分大小写

标识符

即js中所有变量、函数、属性、参数的名称。

只能以$, _, 字母开头

可以使用$, _, 字母, 数字作为名称的其他字符

关键字、保留字

关键字是js提供的有特殊用途的字符等，不得用作标识符

保留字将来可能会被用于关键字，也不能用做标识符

关键字、保留字一览

严格模式

在脚本最开头或者是函数内部的开始处，使用"use strict"可以开启严格模式。

严格模式下某些函数、方法可能会无法使用，比如arguments.callee和with；对一些不安全的操作也会报错。

注释

单行注释使用//

多行注释使用/* */

也可以使用

/*
 *
 */

操作符

一元操作符

一元加与一元减 + -

一元加：标记为正数

使用+标记变量为正数时，效果与Number()差不多，因为会有隐式类型转换。但是对对象使用+的话会返回undefined

一元减：标记为负数

个人感觉跟加法减法没啥区别，主要用来进行数值隐式转换了

一元递加与递减 ++ --

分别有前置递加、前置递减和后置递加、后置递减两种形式：

前置：就是当语句包含前置递加或递减时，会先执行递加或者递减的操作，再执行语句。

var num1 = 1 ;
var num2 = 2 ;
var num3 = ++num1 + num2 ;  //4
var num3 = num1 + num2 ;    //4

后置：就是当语句包含后置递加或递减时，会先执行语句，再执行递加或者递减的操作，因此当前语句不会反映出递加或递减的运算结果。

var num1 = 1 ;
var num2 = 2 ;
var num3 = num1++ + num2 ;  //3
var num3 = num1 + num2 ;    //4

隐式类型转化，对非数值类型会执行Number()进行转换，对象调用valueof或者是toString().

位操作符 ~ & | ^ << >> >>>

按位非：取补码，即反码加1

按位与：同位都为1则为1

按位否：同位都为0则为0

按位异或：同位只有一个1时返回1，其他返回0

布尔操作符 ! && ||

逻辑非：取反

逻辑与：

x && y

x为真时，返回y
x为假时，返回x

逻辑非：

x || y

x为真时，返回x
x为假时，返回y

一般用||来判断取值。如果第一个变量为null或undefined，就会返回第二个变量。

下面这个例子就是如果浏览器不支持placeholder属性，那就设置value的值为我们html里设置的placeholder的值：

var input = document.getElementById("input"); //type = "text"
var input.getAttribute("value") = input.palceholder || input.getAttribute("placeholder")

加性操作符 + -

加法：数值加法

同时也做连字符：

• 如果两个变量都是字符形式，则字符串拼接
• 如果两个变量都是数值形式，则相加
• 如果有一个是字符形式，则将其他的类型转化为string，然后拼接

减法：数值减法

乘性操作符 * / %

关系操作符 > < >= <=

类型转换

• 如果有一个是数值类型，另一个的类型会隐式转化为数值型然后在做比较。
• 如果两个都是字符型，则比较字符编码的位置的数字大小
• NaN和NaN无法进行比较，返回false

相等操作符 == != === !==

相等和不相等：先转化，后比较（又叫不完全相等（貌似？））

全等和不全等：直接比较，不转化（又叫完全相等（貌似？））

true == "1"     // true
true === "1"    // false

相等比较下，布尔值true隐式转化为数值1，字符串“1”也转化为数值1，因此返回true

全等比较下，两个类型的值不做转发，类型不同，所以返回false

条件操作符 ? :

非常常用的操作符

expression ? true : false

如果expression返回的值为真，整个语句返回ture，否则返回false

var num = (5 ＞ 2) ? 5 : 2 // num = 5

赋值操作符 =

逗号操作符 ,

---

语句

if语句

if(expression_true) {
    statement
}else if{

}else{

}

if中声明的变量会存在与当前执行环境中，而不只是if语句中

do-while语句

do{
    statement
}while(expression)

至少会执行一次语句

while语句

while(expression){
    statement
}

for语句

for(var i = 0 ; i < arr.length ; i ++) {
    statement;
}

for-in语句

for(var x in o) {
    statement
}

遍历枚举，x会作为对象中属性的名字，或者是数组中的index值。

var obj = {name:"Mary", age:25, address:"Wuhan"} ; 

for( var x in obj ) {
    console.log(x + ":" + obj[x])
}

/*
    打印结果为

    name:Mary
    age:25
    address:Wuhan
 */

label语句

label:statement

break continue语句

break：结束当前这次循环，且循环体后面的循环也不再进行

var num = 0 ;
for(i = 0 ; i < 10 ; i ++) {
    if(i = 5)　{
        break;
    }
    num ++;
}
console.log(num); //5

我自己的理解就是，打破了/中断了整个循环

continue：跳过当前这次循环，从循环体头部开始执行后面的循环

var num = 0 ;
for(i = 0 ; i < 10 ; i ++) {
    if(i = 5)　{
        continue;
    }
    num ++;
}
console.log(num); //9

我自己的理解就是，跳过本次，继续后面的

switch语句

switch (expression) {
    case value : 
        statement
        break;
    case value : 
        statement
        break;
    default: 
        statement;
}

with语句

with延长作用域链，把传入对象添加到当前作用域链的最顶部。只能传入一个特定对象。

• 严格模式下不能使用
• 耗性能，不推荐使用