JS 01 變數_數據類型_分支迴圈_數組

来源:https://www.cnblogs.com/aknife/archive/2019/04/29/10792811.html
-Advertisement-
Play Games

點擊直通車↓↓↓ 數據類型及數據類型的手動轉換 數組 一、概念 JavaScript（JS）是一種基於對象和事件驅動、且可以與HTML標記語言混合使用的腳本語言，其編寫的程式可以直接在瀏覽器中解釋執 二、與java的關係 從本質上來講，Java和JS是兩門語言，並沒有本質上的聯繫。 三、如何寫js代 ...


點擊直通車↓↓↓

 

一、概念

JavaScript（JS）是一種基於對象和事件驅動、且可以與HTML標記語言混合使用的腳本語言，其編寫的程式可以直接在瀏覽器中解釋執

二、與java的關係

從本質上來講，Java和JS是兩門語言，並沒有本質上的聯繫。

三、如何寫js代碼

在html代碼中寫，三種方式
1.先寫好一個*.js文件，通過script標簽引入這個js文件  <script src="demo1.js"></script> 

2.在script標簽中直接書寫js代碼

 <script type="text/javascript">
        function hello(){
            alert("hello world!");
        }
    </script>

3.直接在html代碼中寫

　　不推薦這樣寫

四、變數

全局變數
1.在方法外部定義的變數
2.在方法內部，不添加var關鍵字（僅限於非嚴格模式）
局部變數
在方法內部使用var關鍵字定義的變數

 <script type="text/javascript">
        "use strict"

        var a = 10;
        var date = new Date();

        //js的語言是抄襲java，註釋和java一樣
        //js使用console.log(變數)
        console.log(date)

        function func(){
            abc = 110;
            console.log(abc)
            console.log(a)
        }
        func();

　　　　　//報錯
        console.log(abc)

    </script>

 

一、創建數組

1.創建一個空數組
var arr = new Array();
2.創建一個具有長度的空數組
var arr2 = new Array(size)
3.創建一個具有元素的數組
var arr3 = new Array(ele1,ele2, ... ,eleN)
4.創建一個空數組或具有元素的數組
var arr4 = [ele1,...,eleN]

二、數組屬性

length 表示數組的長度，可以利用該屬性清空數組（length = 0）

 

三、數組方法

push( ele )：向數組的尾部添加一個元素，返回數組的新長度
unshift( ele)： 向數組的頭部添加一個元素，返回數組的新長度
pop()：從數組的尾部取出一個元素，返回該元素本身
shift()：從數組的頭部取出一個元素，返回該元素本身
join( ele ) : 使用指定的ele字元連接數組中的每個元素，並將其作為一個字元串返回
concat( arr1,arr2,...,arrN )：拼接給定的數組元素，返回一個新數組
reverse()：反轉數組
sort()：對數組的元素進行排序（自然順序）
splice(start,count,newEle)：從一個數組中移除一個或多個元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。

參數：

start 開始索引
count 移除元素的數量
newEle 要加入的新元素，該參數可以省略
slice(start，end)：截取數組的一段，返回一個新數組

參數：

start 開始索引
end結束索引（不包含），該參數可以省略（截取到數組末尾）

四、遍曆數組

