首頁 web前端 js教程 JavaScript學習總結【3】JS對象

JavaScript學習總結【3】JS對象

Feb 09, 2017 pm 02:40 PM
javascript js對象

在 JS 中一切皆對象,並提供了多個內建對象,例如:String、Array、Date 等,此外還支援自訂對象。物件只是一種特殊類型的數據,並擁有屬性和方法,屬性是與物件相關的值,方法是能夠在物件上執行的動作。

 

1、String 物件

  String 物件用於處理文本,也就是字串。一個字串用於儲存一系列的字符,通常JS 字串是原始值,可以使用變數聲明,也可以使用new 關鍵字將字串定義為一個對象,在JS 中並不提倡使用new 關鍵字創建對象。原始值字串是沒有屬性和方法的,但可以使用 JS 的屬性和方法,因為 JS 在執行屬性和方法時可以把原始值視為物件。

  可以使用 JS 內建的 length 屬性來計算字串的長度。例如:

var str = "abcdefghijklmnopqrstuvwxyz";
alert(str.length);    //返回:26
登入後複製

下面是一些字串常用的方法:

  (1)、charAt()

  str.charAt(index)  傳回指定索引位置的字元,也就是取得字串的某一位字元。

  (2)、concat()

  str1.concat(str2, str3, ...., strN)  用於連接兩個或多個字串,傳回連接後的字串。

  (3)、indexOf()

  str.indexOf(某個字元, strat)  傳回字串中某個字元從指定位置開始首次出現的位置,第二個參數可選,規定在字串中開始尋找的位置,他的合法值為0 到字串的長度-1:str.length-1,如果不設定該參數,則從字串的首字開始查找。傳回值為數值,如果找到則傳回該字元首次出現的位置,沒找到則傳回 -1。

  (4)、search()

  search(str/RegExp)  傳回字串中某個字元首次出現的位置,此參數為字元或正則表達式,正則效果較好,傳回值為數值,若若沒有匹配到,則返回-1。

 

  indexOf() 和search() 區別:

  這兩個方法都傳回字元首次出現的位置,但是配合正則使用search() 要比indexOf() 更強大,如果是一個普通的字串或者配合正則使用search() 要比indexOf() 更強大,如果是一個普通的字符串或者對一個具體的字串來提取,那麼使用indexOf() 的效率更好,更省資源,但如果是查找特殊的字符串,比如有數字有字母,那麼indexOf() 就沒辦法執行了,必須要使用正規表示式和search() 方法。

 

  (5)、match()

  match(str/RegExp)  用於查找字串中指定的字符,並且傳回該字符,該方法配合正則使用效果更好,如果不使用正則表達式,則只是返回首次出現的指定字符,不會再向後匹配,如果配合正則並且全局匹配,則以數組形式返回字符串中所有指定的字符,如果沒找到,則返回null。

  (6)、replace()

  replace(str/RegExp, newstr)  用於字串中將一些字元替換成另一些字符,傳回一個新字串。此方法有兩個參數,第一個參數規定需要被替換的字符,第二個參數為新字符,就是替換後要顯示的字符。配合正規使用效果更好,可以替換所有匹配。最常見的應用是:敏感詞過濾。

  (7)、lastIndexOf()

  lastIndexOf() 和indexOf 相反,lastIndexOf(某個字元, strat)  返回字串中某個字元從指定位置開始從指定位置開始出現最後的位置。第二個參數可選,他的合法值為0到字串的長度 -1:str.length-1,如果不設定該參數,則從字串的最後一個字元開始查找。傳回值為數值,如果找到則傳回該字元最後出現的位置,沒找到則傳回 -1。

  (8)、slice()

  slice(start, end)  提取字串的某個部分,並以新的字串傳回被擷取的部分,不包括結束位置的字元。第一個參數為起始位置,第一個字元的位置為0,第二個參數end 可選,結束位置的下標,如果不設定該參數,則提取從起始位置開始到字串最後一個字元的子字串。提取字符的參數可以是負數,則規定的是從字串的尾部位置開始算起,也就是說:-1 代表字串最後一個字符,-2 指倒數第二個字符,依次類推。擷取全部字元可寫為:slice(0),也可以不設定參數,直接使用。 

  (9)、substr() 

  substr(start, length)  提取字串從開始位置指定字串長度的字符,並以新的字串傳回被提取的部分。此方法可以取代 substring() 和 slice() 來使用。第一個參數為起始位置,可以是負數,則從尾部開始算起。第二個參數為提取字串的長度,該參數可選,且不能小於 1,否則傳回一個空字串,如果不設定該參數,則傳回從起始位置開始到最後一個字元的子字串。

  (10)、substring()

  substring(from, to)  提取介于字符串指定的两个下标中间的字符,并以新的字符串返回被提取的部分,不包括结束位置的字符。第一个参数规定提取子串的第一个字符在字符串中的位置,简单说就是开始位置,该参数是一个非负的整数。第二个参数是要提取的子串最后一个字符在字符串中的位置,也就是结束位置,该参数可选,为一个非负的整数,如果不设置该参数,则返回从开始位置到最后一个字符的子字符串。如果第二个参数比第一个参数大,则在提取子串之前会将较小的数作为开始位置,较大的作为结束位置。

  slice()、substr() 、substring()三者区别:

  从定义上看,三者都为提取子字符串,slice() 和substring() 可以看成是同类,参数都是字符串的某个开始位置到结束位置,都不包括结束位置。而 substr() 则是提取从字符串的某个位置开始,指定字符串长度的子字符串。他们的共同点都是:第二个参数可选,如果不设置,都返回从开始位置到最后一个字符的子字符串。

  从可设置的参数看,slice() 的两个参数都可为负数,表示从尾部开始算起。substr() 的第一个参数也可以设置为负数,而 substring() 的参数则不接受负数,如果设置为负数或者其他无效的数,则会被当作 0 处理。

  (11)、split()

  str.split()  用于分割字符串,返回字符串数组。该方法有2个可选的参数,第一个参数为分割方式,可以是正则表达式,第二个参数设置返回字符串的最大长度。

