js基础学习

最新推荐文章于 2024-04-30 20:32:35 发布
最新推荐文章于 2024-04-30 20:32:35 发布
阅读量391 收藏 4
点赞数 1
文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52701502/article/details/130300047
版权

javascript_day01

学习目标

1.掌握js的组成
2.掌握数据类型
3.掌握运算符
4.掌握流程控制
5.掌握数组
6.掌握函数
7.掌握作用域
8.掌握js对象

一、javascript 概述

1.1 javascript 介绍

JavaScript在1995年由Netscape（网景）公司设计的脚本语言。

js是一个什么样的语言呢？

  • 是一门脚本语言：不需要编译,直接执行
  • 是一门解释性语言：相对于编译语言java不同，没有编译成机器语言class文件过程；源代码不能直接翻译成机器语言，而是先翻译成中间代码，再由解释器对中间代码进行解释运行 （浏览器作为解释器）
  • 是一门动态类型的语言：静态语言（强类型语言）：如java、c、c++。动态类型语言（弱类型语言）：如javaScript。l两者的不同之处在于:强类型语言是一旦变量的类型被确定，就不能转化的语言。 弱类型语言则反之，一个变量的类型是由其应用上下文确定的。
  • 是一门基于对象的语言：模仿面向对象语言书写风格

1.2 javascript的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EA6mA9Jd-1682119786854)(assets/1.png)]

ECMAScript 是JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准（规范了js的规范），定义了一种语言的标准与具体实现无关

BOM : -Browser Object Model 浏览器对象模型 :一套操作浏览器功能的api;

DOM:Document Object Model 文档对象模型：一套操作页面文档对象的模型

二、javascript 引入方式

javascript简称js,js有两种引入方式

  • 内部引入方式
  • 外部引入方式

2.1 js内部引入

js内部引入语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmHqK3LS-1682119786855)(assets/2.png)]

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>js的内部引入</title>
    <script>
        // js的输出，向控制台打印一句话
        console.log("hello world");
        // js的输出，向页面写入一句话
        document.write("hello world");
        // 向窗口弹一句话
        alert("hello world");
    </script>
</head>

<body>

</body>

</html>

2.2 js外部引入

js引入外部文件语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTlxaxDB-1682119786857)(assets/3.png)]

注意：引入外部文件的script标签不允许在标签内写任何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>js引入外部文件</title>
    <script src="../js/demo1.js"></script>
</head>

<body>

</body>

</html>

引入的demo1.js代码

// 控制台打印helloworld
console.log("hello world");
// 向页面写helloworld
document.write("hello world");
// 弹框 helloworld
alert("hello world");

三 、数据类型

ECMAScript中有5中基本数据类型:

  • Undefined

  • Null

  • Boolean

  • Number

  • String

在学习js 数据类型前先js的输入与输出

3.1 js 的输入与输出

js输入语法：

  • prompt（）输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容

js输出语法：

  • console.log（） 向控制台打印一句话
  • document.write（） 向页面写入
  • alert() 向窗口弹出一句话

示例

<!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>js的输入与输出</title>
    <script>
        let str = prompt("请输入内容：");
        //向控制台打印
        console.log(str);
        // 向页面写内容
        document.write(str);
        // 弹框弹出内容
        alert(str);
    </script>
</head>

<body>

</body>

</html>

3.2 js的五种基本数据类型

js的基本数据类型分为以下五种

  • Undefined
  • Null
  • Boolean
  • Number
  • String

Number 类型 即数学中学习到的数字，可以是整数、小数、正数、负数

String 通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

Boolean 表示真假类型 ，true代表真 ，false代表假的

Undefined 表示只声明没有赋值的变量类型

Null 表示赋null类型

示例：

<!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>js的数据类型</title>
    <script>
        // 定义number类型变量
        let a = 2.2;
        // 查看a的类型
        console.log(typeof a);
        // 注意js是弱语言类型，a变量的类型取决于值的类型，不是在定义变量的时候生命好
        a = 'hello';
        console.log(typeof a);
        a = true;
        console.log(typeof a);
        a = null;
        console.log(typeof a);
        let b;
        console.log(b);
    </script>
