Javascript语法总结笔记

1.0 变量

在js中，若是某个变量在赋值以前未声明，赋值操做将自动声明该变量。这在其余许多编程语言中是不容许的。虽然能够这样作，但实际使用中咱们通常不这样作。

var mood;  // 单独声明变量
var name, age  // 一次声明多个变量

var name = "zhangzhen"  // 声明变量而且赋值
var name = "zhanghen", age=30   //一次声明多个变量并赋值（效率高） 
复制代码

• 注意事项：
  • 变量名中不容许包含空格和标点符号（美圆符号“$”）除外
  • 也可使用驼峰式命名，后面单词的首字母大写（一般用作函数命名方式）

2.0 数据类型

2.1 字符串：(string)

• 字符串必须包含在引号里，单引号或者双引号均可以

• 若是你想在单引号包含的字符串中显示一个单引号，必须用 \ 反斜杠来转义，双引号的状况一样适用

2.2 数值：(int)

• 浮点数，即有小数点的数字
• 整数，无小数点的正整数
• 负数，数字前边带减号的数字

2.3 布尔值:（boolean）

• 布尔类型只有两个可选值 ---true和false
• true值通常表明为真，false通常表明为假，若是用汉语来表示，true即表明是、正确的意思，false即表明否、错误的意思。

2.4 数组:（array)

• 字符串、数值、布尔值被称做标量，他们赋值在任什么时候刻都只能有一个值。

• 数组与他们最大的不一样是能够用来保存一组值，数组中的每个值都是这个数组的一个元素。

2.4.1 声明数组的方式：

var beatles = Array(4)   // 用关键字Array()声明数组，并指定了初始元素的个数为4
var beatles = Array()    // 指定元素的个数不是必须的
复制代码

2.4.2 向数组中填充元素

在填充数组时，不只须要给出新元素的值，还须要给出新元素在数组中存储的位置，这个位置就是这个元素的下标，一个元素配备一个下标，用方括号括起来。

语法：array[index] = element;

2.4.3 为上一个声明的数组beatles填充值

beatles[0] = "zhenzhen"
beatles[1] = "xingfu"
复制代码

备注：数组的下标从0开始计数，0即表明第一个，以此例来讲4个元素的话，那么它的下标依次就是0 1 2 3.

完整示例：

var beatles = Array(4)
beatles[0] = "zhenzhen"
beatles[1] = "xingfu"
beatles[2] = "xiaoma"
beatles[3] = "yuxi"
复制代码

2.4.4 声明数组的另一种方式

var beatles = Array("zhangzhen", "xingfu", "xiaoma", "yuxi");
复制代码

这是一种相对比较简单的声明数组方式，在声明数组的同时对他进行填充，自动分配下标，每一个元素之间用英文逗号隔开.

2.4.5 以中括号声明数组

var bealtes = ["zhangzhen", 1989, true, "yuxi"]
复制代码

像以上用方括号把每一个元素包裹起来的方式，也是声明数组的一种方式，这种方式简单，直接，不须要引用关键字Array()，他不只能够包含字符串，还能够包含数值，布尔值。

2.4.6 数组的元素说明

bealtes = Array();
     
// 数组的元素能够是变量
var name = "zhangzhen";
bealtes[0] = name;
     
// 数组的元素值还能够是另外一个数组的元素
var names = ["zhengzhen", 1989, "男"];
bealtes[1] = names[3];
     
// 数组还能够包含其余数组
var lennon = ["join", 1940, false];
bealtes[2] = lennon;
     
// 甚至能够包含一个对象，看对象那一节
复制代码

​

2.4.7 关联数组

var lennon = Array()
// 用字符串替换数组元素的下标，可使代码更具可读性，但数组通常不推荐这样使用
lennon["name"] = "join"
lennon["year"] = 1940
lennin["living"] = false
复制代码

3.0 对象

3.1 用关键字Object()建立对象

