JavaScript基礎視頻教程總結（081-090章）

来源:https://www.cnblogs.com/iflygofy/archive/2019/01/03/10215586.html
-Advertisement-
Play Games

所有基礎課程鏈接： 1.JavaScript基礎視頻教程總結（001-010章） 2.JavaScript基礎視頻教程總結（011-020章） 3. JavaScript基礎視頻教程總結（021-030章） 4. JavaScript基礎視頻教程總結（031-040章） 5. JavaScript基 ...


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>081-090章總結</title>
</head>
<body>
    
<pre>
081. Date對象
在JS中使用Date對象來表示一個時間
</pre>
<script type="text/javascript">
    console.log("--第081--");
    //如果直接使用構造函數創建一個Date對象，則會封裝為當前代碼執行的時間
    var d01 = new Date();
    console.log(d01)
    //創建一個指定的時間對象
    //需要在構造函數中傳遞一個表示時間的字元串作為參數
    //日期的格式  月份/日/年 時:分:秒
    var d02 = new Date("2/18/2011 11:10:30")
    console.log(d02)
    // getDate() - 獲取當前日期對象是幾日
    var curDate = d02.getDate()
    console.log(curDate)
    // getDay() - 獲取當前日期對象時周幾 - 會返回一個0-6的值  0 表示周日 1表示周一
    var curDay = d01.getDay()
    console.log("今天是周"+curDay)
    //getMonth() 獲取當前時間對象的月份 -會返回一個0-11的值 0 表示1月 11 表示12月
    var curMonth = d01.getMonth()
    console.log("本月是"+(curMonth+1)+"月")
    // getFullYear() - 獲取當前日期對象的年份
    var curYear = d01.getFullYear()
    console.log("今年是"+curYear+"年")
    /*
     * getTime()
     *  - 獲取當前日期對象的時間戳
     *  - 時間戳，指的是從格林威治標準時間的1970年1月1日，0時0分0秒
     *      到當前日期所花費的毫秒數（1秒 = 1000毫秒）
     *  - 電腦底層在保存時間時使用都是時間戳
     */
    var getTime = d01.getTime()
    console.log(getTime)
    console.log( getTime/1000/60/60/24/365 )
    //利用時間戳來測試代碼的執行的性能
    //獲取當前的時間戳
    var start = Date.now()
    for(var i=0 ; i<30 ; i++){
        console.log(i)
    }
    var end = Date.now()
    console.log("代碼執行了"+(end-start)+"毫秒");
</script>

<pre>
082. Math
- Math和其他的對象不同，它不是一個構造函數，
它屬於一個工具類不用創建對象，它裡邊封裝了數學運算相關的屬性和方法
Math 對象屬性
1. Math.PI 表示的圓周率
Math 對象方法
1. Math.abs(x) 返回數的絕對值
2. Math.ceil(x) 對數進行上舍入
3. Math.floor(x) 對數進行下舍入
4. Math.round(x) 可以對一個數進行四捨五入取整
5. Math.max(x,y) 返回 x 和 y 中的最高值
6. Math.min(x,y) 返回 x 和 y 中的最低值
7. Math.pow(x,y) 返回 x 的 y 次冪
8. Math.sqrt(x) 返回數的平方根
9. Math.random() 返回 0 ~ 1 之間的隨機數(小數)
</pre>
<div id="randomColor">隨機顏色</div>
<script type="text/javascript">
    console.log("--第082--");
    var pi = Math.PI
    console.log(pi)
    var zNum1 = 5.1
    var zNum2 = 5.9
    var fNum1 = -5.1
    var fNum2 = -5.9
    var abs1 = Math.abs(zNum1)
    var abs2 = Math.abs(fNum1)
    console.log(abs1)
    console.log(abs2)
    
    console.log("-------")
    var ceil1 = Math.ceil(zNum1)
    var ceil2 = Math.ceil(zNum2)
    var ceil3 = Math.ceil(fNum1)
    var ceil4 = Math.ceil(fNum2)
    console.log(ceil1) // 6
    console.log(ceil2) // 6
    console.log(ceil3) // -5
    console.log(ceil4) // -5
    
    var floor1 = Math.floor(zNum1)
    var floor2 = Math.floor(zNum2)
    var floor3 = Math.floor(fNum1)
    var floor4 = Math.floor(fNum2)
    console.log(floor1) // 5
    console.log(floor2) // 5
    console.log(floor3) // -6
    console.log(floor4) // -6
    
    var round1 = Math.round(zNum1)
    var round2 = Math.round(zNum2)
    var round3 = Math.round(fNum1)
    var round4 = Math.round(fNum2)
    console.log(round1) // 5
    console.log(round2) // 6
    console.log(round3) // -5
    console.log(round4) // -6
    
    var max1 = Math.max(1,2,3,10,18)
    var max2 = Math.max(-1,-2.1,-2.9,-3,-10,-18)
    console.log(max1) // 18
    console.log(max2) // -1
    
    var min1 = Math.min(1,2,3,10,18)
    var min2 = Math.min(-1,-2.1,-2.9,-3,-10,-18)
    console.log(min1) // 1
    console.log(min2) // -18
    
    var pow = Math.pow(2,4)
    console.log(pow) // 16
    
    var sqrt = Math.sqrt(2)
    console.log(sqrt) // 1.414
    
    var random1 = Math.random()
    console.log(random1)
    // 產生隨機整數，包含下限值，但不包括上限值
    function randomNoUpp(lower,upper){
        return Math.floor( Math.random()*(upper-lower) + lower )
    }
    // 產生隨機整數，包含下限值，包括上限值
    function random(lower,upper){
        return Math.floor( Math.random()*(upper-lower+1) + lower )
    }
    var random2 = randomNoUpp(1,10)
    var random3 = random(1,10)
    console.log(random2)
    console.log(random3)
    // 擴展隨機顏色值
    function randomColor(){
        var r =random(0,255),g =random(0,255),b =random(0,255)
        var result = "rgb("+r+","+g+","+b+"0"
        return result
    }
    var random_Color = document.getElementById("randomColor")
    random_Color.style.color = randomColor()