</head>

<body>

</body>

</html>

3.3 var、let 、const关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 不允许重复声明
  3. 允许同时声明多个变量并赋值
  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

const用于定义常量，初始化的值不能改变

示例：

<!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>var、let、const</title>
    <script>
        //定义变量
        let a = 12;
        //定义常量，值不能改变
        const b = 12;
        // b = 14; 改变报错
        console.log(b);
    </script>
</head>

<body>

</body>

</html>

3.4 数据类型转换

3.4.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>隐式转换</title>
    <script>
        let a = 12;
        let b = '3';
        console.log(a + b);
        // 数据类型隐式转换
        console.log(a - b);
    </script>
</head>

<body>

</body>

</html>

3.4.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>js数据类型显示转换</title>
    <script>
        let a = '12';
        // 将string类型转为 number类型
        a = Number(12);
        let b = 3;
        console.log(a + b);
    </script>
</head>

<body>

</body>

</html>

四、运算符

大部分运算符都在学习java的时候讲过，这里面我们直接练习。

4.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>算数运算符</title>
    <script>
        let a = 1;
        let b = 2;
        console.log(a + b);
        console.log(a - b);
        console.log(a * b);
        console.log(a / b);
        console.log(a % b);
    </script>
</head>

<body>

</body>

</html>

4.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>赋值运算符</title>
    <script>
        let a = 2;
        a += 2;
        a -= 2;
        a *= 2;
        a /= 2;
        a %= 2;
        a++;
        ++a;
        console.log(a);
    </script>
</head>

<body>

</body>

</html>

4.3 比较运算符

算数运算符主要包含> < >= <= == != === !==

注意：

  • 与=的区别
    • == 比较的是值，=比较的是值和类型，开发用=
  • != 与 !== 的区别
    • !=比较的是值，!== 比较的是值和类型

示例如下：

<!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>比较运算符</title>
    <script>
        let a = 2;
        let b = '2';
        console.log(a == b);
        console.log(a === b);
        console.log(a != b);
        console.log(a !== b);
    </script>
</head>

<body>

</body>

</html>

4.4 逻辑运算符

算数运算符主要包含&& || !

示例如下：

<!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>逻辑运算符</title>
    <script>
        console.log(true && true);
        console.log(false && true);
        console.log(true && false);
        console.log(false && false);
        console.log(true || false);
        console.log(false || true);
        console.log(true || true);
        console.log(false || false);
        console.log(!true);
    </script>
</head>

<body>

</body>

</html>

五、流程控制

流程控制和java的流程控制一样这里面不在讲解，直接做几道练习题

5.1 分支结构

练习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>分支结构练习题1</title>
    <script>
        let a = prompt("请输入一个整数");
        if (a > 0) {
            console.log("正数");
        } else {
            console.log("非正数");
        }
    </script>
</head>

<body>

</body>

</html>

练习2：根据客户输入的月份判断季节，如输入3、4、5返回春季；6、7、8返回夏季；9、10、11返回秋季；12、1、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>分支结构练习题2</title>
    <script>
        let n = prompt("请输入【1-12】之间的一个整数")
        n = Number(n);
        switch (n) {
            case 3:
            case 4:
            case 5:
                console.log("春天");
                break;
            case 6:
            case 7:
            case 8:
                console.log("夏天");
                break;
            case 9:
            case 10:
            case 11:
                console.log("秋天");
                break;
            case 12:
            case 1:
            case 2:
                console.log("冬天");
                break;
        }
    </script>
</head>

<body>

</body>

</html>

5.2 循环结构

练习1：分别用for、while循环计算出1-100的和。

<!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>循环结构</title>
    <script>
        let sum = 0;
        let i = 1;
        while (i <= 100) {
            sum += i;
            i++;
        }
        console.log(sum);
        let sum2 = 0;
        for (let i = 1; i <= 100; i++) {
            sum2 += i;
        }
        console.log(sum);
    </script>
