JavaScript学习第三天

已于 2022-03-02 15:10:32 修改
阅读量84 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 开发语言
于 2022-02-26 10:42:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/123146304
版权

JavaScript学习第3天

在这里插入图片描述

1. 断点调试

在这里插入图片描述

在这里插入图片描述

2. 循环

2.1 一行打印五个小星星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='';
        // 这里需要字符串拼接，否则会打出一个⭐，前面一个5
        for(var i=0;i<5;i++){
            str+='⭐';
        }

        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

3. 数组

3.1 数组的定义

  • 数组：一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素

3.2 创建数组

  1. 利用new创建数组
  2. 利用数组字面量创建数组
3.2.1 new创建数组
// 创建一个空数组
        var arr=new Array();

####3.2.2 字面量创建数组

// 创建空数组
        var arr0=[];
        // 创建并初始化数组
        var arr1=[1,2,3,4,true,'k'];

3.3 数组访问

  • 当数组下标超过可见数组长度时，不会数组越界，而是提示undefined
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[1,2,true];

        //  数组中没有第3个元素
        // 访问后为undefined
        console.log(arr[3]);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

3.4 数组长度

  • 使用数组名.length可以访问数组元素的数量（数组长度）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[1,2,3];
        alert(arr.length);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

3.5 新增数组元素

  1. 通过修改length长度来实现数组扩容的目的
  2. 通过修改数组索引实现数组扩容（常用方式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=[1,2,3];
        // 通过修改数组长度来实现扩容
        //未赋值的元素类型为undefined
        arr.length=9;
        
        console.log(arr);
        // 修改数组索引来实现扩容

        var arr1=[1,3];
        arr1[2]='8';
        arr1[3]='9';
        console.log(arr1);
        // 不要直接给数组名赋值，否则该变量不为数组

        arr1='666';
        console.log(arr1);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

4. 函数

4.1 声明函数

<script>
        // 声明函数
        function 函数名(){
            函数体;
        }
    </script>
  • function是声明函数的关键字
  • 函数名一般为动词

4.2 调用函数

// 调用函数
        函数名();

4.3 函数的形参和实参

<script>
        function 函数名(形参1,形参2,....){
            函数体;
        }

        // 调用函数
        函数名(实参1,实参2,...);
    </script>
  • 在声明那里为形参
  • 在调用那里为实参
注意点
  • 形参不需要类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getSum(num1,num2){
            console.log(num1+num2);
        }

        getSum(1,2);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

4.4 函数形参和实参个数不匹配问题

参数个数说明
实参个数等于形参个数输出正确结果
实参个数多余形参个数只取到形参个数
实参个数少于形参个数多的形参被定义为undefined，结果为NaN
示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getSum(num1,num2){
            console.log(num1+num2);
        }

        // 实参个数多余形参，只取到形参个数
        getSum(1,2,3);
        // 实参个数少于形参，多余形参被定义为undefined，结果为NaN
        getSum(1);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

4.5 函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getMax(arr){
            var max1=arr[0];
            for(var i=1;i<arr.length;i++){
                if(arr[i]>max1){
                    max1=arr[i];
                }
            }
            return max1;
        }

        var arr1=[1,2,3];
        var result=getMax(arr1);
        console.log(result);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

注意点
  • return只能返回一个值，如果用逗号隔开多个值，以最后一个为准
  • 要想返回多个值，可以考虑使用数组返回
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fn1(num1,num2){
            // 返回的值逗号分隔，只会返回最后一个
            return num1,num2;
        }

        //  返回多个值，使用数组
        function fn2(num1,num2){
            return [num1,num2];
        }

        console.log(fn1(1,2));
        console.log(fn2(1,2));

        // 不加return语句，返回值undefined
        function fn3(num1,num2){

        }

        console.log(fn3(1,2));
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

4.6 arguments的使用

  • 当我们不确定有多少个参数传递的时候，可以用arguments来获取，在JavaScript中，arguments实际上是当前函数的一个内置对象，arguments对象中存储了传递的所有实参
  • arguments的展示形式是一个伪数组，因此可以遍历，特点：
    • 具有length属性
    • 按索引方式存储
    • 不具有数组的push，pop方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // arguments的使用
        function fn1(){
            console.log(arguments);
            console.log(arguments.length);
        }

        fn1(1,23,45,55,5);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