</script>

<pre>
083. 包裝類
基本類型：Undefined, Null, Boolean, Number, String
引用類型：Object, Array, Date, RegExp （其實就是對象）
JS中只有對象才有屬性和方法，原始值沒有屬性和方法
那麼我們平常求字元串的長度 用length屬性不是沒有問題嗎？
在JS中為我們提供了三個包裝類，通過這三個包裝類可以將基本數據類型的數據轉換為對象
String() - 可以將基本數據類型字元串轉換為String對象
Number() - 可以將基本數據類型的數字轉換為Number對象
Boolean() - 可以將基本數據類型的布爾值轉換為Boolean對象
但是註意：我們在實際應用中不會使用基本數據類型的對象，如果使用基本數據類型的對象，在做一些比較時可能會帶來一些不可預期的結果
引用類型與基本包裝類型的區別：
它們的對象生命周期不同：
引用類型：使用new創建引用類型的實例，在執行數據流離開當前作用域時會一直存儲在記憶體中。
 基本包裝類型：自動創建基本包裝類型的對象，只執行一行代碼的瞬間之後就會立即銷毀。
</pre>
<script type="text/javascript">
    console.log("--第083--");
    
    var num = new Number(3);
    var num2 = new Number(3);
    var str = new String("hello");
    var str2 = new String("hello");
    var bool = new Boolean(true);
    var bool2 = true;
    console.log(typeof num) //object
    console.log(num == num2) //false 比較的是對象的地址
    var b = new Boolean(false);
    if(b){
        console.log("我運行了~~~"); // b為對象轉換為Boolean，都為true
    }
    /*
     * 方法和屬性之能添加給對象，不能添加給基本數據類型
     *  當我們對一些基本數據類型的值去調用屬性和方法時，
     *      瀏覽器會臨時使用包裝類將其轉換為對象，然後在調用對象的屬性和方法
     *      調用完以後，在將其轉換為基本數據類型
     */
    var s = 123
    s = s.toString()
    console.log(s) // "123"
    console.log(typeof s) // string
    var s2 =456
    s2.hello="hello"
    console.log(s2) // 456
    console.log(s2.hello) //undefined
    
    var str="hello word";
    // 1.創建出一個和基本類型值相同的對象 
    //var str = new String("hello world");
    // 2.這個對象就可以調用包裝對象下的方法，並且返回結給long變數 
    //var long = str.length; 
    // 3.之後這個臨時創建的對象就被銷毀了
    //str = null;
    //因為str沒有length屬性 所以執行這步之前後臺會自動執行以上三步操作 
    var long = str.length; 
    console.log(long); // 10
    console.log(str.hello) //undefined
</script>

