首页 > 代码库 > JavaScript(三) - 精简
JavaScript(三) - 精简
javascript 对象
１ 什么是对象？
对象只是一种特殊的数据，对象拥有属性和方法．
２ 对象有哪些？
js中所有的事物都是对象：字符串，数值，数组，函数．
js允许自定义对象．提供多个内建对象．
比如：String , Date, Array等．
布尔型，数字型，字符串，日期，数学和正则表达式，数组，函数
３ 怎么访问对象的属性．
属性是与对象相关的值，
访问对象属性的语法是：objectName.propertyName (对象名.属性名)．
eg:
使用String对象的length属性来获得字符串的长度．
var username="Hello world!";
var x = username.length;
２ 访问对象的方法？
方式是能够在对象上执行的操作．
访问对象的语法是：objectName.methodName() / (对象名.方法名);
eg:
使用String的方法toUpperCase()方法将文本转换为大写．
var message = "Hello world!";
var x= message.toUpperCase();
3 如何创建一个对象？
创建对象的两种不同的方法
１ 定义并创建对象的实例．
eg:
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
2 literals 直接创建对象实例
literals创建对象实例是一种简化方法.
eg:
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
3 使用函数来定义对象，然后创建新的对象实例．
(1) 使用对象构造器
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
(2) 创建对象实例
您有了对象构造器，就可以创建新的对象实例：
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
（３）把属性添加到javascript对象．
person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";
x=person.firstname;
（４）把方法添加到javascript对象
eg:
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name){
this.lastname=name;
}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
４ for....in 循环
１ for....in 语句循环遍历对象的属性．
２ 语法：
for(variable in object){
执行当然代码块．．．．
}
注意：for...in 循环中的代码块针对每个属性执行一次．
eg: 循环遍历对象的属性
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
５ String 对象
（1） String 用于处理已有的字符块．
(2) 一个字符串用于储存一系列的字符＂liyang wangming＂
也可是单引号或者是双引号．
(3) 使用位置索引可以访问字符串的任何字符．
var char = carname[2];
注意：字符串都是从０开始，所以字符串的第一位是[0],第二位是[1].
eg: var username ="li yang";
var char = username[7];
alert(char);
(4) 使用转义字符
var carname1="Volvo XC60";
var carname2=‘Volvo XC60‘;
var answer1=‘It\‘s alright‘;
var answer2="He is called \"Johnny\"";
var answer3=‘He is called "Johnny"‘;
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
(5)字符串使用长度属性length来计算字符串的长度.
eg :
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");
(6) 字符串查找字符串
字符串使用indexOf()来定位字符串中某个指定的字符首次出现的位置.
eg:
<p id="p1">I love you</p>
<p id="p2">0</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var str=document.getElementById("p1").innerHTML;
var n=str.indexOf("you");
document.getElementById("p2").innerHTML=n;
}
</script>
注意： 如果没找到对应的字符函数返回-1
lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
(7) 内容匹配
match()函数用来查找字符串中特定的字符，如果找到的话，则返回这个字符．
eg:
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));
(8) 替换内容
replace()方法在字符串中用些字符替换另一些字符．
eg:
<p>替换 "Microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");
document.getElementById("demo").innerHTML = txt;
}
(9) 字符串大小写的转换．
字符串大小写的转换使用函数 toUpperCase() / toLowerCase()
注意：该方法返回一个新的字符串，源字符串没有被改变。
eg:
var txt="Hello World!";
document.write("<p>" + txt.toUpperCase() + "</p>");
document.write("<p>" + txt.toLowerCase() + "</p>");
document.write("<p>" + txt + "</p>");
(10) 字符串转数组．
字符串使用split()函数转为数组.
eg:
function myFunction(){
var str="a,b,c,d,e,f"; // 字符串．
txt.split(","); // 使用逗号分隔
txt.split(" "); // 使用空格分隔
txt.split("|"); // 使用竖线分隔
document.getElementById("demo").innerHTML=n[3];
}
6 Array(数组) 对象
(1)数组对象: 使用单独的变量名来存储一系列的值.
(2)怎么创建一个数组
三种方式
1 常规方式.
eg: var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2 简洁方式.
eg :
var myCars=new Array("Saab","Volvo","BMW");
3 字面
eg:
var myCars=["Saab","Volvo","BMW"];
(3)访问数组
通过指定的数组名和索引号码,可以访问某个特定的元素.
一 以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
二 以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
注意: [0] 是数组的第一个元素。[1] 是数组的第二个元素。
(4) 合并两个数组- concat();
eg:
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
(5) 用数组的元素组成字符串 - join().
eg:
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join();
}
(6)删除数组的最后一个元素 - pop().
eg:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.pop();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
(7)数组的末尾添加新的元素 - push().
eg:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
(8) 将一个数组中的元素的顺序反转排序 - reverse()
eg:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.reverse();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
(9) 删除数组中的第一个元素 - shift().
eg:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
var delell = fruits.shift();
var x=document.getElementById("demo");
x.innerHTML= ‘删除后数组为：‘ + fruits;
document.getElementById("demo2").innerHTML=
‘删除的元素是：‘ + delell;
}
(10) 从一个数组中选择元素 - slice().
eg:
function myFunction(){
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
var x=document.getElementById("demo");
x.innerHTML=citrus;
}
(11) 数组排序 - sort().
1 按字母顺序排列
eg:
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
2 按数字顺序升序
eg:
function myFunction(){
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
var x=document.getElementById("demo");
x.innerHTML=points;
}
3 按数字顺序降序
function myFunction(){
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
var x=document.getElementById("demo");
x.innerHTML=points;
}
(12) 在数组的第二位置添加一个元素 - splice()
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(3,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
(13) 转化数组到字符串 - toString().
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
var x=document.getElementById("demo");
x.innerHTML= str;
}
(14) 在数组的开头添加新元素 - unshift()
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
七 Math(算数) 对象
1 作用: 执行常见的算术任务.
2 如何使用 random() 来返回 0 到 1 之间的随机数 - random()
eg:
function myFunction(){
document.getElementById("demo").innerHTML=Math.random();
}
3 如何使用 max() 来返回两个给定的数中的较大的数 - max().
(该方法只有两个参数)
eg:
function myFunction(){
document.getElementById("demo").innerHTML=Math.max(5,10);
}
4 如何使用 min() 来返回两个给定的数中的较小的数 - min().
(该方法只有两个参数)
function myFunction(){
document.getElementById("demo").innerHTML=Math.min(5,10);
}
JavaScript(三) - 精简