javascript教程(5)——Object,String,Number,Date与定时器

最新推荐文章于 2024-07-05 20:57:36 发布

Jay953641513

最新推荐文章于 2024-07-05 20:57:36 发布

阅读量263

点赞数 1

文章标签： javascript js 前端教程 web

本文链接：https://blog.youkuaiyun.com/wydsnza/article/details/87719449

版权

1.new运算符

通过new 运算符来创建一个新对象。

语法：
new constructor[(arguments)]

参数说明：
constructor：必选项。对象的构造函数。
如果构造函数没有参数，则可以省略圆括号。
arguments：可选项。
任意传递给新对象构造函数的参数。

例：

var obj= new Object;
var arr = new Array();
var date = new Date();

2.Object 对象

提供了对象的最基本功能，这些功能构成了所有其他对象的基础，同时还提供了创建自定义对象的简单方式，不需要再定义构造函数。使用Object 对象，可以在程序运行时为 JavaScript 对象随意添加属性，因此可以很容易的创建自定义对象。

2.1 创建Object对象

语法：
obj = new Object([value]);
参数说明：
obj：必选项。
要赋值为 Object 对象的变量名。
value：可选项。

任意一种JS基本数据类型（Number、Boolean 或String）。如果value为一个对象，返回不做改动的该对象。如果 value 为null、undefined，或者没有给出，则产生没有内容的对象。

2.2 Object 对象的属性

2.2.1 prototype 属性

该属性返回对象类型原型的引用。

objectName.prototype；    
参数说明：  
objectName：是对象的名称
用prototype属性可以提供
对象的类的一组基本功能。
对象的新实例“继承”赋予该对象
原型的操作

function arrMax(name,age,sex){  
  this.name = name; 
  this.age = age;   
  this.sex = sex;   
}   
var bull = new arrMax('Tom',24,'男');
arrMax.prototype.cl = null;
bull.cl = "javascript";
console.log(bull);

2.2.2 constructor 属性

该属性表示创建对象的函数

object.constructor   
参数说明
object： 必选项。
是对象或函数的名称 。  
constructor：属性是所有具有
prototype的对象的成员。
他们包括除 Global和 Math对象
以外的所有JScript固有对象。    
constructor属性保存了对构
造特定对象实例的函数的引用。

x = new String("Hi"); 
if(x.constructor == String){
  //进行处理（条件为真）
}

function myFunc{
  //函数体
}
y =new myFunc; 
if(y.constructor == myFunc){
  //进行处理（条件为真）
}
var test = new Function();  
var txt = "";   
if(test.constructor == Array){  
  txt = "这是一个数组";
}else if(test.constructor == String){   
  txt = "这是一个字符串";
}else if(test.constructor == Object){   
  txt = "这是一个对象";
}else if(test.constructor == Number){   
  txt = "这是一个数字";
}else if(test.constructor == Boolean){  
  txt = "这是一个布尔型";
}else if(test.constructor == Date){ 
  txt = "这是一个时间";
}else{  
  txt = "这是一个函数";
}   
document.write(txt);    
function arrMax(name,age,sex){
  this.name = name;
  this.age = age;   
  this.sex = sex;   
}  
var bull = new arrMax('Tom',24,'男');
document.write(bull.constructor);

2.2.3 Object 对象的方法

toLocaleString()方法

该方法返回一个日期，该日期使用当前区域设置并已被转换为字串。

语法格式
dateObj.toLocalseString();
参数说明：
dateObj：必选项。为任意的Date对象。

toLocalseString()方法放回一个String对象，该对象中包含了用当前区域设置的默认格式表示的日期。

var date = new Date();
document.write(date.toLocaleString())

toString() 方法

该方法返回对象的字符串表示。

objectname.toString([radix]);
参数说明：
objectname：
必选项，要得到字符串表示的对象。
radix：可选项。
指定将数字值转换为字符串时的进制。

