JavaScript提升

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量35 收藏
点赞数 1
文章标签： javascript 前端 开发语言 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qvqqv/article/details/130383876
版权

JavaScript提升

（一）JS操作符

（1）算术运算符

算术运算符(基础数字运算)（ + - * / %）
当不是数字之间的运算的时候，+号两边一旦有字符串(引号引起的部分)，那么+号就不再是数学运算了，而是拼接，最终结果是字符串。
-/*% 尽量将字符串转换成数字（隐式类型转换)
NaN: Not a Number number

<body>
<script>
    // 算术运算符(基础数字运算) + - * / %
    a = 10
    b = '2'
    c = 'zs'
    console.log(a + 1);  //输出值为11
    console.log(a + b);  //隐式转换，+为字符串拼接，输出值为102
    console.log(a + c);  //隐式转换，+为字符串拼接，输出值为10zs
    console.log(a - b);  //隐式转换，输出为8。数值和数字类型的字符串相减，字符串会默认转为数值做算数运算
    console.log(a - c);  // NaN -- Not a Number
    console.log(a * c);  // NaN -- Not a Number

    /*
    当不是数字之间的算数运算时，+号两边一旦有字符串
    不再是数学运算，而是字符串拼接,最终就是字符串
    非数字的字符串和数值之间做减法运算结果就是一个NaN，不是一个数字
    乘除余皆是如此
    */
</script>
</body>

在这里插入图片描述

（2）赋值运算符

+= ； -= ； *= ； /=； =； 这些是基本的赋值运算符，除此之外还有++； --,这两个都存在隐式类型转换，会全部转成数字。

<body>
<script>
    // += -= *= /= = 这些是基本的赋值运算符
    // 特殊赋值运算符++ --
    a = 10
    b = '2'
    c = 'zs'
    // console.log(a+=1)        //输出为11
    // console.log(a-=1)        //输出为9
    // console.log(a*=2)        //输出为20
    //
    // console.log(a++)  //先输出a，显示为10，在10的基础上加1不显示
    // console.log(a)    //在上面的基础上在输出a则为11
    // console.log(++a)  //先加1在输出a为11
    //
    // console.log(a--)  //先输出a，显示为10，在10的基础上减1不显示
    // console.log(a)    //在上面的基础上在输出a则为9
    // console.log(--a)  //先减1在输出a为9

    /*
    赋值运算符++，写在数值的后面，二次输出的时候，值才会改变，
    ++写在值前面，值立马就加一，
    --等同以上。
    * */
</script>
</body>

（3）逻辑运算符

JS中的逻辑运算用：&&（与 and）、||（或 or）、!（非 取反 not）来表示。 && 和 || 不会进行类型转换，！则会进行类型转换，将后面的数据先转换为布尔型在取反。

<body>
<script>
    // 逻辑运算用：&&（与 and）、||（或 or）、!（非-取反 not） 来表示
    a = 10
    b = '2'
    c = 'zs'

    // &&（与 and）
    console.log(a>2 && a>3)  //布尔值 true和false
    console.log(a<2 && a<3)  //布尔值 true和false
    console.log(a>2 && a<3)  //布尔值 true和false

    console.log(a>2 || a<3)  //布尔值 true和false
    console.log(! a>2)       //布尔值 true和false

    //多重逻辑运算符使用  ! > && > ||
    console.log(! a>2 && a>3 || a>9)  //true

</script>
</body>

在这里插入图片描述

（4）比较运算符

<，>，!=，>=，<=，==（恒等于），===（全等于）
如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等
NaN==NaN 返回false，NaN和所有值包括自己都不相等。

<body>
<script>
    a = 10
    b = '2'
    c = 'zs'

    // > < != >= <= == ===（全等于） 比较运算符
    console.log(a > 2)         //true
    console.log(a == 10)       //true
    console.log(a == '10')     //true 只比较值，不比较类型
    console.log(a === 10)      //true 即比较值，也比较类型
    // null或undefined的特殊比较
    console.log(null == undefined) // true 值相同
    console.log(null === undefined) // false 类型不相同
    console.log(NaN==NaN) // false


