【JavaScript】基礎語法-有解無憂

基礎語法

- 變數
- 資料型別
- 運算子
- - 算術運算子
  - 比較運算子
  - 邏輯運算子和三元運算子
- 資料型別轉換
- - 轉換為字串型別
  - 轉換為數值
- 流程控制陳述句
- - 分支結構
  - - 回圈結構
- 陣列
- 物件
- - String物件
  - 日期物件
  - 自定義物件

變數

var定義的變數，沒有塊的概念，可以跨塊訪問,不能跨函式訪問
let定義的變數，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函式訪問
const用來定義常量，使用時必須初始化(即必須賦值)，只能在塊作用域里訪問，而且不能修改;同一個變數只能使用—種方式宣告

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script>
   //使用let const 宣告的區域變數，只能在當前代碼塊中被訪問
   //在代碼塊和函式中宣告的變數是區域變數
   //在代碼塊和函式外宣告的變數是全域變數

   //var 沒有塊作用域的概念
   //在函式中使用var定義的變數是區域變數，只能在該函式內部使用
   //在其他未知使用var定義的變數都是全域變數
   {
     var a = 100;
     let b = 200;
     const  c = 300;
   }
   // console.log(a);//100
   // console.log(b);//報錯
   // console.log(c);//報錯

   // function test(){
   //   var aa = 100;
   //   let bb = 200;
   //   const  cc = 300;
   // }
   // test();
   // console.log(a);//aa is not defined
   // console.log(b);//bb is not defined
   // console.log(c);//cc is not defined
   function test2(){
     aaa = 100;//在方法中宣告的變數，如果 不使用 任何修飾符，在函式被呼叫的時候，該變數自動升級為全域變數
     console.log(aaa);
   }
   test2();
   console.log(aaa);
 </script>
</body>
</html>

資料型別

JavaScript不區分整數和浮點數;

NaN表示 Not a Number，當無法計算結果時用NaN表示;
Infinity表示無窮大，當數值超過了JavaScript 的數字所能表示的最大值時，就表示為Infinity ;
undefined表示參考的變數未定義，

typeof：使用typeof 運算子可以用來檢查一個變數的資料型別，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  // console.log("Hello World");
  // console.log(100);
  // console.log(108.5);
  // console.log(100/0);//Infinity無窮大
  // console.log(100/'a');//NaN無法計算結果
  // console.log(true);
  // let a;
  // console.log(a);//undefined

  let a1 = 'Zh';
  let a2 = 100;
  let a3 = 10.21;
  let a4 = true;
  let a5 = 100/0;
  let a6;
  console.log(typeof a1);//string
  console.log(typeof a2);//number
  console.log(typeof a3);//number
  console.log(typeof a4);//boolean
  console.log(typeof a5);//number
  console.log(typeof a6);//undefined
  console.log(typeof null);//object
  console.log(typeof window);//object


</script>
</body>
</html>

運算子

算術運算子

boolean型別參與算術運算true 會自動轉換為數值1,false 會自動轉化為數值undefined和NaN引數算術運算，回傳值為NaN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let a = 10;
      let b = 3;
      console.log(a+b);
      console.log(a-b);
      console.log(a*b);
      console.log(a/b);//3.3333333333333335
      console.log(a%b);

      console.log(++a + a++ - --b);//11+11-2=20
      console.log(a);//12
      console.log(b);//2

      // boolean型別參與算術運算true 會自動轉換為數值1，false會自動轉化為數值0
      console.log(a+true);//13
      console.log(false-b);//-2

      //undefined 和NaN引數算術運算，回傳值為NaN.
      console.log(a+undefined);//NaN
      console.log(b+NaN);//NaN

  </script>
</body>
</html>

比較運算子

==:會發生型別自動轉化
=== :不會發生型別的自動轉化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script>

     let a = 100;
     let b = '100';
     console.log(a);//number
     console.log(b);//string
     console.log(a==b);//true 變數內容相同
     console.log(a===b);//false 資料型別和值相同
 </script>
</body>
</html>

邏輯運算子和三元運算子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邏輯&三元運算子</title>
</head>
<body>
  <script>
      let a = 100;
      let b = 200;
      //&& 遇假則假
      console.log(true && true);//true
      console.log(true && false);//false
      console.log(false && true);//false
      console.log(false && false);//false

      console.log(true && ++a >100);//ture
      console.log(a);//101
      console.log(false && ++a >100);//false
      console.log(a);//100

      // || 見真則真
      console.log(true || true);//true
      console.log(true || false);//true
      console.log(false || true);//true
      console.log(false || false);//false

      console.log(true || ++a >100);//true
      console.log(a);//101
      console.log(false || ++a >100);//true
      console.log(a);//102
      
      let result = a > b ? 'Hello':'world';
      console.log(result);//world

  </script>
</body>
</html>

資料型別轉換

轉換為字串型別

“ +”運算子除了用來做算術的加法運算，還可以用來做字串的拼接，
將其它資料型別轉換為字串有三種方式: toString()、String()、字串拼接，

轉換為數值

有三個函式可以把非數值轉換為數值: Number()、parselnt()、parseFloat().