// 用Object()关键字声明对象，对象的每个值都是对象的一个属性
// 它不使用方括号和下标来获取属性，而是用点号来获取属性名称，来得到属性的值
var lennon = Object();  
lennon.name = "zhenzhen";  // 对象lennon的name属性
lennon.year = 1940;
lennon.living = false;
复制代码

3.2 花括号{}建立对象

var lennon = {name:"zhengzhen", year:1940, living:false}
复制代码

3.3 对象的属性的值能够是任何数据类型

// 将数组引用到对象
>> var dicts = {}
>> lists = ["zhengzhen",1940,false]
>> dicts.name = lists
>> dicts.name[0]
>> "zhengzhen"

// 将对象引用到数组
>> var lists = Array()
>> var dict = {name:"zhengzhen", year:1989, liveing:false}
>> lists[0] = dict
>> lists[0].name
"zhengzhen"

// 将对象引用到对象
var dict = {}
var lennon = {name:"xingfu", year:1989, age:"男"}
dict.person = lennon
dict.person.name
"xingfu"
复制代码

4.0 操做符

4.1 算数操做符

算数操做符包含：加 (+) 减 (-) 乘 (*) 除 (/)， 与数学中的加减乘除算法规则保持一致，若是没有括号，先乘除后加减，有括号先运算括号里边的，再运算括号外边的。

1 + 4   // 加法操做
1 + (4*5)  // 多种组合操做
(1+3)*5    // 用括号把不一样的操做分隔开来
复制代码

4.2 ++ 与 -- 及+=与-=

year = year+1 能够改写成 year++ or year+=1 [+=能够一次完成“加法和赋值”]

4.3 也能够对变量进行操做

var num = 80;
var age = (num - 30)/2
复制代码

4.4 字符串经过 加号+ 能够拼接

var message = "I am feeling" + "happy";
复制代码

var mood = "happy";
var message = "I am feeling" + mood
复制代码

甚至能够把数值和字符串拼接起来，组成一个新的字符串，这是由于js是弱类型语言，这种状况容许存在。

var year = 1989;
var message = "The year is" + year
复制代码

5.0 条件语句

5.1 判断语句

判断条件必须放在if后边的括号内，条件的求值结果永远是一个布尔值，只能是true或false.

// 标准语法，推荐使用
if(1>2){
	alert("正确")
}else{
	alert("错误")
}

// 条件语句后边的花括号并非必需要的，在某些状况下能够省略，例如只有一个判断
if(1>2) alert("错误")   // 这个alert永远也不会执行，只有当判断条件结果为true时才会执行
复制代码

5.2 比较操做符

操做符几乎只能用在条件语句当中，因此咱们把操做符归类到这一章，其中包含大于(>) ,小于(<), 大于等于(>=),小于等于(<=),【相等(==)，这个操做符由两个等号构成，单个等号为赋值操做，不能用做比较】（备注：相等(==)操做符并不表示严格相等，严格相等必须是（===）三个等号，它既比较直又比较类型；【不等于(!=),不等于操做符由一个感叹号和一个等号构成】；

// == 操做符示例
if(false == ''){   // 这个不是严格比较，他认为false与一个空字符串的意思是同样的，因此比较结果为true
    alert('正确')
}

// === 绝对等于
// 严格比较，既比较值也比较类型，一个是布尔类型，一个是字符串类型，因此他们的类型不一致，其比较结果是 false，这条alert永远也不会被执行。
if(false === ''){
    alert('正确')
}
复制代码

5.3 逻辑操做符

• "逻辑与(&&)【即汉语中的：谁和谁必须是什么？所表达的意思同样】"。

• “逻辑或(||) 【即汉语中的：或者的意思同样，多个条件只要知足一个条件就能够】”。

• “逻辑非(!) 【只能用做单个逻辑操做数，即把那个逻辑操做的结果取反】”。

