Python全栈最全学习之路-WEB前端（五）

最新推荐文章于 2023-11-13 16:12:13 发布

Fresh_anyu

最新推荐文章于 2023-11-13 16:12:13 发布

阅读量153

点赞数

分类专栏： python全栈学习文章标签： javascript 字符串 js python

本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108625539

版权

python全栈学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

JavaScript提升

一、JS操作符

算术运算符：
算术运算符（基础数字运算）+ - * / %
当不上数字之间的运算的时候，+号两边一旦有字符串（引号引起来的部分），那么+号就不再是数学运算了，而是拼接，最终结果是字符串。

- / * %尽量将字符串转换成数字（隐式类型转换）
NaN：Not a Number number

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JS算术运算符</title>
</head>
<body>
<script>
   var a = 1;
   var a = "a";
   var b = 3;
   var c = a + b
   // 当不是数字之间的运算，+号两边一旦有字符串，那么+号就是拼接，最终结果是字符串。
   // var c = a + b // NaN: Not a Number
   console.log(c)
   console.log(typeof c)
</script>
</body>
</html>
```![在这里插入图片描述](https://img-blog.csdnimg.cn/2020091709385061.png#pic_center)
` 赋值运算符：`
` += -= *= /= = `这些是基本的赋值运算符，除此之外还有`++ --`，这两个都存在隐式类型转换，会全部转成数字
```html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JS运算符</title>
</head>
<body>
<script>
   // 算术运算符
   // var a = 1;
   // var a = "a";
   // var b = 3;
   // var c = a + b
   // 当不是数字之间的运算，+号两边一旦有字符串，那么+号就是拼接，最终结果是字符串。
   // var c = a + b // NaN: Not a Number
   // console.log(c)
   // console.log(typeof c)
   // 赋值运算符
   var nu = 1;
   nu += 5;
   console.log(nu);
   var na = 6;
   var nb = na ++ // nb = na; na = na + 1;
   console.log(na,nb);
   var nb = ++ na // na = na + 1; nb = na
   console.log(na,nb)
</script>
</body>
</html>

在这里插入图片描述
比较运算符：
> < != >= <= == ===
如果等号两边都是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
如果等号两边出现了null或undefined，null和undefined除了和自己相等，就彼此相等
NaN == NaN返回false，NaN和所有值包括自己都不相等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS运算符</title>
</head>
<body>
<script>
    // 算术运算符
    // var a = 1;
    // var a = "a";
    // var b = 3;
    // var c = a + b
    // 当不是数字之间的运算，+号两边一旦有字符串，那么+号就是拼接，最终结果是字符串。
    // var c = a + b // NaN: Not a Number
    // console.log(c)
    // console.log(typeof c)
    // 赋值运算符
    // var nu = 1;
    // nu += 5;
    // console.log(nu);
    // var na = 6;
    // var nb = na ++ // nb = na; na = na + 1;
    // console.log(na,nb);
    // var nb = ++ na // na = na + 1; nb = na
    // console.log(na,nb)
    // 逻辑运算
    var bo = true && false;
    console.log(bo,typeof bo);
    var ba = 1 && true && true; // 遇到假就停
    // var ba = 1 && true && 3; // && 不会把内容转换成布尔值
    console.log(ba,typeof ba)
    var bc = 0 || false || true;
    // var bc = 0 || false || 5; // 同样不会转换，遇到真就停
    console.log(bc,typeof bc);
    var bn = !3 // 隐式类型转换，将后面的数据先转换为布尔值再取反
    console.log(bn,typeof bn);
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS运算符</title>
</head>
<body>
<script>
    // 算术运算符
    // var a = 1;
    // var a = "a";
    // var b = 3;
    // var c = a + b
    // 当不是数字之间的运算，+号两边一旦有字符串，那么+号就是拼接，最终结果是字符串。
    // var c = a + b // NaN: Not a Number
    // console.log(c)
    // console.log(typeof c)
    // 赋值运算符
    // var nu = 1;
    // nu += 5;
    // console.log(nu);
    // var na = 6;
    // var nb = na ++ // nb = na; na = na + 1;
    // console.log(na,nb);
    // var nb = ++ na // na = na + 1; nb = na
    // console.log(na,nb)
    // 逻辑运算
    // var bo = true && false;
    // console.log(bo,typeof bo);
    // var ba = 1 && true && true; // 遇到假就停
    // // var ba = 1 && true && 3; // && 不会把内容转换成布尔值
    // console.log(ba,typeof ba)
    // var bc = 0 || false || true;
    // // var bc = 0 || false || 5; // 同样不会转换，遇到真就停
    // console.log(bc,typeof bc);
    // var bn = !3 // 隐式类型转换，将后面的数据先转换为布尔值再取反
    // console.log(bn,typeof bn);
    // 比较运算符
    1 != 1
    1 == 1  // 等值符，当等号两边的类型相同时，直接比较值是否相等
    1 == '1' // 若不相同，则先转化为类型相同的值，再进行比较；
    1 === 1 // 等同符，当两边值得类型相同时，直接比较值
    1 === '1' // 若类型不相同，直接返回false；
    null == undefined
    NaN == NaN