Number()可以用來轉換任意型別的資料，而后兩者只能用于轉換字串
parseInt()將字串轉換為整數
parseFloat()將字串轉換為浮點數
boolean型別參與數學計算可以自動轉換為數值
無法完成轉換時回傳NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //其他資料型別轉換為字串
  //   +     toString()   String()
  // console.log(100+'100');//100100
  // console.log('100'+true);//100true
  // console.log('100'+undefined);
  // console.log('100'+null);
  // console.log('100'+NaN);
  // console.log('100'+Infinity);
  //
  // let a = 100;
  // console.log(a.toString()+100);//100100
  // console.log(typeof new String(a));//object
  // console.log(new String(a)+100);//100100

  //其他資料型別轉換為數字
  //Number(),parseInt(),parseFloat()
  let a = '100';
  let b = '3.1415926';
  let c = 'a';
  console.log(typeof Number(a));//number
  console.log(Number(a)+100);//200
  console.log(typeof  parseInt(a));//number
  console.log(parseInt(a)+100);//200

  console.log(parseFloat(b)+100);//103.1415926

  console.log(Number(c));//NaN
  console.log(parseInt(c));//NaN
  console.log(parseFloat(c));//NaN
</script>
</body>
</html>

流程控制陳述句

分支結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // let age = window.prompt('請輸入您的年齡：');
    // console.log(typeof age);
    // console.log(age);
    // if(age<18){
    //     console.log("未成年");
    // }else if(age<40){
    //     console.log("有為青年");
    // }else if(age<60){
    //     console.log("步入中年");
    // }else if(age>=60){
    //     console.log("進入老年");
    // }else{
    //     console.log("輸入不合法");
    // }

    // let a = Infinity;//true
    // if(a){ //false,0,null,undefine,NaN -> false
    //     console.log('Hello');
    // }

    let num = window.prompt("請輸入編碼");
    switch (Number(num)) {
        case 1:
            console.log("春天");
            break;
        case 2:
            console.log("夏天");
            break;
        case 3:
            console.log("秋天");
            break;
        case 4:
            console.log("冬天");
            break;
        default:
            console.log("啥都沒有");
    }

</script>
</body>
</html>

回圈結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    //第一次回圈執行運算式一，
    // 再執行運算式二，判斷是否滿足回圈條件，滿足則進入回圈代碼
    //執行完回圈代碼，先執行運算式三，再執行運算式二，再次判斷是否滿足條件，滿足則進入回圈代碼
    let i = 5;
    while(i<5){
        console.log(i);
        i++;
    }

    let j = 0;
    do{
        console.log(j);
        j++;
    }while(j>5);
    console.log(j);//1


    // continue & break
    for(let i = 0;i<5;i++){
        if(i==3){
            continue;//繼續下次回圈
        }
        console.log(i);//0 1 2 4
    }
    console.log('--------------------------------');
    for(let i = 0;i<5;i++){
        if(i==3){
            break;//跳出回圈
        }
        console.log(i);//0 1 2
    }
</script>
</body>
</html>

陣列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script>
       //方式一
       let arr = new Array();
       arr[0] = 'a';
       arr[1] = 100;
       arr[2] = true;
       console.log(arr[0]);
       console.log(arr[1]);
       console.log(arr[2]);
       console.log(arr[3]);//undefined

       //方式二
       //let arr1 = new Array('a',true,200,10.6);

       //方式三
       let arr1 = ['a',true,200,10.5];

       console.log(arr1[0]);
       console.log(arr1[1]);
       console.log(arr1[2]);
       console.log(arr1[3]);


       //陣列遍歷一
       for(let i = 0;i<arr1.length;i++){
           console.log(arr1[i]);
       }
       //陣列遍歷二
       arr1.forEach(function (item,index){
          // console.log(item);
           console.log(arr1[index]);
       })
   </script>
</body>
</html>

物件

String物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let str1 = '哈哈哈哈哈';
    console.log(typeof  str1);//string
    let str2 = new String("哈哈哈哈哈");
    console.log(typeof  str2);//object
    console.log(str1==str2);//true
    console.log(str1===str2);//false

    let num1 = 100;
    let num2 = new Number(100);
    console.log(typeof  num1);//number
    console.log(typeof  num2);//object
    console.log(typeof  num2.valueOf());//number
    console.log(typeof  num2.toString());//string

    console.log(num2==num1);//true
    console.log(num2===num1);//false


    let b1 = true;
    // 0、null、""、false、undefined、NaN，那么物件的值為false，
    let b2 = new Boolean();

    let s = '';
    if(s){
        console.log('aa');
    }

</script>


</body>
</html>

日期物件

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let date = new Date();
    console.log(date.getTime());
    //把Date物件轉換為字串
    console.log(date.toString());

    let dateStr1 = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
    console.log(dateStr1);

    let dateStr2 = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    console.log(dateStr1);
</script>
</body>
</html>

自定義物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //{}定義物件   []定義陣列
    let stu = {
        name: '張三',
        age: 18,
        sex: '男',
        love: ['足球', '籃球'],
        cls: {
            name: '001班',
            num: "001"
        }
    }

    stu.name = "李四";
    console.log(stu.name);
    console.log(stu.love.toString());
    console.log(stu.cls.name);
    console.log(stu.cls.num);
</script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/287506.html

標籤：其他

上一篇：vsCode 快速生成vue 模板

下一篇：VUE學習筆記：15.模塊化開發之webpack使用組態檔打包