JavaScript--我發現，原來你是這樣的JS（再說引用類型，基本包裝類型與個體內置對象）

来源:http://www.cnblogs.com/Ry-yuan/archive/2017/10/30/7747103.html
-Advertisement-
Play Games

一.介紹 本篇是續上一篇的，引用類型的後篇，本篇主要是說基本包裝類型和個體內置對象。如果你能收穫一些知識，那我很高興，很滿足，哈哈哈，希望大家能愉快看完。如果你想學好一門技術，要不忘初心，方得始終。 二.基本包裝類型 先說明基本包裝類型也是屬於引用類型,是接著上一篇的,強調一下. 然後我們記住兩句話 ...


一.介紹

本篇是續上一篇的，引用類型的後篇，本篇主要是說基本包裝類型和個體內置對象。如果你能收穫一些知識，那我很高興，很滿足，哈哈哈，希望大家能愉快看完。如果你想學好一門技術，要不忘初心，方得始終。

二.基本包裝類型

先說明基本包裝類型也是屬於引用類型,是接著上一篇的,強調一下.

然後我們記住兩句話:
1.基本包裝類型是為了方便操作基本類型值而出現的.
2.有一瞬間你出現,轉眼卻離去.

1.說說這基本包裝類型有什麼吧,就這3個

  1. Boolean
  2. Number
  3. String

2.有人會疑惑這些家伙不是基本類型嗎?怎麼變成基本包裝類型了?

對，就是要把你搞蒙，不然怎麼顯得js高深莫測呢。
看看例子:

//有沒有覺得這東西是不是很方便，但又很奇怪為什麼能這麼乾
var str  = "hello Ry"
console.log(str.length);  //8  一個屬性,直接給出字元串長度
console.log(str.substring(6));  "ry"  //一個剪切字元串的方法

上面的例子我們看到,str的值明明是一個基本類型值(String)，為什麼會有屬性，為什麼會有方法?

我們記住的第一句話：基本包裝類型是為了方便操作基本類型值的：
js在被設計出來時搞了這個叫基本數據包裝類型的東西，當對基本類型值訪問讀取時，後臺會自動創建其對應的基本包裝類型對象(沒錯是對象)，使得它能進行一些屬性和方法的調用。

第二句話：有一瞬間你出現,轉眼卻離去
就是基本包裝類型從創建對象到該對象銷毀就一瞬間，之後便逝去了，也就是只有存在於那一行代碼執行時（比如：str.length）。

//在前幾篇有個這樣的例子，這也說明基本包裝類型對象只存在於一行代碼執行過程
var p = "ry";
person.age = 123;  //這時創建了基本包裝對象，我們能為屬性賦值
console.log(p.age);  //undefined  到了下一行代碼對象便不見了，其屬性值也就沒了

再來句通俗的話：String,Number,Boolean 他們有兩重身份：基本類型和基本包裝類型。但是我們用的時候都是基本類型的（只要我們不去主動創建基本包裝類型對象），當需要讀取和操作這基本類型值時，他就變身（哈哈，變身），變成一個基本包裝類型的對象，變身就厲害了吧，這時它能做的事就更多了。

三.基本包裝類型細說

剛纔算是介紹清楚基本包裝類型了，希望大家能看懂。接下來詳細說說這3個基本包裝類型：String，Number，Boolean（也就是說他們變身後能幹神馬）

還有很重要的點，我們一般都不直接創建基本包裝類型的對象，這樣容易分不清你是操作著基本類型值，還是引用類型。

1.Boolean類型

這個基本包裝類型，對應布爾值的基本類型。

a.創建這個類型對象

一如既往的new，只要是對象都new了

//這是Boolean類型對象,這家伙用處不大，上面說了一般都不這樣直接創建，這東西給js語言後臺弄就對了。
var b = new Boolean();

雖然不直接創建它，但是我們還是要瞭解它，不是嗎，為什麼？為了人民日益增長的美好生活的需要。哈哈不是嗎。

知識點來了：看註釋

//這家伙是基本包裝類對象，是對象
var b = new Boolean(false);   //他是false的對象
//但是會出現
console.log(b && true);  //true  
//因為在布爾表達式中對象的布爾值是true，也就是說b這對象將轉為true（而不是它的值false）

還有

