javascript基础

最新推荐文章于 2024-05-09 15:15:12 发布

香香不学习

最新推荐文章于 2024-05-09 15:15:12 发布

阅读量56

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/firenaimal/article/details/130067764

版权

javascript

学习目标

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的组成

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

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

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

二、javascript 引入方式

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

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

2.1 js内部引入

js内部引入语法

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>
        //控制台输出一句话
        console.log("hello js");
        //在页面输出一句话
        document.write("hello js");
        //弹出一句话
        alert("弹出一句话");
    </script>
    //外部引入方式
    <script src="../js/dome01.js"></script>
</head>
<body>
    
</body>
</html>

2.2 js外部引入

js引入外部文件语法

注意：引入外部文件的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代码

外部引入的.css

//控制台输出一句话
console.log("hello js");
//在页面输出一句话
document.write("hello js");
//弹出一句话
alert("弹出一句话");

三、数据类型

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 a = prompt("请输入一个数字");
        //输出
        console.log(a);
        document.write(a);
        alert(a);
    </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 时的注意事项：

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

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

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

大部分情况使用 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>关键字</title>
    <script>
        //变量
        let a =1;
        a = 2;
        console.log(a);
        //常量
        //const用于定义常量，初始化的值不能改变，但是可以定义对象，改变其对象内容
        const j =1;
        console.log(j);
        /*什么时候用常量，定义对象用常量，定义对象通常const因为改变对象的内容
        内容不会改变对象的地址
        */
        const obj={};
        obj.id=1;
        obj.name="张三";
        console.log(obj);

    </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 i =12;
        let j = '3';
        //当运算能正常运动时不会发生隐士转换
        console.log(i+j);
        //当运算能不能正常运动时，尝试隐士转换对应类型进行运行
        console.log(i-j);
        console.log(i*j);
        //隐士转换非0即true
        while(j){
            console.log("hello js")
            break;
        }
    </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>显示转换</title>
    <script>
        let a ='12';
        console.log(typeof a);
        document.write(typeof a);
        //将string类型转为number类型
        a = Number( typeof a);
        console.log(typeof a);
        document.write(typeof a);
        //将number显示转换为string
        //a= a+"";number+字符串（""）可以转变为string
        a= a+"";
        console.log(typeof a);
        document.write(a);
    </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>
        let i =1;
        let j =2;
        console.log(i>1 || j >1);
        console.log(i>1 && j>1);
    </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 循环结构

if else循环

<!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>ifelse结构</title>
    <script>
        // if(boolean条件){
        //     语句;当语句为一条语句时，{}可以省略
        // }
        // if(boolean条件){
        //     语句，如果语句时一条{}可以省略
        // }else {
        //     语句，如果语句时一条{}可以省略
        // }

        // if(boolean条件){
        //     语句
        // }else if(条件){
        //     语句
        // }....{
        //     语句
        // else {
        //     语句
        // }
        
        let a =1;
        if(a>0){
            console.log('正数');
        }else{
            console.log('0或负数');
        }


        let scroe =prompt("请输入一个成绩分数");
        if(scroe>0 &&scroe<60 ){
            console.log('不及格');
        }else if(scroe<85){
            console.log('良好');
        }else{
            console('优秀');
        }
    </script>
</head>
<body>
    
</body>
</html>

练习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 综合练习

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

六、函数

6.1 函数的概念

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

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

6.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>函数的定义</title>
    <script>
        //无参数无返回值函数定义
        function fun1(){
            console.log('hello 函数');
        }
        fun1();
        fun1();
        //有参数函数
        function fun2(food){
            console.log('吃的是'+food);
        }
        fun2('活珠子');
        //有参数有返回值函数
        function fun3(a,b){
            return a+b;
        }
        let result =fun3(1,2);
        console.log(result);
        
    </script>
</head>
<body>
    
</body>
</html>

练习题

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

<!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.求1-n之间所有数的和
        function sum01(n){
        let sum=0;                       //局部变量声明
        for (let i=1;i<=n;i++){          //初始表达式，测试表达式，改变表达式
         sum+=i;                    //将i+n的值给到sum
        }
    return sum;  
        }
        console.log(sum01(3));

		
		2. 求1-n之间所有数的偶数
        function sum2(n){
            let sum =0;
            for(let j=1;j<n;j++){
                if(j%2==0){
                    sum+=j;
                }
            }
            return sum;
        }
        console.log(sum2(3));

		3. 求1-n之间的平均数
        function sum03(n){
            return sum01(n)/n;
        }
        console.log(sum03(100));
    </script>
</head>
<body>
    
</body>
</html>

6.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 fun1 =function(n){
            console.log(n);
        }
        fun1(1);
        //思考fun1 = function(n){
          //  console.log(n);
        //}
        console.log(fun1);
        // 函数是一种数据类型，是function类型。
        console.log(typeof fun1)
    </script>
</head>
<body>
    
</body>
</html>

练习题

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