</script>
</body>

在这里插入图片描述

（二）JS流程控制

JS中流程控制是if判断和switch选择。

（1）if判断

<body>
<input type="text" placeholder="今天天气怎么样？" id="inp">
<button id="btn">提交</button>
<script>
        // 天气分析案例：
    inp = document.getElementById('inp')
    btn = document.getElementById('btn')
    btn.onclick = function () {
        weather = inp.value
        if(weather==='晴天'){
            console.log('去逛街！')
        }
        else if(weather==='下雨'){
            console.log('在家写作业')
        }
        else{
            console.log('在家追剧')
        }
    }

</script>

</body>

在这里插入图片描述
在这里插入图片描述

（2）switch选择

<body>
<input type="text" placeholder="今天天气怎么样？" id="inp">
<button id="btn">提交</button>
<script>
    inp = document.getElementById('inp')
    btn = document.getElementById('btn')
    btn.onclick = function () {
        weather = inp.value
        switch (weather) {                     //switch（要判断的变量）
            case '晴天':                       //case全等于的意思   case+值：
                console.log('去逛街！')
                break;  // 流程控制语句的结束    一定要加break，否则会一直向下执行

            case '下雨':
                console.log('在家写作业')
                break;

            default:
                console.log('在家追剧')
                break

        }
    }
</script>

</body>

在这里插入图片描述

（3）三元表达式（类似于Python的三目运算）

作用：简化简单的if语句
形式：
1.语法：
2.变量 = 条件语句？表达式1：表达式2

<body>
<script>
    num = 1
    // if(num>5){
    //     console.log('是的')
    // }
    // else{
    //     console.log('不是')
    // }                                 //正常if循环

    res = num>5?'是的':'不是'              //简化后
    console.log(res)
</script>

</body>

在这里插入图片描述

（三）JS循环

循环三要素：循环的初始值、循环的结束条件、循环体。

（1）while循环

形式：
1.语法：
2. while (循环的结束条件){循环体}
例：

<body>
<script>
    a = 1
    while (a<=5){
        console.log(a)
        a++ //累加
    }
</script>

</body>

在这里插入图片描述

（2）do while循环

先做事情再做判断
形式：
1.语法：
2.do{循环体}while（结束的条件）
例：

<body>
<script>
    a = 1
    do {
        console.log(a)
        a++
    }while (a<=5)
</script>

</body>

在这里插入图片描述

（3）for循环

形式：
1.语法：
2.for(初始变量;循环的结束条件;初始变量的累加) {循环体}
例：

<body>
<script>
    for (a = 1; a <= 10; a++) {
        // if(a===5){               /可以添加if循环
            // break  //终止循环
            //continue  //跳过当前循环
        // }

        console.log(a)
    }
</script>

</body>

在这里插入图片描述

（4）for in 循环

形式：

  1. for(虚构变量 in 迭代对象){循环体}
    例：
<body>
<script>
    a = 'abc'
    for(i in a){
        console.log(a[i])  // 迭代对象的索引
    }
</script>

</body>

在这里插入图片描述

（四）JS字符串方法和数组方法

（1）字符串方法

<body>
<script>

    st = 'this is string'
    dic = {'a': 1, 'b': 2}

    // 长度
    // console.log(st.length)

    //取值
    // console.log(st[3]) //索引切片取单值
    // console.log(st.slice(1,6))  //取双值 左闭右开
    // console.log(st.slice(1))  //向后取所有
    // console.log(st.substring(0,6))  //字符截断 左闭右开
    // console.log(st.substring(0))  //向后取全部
    // console.log(st.substr(3,3))  //字符截取（从3开始向后取3个）

    // 对象方法
    // console.log(Object.keys(dic))  //下标
    // console.log(Object.values(dic))  //值

    // 切割
    // console.log(st.split(''))  //按空字符切割
    // console.log(st.split(' ',2))  //按空格切割，切割保留n个元素

    //替换
    // console.log(st.replace('is','IS'))  //替换单个
    // console.log(st.replaceAll('is','IS'))  //替换所有
    // console.log(st.replace('is',''))  //替换用作删除

    // 修改
    // console.log(st.toUpperCase())  //转大写
    // console.log(st.toLowerCase())  //转小写

    //查找
    // console.log(st.indexOf('i'))
    // console.log(st.indexOf('i',3)) // 指定位置找索引，从3向后

    //转类型
    // nu = 123
    // nu2 = '1.56'
    // res = nu.toString()  //转字符串
    // console.log(typeof res)  //string
    // console.log(parseInt(nu2))  //1  转整数
    // console.log(parseFloat(nu2))  //1.56 转小数