//這是基本類型值
var t1 = true;
//這是基本包裝類型對象，是對象
var t2 = new Boolean(true);
//typeof測試
console.log(typeof t1);  //boolean
console.log(typeof t2);  //object , typeof 對所有對象都返回object
//instanceof
console.log(t1 instanceof Boolean); //false ，t1是值類型不是對象，所以返回false
console.log(t2 instanceof Boolean); //true

2.Number類型

a.創建對象

我們儘量不要創建對象

var n = New Number(10);

b.方法

直接將有什麼方法就好了，用的也就屬性方法。
1.toString()：傳入參數是告訴它返回多少進位

//這是基本類型
var num = 10;
//讀取操作時變身，有能力了，是Number對象的能力
console.log(num.toString(8));  //12  返回了八進位的數
console.log(num.toString(2));  //1010  返回二進位
console.log(num.toString(16));  //a  返回十六進位

2.toFixed(): 傳入一個參數(0-20)，表示返回的數顯示幾位小數

var n = 123;
console.log(n.toFixed(2));  //123.00

3.toPrecision():傳入一個參數數字， 返回一個合適這個數字不是的位數的格式

var n1 = 123;
console.log(n.toPrecision(2));   //'1.2e+2'
console.log(n.toPrecision(4));  //'123.0'
console.log(n.toPrecision(3));  //'123'

3.String類型

直接上屬性和方法

1.length ： 返回字元串長度

var str = "hello lovely girl";
console.log(str);  //17

2.charAt 和 charCodeAt()

//charAt() 接受一個參數，返回字元串的該參數位置下標的值
var str = "hello";
str.charAt(2);  //l
//charCodeAt() 和charAt不同的是返回的是字元編碼
str.charCodeAt(2); //108  這是l的字元編碼
//還有一種更簡單的方法得到字元串對應下標的值，像數組一樣用方括弧
str[2];  //l

3.concat() 拼接字元串，返回新的字元串

var str = "I ";
//在str上加上字元串
var str1 = str.concat("love you");
console.log(str1);  //I love you

//當然我們都習慣直接用+號來完成這操作
var str2 = str+"love you";
console.log(str2); //I love you

4.剪切字元串：slice() , substr() , substring() 傳入一或兩個參數，返回新的字元串，不會影響原來字元串

//slice(),substring() 1參數是開始位置，2是結束位置（不指定預設到最後）
var str = "welcome";
str.slice(3);  //come
str.slice(3,4); //c
str.substring(3); //come
str.substring(4,6); //om
//substr() 1參數是開始位置，2是返回的字元數量
str.substr(3,4); //come  3位置開始的4個字元
str.substr(1,3); //elc

5.indexOf()和lastIndexOf()，查找字元，返回字元第一次出現的位置

//indexOf只傳一個參數，預設從0位開始找
var s = "hello";
s.indexOf("l");  //2  從前面開始找l第一次出現在2
s.indexOf(a);  //-1

//lastIndexOf() 只傳一個參數，預設從後面開始找
s.lastIndexOf("l");  //3  從後面開始找l第一次出現在3

//接受兩個參數，第二參數表示從第x位開始查找
s.indexOf(l,1);  //2   第二參數表示從第1位開始查找
s.lastIndexOf(l,2);  //2   第二參數表示從第2位開始查找

//第二個參數應用，通過迴圈使用這兩方法，找到後增加第二個參數的值來繼續尋找字元，最後能把所用的該字元位置找出來

6.trim()：刪除前置及尾碼所有空格，返回新的字元串

var str = "  welcome to my blog    ";  //前後有很多空格
var str2 = str.trim(str);
console.log(str2);  //"welcome to my blog"

7.字元串大小寫轉換 toLocaleUppperCase,toUpperCase,toLocaleLowerCase,toLowerCase

var str = "beautiful";
//大寫,兩個方法差不多
console.log(str.toLocaleUpperCase());  //   "BEAUTIFUL"
console.log(str.toUpperCase());        //   "BEAUTIFUL"
//小寫，兩個方法差不多
console.log(str.toLocaleLowerCase());  //   "beautiful"
console.log(str.toLowerCase());        //   "beautiful"

8.替換字元串的方法：replace()

var text = "bat,cat,sat,fat";
//第一參數是匹配要替換字元串，第二參數是替換成的字元串
var result = text.replace("at","oo");
console.log(result); "boo,cat,sat,fat";  //只替換了第一個