// 逻辑与，同时为true才能返回true
if ( num > 5 && num <= 10) {
    alert("这是一个大于5且小于10的数")
}
// 逻辑或，有一个为true，则返回true
if ( num > 10 || num <5 ) alert("这是一个大于10的数")

// 逻辑非，将比较的结果取反
if ( !(1>2) ) alert("1不大于2则返回false,这里进行取反操做，因此返回true，这条语句会被执行！")

// 能够用逻辑非对整个条件语句取反
if ( !(num > 10 || num <5) ) alert("这是一个不大于10或小于5的数")
复制代码

6.0 循环语句

循环语句能够反复屡次执行同一段代码，只要给定条件一直知足，包含在循环语句里的代码就将重复执行，一旦给定再也不为true,循环就到此为止。

6.1 while循环

• while循环与if语句很是类似，他们的语法几乎彻底同样，while后边的括号里为条件，花括号里边放须要执行的代码，只要给定的条件结果一直为true，花括号里边的代码块将被反复屡次执行，知道条件再也不为true时结束

// while循环语句，语法
var count = 1;
while(count < 11){
	alert(count);
	count++;
}
复制代码

6.2 do{}whi()循环

do{}while()循环与while(){}循环最大的不一样是，一个判断条件在最后，一个在最前，这就致使do循环的判断条件即便一开始就为false，那么他至少也会被执行一次，由于他的判断条件在语句块以后。但while循环不会，由于他的判断条件在最前。

// 与while循环结果保持一致的循环,这个代码块的语句将被执行10次，count变量的值最后为11
var count = 1;
do{
    alert(count);
    count++;
}while(1<11);

// 判断条件为false，至少被执行一次,变量count的初始值为1，至少被执行一次，那么count的值将会是2
do{
    alert(count);
    count++;
}while(count<1);
复制代码

6.3 for循环

for循环实际上是while循环的变体，或者能够称做是while循环的另外一种紧凑写法，与循环有关的语句都写在括号内。

// 改写while循环的案例
for(var count=1; count<11; count++){
	alert(count)
}
复制代码

for循环最多见的用途就是用来遍历某个数组里的全体元素。在这里每每须要用到数组的array.length属性，来获取数组里元素的个数，这里要特别注意的是，数组的元素都是从零开始，而不是从一开始。

var lists = ["zhangzhen", "xingfu", "yuxi", false, 1989];

// 利用for循环遍历一个数组
for(var index=0; index < lists.length; index++){
	console.log(lists[index]);
}
复制代码

7.0 函数

若是须要屡次使用同一段代码，就能够将其封装成一个函数。说白了函数就是一组你随时能够在代码里调用的语句。

7.1 定义函数

// 定义函数
function shout(){
	alert("这是我声明的第一个函数")
}
复制代码

如今若是想在代码中执行这一动做，能够随时调用shout() 语句来调用整函数，这也正是函数的调用方法，能够大大避免在不一样的地方大量键入相同的代码。

案例二：

// 遍历一个数组的函数
function name(){
	var bealtes = ["zhangzhen","xingfu","yuxi",1989,false]
	for(var index=0;index<bealtes.length;index++ ){
		console.log(bealtes[index])
	}
}
// 调用函数
name()
复制代码

7.2 函数传参

经过以上案例咱们能够看出，函数在整合代码方面的能力，但却发现他有一个小小的问题，就是貌似只能遍历咱们函数内指定的那个数组，还不够通用，也没有真正体现出函数的威力所在，咱们能够经过下面咱们将要学习的给函数传参数，来遍历不一样的数组，让这个函数拥有处理这一类问题的通用能力。

// 为函数传参lists，这个参数咱们表明为一个数组
function name(lists){
	for(var index=0; index<lists.length;index++){
		alert(lists[index])
	}
}
// 假如咱们有这样一个数组
var bealtes = ["zhangzhen","xingfu","yuxi",1989,false]

