JavaScript新手学习手册-基础代码(二)

news2025/8/6 6:21:41

与上篇博客相接

一:函数:

案例:通过函数实现绝对值的输出

方法一:

        function absoluate(x){
            if(x>0){
                return x;}
            else{ return -x;}}

在控制台调用函数

 方法二:

       var demo1 =  function(x){
            if(x>0){
                return x;}
            else{ return -x;}}

控制台调用:

遇到前端的输入一个空值,该怎么解决?

function absoluate(x){
      if(typeof x!='number'){    //typeofp得到一个数据是什么类型
           throw "not a number"  //如果不是number类型,会主动抛出
      } 
      if(x>0){
           return x;}
      else{ return -x;}}

控制台:

二:argument:

argument是JavaScript中的一个关键字,用于指向调用者传入的所有参数。

因为前端向后端传入数据,并非一定按照开发者的格式进行值的传入,如果传入很多的值,我们需要一个工具,可以帮我们存储前端所传来的数据。argument就是发挥这样的作用,它是一个数据组,可以帮我们将前端的数据,按照元素的方式传入到argument中的数组中。

    function number(x) {
        //因为在前端传来的数据不一定与创造者所设计的程序相同,arguments是js自身所带的关键字,它是一个数组,存放着函数中的所有数据
        console.log("x>>"+x);   //x为argument数组的第一个元素
        for (let m=0;m<arguments.length;m++){    //将前端所传入的数据进行输出
            console.log(arguments[m])
        }

控制台:

 这里的argument数组存放着前端传入数据的全部,有时候我们并不需要这么的元素,需要调用元素之外的元素,这时候我们可以通过...rest来实现。

    // ...rest这种方法可以将不需要的数据,摘除去然后放在一个数组中
    //注意...rest三个点不能省略
    function data(z,y,...rest) {    //需要前两个数,另外的放在rest数组中
    console.log("z>>>"+z);    
    console.log("y>>>"+y);
    console.log(rest)
    }

三:变量的作用域:

双重函数:函数内部可以调用外部的参数,但是外部不可以调用内部的数

注意:函数寻找变量,会先从内部函数中寻找,如果外部也有此数据,将会被忽略

        'use strict';
        function demo1() {
            var x = 1;
            function demo3(){    /*双重函数:函数内部可以调用外部的参数,但是外部不可以调用内部的数
                                    注意:函数寻找变量,会先从内部函数中寻找,如果外部也有此数据,将会被忽略
            */

                var y = 2;
                y = x + y;
                console.log(y);
            }
            var z = y+1;
            console.log(z);
            demo3();
        }

 结论:双重函数中:内部函数可以访问外部函数的成员,反之则不行

调用demo1方法:看输出结果  y值没有被定义

 当两个函数,定义一个相同的变量会不会有影响?

        'use strict';
        function demo1() {
            var x = 1;
            console.log(x);
        }
        // x =x + 1;  //在函数内部定义的参数,在函数外不能被调用,使用不会报错,但是在网页中则会出错
        function demo2() {
            var x = 2;   //在两个函数内部定义相同变量,但是在两个函数内部,则不会产生冲突
            console.log(x);
        }

结论:定义两个相同的变量,但在两个函数函数中,两者并不会互相影响。

当遇见双重函数(函数嵌套一个函数)时,在两个函数中定义相同的变量,如何判断变量的使用方法?

        function demo1(){
            var x = 'a';
            function demo2() {

                console.log(x);
            }
            demo2();
        }

结论: 内部函数并没有定义的变量x,但是在外层函数中定义一个变量x,如果在内部调用x变量,控制台输出的则是外层变量的数据x。

当遇见双层函数时,寻找变量时它会先从内层函数中开始,如果内部并没有定义,那么他将会转到外层函数中寻找变量。

四:全局变量:

window:是一个全局对象,默认所有的全局变量都会在此对象下

        var x = 1;  //定义一个全局变量,可以在任何地方被调用
        function demo4() {
            console.log(x);
            window.console.log(x);  //==console.log(x)
            alert(x);  //alert()方法 实际上也是一个全局变量,也可以这样写window.alert(x);
         
        }
        console.log(x);
        demo4();

控制台

实现将alter()功能定义给一个新的方法

        var a = "xxx";
        window.alert(x);
        var oldalert = window.alert;  //将alter方法定义以新的方法
        oldalert(123);
        window.alert = function() {

        }

弹窗一:

弹窗二:

我们把alter的功能转给一个新的变量,那么alter()还能使用吗?

输出为未定义,说明alter()方法失效了

将alter()功能恢复过来,将原本定义的内容重新定义给alter()即可

        //恢复alert功能
        window.alert = oldalert;
        window.alert(456)

注意:这里出现一个问题window是一个对象,它的下面存放着所有的变量,但在项目中如果我们遇到相同的变量名会怎么进行解决呢?


        var ma = {};  //定义一个数组,将他定义为放置全局变量的一个空间
        ma.name ='myc';
        console.log(ma.name)

解决方案:就是自己定义一个全局变量组,让他代替window的存在,把自己定义的变量,全都存在此,减少相同名字的冲突。

五:let关键字

在JavaScript中作用域由两种,一种是全局作用域,一种是私有作用域。在日常的开发过程种,不能将变量全都定义成全局变量,这样会大大的增加了的占用内存。而在ES6新版本种let关键字的出现则是可以解决这个问题。

它的作用域仅限在私有的作用域里也就是☞{}这一个大括号里这个块级作用域里。极大的降低了内存的占用。

定义全局变量:

        function demo1 (){
            for(var i=0;i<10;i++){

            }
            console.log(i);   //看看变量是否被调用
        }

定义的变量出了循环体内依然能被调用。

当使用变量为let关键字时:

        function demo2 (){
            for(let i=0;i<10;i++){

            }
            console.log(i);
        }

 j报错并没有找到变量i,说明由let关键字只能存活在当前这个块级作用域里。

六:const关键字

特性:必须要为常量定义一个初始值,这个初始值在后面的开发过程中,不能被更改,这就和java中final关键字一样的使用方法。

注意:const定义的数据类型成为常量,不能更改,也不能将已存在的变量值赋值给它。可以把它理解为权限是只读。

        const c  = 300;   //c为的权限只可读
        console.log(c)
        c = 200;
        console.log(c);

控制台输出的数据为300,说明赋值,并没有成功对他进行赋值。是一个常量。

七:方法

什么是方法?

方法 = 对象{ 函数}:方法就是函数在对象里面,通过对象来调用对应的方法

对象中是方法和属性

定义一个方法(以获取年龄为例)

 var mmm = {
            name:'ma',
            id:12,
            birth:2001,
            age:function () {       //JavaScript中函数的使用方法
                var now  = new Date().getFullYear();   //获取现在的年份
                return now - this.birth;    //this的方法与java中this使用方法相同
            }
        }

控制台:获取本人出生的年龄 

 上面是将方法设置在函数内部,如果我们把两者分开来说呢?

        function demo1() {
            var now  = new Date().getFullYear();   //获取现在的年份
            return now -this.birt;   //当把前面的代码拆开,分开两部分,this是不具有指向功能
        }

        var aaa={
            name:'ma',
            id:12,
            birt:2001,
            ag:demo1
        }

也可以成功得到输出,因为this关键字起到了关键的作用,this是指向使用它的人 aaa.ag()这个方法没毛病,因为this指向就是aaa ag(); 直接调用这个方法,则不可以,因为直接调用,它指向的是window这个对象,但这个对象却没有birt这个属性。这时候又一个关键字的出现可以解决这种局面的出现。那就是apply.

八:apply

        function demo1() {
            var now  = new Date().getFullYear();   //获取现在的年份
            return now -this.birt;   //当把前面的代码拆开,分开两部分,this是不具有指向功能
        }

        var aaa={
            name:'ma',
            id:12,
            birt:2001,
            ag1:demo1
        }

        var bbb={
            name:'cai',
            id:13,
            birt:2012,
            ag2:demo1
        }

demo1.apply(aaa,[]);   //实现的作用就是将demo1中的this指向了aaa对象
demo1.apply(bbb,[]);    //实现的作用就是将demo1中的this指向了bbb对象


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/394202.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot项目如何配置启动端口

文章目录0 写在前面1 配置文件(.yaml)--推荐2 配置文件(.properties)3 IDEA配置--不推荐4 写在最后0 写在前面 项目启动需要一个独立的端口&#xff0c;所以在此记录一下。 根据配置文件的后缀书写格式略有不同。 1 配置文件(.yaml)–推荐 若是.yaml后缀的配置文件&#xff0…

SIP网络定压功放 SIP735T机架式广播终端

一、描述SIP735T是广州新悦网络设备有限公司的一款合并式定压功放&#xff0c;支持标准SIP协议&#xff0c;具有10/100M以太网接口&#xff0c;后面板上有2组AUX音源输入和6.35mm接口的麦克风输入&#xff0c;可以输入本地音源&#xff0c;播放来自网络与本地的音频。同时配置5…

Spark UI

Spark UIExecutorsEnvironmentStorageSQLExchangeSortAggregateJobsStagesStage DAGEvent TimelineTask MetricsSummary MetricsTasks展示 Spark UI &#xff0c;需要设置配置项并启动 History Server # SPARK_HOME表示Spark安装目录 ${SPAK_HOME}/sbin/start-history-server…

【女神节】简单使用C/C++和Python嵌套for循环生成一个小爱心

目录 前言实现分析代码实现代码如下效果如下优化效果代码如下效果如下总结尾叙前言 女神节马上到了,有女朋友的小伙伴是不是已经精心准好礼物了呢!对于已婚男士,是不是整愁今天又该送什么礼物呢!说真的,我也整愁着,有什么要推荐么,评论留言下! 实现分析 可以先在纸上或…

HashMap底层实现原理及面试题

文章目录1. 常见的数据结构有三种结构1.1 各自数据结构的特点2. HashMap2.1 概述2.2 底层结构2.2.1 HashMa实现原理&#xff1a;2.2.1.1 map.put(k,v)实现原理2.2.1.2 map.get(k)实现原理2.2.1.3 resize源码2.2.2 HashMap常用的变量2.2.3 HashMap构造函数2.3 JDK1.8之前存在的问…

JUC并发编程——多把锁

一、多八锁 多把不相干的锁 一间大屋子有两个功能&#xff1a;睡觉、学习&#xff0c;互不相干。 现在小南要学习&#xff0c;小女要睡觉&#xff0c;但如果只用一间屋子&#xff08;一个对象锁&#xff09;的话&#xff0c;那么并发度很低 解决方法就是准备多个房间&#x…

Validator校验之ValidatorUtils

注意&#xff1a;hibernate-validator 与 持久层框架 hibernate 没有什么关系&#xff0c;hibernate-validator 是 hibernate 组织下的一个开源项目 。 hibernate-validator 是 JSR 380&#xff08;Bean Validation 2.0&#xff09;、JSR 303&#xff08;Bean Validation 1.0&…

python实现半色调技术图像转换

半色调技术 半色调技术是一种将灰度图像转换为黑白图像的技术。它是通过将灰度图像的像素值映射到黑白像素值上来实现的。 比如说&#xff0c;在一块只能显示纯黑或纯白的屏幕上&#xff0c;如何将一张灰度图显示出灰度的效果&#xff0c;这时就可以用半色调技术实现。 如下…

SpringBoot整合MybatisPlus

文章目录前言一、MybatisPlus是什么&#xff1f;二、使用步骤1.导入依赖2.编写配置文件3.编写Controller和实体类4.编写持久层接口mapper5.启动类加包扫描注解6.测试总结前言 本篇记录一下SpringBoot整合MybatisPlus 一、MybatisPlus是什么&#xff1f; MyBatis-Plus&#xff…

webview的工作、内存泄漏、漏洞以及缓存机制原理原理+方案解决

分析一段appium的日志来分析webview的工作原理&#xff0c;文章尾部附有自动化脚本及完整日志&#xff1a; 解析&#xff1a; 获取上下文列表 服务端发送命令adb shell cat /proc/net/unix获取域套接字列表。那什么是域套接字呢&#xff1f; 域套接字&#xff1a;是unix系统里…

旋转矩阵的作用:世界坐标变换;求解局部坐标系下的局部坐标

旋转矩阵的作用&#xff1a;世界坐标变换&#xff1b;求解局部坐标系下的局部坐标1、旋转矩阵代表了一个局部坐标系2、世界坐标变换3、求解局部坐标系下的局部坐标1、旋转矩阵代表了一个局部坐标系 以下数据以平面直角坐标系为例&#xff0c;三维空间同理 上图中&#xff0c;…

第七章:Java常用类

第七章&#xff1a;Java常用类 7.1&#xff1a;字符串相关的类 String的特性 String表示是字符串&#xff0c;使用一对""引起来表示。 String声明为final的&#xff0c;不可被继承。 String实现了Serializable、Comparable接口&#xff0c;表示字符是支持序列化和…

【WPF 值转换器】ValueConverter 进阶用法

【WPF 值转换器】ValueConverter 进阶用法介绍基类实现子类实现效果介绍 值转换器在WPF开发中是非常常见的&#xff0c;当然不仅仅是在WPF开发中。值转换器可以帮助我们很轻松地实现&#xff0c;界面数据展示的问题&#xff0c;如&#xff1a;模块隐藏显示、编码数据展示为可读…

拼多多跨境电商业务将正式登陆澳洲,持续助力中国制造业开拓全球市场

配图来自Canva可画 拼多多出海又有新进展。据最新消息&#xff0c;拼多多跨境电商业务将于3月13日正式进入澳大利亚、新西兰&#xff0c;持续推动中国制造业直连澳洲以及全球市场。 去年9月&#xff0c;拼多多正式在北美地区上线跨境电商平台TEMU。自上线至今&#xff0c;TEM…

硬件设备二 调试分类、软/硬件断点、OpenOCD、JLink、STLink 使用

近期工作开始主用 OpenOCD 来进行相关开发工作的调试&#xff0c;因此本文重点来学习一下&#xff01;本文以 OpenOCD 为重点&#xff0c;辅以 JLink、STLink 作为对比来进行学习。 调试 本地调试 本地调试通常指调试使用的环境与调试的目标运行环境一致的调试方法&#xff0…

linux软件管理

软件管理 1、rpm管理工具 RPM是(Redhat Package Manager) 的缩写&#xff0c;由Red Hat公司提出的一种软件包管理标准 &#xff08;1&#xff09;rpm软件包的典型命名格式&#xff1a; 例&#xff1a;zsh-5.0.2-14.el8.x86_64.rpm zsh-50214el8x8664软件名主版本号次版本号…

day26_HTML

今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、二阶段介绍 二、HTML 零、 复习昨日 见代码 一、二阶段介绍 第一阶段: 基础入门 java基本语法编程基础(方法,数组)面向对象编程常用类高级(IO,线程,新…

新增 IEC61850、Profinet 驱动

2 月&#xff0c;Neuron 团队主要侧重于开发新的驱动&#xff0c;新增了南向 IEC61850 驱动、南向 Allen-Bradley DF1 驱动、Profinet 驱动支持以及静态点位等功能&#xff0c;这些新驱动和新功能将在 2.4 版本中正式发布。 IEC61850 驱动 IEC61850 标准是电力系统自动化领域…

网络基础(2)

目录1. 端口号2. 套接字socket3. 网络通信3.1 sockaddr与sockaddr_in3.2 接口服务端3.2.1 创建套接字&#xff0c;打开网络文件3.2.2 给该服务器绑定端口和ip&#xff08;特殊处理&#xff09;3.2.3 初始化相关服务器3.2.4 提供服务客户端3.2.5 绑定3.2.6 使用服务4. makefile实…

关于 JavaScript 中的 Promises

在 JavaScript 中&#xff0c;Promise 是一个对象&#xff0c;它表示一个可能还不可用&#xff0c;但会在未来解决的值。Promises 用于处理异步操作&#xff0c;例如发出网络请求或访问数据库&#xff0c;其中结果不是立即可用的。如果你准备好了&#xff0c;我想开始我们的冒险…