</script>
</body>
</html>

二、JS流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS流程控制</title>
</head>
<body>
<script>
    var weather = 'sunny';
    if (weather === 'rain'){
        console.log('reading');
    }else if (weather === 'sunny'){
        console.log('shopping');
    }else{
        console.log('sleep');
    } // 有花括号结尾的地方，可以不用加；
    // 简化写法
    if (weather) console.log(weather);
    var a = 1;
    a>1?2:3; // 表达式？为真的值：为假的值
    a>=1?2:3;
    switch (weather) {
        case "rain":
            console.log("reading");
            break; // 如果不加break，那么最后则会运行default
        case "sunny":
            console.log("shopping");
            break;
        default:
            console.log("sleep");
            break;
    }
</script>
</body>
</html>

在这里插入图片描述
JS中流程控制是if判断和switch选择

三、JS循环

for循环

for(initialize;test;increament){
statment}

js中的for循环相当于while的简写，更加方便
for in
JS中的for也支持类似于Python中的用法，可以遍历对象所有的属性
while循环

while（expression）{
	statement
}

while是一个基本的循环语句，expression为真的时候，就会执行循环体
do/while循环
do/while和while类似，只是会先执行一个循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS循环</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    // while和do/while循环
    // var count = 0;
    // while (count < 10){ // while用法和Python中基本类似
    //     document.write(count);
    //     count++
    // }
    // var i = 0;
    // var j = 10;
    // var sum = 0;
    // do { // do/while和循环非常相似，只不过它是在循环的尾部而不是顶部检测循环表达式
    //     sum += i * j; // 循环会至少执行一次
    //     i ++
    // }while(i < 10); // 实际使用中，那种必须要循环一次的情形并不多见
    // document.write(sum);
    // for循环
    // for(var i = 1;i<9;i++){
    //     for (var j = 1;j < 3;j++){
    //         document.write(i,j);
    //     }
    //     if(i == 5){
    //         break;
    //     }
    // }
    // var aLi = document.getElementsByTagName('li');
    // for (var i = 0;i < aLi.length;i++){ // i全局变量
    //     aLi[i].index = i;
    //     aLi[i].onclick = function(){
    //         alert(this.index);
    //     }
    // }
  /*  for(let i = 0;i < aLi.length;i++){ // 块级作用域
        aLi[i].onclick = function(){
            alert(i);
        }
    }*/
  var array = [1,2,3,4,5];
  for(var i in array){
      document.write(i,array[i]);
  }
</script>
</body>
</html>

在这里插入图片描述

四、JS字符串方法

长度：length
切片：slice
索引：indexOf
分隔：split
截取：substring
替换：replace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS字符串方法</title>
</head>
<body>
<script>
    var st = 'this is string';
    document.write(st);
    document.write(st.length);
    document.write(st[2]); // 和python类似
    // str[0] = 'S' // 同样也是不可更改的
    document.write(Object.keys(st));// 查看对象的方法
    var nu = 123;
    document.write(typeof nu.toString()); // 转变成字符串
    document.write(st.substring(1,5)); // 字符串截断
    document.write(st.slice(1,5)); // 字符串切片
    document.write(st.split('t'));// 分割
    document.write(st.indexOf('i')); // 查找，没有返回-1
</script>
</body>
</html>

五、数组方法

长度：length
追加：push
添加：unshift
删除：pop、shift
查找：indexOf
改：slice、join、sort、reverse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组方法</title>
</head>
<body>
<script>
    var arr = [1,2,3,4,5];
    console.log(arr.length); //长度
    arr.push('Python',"JS"); // 追加
    console.log(arr);
    arr.unshift("JavaScript"); // 添加
    console.log(arr);
    arr.pop(); // 后删
    console.log(arr);
    arr.shift(); // 前删
    console.log(arr);
    console.log(arr[1]); // 索引查找
    console.log(arr.indexOf(1)); // 查找元素
    arr[2] = 200;  // 修改元素
    console.log(arr);
</script>
</body>
</html>