// 利用刚才定义的函数来遍历这个数组,把数组传递给函数便可
// 固然这里在真实项目中，咱们应该要对传递的参数的类型作一个判断，以备函数有处理传递的参数不是数组时的能力
name(bealtes)
复制代码

案例三（乘法函数）：

function ride(num1,num2){
	var multiply = num1 * num2;
	alert(multiply);
}
// 调用
ride(2,5);
复制代码

7.3 函数赋给变量及变量做用域

好比咱们要计算一个成年人的标准体重，其公式为： （身高cm-100）×0.9=标准体重(kg) ,咱们为他来编写一个函数，将计算结果返回，这里咱们就要用到return语句。

function weight(height){
	var dvalue = height-100;
	standard = dvalue * 0.9;
	return standard;
}
// 如今用这个函数来计算咱们本身的标准体重.
var myheight = 175;
// 函数另一种用法是能够当作一个数据类型来使用，把函数的返回值赋给一个变量，看成变量值来使用
var mystandard = weight(myheight);
alert(mystandard)
复制代码

变量做用域概念解读：

在上边这个函数中咱们看到两种变量，一种是在函数内部声明的变量，一种是在函数外部声明的变量。最开始的时候咱们说过声明变量必须用var，那么在函数内部声明变量也必须使用var声明，此时函数内部声明的变量就只能在函数内部调用，咱们将其称做局部变量。若是函数内部没有用var 声明变量，直接赋值，那么若是此时函数外部有一个同名的变量，那么这个变量引用的就是函数外部的全局变量。

// 变量做用域概念
function aquare(num){
	total = num * num;
	return total;
}
// 全局变量toatl的值为50
var total = 50
// 函数内部也有一个total的变量，没有用var声明
var number = aquare(20)
// 这里最终返回的值是400，把total全局变量的值给修改了
console.log(total)
> 400
复制代码

修改版：

function aquare(num){
	var total = num * num;
	return total;
}
var total = 50
var number = aquare(20)
console.log(total)
> 50
console.log(number)
> 400
复制代码

8.0 对象详解

对象是一种很是重要的数据类型，相对来讲比较抽象复杂，暂时先空下来，后边详细说明。

8.1 自建对象

好比要生产一辆汽车，他们的通用属性包括颜色、轮胎个数、方向盘、座位等都是通用的属性，咱们能够为其定义一个对象，将这些通用属性放在这个对象里。不一样的是他们的发动机大小都不同，咱们能够向里添加另一个方法来对其扩展。

function Person(){
	// 这个对象里边的属性为通用属性
	this.name = "zhenzhen";
	this.age = 30;
}
// 建立另一我的的实例，这我的的年龄和张震不同，但其余同样
var xinPerson = new Person();
// 向这个对象里添加一个属性
Person.prototype.mood = "link";

console.log(xinPerson.mood);

复制代码

8.2 内建对象

内建对象是js默认给咱们封装好的对象，其中内建对象中又封装了不少的属性，咱们能够直接拿来使用。

8.2.1 new Array()数组对象

其实当咱们使用new关键字来初始化一个数组时，其实建立的就是Array对象。

var bealtes = new Array();
bealtes[0] = "zhenzhen";
// length就是这个对象的一个内置属性
bealtes.length;
复制代码

8.2.2 new Date()时间对象

Date对象用来存储和检索与日期、时间有关的信息。

var current_date = new Date()
// 获取星期，获得的是一个数字
console.log(current_date.getDay())
// 获取小时，获得的是具体的时间数组
console.log(current_date.Hours())
复制代码

8.2.3 new Math()对象

var num = 7.561;
var num = Math.round(num);
console.log(Math)
alert(num)
复制代码

8.2.4 宿主对象

除了内建对象，咱们还可使用已经预先定义好的其余对象。这些对象不是由javascript语言自己提供的，而是由他的运行环境提供。这个环境就是浏览器，所以上由浏览器提供的对象被称做宿主对象，也就是咱们后边将要学习的DOM和BOM。