<!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. 求1-n之间所有数的和
        function sum01(n){
        let sum=0;                       //局部变量声明
        for (let i=1;i<=n;i++){          //初始表达式，测试表达式，改变表达式
         sum+=i;                    //将i+n的值给到sum
        }
    return sum;  
        }
        console.log(sum01(3));


		2. 求1-n之间所有数的偶数
        function sum2(n){
            let sum =0;
            for(let j=1;j<n;j++){
                if(j%2==0){
                    sum+=j;
                }
            }
            return sum;
        }
        console.log(sum2(3));

		3. 求1-n之间的平均数 
        function sum03(n){
            return sum01(n)/n;
        }
        console.log(sum03(100));
    </script>
</head>
<body>
    
</body>
</html>

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,4)
        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 fun1 = function(n){
            console.log(n);
        }
        console.log(typeof fun1)
        console.log(fun1)
        //回调函数 
        let fun2 = function(fun1){
           fun1(13);
           console.log(typeof fun1); 
        }
        fun2(fun1);

        fun2(function(n){   
        })
        
    </script>
</head>
<body>
    
</body>
</html>

接下来我们探讨一个问题，变量村基本类型存的是数值，那么函数名也是数据类型，它存的是什么呢？我们看如下代码

示例：

函数名存的是什么

6.6 函数的作用域

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

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 小节

函数的基本使用
函数的表达式使用
函数的可变参数
函数的回调
函数的作用域

七、数组

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>
        //定义空数组，js中数组本质是对象，可以有方法，长度可变，类型可变
        let arr=[];
        console.log(arr.length);
        arr.push(1);
        console.log(arr);
        console.log(arr.length);
        //定义数组根据下标操作
        let arr2 =[1,2,'hello',3];
        for(let i=0;i<arr2.length;i++){
            console.log(arr2[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>
        /*
            数组的常用添加方法有

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

        */ 
        let arr =[1,2,3];
        //可以添加一个或多个数组到尾部
        arr.push('2','是对的');
        arr.push(true);
        //添加一个或多个数组到头部
        arr.unshift('uu','ddads');
        arr.unshift('flase');
        console.log(arr);
        //从数组中删除最后一个元素，并返回值
        let res =arr.pop();
        console.log(res);
        console.log(arr);
        res =arr.shift();
        console.log(arr);
        arr.splice(2,2);
        console.log(arr);
        //数组的遍历
        arr.forEach(function(value,index,arr){
            console.log(value);
            console.log(index);
            console.log(arr);
        })
        //js中可以根据需要传递少于函数定义的参数
        arr.forEach(function(value){
            console.log();value
        })
    </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,6,7,8,9];
        //将数组拼接成一个字符串
        let str =arr.join('-');
        console.log(str);
        //过滤出大于五的数
        let arr2= arr.filter(function(value){
            return value>5;
        })
        console.log(arr2);
        console.log(arr);
        //将数组元素扩大10倍
        let arr3 = arr.map(function(value){
            return value*10;
        })
        console.log(arr3);
        console.log(arr);
    </script>
</head>
<body>
    
</body>
</html>

7.4 小节

数组的定义
数组crud操作
数组的拼接、过滤、映射操作

八、对象

8.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 xiaoHong={
            username:'小红',
            sex:'女',
            eat:function(){
                console.log('吃的很多')
            }
        }
        //使用对象
        console.log(xiaoHong.username);
        console.log(xiaoHong.sex);
        xiaoHong.eat();
    </script>
</head>
<body>
    
</body>
</html>

8.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>
        //定义构造函数
        function Person(id,name,sex){
            this.id=id;
            this.name=name;
            this.sex=sex;
            this.eat=function(food){
                console.log('吃的是'+food);
            }
        }
        let xiaoHong =new Person(1,'小红','女');
        console.log(xiaoHong.id,xiaoHong.name,xiaoHong.sex)
        xiaoHong.eat('ss');
        let xiaoMing =new Person(2,'小明','男');
        console.log(xiaoMing.id,xiaoMing.name,xiaoMing.sex);
        xiaoMing.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>对象的curd操作</title>
    <script>
        //定义构造函数
        function User(id,name,sex){
            this.id=id;
            this.name=name;
            this.sex=sex;
            this.sleep = function(){
                console.log('睡得早');
            }
        }
        //创建对象
        let user = new User (1,'张三','男');
        //添加属性
        user.age=18;
        //添加方法
        user.eat=function(){
            console.log('吃的香');
        }
        //删除属性
        delete user.name;
        //遍历
         for(key in user){
            //由于key是字符串，只能这么调用user['age']
            console.log(user[key]);
            // console.log(key);
         }
    </script>
</head>
<body>
    
</body>
</html>

8.4 小节

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

九、总结

js五种基本数据类型
数据类型转换
运算符
流程空中管制
函数
数组
对象

香香不学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础

学习目标一、javascript 概述1.1 javascript 介绍JavaScript在1995年由Netscape（网景）公司设计的脚本语言。js是一个什么样的语言呢？ECMAScript 是JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准（规范了js的规范），定义了一种语言的标准与具体实现无关BOM : -Browser Object Model 浏览器对象模型 :一套操作浏览器功能的api;DOM:Document Object Model 文
复制链接

扫一扫