4.7 匿名函数（函数表达式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fn=function(){
            console.log('我是匿名函数（函数表达式）');
        }

        fn();
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

  • fn是变量名，不是函数名

  • fn中存放的不是值，而是函数

  • 可以传参

5. 作用域

5.1 全局作用域

  • 作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件

5.2 局部作用域

  • 函数内的代码环境，函数作用域

5.3 全局变量

  1. 在全局作用域下的变量
  2. 在局部作用域下的未声明直接赋值的变量

5.4 局部变量

  • 函数内部使用的
  • 函数内部var声明的
  • 函数形参

5.5 全局变量和局部变量的区别

  • 全局变量：在任何地方都可使用，只有在浏览器关闭时才会被销毁，占内存
  • 局部变量：函数内部使用，在函数代码块结束后，会被销毁，节省空间

5.6 js没有块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        if(true){
            var num=10;
        }

        // 输出num
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

  • 块级作用域为{}包起来的代码块
  • es6中新增块级作用域，现阶段没有

5.7 作用域链

  • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  • 根据内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num=10;
        function fn1(){
            var num=100;
            function fn2(){
                // num根据就近原则找到外部变量
                console.log(num);
            }
            fn2();
        }
        fn1();

    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

  • 查找机制：就近原则

6.JavaScript预解析

  1. js引擎解析Javascript代码是分为两步：预解析和代码执行
  2. 预解析：在当前作用域下，js代码执行前，浏览器会默认把带有var和function声明的变量在内存中提前声明或者定义
  3. 代码执行：从上到下执行代码

6.1 变量提升

  • 预解析也叫做变量、函数提升

  • 变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

6.2 函数提升

  • 函数的声明会被提升到作用域的最上面，但是不会调用函数

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 变量提升，声明提升，赋值不提升
        console.log(num);
        var num=10;

        fn();
        var fn=function(){
            console.log('666');
        }

        // 函数提升
        fn1();
        function fn1(){
            console.log('fn1');
        }

    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