</head>

<body>

</body>

</html>

5.3 综合练习

  1. 在页面上打印9*9乘法表

六、函数

6.1 函数的概念

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用。

6.2 函数的定义与使用

函数的定义语法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrJG0vCZ-1682119786858)(assets/4.png)]

函数的调用语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJOYQ4yt-1682119786859)(assets/5.png)]
在这里插入图片描述

示例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>函数的定义与使用</title>
    <script>
        //1.定义无参数无返回值函数
        function eat() {
            console.log("吃得饱，睡得香");
        }
        //调用函数
        eat();
        //2.定义有参数无返回值函数
        function sum(n1, n2) {
            console.log(n1 + n2);
        }
        //调用函数
        sum(3, 4);
        //3.定义有参数有返回值函数
        function sum2(n1, n2) {
            return n1 + n2;
        }
        //调用函数
        var result = sum2(5, 5);
        console.log(result);
    </script>
</head>

<body>

</body>

</html>

练习题

  1. 求1-n之间所有数的和
  2. 求1-n之间所有数的偶数和
  3. 求1-n之间的平均数

6.3 函数表达式

函数的表达式语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I0wO1yyw-1682119786861)(assets/6.png)]

示例：

<!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>函数的表达式写法</title>
    <script>
        let sum = function(num1, num2) {
            return num1 + num2;
        }
        console.log(sum(1, 2));
    </script>
</head>

<body>

</body>

</html>

练习题

  1. 求1-n之间所有数的和

  2. 求1-n之间所有数的偶数和

  3. 求1-n之间的平均数

6.4 函数的可变参数

当定义函数的参数个数不确定时，可以使用函数的可变参数实现,示例：

<!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>可变参数</title>
    <script>
        //可变参数的本质是数组
        function fun1(...args){
            let sum = 0;
            for(let i=0;i<args.length;i++){
                sum+=args[i];
            }
            return sum;
        }
        let result = fun1(1,2,3)
        console.log(result);
    </script>
</head>
<body>
    
</body>
</html>

6.5 回调函数

在js中函数也是一种数据类型：function类型，我们看如下示例

示例：

<!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>函数也是一种数据类型</title>
    <script>
        let method1 = function() {
            console.log("函数也是一种数据类型");
        }
        console.log(typeof method1);
    </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>回调函数</title>
    <script>
        let method = function() {
            console.log("函数")
        }

        //定义函数，参数是函数类型
        let method2 = function(method) {
            method();
        }

        //将函数和其他基本类型数据一样的方式传递参数，传入变量名
        method2(method);
    </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>函数名存的是什么</title>
    <script>
        let method1 = function() {
            console.log('函数名存的是函数代码');
        }

        //打印发现函数名存的就是函数代码
        console.log(method1)

        //既然函数名存的是函数代码，那么以下两种方式都是函数的回调，功能是一样的。
        let method2 = function(method) {
            method();
        }
        method2(method1);
        method2(function() {
            console.log('函数名存的是函数代码');
        })
    </script>
</head>

<body>

</body>

</html>

6.6 函数的作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。作用域分为全局作用域、局部作用域、和块级作用域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ine2n2u1-1682119786862)(assets/7.png)]

let 变量 的作用域示例如下：

<!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>作用域</title>
    <script>
        //全局作用域，可在全局范围内访问
        let a = 1;
        let method = function() {
            console.log(a);
            //局部作用域，只能在函数内部使用
            let b = 2;
            console.log(b);
        }

        // console.log(b);
        method();
        for (let i = 3; i <= 3; i++) {
            //块级作用域，只能在块中使用
            console.log(i);
        }
        // console.log(i);
    </script>
</head>

<body>

</body>

</html>

6.7 小节

  1. 函数的基本使用

  2. 函数的表达式使用

  3. 函数的可变参数

  4. 函数的回调

  5. 函数的作用域

