前端基础JS

数字型

八进制十六进制写法

理解最值

NaN

字符串型

内双外单反之也可
转义字符


长度获取+拼接

拼接加强

布尔型

true当1false当0

unndefined和null

获取变量数据类型

typeof

控制台颜色

转换

转字符串类型

转换为数字型

先学会上面的再学下面

案例

转换成布尔型

简单加法器

运算符

注意浮点数

表达式和返回值

递增递减



比较运算符
三等是全等，数据类型也得相同，二等值相同就行

逻辑运算符

短路运算


赋值运算

优先级

流程控制

顺序结构
分支结构（先判断后分支）
if语句

<script>
var age=prompt('请输入您的年龄');
if(age>=18){
  alert('可以进入');
}else{
  alert('好好学习');
}
</script>

判断是否是闰年

<script>
       var year=prompt('请输入年份');
       if(year%4==0&&year%100!=0||year%400==0){
       alert('输入的是闰年');
       }else{
       alert('输入的是平年');
       }
    </script>

<script>
       var score=prompt('请输入分数');
       if(score>=90){
       alert('A');
       }else if(score>=80){
        alert('B');
       }else if(score>=60){
        alert('C');
       }else {
       alert('D');
       }
    </script>

三元表达式

倒计时效果

 <script>
      var time=prompt('输入0-59之间的数字');
      var result=time<10?'0'+time:time;
      alert(result);
    </script>

switch语句
特定值语句

注意事项

区别

循环结构
for循环

重复相同代码

重复不相同代码（引引加加）

求和

var sum=0;
      for(var i=1;i<=100;i++){
      <!--      sum=sum+i-->
      sum+=i;
      }
      console.log(sum);

求学生成绩案例

 <script>
      var num=prompt('请输入班级人数：');
      var sum=0;
      var average=0;
      for(var i=1;i<=num;i++){
      var score=prompt('请输入第'+i+'个学生成绩');
      sum=sum+parseFloat(score);
      }
      average=sum/num;
      alert('班级总成绩：'+sum);
      alert('班级平均分：'+average);
    </script>

一行打印五个星星

双重for循环

5行4列

<script>
      var str='';
      for (var i=1;i<=5;i++){
      for(var j=1;j<=4;j++){
      str=str+'*';
      }
      str=str+'\n';
      }
      console.log(str);
    </script>

n行n列
外行内列

倒三角

<script>
      var str='';
      for (var i=1;i<=5;i++){
      for(var j=i;j<=5;j++){
      str=str+'*';
      }
      str=str+'\n';
      }
      console.log(str);
    </script>

九九乘法表

<script>
      var str='';
      for (var i=1;i<=9;i++){
      for(var j=1;j<=i;j++){
      str=str+'*';
      }
      str=str+'\n';
      }
      console.log(str);
    </script>

<script>
      var str='';
      for (var i=1;i<=9;i++){
      for(var j=1;j<=i;j++){
      <!--      str=str+'*';-->
      str+=j+'x'+i+'='+i*j+'\t';
      }
      str=str+'\n';
      }
      console.log(str);
    </script>

while循环

比较复杂得循环可用

<script>
        var message=prompt('你爱我吗？');
        while (message !=='我爱你'){
        message=prompt('你爱我吗？');
        }
        alert('我也爱你呀！');
    </script>

do while

循环小结

continue关键字

break关键字

数组

创建

获取

遍历

数组长度arr.length

和和平均数

<script>
        var arr=[2,6,1,7,4];
        var sum=0;
        var average=0;
        for (var i=0;i<arr.length;i++){
        sum+=arr[i];
        }
        average=sum/arr.length;
        console.log(sum,average);
    </script>

最大值

<script>
        var arr=[2,6,1,7,4];
        var max=arr[0];
        for (var i=1;i<arr.length;i++){
        if (arr[i]>max){
        max=arr[i];
        }
        }
        console.log('最大值：'+max);
        average=sum/arr.length;
        console.log(sum,average);
    </script>

数组转换为字符串

新增元素

依次追加元素

筛选数组


案例
删除元素

<script>
       var arr=[2,1,3,5,32,44,4];
       var newArr=[];
       for (var i=0;i<arr.length;i++){
       if (arr[i]!=1){
       newArr[newArr.length]=arr[i];
       }
       }
       console.log(newArr);
    </script>

翻转数组

<script>
       var arr=[2,1,3,5,32,44,4];
       var newArr=[];
       for (var i=arr.length-1;i>=0;i--){
       newArr[newArr.length]=arr[i]
       }
       console.log(newArr);
    </script>

