欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript变量与数据类型，数组的常用方法，流程控制，循环，和JSON格式字符串

程序员文章站 2022-03-24 21:20:46
...

JS的语法

  • JS有变量声明，推荐写上，变量名称和PHP一样字母数字下划线组合
  • 变量声明方式
    • var 变量声明，允许重复声明（默认全局作用域）
    • let 带块作用域的变量声明，禁止重复声明（根据场景声明成私有或全局）
    • const 常用于常量声明，常量一般用在对象上
    

  1. <script type="text/javascript">
    2. 

  2. //可以多次这样声明
    3. 

  3. var num = 1;
    4. 

  4. var num = 2;
    5. 

  5. //禁止多次声明
    6. 

  6. let name = 'huang';
    7. 

  7. //就不可以再写let name
    8. 

  8. let name = 'wen'
    9. 

  9. //但是可以更新
    10. 

  10. name = 'ying'
    11. 

  11. //推荐以后尽量使用let 声明
    12. 

  12. </script>
    13.
  • 变量的定义要注意两个特殊类型，undefined值是声明了但没赋值，null值是会被垃圾回收机制进行回收的，undefined不会被回收
  • 变量的完整流程
      

    1. <script type="text/javascript">
      2. 

    2.   // 声明
      3. 

    3.   let email;
      4. 

    4.   console.log(email);
      5. 

    5.   // 赋值:第一次也叫初始化
      6. 

    6.   email = null;
      7. 

    7.   console.log(email);
      8. 

    8.   // 更新: 第二次以及以后赋值
      9. 

    9.   email = "peter@qq.com";
      10. 

    10.   console.log(email);
      11. 

    11.   // 通常是将声明与初始化合并
      12. 

    12.   let num = 100;
      13. 

    13. </script>
      14.

JS的数据类型/判断

类型判断typeof关键字，数组需要使用Array.isArray()判断

  • 1.原始类型/基本类型：string,number,boolean

      

    1.   <script type="text/javascript">
      2. 

    2.        // 1.创建string类型
      3. 

    3.       let username = 'wl';
      4. 

    4.       // typeof关键字判断类型
      5. 

    5.       console.log(typeof username);
      6. 

      7. 

    7.       // 2.创建number类型
      8. 

    8.       let age=44;
      9. 

    9.       console.log(typeof age);
      10. 

      11. 

    11.       // 3.创建boolean类型
      12. 

    12.       let isMan = true;
      13. 

    13.       console.log(typeof isMan);
      14. 

    14.   </script>
      15.

  • 2.特殊类型：undefined，null（null代表空对象，类型判断是个对象）

      

    1.   <script type="text/javascript">
      2. 

    2.       // 4.创建undefined
      3. 

    3.       let education;
      4. 

    4.       console.log(typeof education);
      5. 

      6. 

    6.       // 5.创建null
      7. 

    7.       let deposit=null;
      8. 

    8.       console.log(typeof deposit);
      9. 

    9.   </script>
      10.
  • 3.对象类型：object，array，function(全局对象window)
      

    1.   <script type="text/javascript">
      2. 

    2.       // 6.创建object对象
      3. 

    3.       let obj = {
      4. 

    4.           id:'abs123',
      5. 

    5.           name:'wl',
      6. 

    6.           age:44,
      7. 

    7.           'hello world':'hello php',
      8. 

    8.           getMore:function(){
      9. 

    9.               return 'no more';
      10. 

    10.           }
      11. 

    11.       }
      12. 

    12.       // 类型判断
      13. 

    13.       console.log(typeof obj);
      14. 

    14.       // 调用对象的属性方法
      15. 

    15.       console.log( obj.getMore() );
      16. 

    16.       console.log( obj.name );
      17. 

    17.       // 调用特殊名称的属性
      18. 

    18.       console.log( obj['hello world'] );
      19. 

    19.       // 7.创建数组
      20. 

    20.       let arr=['1','2','3','4'];
      21. 

    21.       // 使用typeof无法判断出数组，只能判断出是对象类型
      22. 

    22.       console.log(typeof arr);
      23. 

    23.       // 使用Array.isArray() 方法进行判断，返回true/false
      24. 

    24.       console.log(Array.isArray( obj ));
      25. 

    25.       // 8.创建function
      26. 

    26.       function fun(a,b,c){
      27. 

    27.           return '123';
      28. 

    28.       }
      29. 

    29.       // typeof 可以识别出function
      30. 

    30.       console.log(typeof fun);
      31. 

    31.       // console.dir展开显示一个对象的所有属性和方法
      32. 

    32.       console.dir(fun);
      33. 

    33.   </script>
      34.