七、数组

Array数组在js中属于js的内置对象，这个概念后面详细讲解；这里先详细学习数组的应用。

7.1 数组的基本使用

js数组和java中数组的概念差不多，这里不在过多介绍，直接通过案例演示数组的基本使用；

示例如下：

<!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>数组</title>
    <script>
        // 数组的定义,长度和类型都不固定，这是和java数组的区别
        let arr = [] //定义空数组
        let arr1 = [1, "hello", 2];
        //遍历
        for (let i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
    </script>
</head>

<body>

</body>

</html>

7.2 数组的crud操作

数组的常用添加方法有

  • push 将一个或多个元素添加数组尾部，并返回该数组的新长度
  • unshift()将一个或多个元素添加到数组的前面，并返回该数组的新长度
  • pop()从数组中删除最后一个元素，并返回该元素的值
  • shift()从数组中删除第一个元素，并返回该元素的值
  • splice() 从指定下标开始删除，删除指定个元素
  • forEach() 遍历数组

示例

<!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>数组的crud操作</title>
    <script>
        let arr = [];
        // 数组的添加操作,将元素添加到数组尾部，并返回长度
        console.log(arr.push('a', 'b'));
        console.log(arr);
        // 数组的添加操作，将元素添加到数组前面，并返回长度
        console.log(arr.unshift(1, 2));
        console.log(arr);
        // 数组的删除操作,删除数组最后一个元素，并返回删除的内容
        console.log(arr.pop());
        console.log(arr);
        // 数组的删除操作,删除数组第一个元素，并返回删除的内容
        console.log(arr.shift());
        console.log(arr);
        // 数组修改操作，通过下标修改
        arr[0] = 'hello';
        console.log(arr);
        //数组遍历操作
        let arr2 = [1, 2, 3, 4, 5];
        arr2.forEach(function(value, index, arr2) {
            console.log('值' + value);
            console.log('下标' + index);
            console.log('数组' + arr2);
        })
    </script>
</head>

<body>

</body>

</html>

7.3 数组的其他操作

数组其他常用方法

  • join()将一个数组的所有元素连接成一个字符串并返回这个字符串。
  • filter() 过滤数组中的元素，返回一个新数组。
  • map() 按照函数映射数组的每一个元素，并返回一个新的数组

示例

<!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>数组的其他操作</title>
    <script>
        let arr = [1, 2, 3, 4, 5];
        // 将数组按照指定字符连接成一个字符串
        console.log(arr.join('~'));
        // 过滤数组中大于3的元素，并返回新的数组
        let arr2 = arr.filter(function(value) {
            return value > 3;
        })
        console.log(arr2)
        console.log(arr);
        // 将数组中每个元素*5 并返回新的数组
        let arr3 = arr.map(function(value) {
            return value * 5;
        });
        console.log(arr3);
    </script>
</head>

<body>

</body>

</html>

7.4 小节

  1. 数组的定义
  2. 数组crud操作
  3. 数组的拼接、过滤、映射操作

八、对象

8.1 对象的创建与调用

对象的创建语法如下：字面量的方式创建对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPWlwq7k-1682119786863)(assets/8.png)]

对象的调用语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A99mbNyT-1682119786864)(assets/9.png)]

示例：

<!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>对象的创建与调用</title>
    <script>
        //创建对象
        let person = {
                id: 1,
                name: '张三',
                age: 18,
                eat: function(food) {
                    console.log('吃' + food);
                }
            }
            //调用
        console.log(person.id);
        console.log(person.name);
        console.log(person.age);
        person.eat('鸡蛋炒西红柿');
    </script>
</head>

<body>

</body>

</html>

8.2 构造方法的定义与调用

构造方法定义的语法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FaQkouO-1682119786866)(assets/10.png)]

调用语法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmbZue9c-1682119786867)(assets/11.png)]

示例：