<script> var str = "Good good study day day up!"; 
 //忽略参数:
 var arr = str.split(); document.write(arr); //返回:Good good study day day up!
 
 //分割每个字符包括空格:
 var arr = str.split(&#39;&#39;); document.write(arr); //返回:G,o,o,d, ,g,o,o,d, ,s,t,u,d,y, ,d,a,y, ,d,a,y, ,u,p,!
 
 //使用空格作为分割符:
 var arr = str.split(&#39; &#39;); document.write(arr); //返回:Good,good,study,day,day,up!
 
 //规定返回数组的最大长度
 var arr = str.split(&#39; &#39;, 3); document.write(arr); //返回:Good,good,study
 
 //使用一个字符作为分割符:
 var arr = str.split(&#39;d&#39;); document.write(arr); //返回:Goo, goo, stu,y ,ay ,ay up!
 </script>
登入後複製

(12)、toString()

  toString()  方法用于将对象转换为字符串。

  (13)、valueOf()

  valueOf()  方法用于将对象转换为一个基本数据的值,返回对象的原始值。

  (14)、toLowerCase()

  str.toLowerCase()  方法用于将字符串转换为小写。

  (15)、toUpperCase()

  str.toUpperCase()  方法用于将字符串转换为大写。

2、Number 对象

  JS 只有一种数字类型,可以是整数,也可以是小数。整数最大可以有 15 位,小数最大可以有17位,在 JS 中小数运算并不是非常精确,所以大多数情况下,需要将小数转换为整数。注意:整数的第一位不能为 0,否则会得到意想不到的结果。如下面的运算结果:

var sum = 0.1 + 0.2; alert(sum); 
//返回:0.30000000000000004
登入後複製

(1)、infinity 和 -infinity

  当数字运算超过了 JS 所能表示的数字上限时,结果就为一个无穷大的值,在 JS 中用infinity表示。当负数运算超过了 JS 的负数范围,结果就为一个负无穷大的值,也叫无穷小,在 JS 中用 -infinity 表示。基于无穷大的加减乘数运算,他们的结果还是无穷大,并保留正负号。一个整数或者负数除以0,得到的都是无穷大。

  (2)、NaN

  NaN 表示非数字的特殊值,该属性用于指示一个值不是数字。返回值为布尔值。可以使用函数 isNaN() 判断一个值是否是 NaN 值。

var x = 123; var y = &#39;abc&#39;; 
 alert(isNaN(x));    //返回:false
 alert(isNaN(y));    //返回:ture
 
 alert(x == y);    //返回:false
 //NaN和NaN是不相等的。所以为假。
 
 var a = 2/0;
 alert(isNaN(a));    //返回:false
 //无穷大是一个数字
登入後複製

Number 对象属性:

  (1)、MAX_VALUE 和 MIN_VALUE

  MAX_VALUE 表示最大的数,它的近似值为: 1.7976931348623157 x 10308。如果大于该数则表示无穷大。MIN_VALUE 表示最小的数,它的近似值为:5 x 10-324,MIN_VALUE 是最接近 0 的数,但不是负值。比该属性小的值用 0 表示。由于他们都是 Number 对象的静态属性,只能通过 Number 调用,所以使用自定义的 Number 将无法获取属性,返回值为 undefined。

//JS最大数
 alert(Number.MAX_VALUE); //返回:1.7976931348623157e+308
 
 //JS最小数
 alert(Number.MIN_VALUE); //返回:5e-324
  
 //e为科学计数法:
 var a = 123e5; var b = 123e-5; 
 
 alert(a);    //返回:12300000
 alert(b);    //返回:0.00123
登入後複製

(2)、POSITIVE_INFINITY 和 NEGATIVE_INFINITY

  POSITIVE_INFINITY 属性代表无穷大,表示比 MAX_VALUE 大的数。NEGATIVE_INFINITY 属性表示负无穷大,表示比 MIN_VALUE 小的数。由于他们都是 Number 对象的静态属性,只能通过 Number 调用,所以使用自定义的 Number 将无法获取属性,返回值为 undefined。

alert(Number.POSITIVE_INFINITY); //返回:Infinity
 
 alert(Number.NEGATIVE_INFINITY); //返回:-Infinity
登入後複製

Number 对象方法:

  (1)、toExponential()

  toExponential(n)  可把对象的值转换成指数计数法。该方法有一个可选的参数,用于规定计数法中的小数位数,包括 0 和 20 之内的值,如果不设置该参数,将使用尽可能多的数字。

  (2)、toFixed()

  toFixed(n)  可把数字转换为字符串,并四舍五入为指定小数点后位数的数字。该方法必须设置一个参数,规定小数的位数,包括 0 和 20 之内的值,如果不设置该参数,将默认为 0。

  (3)、toPrecision()

  toPrecision(n)  可把数字格式化为指定的长度,如果超出指定的长度将转换为指数计数法。该方法必须设置一个参数,规定转换为指数计数法的最小位数,包括 1 和 21 之内的值,如果不设置该参数,则调用 toString() 方法,而不对数字转换。

  (4)、toString()

  toString()  方法用于将对象转换为字符串。

  (5)、valueOf()

  valueOf()  方法用于将对象转换为一个基本数据的值,返回对象的原始值。

3、Math 对象

  Math 对象的作用是:执行常见的算数任务。该对象无需在使用这个对象之前对它进行定义。

  下面主要介绍 Math 对象的一些常用方法:

  (1)、ceil()

  Math.ceil()  可对一个数向上取整,如果参数是一个整数,该值不变。向上取整运算返回的是一个大于或等于该值并且与之最接近的整数。

alert(Math.ceil(-0.1));    //返回:0
 
 alert(Math.ceil(-9.9));    //返回:-9
 
 alert(Math.ceil(2.1));     //返回:3
 
 alert(Math.ceil(2.9));     //返回:3
 
 var num = 8; alert(Math.ceil(num));    //返回:8
登入後複製

(2)、floor()

  Math.floor()  可对一个数进行向下取整,如果参数是一个整数,该值不变。向下取整运算返回一个小于或等于该值的最大整数。

alert(Math.floor(-0.1));    //返回:-1
 
 alert(Math.floor(-9.9));    //返回:-10
 
 alert(Math.floor(2.1));     //返回:2
 
 alert(Math.floor(2.9));     //返回:2
 
 var num = 8; alert(Math.floor(num));    //返回:8
登入後複製

(3)、round()

  Math.round()  可把一个数字四舍五入为最接近的整数。

alert(Math.round(-0.1));    //返回:0
 
 alert(Math.round(-9.9));    //返回:-10
 
 alert(Math.round(2.49));     //返回:2
 
 alert(Math.round(2.5));     //返回:3
 
 var num=8; alert(Math.round(num));    //返回:8
登入後複製

 (4)、random() 方法

  Math.random()  可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。

 //获得一个随机数:
 alert(Math.random()); 
 //获得 0~10 之间的随机数:
 alert(Math.random()*10); 
 //random ()方法和round()方法配合,可获得一个不大于10的整数:
 alert(Math.round(Math.random()*10)); 
 //随机数每次返回的值都不同。
登入後複製

4、Array 对象

  数组对象的作用是:使用单个变量来存储一系列的值。

  数组最常用的属性就是 length,用于返回数组中数据的长度,也可用于设置数组的长度。

 var arr = [1,2,3,4,5,6]; arr.length=3; alert(arr);    //返回1,2,3
 
 //arr.length=0;        可用于快速清空数组
登入後複製

下面主要介绍 Array 对象一些常用方法:

  (1)、concat()

  arr.concat(arr1, arr2, ..., arrN)  用于连接两个或多个数组,该方法返回一个新数组,不改变原来数组。该方法的参数可以是具体的值,也可以是数组对象,可以是任意多个。如果该参数是具体的值,将把该值插入到原来的数组返回。

  (2)、join()

  join()  用于将数组中的所有元素转换成一个字符串,元素是通过指定的分隔符分隔的。该方法有一个可选参数,用于指定分隔方式。如果不设置该参数,默认使用逗号分割。

 var arr1 = [86,&#39;010&#39;] var arr2 = [15278654321] var arr3 = arr1.concat(arr2); 
 document.write(arr3.join()); //返回:86,010,15278654321
 
 document.write(arr3.join(".")); //返回:86.010.15278654321
 
 document.write(arr3.join("-")); //返回:86-010-15278654321
 
 document.write(arr3.join("|")); //返回:86|010|15278654321
登入後複製

(3)、reverse()

  arr.reverse()  用于颠倒数组中元素的顺序。

 var arr = [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Apple&#39;]; document.write(arr); //返回:Banana, Orange, Apple
 
 document.write(arr.reverse()); //返回:Apple,Orange,Banana
登入後複製

(4)、slice()

  arr.slice(start, end)  可从已有的数组中返回选定的元素。该方法也适用于提取子字符串。也不包括开始位置和结束位置的元素。第一个参数规定从何处开始选取,第二个参数可选,规定从何处结束选取,如果省略该参数,则返回从开始位置到数组尾部的所有元素。如果参数为负数,则从数组最后一个元素开始算起。

  (5)、sort()

  arr.sort(方法函数)  用于对数组的元素排序。排序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。使用数字排序,你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。如果数字排序不指定方法函数,默认是按照字母升序,则 100 会排在 15 前边。

var arr = [99,15,21,2,8,56,100,1]; 
 //默认排序:
 document.write(arr.sort()); //返回:1,100,15,2,21,56,8,99
 
 //指定方法函数,按升序排序。
 function ascNum(a,b) {     return a-b; } document.write(arr.sort(ascNum)); //返回:1,2,8,15,21,56,99,100
 
 //指定方法函数,按降序排序。
 function desNum(a,b) {     return b-a; } document.write(arr.sort(desNum)); //返回:100,99,56,21,15,8,2,1
登入後複製

(6)、shift()

  arr.shift()  删除数组的第一个元素。 此方法将改变数组的长度。

 var arr = [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Apple&#39;]; document.write(arr.length);    //返回:3
 
 arr.shift(); document.write(arr);    //返回:Orange,Apple
 
 document.write(arr.length);     //返回:2
登入後複製

(7)、pop()

  arr.pop()  删除数组的最后一个元素。此方法将改变数组的长度。

var arr = [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Apple&#39;]; document.write(arr.length);    //返回:3
 
 arr.pop(); document.write(arr);    //返回:Banana,Orange
 
 document.write(arr.length);     //返回:2
登入後複製

(8)、unshift()

  arr.unshift()  向数组开头添加一个或多个元素。此方法将改变数组的长度。

var arr = [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Apple&#39;]; document.write(arr.length);    //返回:3
 
 arr.unshift(&#39;Mango&#39;, &#39;Pear&#39;); document.write(arr); //返回:Mango,Pear,Banana,Orange,Apple
 
 document.write(arr.length);    //返回:5
登入後複製

(9)、push()

  arr.push()  向数组末尾添加一个或多个元素。此方法将该变数组的长度。

 var arr= [&#39;Banana&#39;, &#39;Orange&#39;, &#39;Apple&#39;]; document.write(arr.length);    //返回:3
 
 arr.push(&#39;Mango&#39;, &#39;Pear&#39;,&#39;Lemon&#39;); document.write(arr); //返回:Banana,Orange,Apple,Mango,Pear,Lemon
 
 document.write(arr.length);    //返回:6
登入後複製

(10)、splice()

  arr.splice(start, length, arrElement1, ..., arrElementN)  用于删除、插入或替换数组的元素。该方法会改变数组的原始数据。该方法有多个参数,前两个为必须的参数。第一个参数规定从何处开始删除或插入。第二个参数规定删除元素的长度,如果设置为 0,则不删除元素,如果不定义该参数,则删除从 start 规定的位置开始到原数组结尾的所有元素。最后的参数可选,要添加到数组的新元素。

 var arr = [1,2,3,4,5,6]; 
 //删除元素的应用:
 //从第2个位置开始,删除长度为3。
 arr.splice(2,3); document.write(arr+&#39;<br>&#39;); //返回:1,2,6
 
 //插入元素的应用:
 //从第2个位置开始,删除为0个元素,也就是不删除,插入abc。
 arr.splice(2,0,&#39;a&#39;,&#39;b&#39;,&#39;c&#39;); document.write(arr+&#39;<br>&#39;); //返回:1,2,a,b,c,3,4,5,6
 
 //替换元素的应用:
 //从第2个位置开始,删除3个元素,再插入def。
 arr.splice(2,3,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;); document.write(arr); //返回:1,2,d,e,f,6
登入後複製

(11)、toString()

  toString()  方法可把数组转换为字符串,并返回结果。

  (12)、valueOf()

  valueOf()  方法返回数组对象的原始值。

5、Date 对象

  Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。

  下面例子是获取当前的所有日期:

 var d = new Date(); //获取当前日期
 document.write(d);  
 //获取当前的年份
 document.write(d.getFullYear() + &#39;年&#39;); 
 //获取当前月份,月份从0开始计算,所以需要+1
 document.write(d.getMonth() + 1 + &#39;月&#39;); 
 //获取当前是当月中的哪一天
 document.write(d.getDate() + &#39;日&#39;); 
 //获取当前时间的小时
 document.write(d.getHours() + &#39;时&#39;); 
 //获取当前时间的分钟
 document.write(d.getMinutes() + &#39;分&#39;); 
 //获取当前时的秒数
 document.write(d.getSeconds() + &#39;秒&#39;); 
 //获取当前的毫秒数t
 document.write(d.getMilliseconds() + &#39;毫秒&#39;); 
 //获取星期
 document.write(&#39;星期&#39; + d.getDay()); 
 //星期从0开始算起,从星期天开始计算。
 //getDay()返回的是0-6的数字,0表示星期天。如果要返回相对应的“星期”,需要通过数组完成。
 var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var week = d.getDay(); document.write(weekday[week]);
登入後複製

  下面例子用于设置日期:

var d = new Date(); 
 //设置年份
 d.setFullYear(2020); document.write(d); 
 //该方法也可用于设置月份(介于0-11之间)和天数(介于1-31之间)。
 //月份:-1为去年的最后一月,-2为去年的倒数第二个月。
 //12为明年的第一个月,13为明年的第二个月。
 //天数:0为上个月最后一天,-1为上个月最后一天之前的天数。
 //如果当月有31天,32为下个月第一天,如果当天只有30天,32则为下个月的第二天
 d.setFullYear(2020, 11, -1); document.write(d); //设置月份(介于0-11之间),也可用于设置天数
 d.setMonth(5); document.write(d); 
 
 //设置天数(介于1-31之间)
 d.setDate(12); document.write(d); 
 //设置小时
 //值介于0(午夜)-23(晚上11点)之间,-1为昨天的最后一个小时,24为明天的第一个小时
 d.setHours(24); document.write(d); 
 //该方法也可用于设置分钟、秒以及毫秒数。
 //分钟:介于0-59之间,-1为上一小时最后一分钟,60为下一个小时第一分钟
 //秒:介于0-59之间,-1为上一分钟最后一秒,60为下一分钟第一秒
 //毫秒:介于0-999之间,-1为上一秒钟的最后一毫秒,1000为下一秒钟的第一毫秒
 d.setHours(21,30,1); document.write(d); 
 //获取小时 一个小应用:返回24小时之前的的时间
 var d = new Date(); d.setHours(d.getHours()-24); document.write(d); 
 //设置分钟,也可用于设置秒数和毫秒数
 d.setMinutes(20); document.write(d); 
 //设置秒,也可用于设置毫秒
 d.setSeconds(10); document.write(d); 
 //设置毫秒
 d.setMilliseconds(999); document.write(d);
登入後複製

  getTime() 和 setTime()

var d = new Date(); 
 //获取1970年元旦距今的毫秒数
 document.write(d.getTime()+&#39;毫秒&#39;); 
 //向1970年元旦增加1325347200000毫秒,返回新日期
 d.setTime(1325347200000); document.write(d); 
 //获取指定时间据1970年之间的毫秒数
 var d = Date.parse("2012, 12, 12"); document.write(d+&#39;毫秒&#39;); 
 //计算1970年元旦至今有多少年:
 var minutes = 1000*60; var hours = minutes*60; var day = hours*24; var year = day*365; var d = new Date(); var t = d.getTime(); var y = Math.round(t/year);
 document.write(y + &#39;年&#39;);
登入後複製

  日期转换:

var d = new Date(); //当前时间
 document.write(d); 
 //将日期部分(不包括时分秒)转换为字符串
 document.write(d.toDateString()); 
 //将日期部分(不包括年月日)转换为字符串
 document.write(d.toTimeString()); 
 //根据本地时间将日期转换为字符串
 document.write(d.toLocaleString()); 
 //根据本地时间将日期部分(不包括时分秒)转换为字符串
 document.write(d.toLocaleDateString()); 
 //根据本地时间将日期部分(不包括年月日)转换为字符串
 document.write(d.toLocaleTimeString()); 
 //使用ISO标准将日期转换为字符串
 //该标准格式为:YYYY-MM-DDTHH:mm:ss.sssZ
 document.write(d.toISOString()); 
 //将日期转换为JSON格式
 //JSON格式与ISO标准是同样的格式
 document.write(d.toJSON());
登入後複製

toString()  方法可把日期对象转换为字符串,当日期需要显示为一个字符串时,该方法会被自动调用。

  valueOf()  方法返回日期对象的原始值。该方法将返回1970年元旦至今的毫秒数。

6、数据类型转换

  JS 中有5种不同的数据类型:string、number、boolean、object、function。

  3 种对象类型:Object、Date、Array。2 个不包含任何值的类型:ubll、undefined。

  可以使用 typeof 操作符来查看 JS 变量的数据类型。

 var str = &#39;小明&#39;; alert(typeof str);    //返回:string
 
 var num = 12; alert(typeof num);    //返回:number
 
 var num1 = NaN; alert(typeof num1);    //返回:number
 
 var fun = function (){alert(&#39;abcd&#39;);}; alert(typeof fun);    //返回:function
 
 var boo = true; alert(typeof boo);    //返回:boolean
 
 var obj = document; alert(typeof obj);    //返回:object
 
 var arr = [1,2,3,4]; alert(typeof arr);    //返回:object
 
 var d = new Date(); alert(typeof d);    //返回:object
 
 var json = {a:&#39;12&#39;, b:21}; alert(typeof json);    //返回:object
 
 var n = null; alert(typeof n);    //返回:object
 
 var x; alert(typeof x);        //返回:undefined
 alert(typeof y);        //返回:undefined
 //未定义有2种情况:
 //1、真的没有定义(如y)
 //2、虽然定义了,但是没有给赋值(如x)
登入後複製

数组对象和日期对象无法通过 typeof 来判断数据类型,因为都返回 object。可以使用 constructor 属性来查看。constructor 属性返回一个对象的构造函数,将返回的构造函数转换为字符串,再判断是否包含数组和日期。

 //返回数组和日期的构造函数:
 var arr = ["abc", "123", "123abc", "abc123"]; alert(arr.constructor); //返回:function Array() { [native code] }
 
 var d = new Date; alert(d.constructor); //返回:function Date() { [native code] }
 
 
 var arr = ["abc", "123", "123abc", "abc123"]; function con(obj) {     return arr.constructor.toString().indexOf("Array") > -1; } alert(con(arr));    //返回:ture
 
 var d = new Date(); function cons(obj) {     return d.constructor.toString().indexOf("Date") > -1; } alert(cons(d));    //返回:ture
登入後複製

强制类型转换,也叫显式类型转换。

  (1)、转换为字符串:

  全局方法 string() 和 toString() 方法可用于将一个值转换为字符串。string() 可用于任何类型的数字、字母、变量、表达式。

  二者区别:

  大多数值都有 toString() 方法,除了 null 和 undefined。字符串本身也可以使用 toString() 方法,将返回字符串的原始值。

  任何值都可以使用 string() 方法,如果该值有 toString() 方法,则使用该方法,如果该值没有 toString() 方法,那就为 null 和 undefined,则返回 null 和 undefined。

var str = &#39;小明&#39;; alert(String(str)); alert(str.toString()); //都返回:小明
 
 var num = 123; alert(String(num)); alert(num.toString()); //都返回:123
 
 var and = 123+100; alert(String(and)); alert(and.toString()); //都返回:223
登入後複製

(2)、转换为数字:

  全局方法 Number() 可以将字符串转换为数字。空字符串转换为 0,特殊值字符串将转换为 NaN。

var str = &#39;123&#39;; alert(Number(str));    //返回:123
 
 var str = &#39;&#39;; alert(Number(str));    //返回:0
 
 var str = &#39;200px&#39;; alert(Number(str));    //返回:NaN
登入後複製

  最常用的就是转换为整数和小数。parseInt() 方法用于转换整数。parseFloat() 方法用于转换小数。

 var a = &#39;3.1&#39;
 alert(parseInt(a));    //返回:3
 var a = &#39;3.9&#39;
 alert(parseInt(a));    //返回:3
 var a = &#39;12px34&#39;; alert(parseInt(a));    //返回:12
 var a = &#39;px1234&#39;; alert(parseInt(a));    //返回:NaN
 
 var d = &#39;3.14&#39;; alert(parseFloat(d));    //返回:3.14
 var d = &#39;3.99&#39;; alert(parseFloat(d));    //返回:3.99
登入後複製

  + 运算符可以连接字符串,也可以将字符串转换为数字。

var n = &#39;12ab&#39;; var x = &#39;34&#39;; alert(n+x);    //返回:12ab34
 alert(parseInt(n)+x);    //返回:1234
 
 var y = + x; alert(typeof x);    //返回:string
 //若变量不能转换,但仍然是一个数字,NaN
 alert(typeof y);    //返回:number
登入後複製

  NaN 的数据类型是 number,NaN 表示非数字(Not a Number),所以本身也为数字。

var a = parseInt(&#39;abc&#39;); var b = parseInt(&#39;12edf&#39;); var c = 12+NaN; alert(c);    //返回NaN
 
 //判断NaN是否等于NaN
 alert(a==b);    //返回false
 
 //isNaN判断一个变量是不是NaN
 alert(isNaN(a));    //返回:true
 alert(isNaN(b));    //返回:flase
登入後複製

  利用这一特性,可以做一个简易的文本框求和,用户输入的文本框的值为字符串,需要将字符串转换为数字,再判断输入的值是否为数字。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>文本框求和</title>
 </head>
 <script>
 window.onload = function (){     
 var x = document.getElementById(&#39;txt1&#39;);     
 var y = document.getElementById(&#39;txt2&#39;);    
  var oBth = document.getElementById(&#39;but1&#39;);     
  oBth.onclick = function (){         
  //将输入的值转换为整数:
         var n1 = parseInt(x.value);         
         var n2 = parseInt(y.value);             
         //判断用户输入的n1是不是非数字
             if(isNaN(n1)){                 
             alert(&#39;输入的第一个数字有误&#39;);             
             }             
             else if(isNaN(n2)){                 
             alert(&#39;输入的第二个数字有误&#39;);             
             }             
             //若都输入的为数字,则求和
             else{                 
             alert(n1+n2);             
             }     
             };
              }; 
              </script>
 <body>
 <input id="txt1" type="text" >
 <input id="txt2" type="text" >
 <input id="but1" type="button" value="求和">
 </body>
 </html>
登入後複製

  全局方法 Number() 可将布尔值转换为数字。

alert(Number(false));    //返回 0
 alert(Number(true));    // 返回 1
登入後複製

隐式类型转换,也叫自动转换类型。

  当 JS 尝试操作一个“错误”的数据类型时,会自动转换为“正确”的类型再去执行,这就是隐式类型转换。直接看几个例子:

var a = 2; var b = &#39;2&#39;; //比较数字2和字符串2是否相等
 alert(a==b);    //返回:true
 //why? 相等比较实际上比较前是先将a和b转换为同一类型,再进行比较的。
 
 //比较数字2和字符串2是否全等
 alert(a===b);    //返回:返回false
 //why? 全等比较不转换类型,直接比较。a为数字,b为字符串。
 //所以,一般情况下,采用全等比较,更为严谨。
 
 var c = &#39;12&#39;; var d = &#39;5&#39;; //两个值为数字的字符串做+运算
 alert(c+d);    //返回125
 //why? "+"运算符有2种功能:1、字符串连接。2、算术运算(数字相加)。系统会采用最直接的方法。
 
 //两个值为数字的字符串做-运算
 alert(c-d);  //返回7
 //why? 在做减法运算时会先转换为同类型,再做运算。"-"运算符只有1种功能。算术运算(数字相减)。
登入後複製

以上就是 JavaScript学习总结【3】JS对象的内容,更多相关内容请关注PHP中文网(www.php.cn)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數

See all articles