toString()方法是JavaScript 所有内部堆箱的一个成员方式。

var date = new Date();
document.write(date.toString())

valueOf()方法

该方法返回指定对象的原始值。

object.valueOf();
参数说明：
object：必选项，
是任意固有JavaScript对象。
每JavaScript固有对象的
valueOf()方法定义不同。

<center>表2-1 不同对象valueOf的返回值</center>

对象	返回值
Array	数组的元素被转换为字符串，分别有都好分隔，连接在一起
Boolean	Boolean值
Date	存储的时间是从1970年1月1日午夜开始计算的毫秒数UTC，也即时间戳
Function	返回函数本身
Number	返回数字值
Object	返回对象本身，这是默认情况
String	返回字符串值

var date = new Date();
document.write(date.valueOf())

3. String 对象

String对象是 String 原始类型的对象表示法，它是以下方式创建的：

var str = new String("广东理工");
String 对象的 valueOf() 方法
和 toString() 方法都会返回 
String 类型的原始值：
alert(str.valueOf()==str.toString());
 //输出 "true"

如果运行这段代码，输出是 "true"，说明这些值真的相等。

3.1 length 属性

String 对象具有属性 length，它是字符串中的字符个数：

var str = new String("love china");
alert(str.length);  //输出 "10"

这个例子输出的是 "10"，即 "love china" 中的字符个数。

注意，即使字符串包含双字节的字符（与 ASCII 字符相对，ASCII 字符只占用一个字节），每个字符也只算一个字符。

3.2 方法

charAt() 和 charCodeAt() 方法

这两个函数访问的是字符串中的单个字符。这两个方法都有一个参数，即要操作的字符的位置。

charAt() 方法返回的是包含指定位置处的字符的字符串：

var str = new String("love china");
alert(str.charAt(2));   //输出 "v"

在字符串 "hello world" 中，位置 2 处的字符是 "v"。注意我们是从0的下标开始。如果想得字符代码，那么可以调用 charCodeAt() 方法：

var str=new String("love china");
alert(str.charCodeAt(2));
   //输出 "118"
这个例子输出 "118"，
即小写字母 "v" 的字符代码。

concat() 方法

将一个或多个字符串连接到 String 对象的原始值上。该方法返回的是 String 原始值，不修改原字符串。

var str = new String("hello ");
var res = str.concat("world");
alert(res); //输出 "hello world"
alert(str); //输出 "hello "

其实这段代码真正运行是

var str = new String("hello ");
var res = str + "world";
alert(res); //输出 "hello world"
alert(str); //输出 "hello "

indexOf() 和 lastIndexOf() 方法

这两个函数是确定在某个字符串中是否确实存在一个字符。两个函数都返回的要查找的字符串在字符串中的位置，找不到返回-1。

indexOf() 方法是从字符串的开头（位置 0）开始检索字符串

lastIndexOf() 
方法则是从字符串的结尾开始检索子串。

例如：

var str=new String("hello world!");
console.log(str.indexOf("o"));
      //输出 "4"
console.log(str.lastIndexOf("o"));
  //输出 "7"

在这里，第一个 "o" 字符串出现在位置 4，即 "hello" 中的 "o"；最后一个 "o" 出现在位置 7，即 "world" 中的 "o"。如果该字符串中只有一个 "o" 字符串，那么 indexOf() 和 lastIndexOf() 方法返回的位置相同。

slice() 和 substring()

这两个函数都是从字符串截取出一部分的字符串。

第一个参数是开始的位置，第二个是结束的位置【含头不含尾】。第二个参数可以省略，如果没有就代表到结尾。并且这两个函数都不改变原来的字符串，返回的是一个新的字符串。

var str = new String("hello world");
console.log(str.slice("3"))
;        //输出 "lo world"
console.log(str.substring("3"));
        //输出 "lo world"
console.log(str.slice("3", "7"));
       //输出 "lo w"
