美文网首页网页前端后台技巧(CSS+HTML)
web前端入门到实战:JS基础-语法+流程控制语句+函数+内置对

web前端入门到实战:JS基础-语法+流程控制语句+函数+内置对

作者: 大前端世界 | 来源:发表于2020-01-03 22:05 被阅读0次

    JS语法:

    Javascript基本数据类型:undefined/null/Boolean/number/string

    复杂数据类型:object

    typeof用来检测变量的数据类型

    typeof的使用方法有两种:

    (1)typeof 变量

    (2) typeof(变量)

    undefined派生自null,所以undefined==null返回的结果是true


    用于任何数据类型,Number()可以将非数值转化为数值,但是有一些数据是不能转化为数值的,如果这类数据通过Number()进行强制转化的话,会返回NaN

    var a=Number(name_01);
    
    

    用于把字符串转换为数值

    var b=parseInt("28px") var d=parseFloat("12.34.56px");
    
    

    不知道值是不是null或者undefined,可以使用String(),可以将任何类型的值转为字符串

    var idstr=ids.toString();
    console.log(String(m));
    
    

    在运算中,除了加法,其余的运算都会将字符串先转换为数字之后再进行计算,但是两个数据相加,如果有一方是字符串的话,加号的作用就是将他们进行拼接

    如: 数字5和字符串"5"进行加减乘除运算,结果分别是:55 0 25 1


    &&逻辑与:

    如果第一个操作数隐式转换后为true,则返回第二个操作数;

    如果前面的都为true,则返回最后一个操作数。

    如果第一个操作数隐式转换后为false,则返回第一个操作数;

    如果有一个是null,则返回null;

    如果有一个是undefined,则返回undefined;

    如果有一个是NaN,则返回NaN


    ||逻辑或:

    如果第一个操作数隐式转换为true,则返回第一个操作数;

    如果第一个操作数隐式转换为false,则返回第二个操作数,依次往后;

    如果两个数都是null,则返回null;

    如果两个数都是undefined,则返回undefined;

    如果两个数都是NaN,则返回NaN;


    !逻辑非

    无论如何都会返回一个布尔值

    !!对逻辑非的结果再求反;


    JS****流程控制语句:

    var age=prompt("请设置您的密码"); if(age<18){
              alert("您还没有成年");
           }else{
              alert("您已成年,请提供您的身份证号");
           } if(age.length!=6){
              alert("请输入6位数字密码");
           }else{ if(isNaN(age)){
                alert("密码必须是6位数字");
              }else{
                alert("密码设置正确");
              }
           }
    专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    

    NaN也是一个number类型的一种,typeof NaN==number

    var week=new Date().getDay(); var weekstr="";
           console.log(week); // 0-6
           // 多条件的判断 switch
           switch(week){ case 0:
              weekstr="日"; break;  // 退出
              case 1:
              weekstr="一"; break; case 2:
              weekstr="二"; break; case 3:
              weekstr="三"; break; case 4:
              weekstr="四"; break; case 5:
              weekstr="五"; break; default:
              weekstr="六";
           }
           document.write("今天是星期"+weekstr);
    
    

    for循环嵌套:

    外层为假时内层不执行;

    先执行外层,再执行内层;当内层为假时再执行外层。


    JS****函数:

    函数执行完return之后立即停止并退出函数。

    如果return后面没有值,默认返回undefined


    js非严格模式下,可以使用arguments来改变传入的参数的值

    function inner(){ // arguments 
     console.log(arguments.length);
              console.log(arguments[1]); // 索引是从0开始的正整数
     }
           inner(10,5); function add(num1,num2){    
              arguments[0]=99;
              console.log(num1);
           }
           add(55,88)
    
    

    JS****内置对象【数组】:

    创建数组的两种方式:

    new Array()

    字面量方式 []


    arr.length 获取数组长度

    过设置length可以从数组的末尾移除项或者添加新项


    统计员工工资的代码:

    (1) 不停的接收用户输入的员工的工资,直到用户输入“退出”便不再弹出“输入工资”的窗口

    (2) 把用户输入的数据保存在一个数组中

    var input,arr=[]; while(input!='退出'){
                input=prompt('请输入员工工资');
                arr[arr.length]=input;
           }
           arr.length-=1;//不存入'退出'
           document.write(arr);
    
    

    数组的栈方法:

    // push从数组末尾加入
           var colors=new Array("red","green"); var len=colors.push("blue","yellow","blank");
           console.log(len); // unshift从数组头部加入
           var nums=[2,7,8,6]; var size=nums.unshift(99,66); // pop从数组尾部删除,返回值是被删除的元素
           var n=nums.pop();
           console.log(nums); // shift从数组头部删除,返回值是被删除的元素
           var m=colors.shift();
           console.log(m);
    
    
    // join 把数组元素转为字符串
           var nums=[2,4,5]; var str=nums.join();  //2,4,5 
           var words=["border","left","color"]; // border-left-color
           var wordstr=words.join("-");
           console.log(wordstr); // reverse 数组中元素反序
     nums.reverse();
           console.log(nums); var strs=["a","b","c","d"]; // 返回dcba这个字符串
           var newstr=strs.reverse().join("")
           console.log(newstr); // 29,5,24,17,32
           var arr=[9,23,15,-99,88,12,-2]; //sort()对数组元素进行排序,按字符串格式进行排序
    var _arr1=[8,95,31,1,5];
    
            console.log(_arr1.sort());//输出1,31,5,8,95,因为会先将元素转换为字符串,用字符串的首字符进行比较,
           //如果第一个字符相同,继续比较第二个字符
           //针对上面的情况,使用以下方法解决
           // 降序 return 参数1<参数2
           arr.sort(function(a,b){return a<b}); // 升序 return 参数1>参数2
           arr.sort(function(a,b){return a>b});
           console.log(arr);
    
    
    var arr1=["a","b","c"],
              arr2=["d","e",1,3],
              arr3; // concat 连接两个或多个数组
          arr3=arr1.concat(arr2,["m",99,8]);
          console.log(arr3); // slice(start,end) end下标 截取数组一部分返回
          // 包含start,不包含end
          // start负数,就是数组长度+该长度
          // 如果没有end,就从start一直到结束
          var colors=["red","green","blue","yellow","orange"]; var newColors=colors.slice(1,3); var newColors2=colors.slice(2,4); var newColors3=colors.slice(-4,3); // 1,3
          console.log(newColors3);
    专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
    (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
    
    // 拷贝数组的方法
          var a=[1,"yes",3],
              b; // 1、数组遍历,push
          b=new Array(); for(var i=0;i<a.length;i++){
             b.push(a[i]);
          } // 2、concat()
          b=[].concat(a); // 3、slice();
          b=a.slice(0);
          console.log(b);
    
    
    //splice返回值是被删除的项,如果没有删除则返回[]
           var arr=["a","b","c","d","e","f"]; // 删除,从index开始删除count个数,返回被删除的
           // splice(index,count)
           // count为0 则不删除;count不设置,则从Index开始删除到最后
           var delArr=arr.splice(2,3); // 插入,从index开始,删除count个,插入item1...
           // splice(index,count,item1...)
           var insertArr=arr.splice(3,0,"m","n",88); // 替换
           var replaceArr=arr.splice(1,2,"x","y","z");
           console.log(arr);
           console.log(replaceArr);
    
    
    var nums=[1,7,5,7,8,1,6,9]; //indexOf(seachvalue,startIndex)
           //返回查找的项在数组中的位置,没有则返回-1
           var pos=nums.indexOf(7,2); //lastIndexOf()从数组末尾开始查找
           var pos=nums.lastIndexOf(1); var pos=nums.indexOf("7");
           console.log(pos);
    
    

    indexOf()方法有兼容性问题,解决方案:

    // 封装一个方法实现indexOf的功能
           function ArrayIndexOf(arr,value){ // 检测value在arr中出现的位置
              for(var i=0;i<arr.length;i++){ if(arr[i]===value){ return i;
                 }
              } return -1;
           }
    
    

    相关文章

      网友评论

        本文标题:web前端入门到实战:JS基础-语法+流程控制语句+函数+内置对

        本文链接:https://www.haomeiwen.com/subject/gbkooctx.html