search

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

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

Tlilam的PHP之路
Tlilam的PHP之路原创
2020年10月18日 15:29:09820浏览

JS的语法

  • JS有变量声明，推荐写上，变量名称和PHP一样字母数字下划线组合
  • 变量声明方式
    • var 变量声明，允许重复声明（默认全局作用域）
    • let 带块作用域的变量声明，禁止重复声明（根据场景声明成私有或全局）
    • const 常用于常量声明，常量一般用在对象上
  1. <script type="text/javascript">
  2. //可以多次这样声明
  3. var num = 1;
  4. var num = 2;
  5. //禁止多次声明
  6. let name = 'huang';
  7. //就不可以再写let name
  8. let name = 'wen'
  9. //但是可以更新
  10. name = 'ying'
  11. //推荐以后尽量使用let 声明
  12. </script>
  • 变量的定义要注意两个特殊类型，undefined值是声明了但没赋值，null值是会被垃圾回收机制进行回收的，undefined不会被回收
  • 变量的完整流程
    1. <script type="text/javascript">
    2.   // 声明
    3.   let email;
    4.   console.log(email);
    5.   // 赋值:第一次也叫初始化
    6.   email = null;
    7.   console.log(email);
    8.   // 更新: 第二次以及以后赋值
    9.   email = "peter@qq.com";
    10.   console.log(email);
    11.   // 通常是将声明与初始化合并
    12.   let num = 100;
    13. </script>

JS的数据类型/判断

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

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

    1.   <script type="text/javascript">
    2.        // 1.创建string类型
    3.       let username = 'wl';
    4.       // typeof关键字判断类型
    5.       console.log(typeof username);
    7.       // 2.创建number类型
    8.       let age=44;
    9.       console.log(typeof age);
    11.       // 3.创建boolean类型
    12.       let isMan = true;
    13.       console.log(typeof isMan);
    14.   </script>

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

    1.   <script type="text/javascript">
    2.       // 4.创建undefined
    3.       let education;
    4.       console.log(typeof education);
    6.       // 5.创建null
    7.       let deposit=null;
    8.       console.log(typeof deposit);
    9.   </script>
  • 3.对象类型：object，array，function(全局对象window)
    1.   <script type="text/javascript">
    2.       // 6.创建object对象
    3.       let obj = {
    4.           id:'abs123',
    5.           name:'wl',
    6.           age:44,
    7.           'hello world':'hello php',
    8.           getMore:function(){
    9.               return 'no more';
    10.           }
    11.       }
    12.       // 类型判断
    13.       console.log(typeof obj);
    14.       // 调用对象的属性方法
    15.       console.log( obj.getMore() );
    16.       console.log( obj.name );
    17.       // 调用特殊名称的属性
    18.       console.log( obj['hello world'] );
    19.       // 7.创建数组
    20.       let arr=['1','2','3','4'];
    21.       // 使用typeof无法判断出数组，只能判断出是对象类型
    22.       console.log(typeof arr);
    23.       // 使用Array.isArray() 方法进行判断，返回true/false
    24.       console.log(Array.isArray( obj ));
    25.       // 8.创建function
    26.       function fun(a,b,c){
    27.           return '123';
    28.       }
    29.       // typeof 可以识别出function
    30.       console.log(typeof fun);
    31.       // console.dir展开显示一个对象的所有属性和方法
    32.       console.dir(fun);
    33.   </script>

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

数组的常用方法

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

    1.   <script>
    2.         let arr1 = [1,2,3,4,5,6,7,8,9];
    3.         // 在尾部追加元素
    4.         arr1.push("abc");
    5.         console.log(arr1);
    6.   </script>

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

    1.   <script>
    2.       let arr1 = [1,2,3,4,5,6,7,8,9];
    3.       // 获取数组的元素片段,从下标0开始获取两位
    4.       console.log(arr1.slice(0,2));
    5.   </script>

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

    1.   <script>
    2.       let arr1 = [1,2,3,4,5,6,7,8,9];
    3.       // 删除，返回被删除的元素组
    4.       // console.log(arr1.splice(1,2));
    5.       // console.log(arr1);
    7.       // 更新，返回被替换的元素组
    8.       // console.log(arr1.splice(1,2, "果汁", "黄瓜"));
    9.       // console.log(arr1);
    11.       // 插入，返回空数组
    12.       console.log(arr1.splice(1,0, "果汁", "黄瓜"));
    13.       console.log(arr1);
    14.   </script>