console.log(str.substring("3", "7"));
   //输出 "lo w"

不同点 对于负数参数，slice() 方法会用字符串的长度加上参数，

substr()

这个方法也是从字符串中截取一部分的字符串。

第一个参数是开始的下标位置，第二个截取的长度。开始的下标位置支持负数。-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

var str = new String("hello world");
console.log(str.substr(1,2)); //输出 "he"

toLowerCase() 和 toUpperCase()

toLowerCase 将字符串转为小写 toUpperCase 将字符串转为大写

var str=new String("Hello World");
alert(str.toUpperCase());
   //输出 "HELLO WORLD"
alert(str.toLowerCase());
   //输出 "hello world"

match()

语法：str.match(searchvalue) 
    stringObject.match(regexp)
返回值：返回匹配的字符串。

var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))

replace()

语法：
str.replace(regexp/substr,replacement)
返回值：返回替换后字符串，
用于在字符串中用一些字符替换另一些字符，
或替换一个与正则表达式匹配的子串。

var str="你好javascript"
document.write(str.replace(/你/, "我"))  //我好javascript

search()

语法：str.search(regexp)
返回值：返回 stringObject
 的第一个匹配的位置，大小写敏感。

var str="你好javascript"
document.write(str.replace("你"))  //0

split()

语法：str.split(separator,howmany)
返回值：用于把一个字符串分割成字符串数组，
返回分割后数组。

var str="How are you doing today?"
console.log(str.split(" ")) 
// ["How", "are", "you", "doing", "today?"]
console.log(str.split("")) 
console.log(str.split(" ",3))  
// ["How", "are", "you"]

3.3 instanceof 运算符

我们使用 typeof 什么类型的对象，它都返回 "object"。

instanceof 方法要求我们确认对象为某特定类型。

var str = new String("love China");
console.log(str instanceof String);
	//输出 "true"

这段代码问的是“变量 oStringObject 是否为 String 对象的实例？”oStringObject 的确是 String 对象的实例，因此结果是 "true"。尽管不像 typeof 方法那样灵活，但是在 typeof 方法返回 "object" 的情况下，instanceof 方法还是很有用的。

4.Number对象

4.1创建Number对象

数字是一种基本的数据类型，同时JavaScript还支持Number这个对象，该对象是原始数值的包装对象。在必要的时候JavaScript 会自动地在原始数据和对象之间转换。

//对象类型
var n = new Number(168);
//基本类型
var n = 1;

4.2 Number对象的属性

4.2.1 constructor 属性

参考Object部分介绍

4.2.2 prototype 属性

参考Object部分介绍

4.3 Number对象的方法

toFixed()获取小数点后几位
isNaN的使用
toString()将Number转换为字符串

5.Date 对象

5.1 创建Date对象

日期对象是对一个对象数据类型求值，该对象主要负责处理与日期和时间有关的数据信息。

语法
dateObj = new Date(); 
dateObj = new Date(dateVal);
dateObj= new Date(year,month,
date[,hours[,minutes[,seconds[,ms]]]])

5.2 Date对象的属性

5.2.1 constructor 属性

var newDate = new Date;
if(newDate.constructor==Date){
  document.write("日期型对象");
}

5.2.2 prototype 属性

var newDate=new Date();
Date.prototype.mark=null;
newDate.mard=newDate.getDay();
document.write("今天是星期"+newDate.mard);

5.3 Date 对象的方法

5.3.1 获取时间的方法

var newDate = new Date()	
document.write(
  newDate.getFullYear()+"/"+
  (newDate.getMonth()+1)+"/"+
  newDate.getDay()+" "+
  newDate.getHours()+":"+
  newDate.getMinutes()+":"+
  newDate.getSeconds()
);

5.3.2 设置时间的方法

setDate() 方法用于设置一个月的某一天。

用法：dateObject.setDate(day)

