JavaScript(三) - 精简-白红宇

JavaScript(三) - 精简

阅读量：6279 次

发布时间：2019-06-22

本文共 7843 字，大约阅读时间需要 26 分钟。

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:　

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>

<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);

}

转载于:https://www.cnblogs.com/Mr-liyang/p/6897768.html

你可能感兴趣的文章

磁盘空间满引起的mysql启动失败:ERROR! MySQL server PID file could not be found!

查看>>

点播转码相关常见问题及排查方式

查看>>

[arm驱动]linux设备地址映射到用户空间

查看>>

弗洛伊德算法

查看>>

【算法之美】求解两个有序数组的中位数 — leetcode 4. Median of Two Sorted Arrays

查看>>

精度 Precision

查看>>

Android——4.2 - 3G移植之路之 APN (五)

查看>>

Linux_DHCP服务搭建

查看>>

[SilverLight]DataGrid实现批量输入(like Excel)（补充）

查看>>

秋式广告杀手：广告拦截原理与杀手组织

查看>>

翻译 | 摆脱浏览器限制的JavaScript

input checkbox 复选框大小修改