1.0 变量
如果一个变量在函数外声明,这就是全局变量
如果在函数内部声明,它就是局部变量
如果把要给数值放入引号中,其余数值会被视作字符串并被级联:
var x = 3 + 5 + "8";
从左往右运算,结果为88
2.0 运算符
2.1 算数运算符
2.2 赋值运算符
2.3 比较运算符
2.4 逻辑运算符
2.5 类型运算符(用于检测)
3.0 数据类型
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
字符串值:用单双引号包含.
数值:数字1 2 3整数或小数
布尔值:true(正确) 或 false(错误)
数组用方括号书写 [ ]
对象用花括号来书写 { }
Undefined 在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。
Null
在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。
不幸的是,在 JavaScript 中,null 的数据类型是对象。
Undefined 与 Null 的区别 Undefined 与 null 的值相等,但类型不相等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
4.0 函数
function toCelsius(fahrenheit) {//声明 函数名 参数
return (5/9) * (fahrenheit-32);//要执行的代码
}
document.getElementById("demo").innerHTML = toCelsius(77);//调用传参
5.0 对象Object
对象有属性和方法
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
(JavaScript 对象中的)名称:值对被称为属性。
var person(名称) = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}(属性);
5.1 访问对象属性的两种方式
objectName.propertyName
objectName["propertyName"]
为对象添加属性
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 为第一个对象添加国籍
myFriend.nationality = "English";
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality;
</script>
</body>
</html>
5.2 访问对象方法
您通常会把 fullName() 描述为 person 对象的方法,把 fullName 描述为属性。
fullName 属性在被通过 () 调用后会以函数形式执行。
此例访问 person 对象的 fullName() 方法:
name = person.fullName();
如果您访问 fullName 属性时没有使用 (),则将返回函数定义:
name = person.fullName;
添加新方法
function person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
changeName() 函数 name 的值赋给了 person 的 lastName 属性。
myMother.changeName("Jobs");
5.3 使用对象字面量(这是创建对象最简答的方法)
var person = {
firstName:"Bill",
lastName:"Gates",
age:62,
eyeColor:"blue"
};
5.4 for...in循环
JavaScript for...in 语句遍历对象的属性。
语法
for (variable in object) {
要执行的代码
}
for...in 循环中的代码块会为每个属性执行一次。
循环对象的属性:
var person = {fname:"Bill", lname:"Gates", age:62};
for (x in person) {
txt += person[x];
}
结果:Bill Gates 62
5.5 this 关键词
在 JavaScript 中,被称为 this 的事物,指的是拥有该 JavaScript 代码的对象。
this 的值,在函数中使用时,是“拥有”该函数的对象。
请注意 this 并非变量。它是关键词。您无法改变 this 的值。
function person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}
5.6 添加删除属性
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>您可以向现有对象添加新属性。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
person.nationality = "English";//赋值的方式增加新属性
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>
</body>
</html>
delete 关键词从对象中删除属性:
delete 关键词不会删除被继承的属性,但是如果您删除了某个原型属性,则将影响到所有从原型继承的对象。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>您可以删除对象属性。</p>
<p id="demo"></p>
<script>
var person = {
firstname:"Bill",
lastname:"Gates",
age:62,
eyecolor:"blue"
};
delete person.age;//delete 关键词从对象中删除属性:
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
5.7对象访问器(Getter和SEtter)
ECMAScript 5 (2009) 引入了 Getter 和 Setter。
Getter 和 Setter 允许您定义对象访问器(被计算的属性)。 本例使用 lang 属性来获取 language 属性的值。
JavaScript Getter(get 关键词)
本例使用 lang 属性来获取 language 属性的值。
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "en",
get lang() {
return this.language;
}
};
// 使用 getter 来显示来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;
JavaScript Setter(set 关键词)
本例使用 lang 属性来设置 language 属性的值。
实例
var person = {
firstName: "Bill",
lastName : "Gates",
language : "",
set lang(lang) {
this.language = lang;
}
};
// 使用 setter 来设置对象属性:
person.lang = "en";
// 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.language;
对象实例
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ". My brother is " + myBrother.age;
</script>
</body>
</html>
5.8 原型继承
所有 JavaScript 对象都从原型继承属性和方法。
日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
Object.prototype 位于原型继承链的顶端:
日期对象、数组对象和 Person 对象都继承自 Object.prototype。
5.9 使用 prototype 属性
JavaScript prototype 属性允许您为对象构造器添加新属性:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
JavaScript prototype 属性也允许您为对象构造器添加新方法:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
6.0 HTML事件
onclick 属性
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>
7.0 字符串方法
JavaScript 从零计算位置。
7.1 length 属性返回字符串的长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ(26个英文字母)";
var sln = txt.length;
结果为26
7.2 查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
结果为17
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
结果为51
两种方法都接受作为检索起始位置的第二个参数。
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);
从索引位置18,从前往后数,到字符串的终点,结果为51
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
从索引位置50,从后往前数,到字符串的终点,结果为17
8.0 数字方法
toString( ) 以字符串返回数值
toExponential( ) 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
toFixed( ) 返回字符串值,它包含了指定位数小数的数字:toFixed(2) 非常适合处理金钱。
toPrecision( ) 返回字符串值,它包含了指定长度的数字:
valueOf( ) 以数值返回数值:
这三种 JavaScript 方法可用于将变量转换为数字:
Number( ) 方法 parseInt( ) 方法 parseFloat( ) 方法
数字属性不可用于变量 数字属性属于名为 number 的 JavaScript 数字对象包装器。
这些属性只能作为 Number.MAX_VALUE 访问。
使用 myNumber.MAX_VALUE,其中 myNumber 是变量、表达式或值,将返回 undefined:
var x = 6;
var y = x.MAX_VALUE; // y 成为 undefined
9.0 数组方法
JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
结果为Banana,Orange,Apple,Mango
join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString(),但是您还可以规定分隔符:
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
结果为Banana * Orange * Apple * Mango
10 数组排序
sort() 方法以字母顺序对数组进行排序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
结果为 Apple,Banana,Mango,Orange
reverse() 方法反转数组中的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 对 fruits 中的元素进行排序
fruits.reverse();
结果为Orange,Mango,Banana,Apple