参数说明：
dateObject : 时间对象变量
day：必需。
表示一个月中的一天的一个数值（1 ~ 31）。

setFullYear() 方法用于设置年份。

用法：dateObject.setFullYear(year,month,day)

参数说明：
year：必需。
表示年份的四位整数。
用本地时间表示。
month：可选。
表示月份的数值，介于	
0-11之间。用本地时间表示。
day：可选。
表示月中某一天的数值，
介于1-31之间。用本地时间表示。

setMonth() 方法用于设置月份。

用法：dateObject.setMonth(month,day)

参数说明：
month：必需。
表示月份的数值，介于0-11之间。
用本地时间表示。
day：可选。
表示月中某一天的数值，
介于1-31之间。用本地时间表示。

var newDate = new Date()	
newDate.setDate(15)	
newDate.setFullYear(2018)	
newDate.setMonth(6)	
document.write(newDate);

setTime() 方法

setTime() 方法以毫秒设置 Date 对象。
用法：dateObject.setTime(millisec)

参数说明：
dateObject: 时间对象变量
millisec：必需。
要设置的日期和时间据
 GMT 时间1970年1月1日午夜之间的毫秒数。
 这种类型的毫秒值可以传递给Date()构造函数，
 可以通过调用Date.UTC()和Date.parse()
 方法获得该值。以毫秒形式表示日期可以
 使它独立于时区。

var newDate = new Date()	
var utc = Date.UTC(	
  newDate.getFullYear(),	
  newDate.getMonth()+1,	
  newDate.getDay()
  );
newDate.setTime(utc)	
document.write(newDate);

5.3.3 将时间转化为本地时间字符串

toLocaleString()	
根据本地时间格式，
把 Date 对象转换为字符串。
toLocaleTimeString()	
根据本地时间格式，
把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	
根据本地时间格式，
把 Date 对象的日期部分转换为字符串。

var date = new Date();
console.log(date.toLocaleString())
console.log(date.toLocaleTimeString())
console.log(date.toLocaleDateString())

6.定时器

计时器就是隔一段时间之后再来做某个事情。按照循环，我们分为一次性定时器和周期性定时器。

6.1 一次性定时器

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

语法：
setTimeout(function(){
  要执行的代码
},毫秒数)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>倒计定时器setTimeout()</title>
  <script> 
    var id;
    function start() {
        document.getElementById('msg').innerHTML	=
"计时已经开始！";
        id = setTimeout("tip()",1000);
    }
    function tip(){
        alert('时间到！');
    }
    function stop(){ 
        clearTimeout(id);
    }

</script>
<body>

<div id="msg"></div>
<input type="button" value="计时开始" onclick="start()">
<input type="button" value="停止计时" onclick="stop()">
</body>
</html>

6.2 周期性定时器

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

语法：
setInterval(function(){
  要执行的代码
},毫秒数)

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>循环定时器setInterval()</title> 
  <script>
      var str = "我是社会主义接班人！";
      var index = 0;
      var flag = 2;
      var id;
      function start() {
          id = setInterval('show()', 1000);
      }
      function show() {
          msg = str.substring(0, index + 1);
          document.getElementById('msg').innerHTML = msg;
          index++;
          if (index >= str.length) {
              index = 0;
              flag--;
              if (flag == 0) {
                  clearInterval(id);
              }
          }
      }
  </script> 
 </head> 
 <body> 
  <div id="msg"></div> 
  <input type="button" value="开始" onclick="start()" />  
 </body>
</html>

6.3 清除定时器

我们的定时器定义函数调用值的时候会返回一个定时器对象。我们将这个对象传入到对应的清除定时器的方法里面去就可以清除定时器。

语法：
var timer = setTimeout(function(){
     // 代码块
},1000)
clearTimeout(timer); // 清除一次性定时器

var timer = setInterval(function(){
     // 代码块
},1000)
clearInterval(timer); // 清除周期性定时器