result = text.replace("/at/g" , "oo");
console.log(result);  "boo,coo,soo,foo";  //加了正則表達，替換了全部

9.localeCompare() : 比較兩個字元串,通過字元串在字母表的順序排列

var str1 = "back";
var str2 = "bat";
var str3 = "abc";
console.log(str1.localeCompare(str2));  //-1  "back" 排在 "bat" 前面 返回-1
console.log(str1.localeCompare(str1));  //0  "字元串相等返回0
console.log(str1.localeCompare(str3));  //1  "back" 排在 "abc" 後面 返回1

10.formCharCode() : 接受編碼轉為字元串

console.log(String.formCharCode(104,101,108,108,111));  //hello

String類型的字元串的方法很多，這裡只是簡單的舉例了他們的使用方法，需要深入建議看看文檔哦

四.單體內置對象

內置對象上一篇前面講了Object ， Array ， Function，RegExp，Date等，下麵還有兩個（Global 和 Math）

1.Global對象

最特別的對象，你看不見摸不著，對了，但是就是存在。
怎麼理解：golbal是全局的意思，所以對於在全局作用域定義的屬性和方法都是Global對象的屬性和方法。

比如一些函數：isNaN(),isFinite(),parseInt(),parseFloat()等都是Global的方法。

a.再說一些Global方法：

1.encodeURI()和EncodeURIComponent() : URI編碼方法，他們都是對URI進行編碼的，以便發送給瀏覽器

var uri = http://www.xxx.com/ry yuan/
//encodeURI方法:只處理空格,把空格轉成了%20
console.log(encodeURI(uri));  //"http://www.xxx.com/ry%20yuan/"
//encodeURIComponent方法: 只要是非數字都轉成編碼
console.log(encodeURIComponent(uri));  //"http%3A%2F%2Fwww.xxx.com%2Fry%20yuan%2F"

2.eval() 方法： 可以執行解析JavaScript字元串（慎用，少用）

eval("console.log('hello')");  // hello  ， 等價於console.log('hello');

b.再說說window對象

ES中沒有指出如何訪問Global對象，但是web瀏覽器中window對象是Global對象的部分實現，所以我們再瀏覽器中常說的全局屬性和方法是window，也是這個原因

var str = "nice to meet you";
console.log(window.str);  //"nice to meet you" , 用window訪問其str屬性沒毛病

2.Math對象

這個對象主要用來輔助完成簡單和複雜的運算

a.Math對象的屬性：很多下麵舉例幾個常用：

console.log(Math.E);  //2.718281828459045  自然底數e  
console.log(Math.PI); //3.141592653589793  π 
console.log(Math.SQPR);  //開根號2 
console.log(Math.LN2);   //2的自然底數  
console.log(Math.LN10);   //10的自然底數

b.Math方法

1.min()和max() : 用於確定一組值的最小值和最大值

var max = Math.max(1,2,3,4,5,6);  
console.log(max)  //6

var min = Math.min(1,2,3,4,5,6);  //1
console.log(min)  //1

//要找數組的最大值，可以這樣做
var arr = [1,23,33,12];
var result = Math.max.apply(Math,arr);
//console.log(result);  //33

2.舍入方法：Math.ceil() , Math.floor() , Math.round()

//Math.ceil()  向上舍入
console.log(Math.ceil(1.2));  //2
console.log(Math.ceil(1.5));  //2
console.log(Math.ceil(1.8));  //2

//Math.floor()  向下舍入
console.log(Math.floor(5.1)); //5
console.log(Math.floor(5.6)); //5
console.log(Math.floor(5.9)); //5

//Math.round()  四捨五入
console.log(Math.round(8.1)); //8
console.log(Math.round(8.5)); //9
console.log(Math.round(8.7)); //9

3.生成隨機數的方法： random() 返回大於等於0 小於1的隨機數

console.log(Math.random());  //0.8261111731972886  隨機數
console.log(Math.random());  //0.2343731972234522  隨機數

//一條公式：值 = Math.floor(Math.random() * 可能值的總數 + 第一個可能的值);  怎麼說，看下麵
//如果我想返回從1-10的其中一個隨機數
console.log(Math.floor(Math.random()*10+1))  //1-10 可能值總數10，第一個可能值是1
//如果我想返回從1-10的其中一個隨機數
console.log(Math.floor(Math.random()*90+10)) //10-100   可能值總數90，第一個可能值是10

4.還有很多方法：