<!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>构造函数</title>
    <script>
        //定义构造函数
        function Person(id, name, age) {
            this.id = id;
            this.name = name;
            this.age = age;
            this.eat = function(food) {
                console.log('吃的是：' + food);
            }
        }
        //创建对象
        let xiaoHong = new Person(1, '小红', 18);
        //使用对象
        console.log(xiaoHong.id);
        console.log(xiaoHong.name);
        console.log(xiaoHong.age);
        xiaoHong.eat('鸡蛋炒西红柿');
    </script>
</head>

<body>

</body>

</html>

8.3 对象的curd操作

对象的curd操作如下

<!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>对象的crud操作</title>
    <script>
        let person = {
            id: 1,
            name: '张三'
        }

        //添加属性或方法
        person.age = 18;
        person.eat = function() {
            console.log("吃饭不积极，思想有问题");
        }
        console.log(person);
        //删除属性
        delete person.age;
        console.log(person);
        //对象的遍历
        for (key in person) {
            console.log(key);
        }
    </script>
</head>

<body>

</body>

</html>

8.4 小节

  1. 对象的创建与调用
  2. 构造方法的定义与调用
  3. 对象的crud操作

九、总结

  1. js五种基本数据类型
  2. 数据类型转换
  3. 运算符
  4. 流程空中管制
  5. 函数
  6. 数组
  7. 对象
加菲猫���
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
JavaScript基础学习
07-10
JavaScript基础学习
js基础学习.txt
03-30
学习基础，切不可盲目，一定要从基础的学起。javascript是web开发必须要学会的语言，这个资料可以让你找到一些适合的方法，有简单的正则表达式，js的简单用法等。欢迎收藏
JS入门到精通完整版
qq_46362763的博客
08-08 1万+
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................
Javascript学习
守灯者的博客
03-04 1335
Javascript 学习记录
JS从入门到精通
最新发布
p6448777的博客
04-30 383
/在其他浏览器中可以使用getComputedStyle()这个方法来获取当前的样式，这个方法是window方法可以直接使用需要有两个参数第一个，需获取样式的元素。如果两个对象一样，但是地址不同，也是会返回false的。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。//常用节点:文档节点(HTML文档)、元素节点(HTML标签)、属性节点(元素的属性)、文本节点(HTML中的文本内容)
Javascript 基础知识学习
岳来的博客
11-23 6915
javascript 基础学习
JS如何学习
weixin_35755562的博客
01-05 362
JavaScript 是一种流行的编程语言，可以用来开发网站和网络应用。它可以运行在浏览器中，也可以运行在服务器端。 要学习 JavaScript，你可以从以下几个方面入手： 了解 JavaScript 的基本语法。JavaScript 的语法和其他编程语言很像，你可以先了解变量、数据类型、运算符、流程控制语句、函数等基础概念。 在浏览器中练习 JavaScript。JavaScript 可以直...
JavaScript的学习
m0_66030479的博客
07-09 1618
js的学习
javascript基础学习代码总结
01-18
还有写对于javascript对应的知识点案例。每个文件里都会有很多的注释信息，方面阅读和学习。 ...2.每个模块代码都有注释可用来...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
Javascript基础学习笔记
09-28
基础的js笔记
JavaScript基础学习资料
10-08
JavaScripte变量，JavaScript运算符，JavaScript数组，JavaScript流程语句，JavaScript字符串函数，JavaScript函数基础，JavaScript基础DOM操作，JavaScript正则表达式，DOM对象，BOM浏览器对象模型
JS入门必备基础知识（适合新人学习）
qq_57162921的博客
09-21 2006
js基础学习
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaWeb系列三: JavaScript学习 上
你好, 我在学java的博客
03-10 3942
前端js学习
JavaScript 基础（超详细）
TKOP_的博客
03-02 9147
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
JS看这一篇就够啦，JS基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-26 1473
JS看这一篇就够啦，JS基础大全，可用于快速回顾知识，面试首选
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 8131
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
JavaScript入门学习指南
qq_42560575的博客
04-15 2489
适合初学者入门自学

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加菲猫���

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值