</script>
</body>

（2）数组方法

<body>
<script>

    //数组方法
    // arr = [1, 2, 3, 4, 5]

    //长度
    // console.log(arr.length)

    //取值
    // console.log(arr[1])   //通过索引取值
    // console.log(arr.slice(1,4))   // 通过切片取值
    // console.log(arr.slice(1))        //向后取所有

    //增
    // arr.push('python', 'js')  // 默认向后添加
    // arr.unshift('aa','bb')    //向前添加
    // console.log(arr)

    //删除
    // arr.pop()  //单个删除一个，默认从后开始删
    // arr.shift()  // 单个删除一个，默认从前开始删
    // arr.splice(2,2)  // 从索引位置，删除个数
    // arr.splice(2,0,'aa','bb')  // 索引位置，删除个数,追加的元素

    //修改
    // arr[0] = 111
    // arr[6] = 111 //有责改，无责增

    //查
    // console.log(arr.indexOf(2)) // 索引

    // 排序
    arr = [3,1,2,6]
    // console.log(arr.sort())  //升序
    // console.log(arr.reverse())  //降序

    //数组拼接
    // console.log(arr.join("-")) //join当中就是拼接的分隔符


</script>
</body>
等猫的鱼qv
关注
JavaScript 提升
qq_42848534的博客
06-29 1503
提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。 JavaScript 声明会被提升 在 JavaScript 中，可以在使用变量之后对其进行声明。 换句话说，可以在声明变量之前使用它。 Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。 let 和 const 关键字 用 let 或 const 声明的变量和常量不会被提升！ JavaScript 初始化不会被提升 JavaScript 只提升声明，而非初始化
JavaScript变量提升
mhc20201554114的博客
09-16 1548
当栈内存的作用域形成时，js代码执行前浏览器将带有var关键字的变量提前声明（也就是在变量所属的作用域的顶部声明，虽然声明了，但是没有定义，在赋值前——也就是写着var XXX的地方之前，值为undefined），将带有function关键字的变量提前进行声明和定义（就是说带function的只要在这个作用域内写了，就可以用，哪怕调用这个函数的地方在他前面）。当js代码执行的时候，遇到创建函数的代码会直接跳过。
JavaScript 变量提升
SweetoDream
12-15 4474
回归基础: JavaScript 变量提升（Hoisting）变量声明是所有的编程语言中最基础部分之一。然而，JavaScript 有一个怪异点，称之为变量提升（hositing），这个能够让一个看上去无关紧要的声明变成一个小bug。这篇文章解释了变量提升（hositing）是什么，以及你该如何避免这个大坑。JavaScript 是特别灵活的语言，几乎允许你在任何地方声明变量。比如，下方的立即执行函
打字通小游戏制作教程：用HTML5和JavaScript提升打字速度
interest_ing_的博客
03-11 1616
在这篇文章中，我们将一起学习如何使用HTML5和JavaScript来制作一个简单的打字通小游戏。这个小游戏可以帮助用户练习打字速度和准确性。通过这个教程，你将了解如何创建游戏界面、处理用户输入、实现倒计时以及计算得分。即使你是编程新手，也能跟随步骤完成这个项目。
Javascript 变量提升
joyfixing的博客
01-10 631
先来看一个例子：var tmp = "hello javascript";function f() { console.log(tmp); var tmp = "hello world"; }f(); console.log(tmp);上面代码最终运行结果如下：undefined hello javascript是不是很诧异，按道理应该两次log都是”hello javascript
提升前端性能的JavaScript技巧：让你的网站飞一般的流畅
热门推荐
qq_39465480的博客
08-12 1万+
提升前端性能的JavaScript技巧远不止上述几种，但上述技巧无疑是其中最基础且效果显著的。通过实践这些技巧，并结合具体项目的实际情况进行灵活应用，你的网站一定能够为用户带来更加流畅、舒适的体验。记住，性能优化是一个持续的过程，需要不断地探索和实践。
提升前端性能的JavaScript技巧
面向命运编程
08-13 678
优化前端性能是一个持续的过程，需要综合考虑JavaScript代码的加载时间、执行效率、内存使用和资源管理等多个方面。通过应用上述技巧，你可以显著提升Web应用的性能，提供更快、更流畅的用户体验。希望这些方法能帮助你在实际项目中实现前端性能的提升。
Javascript变量作用域、变量提升
hbzyin的博客
09-19 2806
Javascript变量、变量提升以及作用域 执行环境对js编程的重要性不容忽视，理解其执行的原理，将有效提升编程素养。
性能优化系列之『JavaScript：如何提升JavaScript的执行效率？』
老__L的博客
01-02 466
性能优化系列之『JavaScript：如何提升JavaScript的执行效率？』
JavaScript声明提升
o_heart
03-03 1686
声明提升就好像把声明（变量声明和函数声明）从它们所在代码中出现的位置移到了最上面。直觉上我们会以为JavaScript代码是由上到下一行一行执行的，但实际上这并不完全正确，还要考虑声明提升的存在。 1. 考虑下面关于变量声明提升的代码： a = 2; var a; console.log(a); // ?？ 按照由上到下一行一行执行的思路：var a 声明在 a = 2 之后，所以a...
JavaScript提升机制Hoisting详解
10-16
JavaScript的提升机制（Hoisting）是编程中一个关键的概念，尤其对于初学者来说，它可能会导致一些意外的行为。Hoisting是指在JavaScript代码执行之前，变量声明（`var`，`let`，`const`）和函数声明（但不包括函数...
JavaScript提升有什么用，为什么需要提升？需要这样写吗？
01-20
理解JavaScript提升有助于避免潜在的错误，并编写更清晰、更可靠的代码。 首先，变量提升是指JavaScript会在执行代码前将变量声明移动到其所在作用域的顶部。这意味着，即使在声明变量之前使用变量，JavaScript仍然...
JavaScript提升性能的常用技巧总结【经典】
10-22
主要介绍了JavaScript提升性能的常用技巧,结合实例形式总结分析了JavaScript编程中常见的性能提升优化技巧,涉及作用域、循环、变量、DOM及函数节流等,非常具有实用价值,需要的朋友可以参考下
javascript-hoist-the-right-way-mini系列：JavaScript提升正确方式的mini系列
02-13
JavaScript提升机正确的迷你系列 成为刺客等级 集数： javascript葫芦常见问题及快速解答 JS引擎的工作方式Prepration(Parsing/Compilation),Execution JavaScript的基本概念： Hoisting, Scope, lookup, ...
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 803
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 927
请联系我获取更详细的演示视频。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 646
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
Js面向对象
sdgfafg_25的博客
10-16 1078
程序就是对现实世界的抽象,一个事物抽象到程序中后就变成了对象,在程序的世界中，一切皆对象面向对象的编程指，程序中的所有操作都是通过对象来完成做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作一个事物通常由两部分组成：数据和功能一个对象由两部分组成：属性和方法事物的数据到了对象中，体现为属性事物的功能到了对象中，体现为方法。
使用 JavaScript 提升 Adobe Acrobat DC 表单
Enhancing Adobe Acrobat DC Forms with JavaScript 在本书中，您将学习如何使用 JavaScript 来增强 Adobe Acrobat DC 表单的功能。您将学习使用简单的 JavaScript 编码来提高 PDF 表单的多样性，并发现如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值