//x的絕對值Math.abs(x)
//x平方Math.sqrt(x)
//x的n次冪Math.pow(x,n)
//正弦餘弦正切Math.sin(x), Math.cos(x),Math.tan(x)
//等等

五.說說

本篇結束，對，引用類型也就到這裡了落幕，接著還會繼續前進的，老鐵們，覺得寫得好就推薦一下，關註一下吧，yoyo。

同系列前幾篇：
第一篇：JavaScript--我發現，原來你是這樣的JS（一）（初識）
第二篇：JavaScript--我發現，原來你是這樣的JS（二）（基礎概念--軀殼篇）
第三篇：JavaScript--我發現，原來你是這樣的JS（三）（基礎概念--靈魂篇）
第四篇：JavaScript--我發現，原來你是這樣的JS（四）（看看變數，作用域，垃圾回收是啥）
第五篇：JavaScript--我發現，原來你是這樣的JS（引用類型不簡單，且聽我娓娓道來）

本文出自博客園：http://www.cnblogs.com/Ry-yuan/
作者：Ry（淵源遠願）
歡迎轉載，轉載請標明出處，保留該欄位。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Class.forName()+Class.forName().newlnstance()和new語句和初始化塊+static初始化塊+構造方法之間的關係
    先上代碼 代碼執行結果是 載入類時執行 先執行我！ 我雖然寫在初始化塊前但是實際先執行初始化塊里的內容再執行我 先執行我！ 我雖然寫在初始化塊前但是實際先執行初始化塊里的內容再執行我 先執行我！ 我雖然寫在初始化塊前但是實際先執行初始化塊里的內容再執行我 參考文章 http://www.cnblog ...
  • 洗禮靈魂，修煉python（47）--鞏固篇—定義類的方法之@classmethod，@staticmethod
    定義類的方法，相信你會說，不就是在class語句下使用def () 就是定義類的方法了嘛，是的，這是定義的方法的一種，而且是最普通的方式 首先，我們已經知道有兩種方式： 1.普通方法： 1）與類無關的方法 2）與類相關的方法： 能夠被類直接調用的方法，而實例化因為沒有self綁定，會把自身作為參數傳 ...
  • 深入理解ES6之—符號與符號屬性
    在js已有的基本類型（字元串，數值，布爾型，null和undefined）之外，es6引入了一種新的基本類型：==符號（Symbol）==。符號起初被設計用於創建對象私有成員。 符號沒有字面量形式，你可以使用全局Symbol函數來創建一個符號值。 Symbol還可以接受一個額外的參數用於描述符號值。 ...
  • js數組push方法使用註意
    js 數組的push方法，想必大家都知道是向數組末尾添加元素，但是有一個很關鍵的點需註意： 引自 MDN 返回值 當調用該方法時，新的 length 屬性值將被返回。 數組push之後返回的是length,而不是新的數組，如果不清楚這點，在使用過程中回遇到很大的坑。 順帶記一下其他幾個數組的方法返回 ...
  • 深入理解ES6之—塊級綁定
    var聲明與變數提升 使用var關鍵字聲明的變數，無論其實際聲明位置在何處，都會被視為聲明於所在函數的頂部（如果聲明不在任意函數內，則視為在全局作用域的頂部）。這就是所謂的變數提升。 塊級聲明 塊級聲明就是讓所聲明的變數在指定塊的作用域外無法被訪問。塊級作用域在如下情況被創建： 1. 一個函數內部 ...
  • JavaScript字元集
    引言 JavaScript程式使用Unicode字元集編寫。Unicode是ASCII和Latin 1的超集，並支持地球上幾乎所有在使用的語言。ECMAScript3要求JavaScript的實現必須支持Unicode2.1及後續版本，ECMAScript5則要求支持Unicode3及後續版本。 區 ...
  • JavaScript獲取當前網頁的源碼
    1. 通過 2. 通過非同步請求 3. 通過jQuery ...
  • 【譯】前端開發者的基本要求
    備註：第一次翻譯技術文章，標題都糾結了好久不知道腫麽翻譯，如發現翻譯不當之處，可點擊github鏈接提交評論，thx～ 前幾天我為一個項目寫README文檔，我希望其他開發者能夠看到這個項目，並從中學到一些東西。突然我意識到，若放在幾年前，我寫作的過程中隨口提到的Node，npm，Homebrew， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類