for (var i = 0 ; i< 數組的長度;i++)
for (var arrIndex in 數組)

 數據類型及數據類型手動轉換

 1 <script type="text/javascript">
 2         /*
 3          6種常用的數據類型，查看變數的數據類型使用typeof
 4          1.undefined 聲明一個變數並沒有為其賦值
 5          2.null 聲明一個變數，併為其賦值為null
 6          3.boolean 聲明一個變數，為其賦值為ture或false
 7          4.string 聲明一個變數，為其賦值為字元串（單引號和雙引號都可以）
 8          5.number 數值型 1.整型 、 2.浮點型 、 3.正負無窮大 、 4.NaN = Not a Number
 9          6.object 對象型
10          */
11 
12         function testDataType() {
13             var a;
14             console.log(typeof a, a);
15 
16             var b = null;
17             console.log(typeof b, b);
18 
19             var c = true;
20             console.log(typeof c, c);
21 
22             var d = '123';
23             console.log(typeof d, d);
24 
25             var e1 = 123;  //整型
26             console.log(typeof e1, e1);
27             var e2 = 123.45;  //浮點型
28             console.log(typeof e2, e2);
29             var e3 = 1/0; //Infinity無窮大
30             console.log(typeof e3, e3);
31             var e4 = Number("haha");  //NaN = Not a Number
32             console.log(typeof e4,e4)
33 
34             var f = new Array();
35             console.log(typeof f,f);
36         }
37         //testDataType();
38 
39         function transferNumber(){
40             var b1 = false;
41             var n1 = Number(b1);
42             console.log(n1);
43 
44             var c = null;
45             var n2 = Number(c);
46             console.log(n2);
47 
48             var e;
49             var n3 = Number(e);
50             console.log(n3);
51 
52             var f = "fadsf123123adfds";
53             var n4 = Number(f);
54             console.log(n4);
55 
56 
57             var nullstr = "";
58             var n5 = Number(nullstr);
59             console.log(n5);
60 
61         }
62 
63         transferNumber();
64 
65         function transferString(){
66             var a = null;
67             var b;
68             console.log(String(a));
69             console.log(String(b));
70 
71             var c = true;
72             console.log(String(c));
73         }
74 //        transferString();
75 
76         function transferBoolean(){
77             var a = "";
78             var b;
79             var c = null;
80             var d = 0;
81             var e = Number("haha");
82 
83             console.log(Boolean(a));
84             console.log(Boolean(b));
85             console.log(Boolean(c));
86             console.log(Boolean(d));
87             console.log(Boolean(e));
88 
89             console.log(Boolean("kjhasdkjfhs"));
90             console.log(Boolean(123));
91 
92         }
93 
94 //        transferBoolean();
95 
96     </script>

 

 數據類型的自動轉換

  <script>
        function test() {
            //布爾型、字元串、數字的轉化
            var a = true;
            var b = "888" + a;
            var c = 99 + a;
            console.log(b);  // 888true
            console.log(c);  // 100

            //數字和字元串轉化
            var d = 33;
            var e = "44";
            var f = d + e;
            var g = 3 * "4";
            console.log(f)  // 3344
            console.log(g)  // 12

            //null、布爾型、字元串、數字的轉化
            var h = null;
            var h2 = h + 3;
            console.log(h2)  // 3
            var h3 = "aa" + h;
            console.log(h3)  // aanull
            if (!h) {
                console.log("h自動轉化為boolean值：false！")
            }
        }
//                test();

        function test2() {
            var a;
            var b = null;
            console.log(typeof a + "----" + typeof b);

            if (a == b) {
                console.log("null和undefined可以互相轉換！");
            }
        }
//                test2();

        function test3() {
            //布爾型、數值型、字元串型 在進行相互==比較時，不為數字的那一方自動調用Number()方法
            var a = 1;
            var b = true;
            var c = "true";
            var d = "1";
            console.log(a==b);  //true
            console.log(a==c);  //false
            console.log(a==d);  //true
            console.log(b==c);  //false
            console.log(b==d);  //true
        }
//        test3();

        function test04() {
            //null和undefined互相是相等，且自身也相等，除此之外和誰都不等
            console.log("zzz" == undefined); //false
            console.log("zzz" == null);  //false
            console.log(1 == undefined); //false
            console.log(1 == null);  //false
            console.log(0 == undefined);  //false
            console.log(0 == null);  //false
            console.log(false == undefined); //false
            console.log(false == null); //false
            console.log(null == undefined);   //true
            console.log(undefined == undefined); //true
            console.log(null == null);   //true
        }

//        test04();

        function test05() {
            //NaN比較特殊，他和自己都不相等
            var a = Number("haha");
            var b = Number("haha");

            console.log(a == b);
            console.log(NaN == NaN);

        }
//        test05();

        // ()圓括弧
        // []方括弧
        // {}花括弧
        // <>尖括弧

        function test06() {
            // var a = new Array();
            var a = [];  //定義一個空數組
            console.log(a.toString());  // 什麼都沒有
        }
//        test06();

        function test07() {
            // var a = new Object();
            var a = {};  //定義一個對象
            console.log(a.toString());  // [object Object]
        }
//        test07();

        function test08(){
            var a = {};
            console.log(!a);  //對象加! 得到一個布爾型的 false
        }