预解析特殊案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        fn1();
        console.log(c);
        console.log(b);
        console.log(a);
        function fn1(){
            // 变量提升，var a 声明提升
            // b,c 作为全局变量 b=9,c=9
            var a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

7. 对象

7.1 什么是对象

  • 对象是一个具体的事物

  • 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数。

  • 对象有属性和方法组成

    • 属性：事物的特征，在对象中用属性来表示
    • 方法：事物的行为，在对象中用方法来表示

  • 图解

在这里插入图片描述

7.2 为什么需要对象

  • 可以将某个具体的事物表达的更清晰，更强大

7.3 对象的创建

7.3.1 创建对象的三种方式
  • 利用字面量来创建对象
  • 利用 new Object 创建对象
  • 利用构造函数创建对象
7.3.2 根据字面量创建对象
  • 对象字面量：就是花括号{}里面包含表达这个具体事物（对象）的属性和方法
  • {}里面采取键值对的形式表示
  • 对象调用另一种形式：对象[‘属性名’];
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 根据字面量创建对象

        var adog={
            uname:'keke',
            age:5,
            color:'blue',
            habit:'play',
            playGame: function(){
                console.log('playgame');
            }

        };

        // 使用对象
        console.log(adog.age);
        console.log(adog.color);
        adog.playGame();
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

7.3.3 变量、属性、函数、方法总结
  • 变量：单独声明赋值，单独存在
  • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
  • 函数：单独存在的，通过函数名（）就可以调用
  • 方法：对象里面的函数，方法不需要声明，使用对象.方法名就可以调用，方法用来描述该对象的行为和功能
7.3.4 利用new Object创建对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var mingren=new Object();
        mingren.uname='鸣人';
        mingren.age=18;
        mingren.sex='男';
        mingren.playgame=function(){
            console.log('666');
        }

        mingren.playgame();
        console.log(mingren.age);
    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

7.3.5 利用构造函数创建对象
  • 前面两种方法一次只能构造一个对象，使用构造函数可以批量构造对象
  • 构造函数：一种特殊的函数，主要用于初始化对象，里面封装的是对象的一些公共属性和方法
  • 构造函数用于创建某一类对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 构造函数
        function Person(age,name,sex){
            this.age=age;
            this.name=name;
            this.sex=sex;
            this.playgame=function(game){
                console.log(game);
            }
        }

        // 调用构造函数
        var p1= new Person(18,'aaa','男');
        var p2=new Person(19,'bbb','女');

        console.log(p1.age);
        p1.playgame('wzry');
        console.log(p2.name);
        p2.playgame('yylm');

    </script>
</head>
<body>
    
</body>
</html>
  • 效果图

在这里插入图片描述

注意点
  • 构造函数约定首字母大写
  • 函数内的属性和方法前需要添加this，表示当前对象的属性和方法
  • 构造函数不需要return返回结果
  • 当我们创建对象时，必须用new来调用构造函数
7.3.6 new关键字
  • new在执行时会做四件事情
    1. 在内存中创建一个新的空对象
    2. 让this指向这个新的对象
    3. 执行构造函数里面的代码，给这个新对象添加属性和方法
    4. 返回这个新对象（所有构造函数里面不需要return）
7.3.7 构造函数和对象
  • 构造函数：对象的公共部分，泛指某一大类
  • 创建对象：通过new关键字创建对象的过程称为对象实例化
凌歆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础&BOM，学习Java第42天
07-31
JavaScript基础&BOM技术 Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型 注：ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本...
JavaScript超出数组长度不报错
weixin_40794404的博客
08-04 631
JavaScript超出数组长度不报错 今天，在做题的时候，遇到了这样一个问题 while (sum < target) { right++; sum += nums[right]; } 这里while循环没有添加对right索引超出数组长度时的限制，但依然没有报错，程序可以正常运行。 这里检查了下原因，发现当right超出范围时，nums[right]输出是undefined console.log(nums[nums.length]) //undefined 当undefined与数相
前端学习（695）：一行打印五个星星
歌谣的博客
03-30 827
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
JavaScript学习指南 第3版.pdf
06-11
JavaScript学习指南第三版，学习JavaScript的同学欢迎来下载
JavaScript DOM 学习第三章 内容表格
01-19
如果你也想这么做，那么你还需要我的getElementByTagNames()函数。 代码如下:function createTOC() { var y = document.createElement(‘div’); y.id = ‘innertoc’; var a = y.appendChild(document....
【新手入门】javascript新手学习第三课
03-29
Object对象 一般来说创建对象的方法有两种 var obj={ name:'丁小柒', age :12} console.log(obj.name) //输出丁小柒 通过函数的形式来创建对象(必须进行实例化)，也可以进行多重实例化 el:通过一个怪物对象来创建更...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 210
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 768
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 287
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 185
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 407
用vue实现无限滚动
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 232
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 680
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 403
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
vue3 使用WebAssembly 实战
qq_35374791的博客
05-16 1130
文件已经正确部署，并且可以通过指定的URL访问。此外，根据你的WASM模块实际功能和导出函数，代码中的具体实现细节（如参数传递和返回值处理）可能有所不同。函数来异步加载并实例化WebAssembly模块。首先，你需要一个WebAssembly模块。假设你已经有了一个编译好的。在Vue 3组件中，你可以在。
Vue原理学习:vdom 和 diff算法(基于snabbdom)
m0_74989367的博客
05-15 1224
diff 算法是一个很广泛的，前端常见的例如文本 diff ，json 对象 diff ，还有这里的“树 diff”。文本 diff ，例如 linux 的 diff 命令json diff ，例如树 diff ，如 vdom diffdiff 两棵树的时间复杂度是O(n^3)（不可用的复杂度），例如遍历 Tree1 ，每个节点都要和 Tree2 对比针对 Tree1 的节点，遍历 Tree2 每个节点和它对比重新排序但是，vdom diff 算法做了几个改进，让复杂度变为O(n)只比较同一层级。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 249
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
笔记：前端知识梳理
weixin_46691179的博客
05-17 210
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
javascript基础第三天客观题pink老师
09-16
"对于javascript基础第三天的客观题，我会向Pink老师请教。作为一位有经验且热情的教师，Pink老师拥有丰富的javascript知识和教学技巧，相信他会给出准确而详细的解答。 作为学生，我会尽力准备并理解第三天所学的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值