模板字面量使用反引号，变量使用${变量名，变量名},${id}字符串${name}字符串输出大量字符串和变量内容

数组的常用方法

  • arr.push()方法，在尾部追加元素

      

    1.   <script>
      2. 

    2.         let arr1 = [1,2,3,4,5,6,7,8,9];
      3. 

    3.         // 在尾部追加元素
      4. 

    4.         arr1.push("abc");
      5. 

    5.         console.log(arr1);
      6. 

    6.   </script>
      7.

  • arr.slice() 方法，获取数组的元素片段

      

    1.   <script>
      2. 

    2.       let arr1 = [1,2,3,4,5,6,7,8,9];
      3. 

    3.       // 获取数组的元素片段,从下标0开始获取两位
      4. 

    4.       console.log(arr1.slice(0,2));
      5. 

    5.   </script>
      6.

  • arr.splice() 方法，获取被删除的元素，还可以实现对数组的增删改

      

    1.   <script>
      2. 

    2.       let arr1 = [1,2,3,4,5,6,7,8,9];
      3. 

    3.       // 删除，返回被删除的元素组
      4. 

    4.       // console.log(arr1.splice(1,2));
      5. 

    5.       // console.log(arr1);
      6. 

      7. 

    7.       // 更新，返回被替换的元素组
      8. 

    8.       // console.log(arr1.splice(1,2, "果汁", "黄瓜"));
      9. 

    9.       // console.log(arr1);
      10. 

      11. 

    11.       // 插入，返回空数组
      12. 

    12.       console.log(arr1.splice(1,0, "果汁", "黄瓜"));
      13. 

    13.       console.log(arr1);
      14. 

    14.   </script>
      15.

js中的流程控制

  • 单分支 if(){}判断
  • 双分支 if(){} else{}判断
  • 多分支 if(){} else if(){} else{}判断，switch判断
    

  1. <script>
    2. 

  2.         // 1.单分支判断
    3. 

  3.         if(true){
    4. 

  4.             console.log('条件成立执行');
    5. 

  5.         }
    6. 

    7. 

  7.         // 2.双分支判断
    8. 

  8.         if(false){
    9. 

  9.             console.log('条件成立执行');
    10. 

  10.         }else{
    11. 

  11.             console.log('条件不成立执行');
    12. 

  12.         }
    13. 

    14. 

  14.         // 3.多分支 if判断
    15. 

  15.         var age = 68;
    16. 

  16.         if(age>=0 && age <=14){
    17. 

  17.             console.log('少年');
    18. 

  18.         }else if(age>=15 && age<=24){
    19. 

  19.             console.log('青年');
    20. 

  20.         }else if(age>=25 && age<=64){
    21. 

  21.             console.log('壮年');
    22. 

  22.         }else if(age >= 65){
    23. 

  23.             console.log('老年');
    24. 

  24.         }else{
    25. 

  25.             console.log('未知');
    26. 

  26.         }
    27. 

    28. 

  28.         // 4.多分支 switch判断
    29. 

  29.         var age = 77;
    30. 

  30.         switch(true){
    31. 

  31.             case age>=16 && age<45:
    32. 

  32.                 console.log('可高强度劳动力');
    33. 

  33.             break;
    34. 

  34.             case age>=45 && age <60:
    35. 

  35.                 console.log('普通劳动力'); 
    36. 

  36.             break;
    37. 

  37.             case age>=60 :
    38. 

  38.                 console.log('退休啦！'); 
    39. 

  39.             break;
    40. 

  40.             default:
    41. 

  41.                 console.log('未成年');
    42. 

  42.         }
    43. 

    44. 

  44.     </script>
    45.