//        test08();


    </script>

 數據類型的自動轉換2

 <script type="application/javascript">
        function test() {
            console.log('' == '0') //類型相同，比較值，值不同，所以false
            console.log(0 == '') //類型不同，String轉Number，空字元串轉為0，變成0==0，所以true
            console.log(0 == '0') //類型不同，String轉Number，'0'轉成0，變成0==0，所以true
            console.log(false == 'false')  //類型不同，Boolean轉Number，即0=='false'，然後'false'轉Number，為0==NaN,所以false
            console.log(false == '0') //類型不同，Boolean轉Number，即0=='0'，就變成第3個例子，所以true
            console.log(false == undefined) //對於undefined和null，只有它們本身兩個比較才是true，其他都是false，所以false
            console.log(false == null) //對於undefined和null，只有它們本身兩個比較才是true，其他都是false，所以false
            console.log(null == undefined) //對於undefined和null，只有它們本身兩個比較才是true，其他都是false，所以true
            console.log(true == 2) //類型不同，Boolen轉Number，即1==2，所以false
            console.log(NaN == NaN) //NaN非常特殊，和自身也不相等，所以false
            console.log(' \t\r\n ' == 0) //類型不同，String轉Number，空String都將轉成0，即0==0,所以true
            console.log(0 == []) //對象類型[]調用toString()轉為""，即0==""，即0==0，所以true
            console.log(0 == ['']) //對象類型['']調用toString()轉為""，即0==""，即0==0，所以true
            console.log('0' == []) //對象類型[]調用toString()轉為""，即'0'==""，類型相同，值不同，所以false
            console.log('0' == [0])  //對象類型[0]調用toString()轉為"0"，即'0'=="0"，類型相同，值也相同，所以true
            console.log(true == [1]) //對象類型[1]調用toString()轉為"1"，即1=="1"，轉1==1，所以true
            console.log([] == []) //對象類型，比較引用地址，兩個[]是不同的引用地址，所以false
            console.log(![] == []) //加!強制轉Boolean，任何對象都是true，取反即false==[]，轉為0==""，即0==0，所以true
            console.log(!{} == {}) //即false=={}，轉為false=="[object Object]"，即0==NaN，所以false
        }
        /**
         * 1.==符號在判斷左右兩邊數據是否相等時，如果數據類型一致，直接比較值即可
         * 2.==符號左右數據類型不一致時，如果兩方數據為布爾型、數值型、字元串型時，不為數字的那一方自動調用Number()方法
         * 3.undefined和null這兩者互相相等，及自身也相等，除此之外和誰都不想等
         * 4.NaN比較特殊，他和自己都不相等
         * 5.當數值型、字元串型、布爾型和對象進行比較時，對象調用toString()方法得到一個字元串
         * 6.對象和對象進行比較時，直接比較記憶體地址
         * 7.任何對象加!強制轉false
         */

        test();
    </script>

 

運算符

    <script type="text/javascript">
        // "=" 賦值運算符
        // "==" 等值符，如果數據類型不一致，會先進行數據類型自動轉換
        // "===" 等同符，不會發生數據類型的自動轉換

        console.log(5 + 4);
        console.log(5 - 4);
        console.log(5 * 4);
        console.log(5 / 4);
        console.log(5 % 4);
        var a = 10
        console.log(a++);  //10
        console.log(++a);  //12
        console.log(a--);  //12
        console.log(--a);  //10
        a += 1;
        console.log(a); // 11
        a -= 1;
        console.log(a); //10

        var f1 = true;

        var f2 = false;

        var str1 = "aaa";
        str1 += "bbb";
        console.log(str1);

        console.log(5 > 4 ? "是的" : "否")


    </script>

 

分枝迴圈

  <script type="text/javascript">
        var age = 20;
        /* if(age >= 18)
         alert("做苦力！");
         else
         alert("未成年人，請保護。");

         alert("hi")*/
        var day = "11";
        switch (day) {
            case "monday":
                console.log("星期一");
                break;
            case "tuesday":
                console.log("星期二")
                break;
            case "wednesday":
                console.log("星期三")
                break;
            default:
                console.log("不上班")
        }

        /*迴圈語句*/
        var num = 10;
        while (num > 0) {
            console.log(num);
            num--;
        }

        var num2 = 10;
        do {
            console.log(num2)
            num2--
        } while (num2 > 0);


        for (var i = 0; i <= 10; i++) {
            console.log(i);
        }

        var arr = [123, 321, 11, 22, 33, "44", "55", "66", true, new Date()];  //數組
        /* for (var i = 0; i < arr.length; i++) {
         console.log(arr[i]);
         }*/
        for (var ele in arr) {
            // ele是下標
            console.log(arr[ele]);
        }

        //continue表示跳出當次迴圈，繼續下次迴圈
        for (var i = 1; i <= 10; i++){
            if(i == 5){
                continue
            }
            console.log(i);
        }

        //break表示跳出整個迴圈
        for (var i = 1; i <= 10; i++){
            if(i == 5){
                break
            }
            console.log(i);
        }

    </script>

 