js中的流程控制

  • 单分支 if(){}判断
  • 双分支 if(){} else{}判断
  • 多分支 if(){} else if(){} else{}判断，switch判断
  1. <script>
  2.         // 1.单分支判断
  3.         if(true){
  4.             console.log('条件成立执行');
  5.         }
  7.         // 2.双分支判断
  8.         if(false){
  9.             console.log('条件成立执行');
  10.         }else{
  11.             console.log('条件不成立执行');
  12.         }
  14.         // 3.多分支 if判断
  15.         var age = 68;
  16.         if(age>=0 && age <=14){
  17.             console.log('少年');
  18.         }else if(age>=15 && age<=24){
  19.             console.log('青年');
  20.         }else if(age>=25 && age<=64){
  21.             console.log('壮年');
  22.         }else if(age >= 65){
  23.             console.log('老年');
  24.         }else{
  25.             console.log('未知');
  26.         }
  28.         // 4.多分支 switch判断
  29.         var age = 77;
  30.         switch(true){
  31.             case age>=16 && age<45:
  32.                 console.log('可高强度劳动力');
  33.             break;
  34.             case age>=45 && age <60:
  35.                 console.log('普通劳动力'); 
  36.             break;
  37.             case age>=60 :
  38.                 console.log('退休啦！'); 
  39.             break;
  40.             default:
  41.                 console.log('未成年');
  42.         }
  44.     </script>

Js的循环遍历

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>js中的循环遍历</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>item1</li>
  11.       <li>item2</li>
  12.       <li>item3</li>
  13.     </ul>
  14.     <script>
  15.         // 拿到第一个UL里的li
  16.         let ls= document.querySelectorAll('ul:first-of-type li');
  17.         console.log(ls);
  18.         var arr = [1,2,3,4,5];
  19.         // 1.for循环
  20.         for(var i=0; i<ls.length; i++){
  21.             ls[i].style.color = "red";
  22.         }
  23.         for(var i=0; i<arr.length; i++){
  24.             console.log(arr[i]);
  25.         }
  26.         // 2.while循环
  27.         var a = 0;
  28.         while(a < ls.length){
  29.             ls[a].style.color = "blue";
  30.             a++;
  31.         }
  32.         // 3.for-of循环 
  33.         for (let item of ls) {
  34.             item.style.color = "cyan";
  35.         }
  36.         // 4.forEach()循环
  37.         ls.forEach(function(value,index,array){
  38.             console.log(value, index, array);
  39.             value.style.color = "pink";
  40.         });
  42.         // 5.for-in循环数组，for循环的简略版,比较合适数组使用
  43.         for (let index in arr) {
  44.             // console.log(index);
  45.         }
  46.     </script>
  47.   </body>
  48. </html>

JSON格式的字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 编写json格式字符串的商品信息
  11.         let sj  = `
  12.             {
  13.                 "type":"phone",
  14.                 "name":"huawei",
  15.                 "is4g":true,
  16.                 "color":["black","white","blue","red"],
  17.                 "camera":{
  18.                     "back":"18000000px",
  19.                     "front":"16000000px"
  20.                 }
  21.             }
  22.         `;
  23.         console.log( sj );
  24.         // 创建js对象，转为JSON字符串
  25.         const xinxi = {
  26.             id: "10203222",
  27.             name: "书迎",
  28.             age: 24,
  29.         };
  30.         // 转为json字符串
  31.         let strJson = JSON.stringify(xinxi);
  32.         console.log(strJson);
  33.     </script>
  34. </body>
  35. </html>

JSON工具验证，自己编写的JSON字符串

上一条：PHP函数和字符串下一条：20201009作业：css元素样式来源和css优先级冲突的解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多