Js的循环遍历

以下循环除了for in循环比较合适数组，其他循环都合适对象或数组

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>js中的循环遍历</title>
    7. 

  7.   </head>
    8. 

  8.   <body>
    9. 

  9.     <ul>
    10. 

  10.       <li>item1</li>
    11. 

  11.       <li>item2</li>
    12. 

  12.       <li>item3</li>
    13. 

  13.     </ul>
    14. 

  14.     <script>
    15. 

  15.         // 拿到第一个UL里的li
    16. 

  16.         let ls= document.querySelectorAll('ul:first-of-type li');
    17. 

  17.         console.log(ls);
    18. 

  18.         var arr = [1,2,3,4,5];
    19. 

  19.         // 1.for循环
    20. 

  20.         for(var i=0; i<ls.length; i++){
    21. 

  21.             ls[i].style.color = "red";
    22. 

  22.         }
    23. 

  23.         for(var i=0; i<arr.length; i++){
    24. 

  24.             console.log(arr[i]);
    25. 

  25.         }
    26. 

  26.         // 2.while循环
    27. 

  27.         var a = 0;
    28. 

  28.         while(a < ls.length){
    29. 

  29.             ls[a].style.color = "blue";
    30. 

  30.             a++;
    31. 

  31.         }
    32. 

  32.         // 3.for-of循环 
    33. 

  33.         for (let item of ls) {
    34. 

  34.             item.style.color = "cyan";
    35. 

  35.         }
    36. 

  36.         // 4.forEach()循环
    37. 

  37.         ls.forEach(function(value,index,array){
    38. 

  38.             console.log(value, index, array);
    39. 

  39.             value.style.color = "pink";
    40. 

  40.         });
    41. 

    42. 

  42.         // 5.for-in循环数组，for循环的简略版,比较合适数组使用
    43. 

  43.         for (let index in arr) {
    44. 

  44.             // console.log(index);
    45. 

  45.         }
    46. 

  46.     </script>
    47. 

  47.   </body>
    48. 

  48. </html>
    49.

JSON格式的字符串

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>Document</title>
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9.     <script>
    10. 

  10.         // 编写json格式字符串的商品信息
    11. 

  11.         let sj  = `
    12. 

  12.             {
    13. 

  13.                 "type":"phone",
    14. 

  14.                 "name":"huawei",
    15. 

  15.                 "is4g":true,
    16. 

  16.                 "color":["black","white","blue","red"],
    17. 

  17.                 "camera":{
    18. 

  18.                     "back":"18000000px",
    19. 

  19.                     "front":"16000000px"
    20. 

  20.                 }
    21. 

  21.             }
    22. 

  22.         `;
    23. 

  23.         console.log( sj );
    24. 

  24.         // 创建js对象，转为JSON字符串
    25. 

  25.         const xinxi = {
    26. 

  26.             id: "10203222",
    27. 

  27.             name: "书迎",
    28. 

  28.             age: 24,
    29. 

  29.         };
    30. 

  30.         // 转为json字符串
    31. 

  31.         let strJson = JSON.stringify(xinxi);
    32. 

  32.         console.log(strJson);
    33. 

  33.     </script>
    34. 

  34. </body>
    35. 

  35. </html>
    36.

JSON工具验证，自己编写的JSON字符串
JavaScript变量与数据类型，数组的常用方法，流程控制，循环，和JSON格式字符串

上一篇： 魔术方法__isset()、__unset()、__sleep()、__wakeup()与__call()、__callStatic()的实例使用

下一篇： 全面了解数组与使用mysqli面向对象完成CURD操作

推荐阅读