<pre>
084. 字元串的方法
在底層字元串是以字元數組的形式保存的,["a","b""c"]
length屬性-可以用來獲取字元串的長度
charAt()-可以返回字元串中指定位置的字元,根據索引獲取指定的字元,從0開始
charCodeAt()-獲取指定位置字元的字元編碼（Unicode編碼）
String.formCharCode()-可以根據字元編碼去獲取字元
concat()-可以用來連接兩個或多個字元串
indexof()
- 該方法可以檢索一個字元串中是否含有指定內容
- 如果字元串中含有該內容，則會返回其第一次出現的索引
- 如果沒有找到指定的內容，則返回-1
- 可以指定一個第二個參數，指定開始查找的位置
lastIndexOf()
- 該方法的用法和indexOf()一樣，
- 不同的是indexOf是從前往後找，
- 而lastIndexOf是從後往前找
- 也可以指定開始查找的位置
slice(x,y)
- 可以從字元串中截取指定的內容
- 不會影響原字元串，而是將截取到內容返回
- 參數：
第一個，開始位置的索引（包括開始位置）
第二個，結束位置的索引（不包括結束位置）
- 如果省略第二個參數，則會截取到後邊所有的
- 也可以傳遞一個負數作為參數，負數的話將會從後邊計算
substring(x,y)- 可以用來截取一個字元串，可以slice()類似
- 參數：
- 第一個：開始截取位置的索引（包括開始位置）
- 第二個：結束位置的索引（不包括結束位置）
- 不同的是這個方法不能接受負值作為參數，
如果傳遞了一個負值，則預設使用0
- 而且他還自動調整參數的位置，如果第二個參數小於第一個，則自動交換
substr(x,y)-用來截取字元串
- 參數：
1.截取開始位置的索引
2.截取的長度
split()-可以將一個字元串拆分為一個數組
- 參數：
- 需要一個字元串作為參數，將會根據該字元串去拆分數組
如果傳遞一個空串作為參數，則會將每個字元都拆分為數組中的一個元素
toUpperCase()-將一個字元串轉換為大寫並返回
toLowerCase()-將一個字元串轉換為小寫並返回
</pre>
<script type="text/javascript">
    console.log("--第084--");
    var baseStr = "aBcdefG"
    var baseStr2 = "aabbcdcc"
    var strLength = baseStr.length
    console.log("strLength=" + strLength) //7
    var charAt = baseStr.charAt(3) 
    console.log("charAt=" + charAt) // d
    var charCodeAt = baseStr.charCodeAt(0) 
    console.log("charCodeAt=" + charCodeAt) //97
    var formCharCode = String.fromCharCode(97)
    console.log("formCharCode=" + formCharCode) //a
    var concat = baseStr.concat("hijklmn","opqist")
    console.log("concat=" + concat) //aBcdefGhijklmnopqist
    var indexOf1 = baseStr2.indexOf("c")
    var indexOf2 = baseStr2.indexOf("e")
    console.log("indexOf1=" + indexOf1) // 4
    console.log("indexOf2=" + indexOf2) // -1
    var lastIndexOf1 = baseStr2.lastIndexOf("c",5)
    var lastIndexOf2 = baseStr2.lastIndexOf("e")
    console.log("lastIndexOf1=" + lastIndexOf1) // 4
    console.log("lastIndexOf2=" + lastIndexOf2) // -1
    var slice = baseStr.slice(1,3)
    var slice2 = baseStr.slice(1,-1)
    console.log("slice=" + slice) // Bc
    console.log("slice2=" + slice2) // Bcdef
    var substring = baseStr.substring(1,3)
    var substring2 = baseStr.substring(3,-3)
    console.log("substring=" + substring) // Bc
    console.log("substring2="
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 無序列表、有序列表、定義列表多樣選擇設置屬性值
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 像紙質筆記本一樣給div,textarea添加行的分割線
    想要給textarea添加一個背景圖來實現 但是背景圖有幾個問題， 1、每個div或者textarea的line-height不一樣，對於每個不同的line-height都需要一個不同的背景圖 2、當有滾動條出現時，拉動滾動條背景圖分割線不會變，導致樣式錯位 因此使用傳統的圖片作為背景圖不可行，因為 ...
  • JavaScript驗證輸入的字元是否包含表情
    以下是驗證代碼： ...
  • 原生JS獲取DOM 節點到瀏覽器頂部的距離或者左側的距離
    關於js獲取dom 節點到瀏覽器頂/左部的距離，Jquery裡面有封裝好的offset().top/offset().left，只到父級的頂/左部距離position().top/position().left； 原生寫的話就是用獲取節點，do while迴圈就可以了。代碼如下 ...
  • 去除input[type=number]的預設樣式
    input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -web... ...
  • iOS下ajax回調函數里不能播放audio
    iOS下audio必須監測到事件才可播放, ajax回調函數里不能播放 解決辦法 在點擊方法里先播放然後立即暫停，在回調函數里重新播放 onclick(function(){ $("#_wxAudioWin")[0].play();$("#_wxAudioWin")[0].pause(); ajax ...
  • js 把一個對象賦值給另一個對象會指向同一個記憶體地址
    先看一段代碼： 為什麼會輸出 的是[1,2,3,4]而不是[1,2,3]。 因為實際上並不是新建一個和原對象(數組也是對象)完全一樣的對象，而是把原對象的記憶體地址直接複製給了另一個對象，也就是說兩個對象都是指向同一個記憶體地址，所以實際上它們就是同一個對象。arr2更改的同時就是更改了arr1。好似你 ...
  • Vue開發微信公眾號預設背景為灰色
    最近公司有一個項目，使用Vue開發微信公眾號，開發過程遇到一個問題，即設計圖的整體背景是白色的，但是公眾號里預設的背景是淺灰色，如果某個頁面高度沒能占滿一屏，就會露出淺灰色的預設背景，會顯得很不協調。 使用單純的CSS沒能解決這個問題，在網上查了些資料也沒發現特別好的方法，最後還是採用了JS解決這個 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類