數組

  <script type="text/javascript">
        //一、創建數組
        //1.創建空數組
        var arr = new Array();
        console.log(arr.length);
        //2.創建具有長度的數組
        var arr2 = new Array(10);
        console.log(arr2)
        //3.創建一個帶元素的數組
        var arr3 = new Array(123, true, "hello", new Date());
        //4.創建一個帶元素的數組2
        var arr4 = [123];
        console.log(arr4.length)

        //二、屬性
        // length屬性：表示數組的長度
        console.log(arr3);
        arr3.length = 0; //清空數組
        console.log(arr3);
        arr3.length = 4;
        console.log(arr3);

        //三、方法
        var arrdemo = new Array(123, true, "hello", new Date(), 444333);
        //join():指定一個字元，用該字元連接數組的每一個元素，並作為一個字元串返回
        var result = arrdemo.join("-");
        console.log(result);

        //push():向數組的末尾添加一個元素，返回數組的新長度
        result = arrdemo.push("world");
        console.log(result)
        console.log(arrdemo);

        //pop():從數組末尾取出一個元素，並返回該元素本身
        result = arrdemo.pop();
        console.log(result);
        console.log(arrdemo);

        //shift()：從數組頭部取出一個元素，並返回該元素本身
        result = arrdemo.shift();
        console.log(result);
        console.log(arrdemo);

        //unshift()：向數組的頭部添加一個元素，返回數組的新長度
        result = arrdemo.unshift("bbb");
        console.log(result);
        console.log(arrdemo);

        //concat()：拼接數組，並作為一個新的數組返回
        var a1 = [123, 234];
        var a2 = ["aaa", "bbb"];
        var a3 = [new Date()];
        var newarr = a1.concat(a2, a3);
        console.log(newarr);

        //reverse():反轉數組
        newarr.reverse();
        console.log(newarr);

        //sort():自然順序
        //        var sortarr = [4534,22,66,88,123];
        var sortarr = [4534, 22, 66, 88, 123, "A", "a", "ab", "ba", "abc", "bac"];
        sortarr.sort()
        console.log(sortarr);

        //splice()：刪除指定位置，指定長度的元素，併在該位置添加新的元素
        var s1 = ["aa", 'kjsdhf', '123', 123, 123, 444, 555, 666];
        s1.splice(0,0,"laowang");
        console.log(s1);

        //slice()；截取子數組
        var s2 = s1.slice(3,5);
        console.log(s2);




    </script>

 


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

-Advertisement-
Play Games
更多相關文章
  • 海思Hi3559A/CV100 DDR4驅動配置手冊
    Hi3559AV100 DDR4 驅動配置說明 Hi3559AV100 DDR4 驅動配置說明 1.1 Hi3559AV100 DDR4 CLK/AC 驅動配置方法 1.1 Hi3559AV100 DDR4 CLK/AC 驅動配置方法 寄存器地址 寄存器地址 DDR PHY0：0x1206d0bc ...
  • 談談 ANR 之 Service 超時
    不管是系統開發還是應用開發，ANR 一直是揮之不去的存在！本文從 ANR 的觸發機制以及一個簡單的範例來探討 ANR 的原理和處理方法！ ...
  • 安卓開發筆記（三十）：自定義Button
    在筆者本人看了很多博客和書之後，發現很少博主對於自定義控制項能夠進行一個比較全面的思路講解，大多數都是只講了一些細節，但並沒有講如何把代碼進行整體的實現。因此這裡講講整體的自定義button實現的詳細過程，其餘的細節則可以查看其他博主的博客即可，也可以參考《Android開發藝術探索》這本書的第六章， ...
  • AndroidStduio3.0 使用gradle將module打包jar文件
    AndroidStduio3.0使用gradle將module打包jar文件,首先需要安裝gradle。 打開控制台輸入 open -e .bash_profile 命令，就可以打開配置文件的文本，在裡面添加 然後進行保存。在輸入 source .bash_profile 命令保存你的設置。 在控制 ...
  • vue仿微信網頁版|vue+web端聊天室|仿微信客戶端vue版
    一、項目介紹 基於Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技術混合架構開發的仿微信web端聊天室——vueWebChat，實現了發送消息、表情(動圖)，圖片、視頻預覽，右鍵菜單、截屏、截圖可直接粘貼 ...
  • ajax入門簡述
    ajax 全稱為 “Asynchronous JavaScript and XML”（非同步 JavaScript 和 XML），是一種創建互動式網頁應用的網頁開發技術，本質上是一個瀏覽器端的技術，就是在不跳轉頁面的情況下，實現對伺服器的訪問並返回數據，將數據局部非同步刷新在網頁中的技術 ajax 不是 ...
  • js中常見繼承方式
    1.原型模式 function Father(){ this.property = true; } Father.prototype.getValue = function(){ return this.property; } function Son(){ this.Sonproperty = f ...
  • JQuery下載及選擇器總結
    JQuery下載 JQuery只是一個 JS函數庫 ，要使用其中的方法還是要在JS文件中進行調用。 一般去https://mvnrepository.com/這個網站下載，搜索JQuery就能找到JS文件下載。 下載完成後通過script src="JQuery.js文件路徑"，進行載入，併在其他j ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類