冒泡排序

 <script>
       var arr=[2,1,3,5,32,44,4];
       for (var i=0;i<=arr.length-1;i++){
       for (var j=0;j<=arr.length-i-1;j++){
       if (arr[j]>arr[j+1]){
       var temp=arr[j];
       arr[j]=arr[j+1];
       arr[j+1]=temp;
       }
       }
       }
       console.log(arr);
    </script>

函数

函数使用

求和

<script>
      function getSum(){
      var sum=0;
      for (var i=1;i<=100;i++){
      sum+=i;
      }
      console.log(sum);
      }
      //调用
      getSum();
    </script>

带参数的函数

求和

形参和实参个数

返回值return

return终止函数

无return

arguments


翻转reverse

封装冒泡排序

 <script>
    function sort(arr){
    for (var i=0;i<arr.length-1;i++){
    for (var j=0;j<arr.length-i-1;j++){
    if (arr[j]>arr[j+1]){
    var temp=arr[j];
    arr[j]=arr[j+1];
    arr[j+1]=temp;
    }
    }
    }
    return arr;
    }
    var arr1=sort([1,4,2,5,9]);
    console.log(arr1);
    </script>

调用函数

声明

作用域

局部作用域
命名可重复

变量的作用域

作用域链
离得近就是输出谁

预解析

对象

特征用属性表示
行为用方法来表示
创建对象

变量属性函数区别

 <script>
   var obj=new Object();
   obj.uname='张三';
   obj.age=18;
   obj.sex='男';
   obj.sayHi=function(){
   console.log('hi~');
   }
   console.log(obj.uname);
   console.log(obj['sex']);
   obj.sayHi();
    </script>

构造函数创建对象

new
遍历对象

内置对象

查文档
MDN/W3C

Math对象

 <script>
     var myMath={
     PI:3.14,
     max:function(){
     var max=arguments[0];
     for(var i=1;i<arguments.length;i++){
     if(arguments[i]>max){
     max=arguments[i];
     }
     }
     return max;
     },
     min:function(){
     var min=arguments[0];
     for(var i=1;i<arguments.length;i++){
     if(arguments[i] <min){
     min=arguments[i];
     }
     }
     return min;
     }
     }
     console.log(myMath.PI);
     console.log(myMath.max(1,5,9));
     console.log(myMath.min(1,5,9));
    </script>

Math绝对值和取整


随机数random()
4改arr.length-1

随机猜数字

<script>
     function getRandom(min,max){
     return Math.floor(Math.random() *(max-min+1))+min;
     }
     var random=getRandom(1,10);
     while(true){
     var num=prompt('1-10你来猜');
     if(num>random){
     alert('你猜大了');
     }else if (num<random){
     alert('你猜小了');
     }else{
     alert('猜对了');
     break;
     }
     }
    </script>

日期对象

日期格式化




倒计时

 <script>
     function countDown(time){
    var nowTime=+new Date();
    var inputTime=+new Date(time);
    var times=(inputTime-nowTime)/1000;
    var d=parseInt(times/60/60/24);
    d=d<10?'0'+d:d;
    var h=parseInt(times/60/60%24);
    h=h<10?'0'+h:h;
    var m=parseInt(times/60%60);
    m=m<10?'0'+m:m;
    var s=parseInt(times%60);
    s=s<10?'0'+s:s;
    return d+'天'+h+'时'+m+'分'+s+'秒';
     }
     console.log(countDown('2023-10-21 16:40:00'));
     var date=new Date();
     console.log(date);
    </script>

数组对象

检测

添加删除数组

筛选数组

reverse/sort排序

获取数组索引

数组去重unique

转换为字符串

字符串对象

不可变
数值太大会变卡顿

字符串对象

次数

返回值
查表
出现最多的字符和次数

 <script>
   var str='aushuooodofodd';
   var o={};
   for (var i=0;i<str.length;i++){
   var chars=str.charAt(i);
   if (o[chars]){
   o[chars]++;
   }else{
   o[chars]=1;
   }
   }
   console.log(o);
    </script>

 <script>
   var str='aushuooodofodd';
   var o={};
   for (var i=0;i<str.length;i++){
   var chars=str.charAt(i);
   if (o[chars]){
   o[chars]++;
   }else{
   o[chars]=1;
   }
   }
   console.log(o);
   var max=0;
   var ch='';
   for(var k in o){
   if(o[k]>max){
   max=o[k];
   ch=k;
   }
   }
   console.log(max);
   console.log('最多字符是'+ch);
    </script>

截取拼接字符串

替换和转换为数组

JS学完基础学进阶