js基础学习

六艺和尚

已于 2022-07-12 22:42:09 修改

阅读量110

点赞数

文章标签： javascript 学习前端

于 2022-07-06 00:26:09 首次发布

本文链接：https://blog.csdn.net/weixin_46507345/article/details/125630567

版权

入门练习

js输入输出

 <script type="text/javascript">
        // 控制浏览器弹出一个警告
        alert("这是我的第一个代码，弹窗警告")

        // 向body中输出一个内容
        document.write("body里我出来了")

        // 向控制台输出一个内容，检查的console中
        console.log("你猜我在哪出来呢？");
    </script>

在这里插入图片描述

js编写位置

ctrl+shift+F ：中文简单和繁體切换

<!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>
    <!-- 1.位置 -->
    <script>
        alert("我是head中的js")
    </script>
    
    <!-- 2 位置 注意引入外部后，在立面编写就会出错-->
    <script src="./test.js"></script> 
</head>
<body>
    <!-- 3.位置 -->
    <!-- 
        可以将js代码编写到标签的onclick属性中
        当我们迪纳基按钮时，js才会执行
    -->
    <button onclick="alert('，我是body中的js讨厌，你点我干嘛呢？')">点我一下</button>
    <!-- 
        可以将js代码写入超链接的href属性中，这样当点击超链接是，会执行js代码
     -->
     <a href="javascript:alert('让你点，你就点')">你也点我一下</a>
</body>
</html>

在这里插入图片描述

基础语法

/* 
            1.js严格区分大小写
            2.js每一条语句以（;)结尾，如果不写分号，浏览器会自动添加，会消耗系统资源，
            同时有时候还可能嘉措
            3.js会忽略多个空格和换行，所以我们可以通过换行和空格进行格式化
        */

字面量和变量

 // 声明变量：使用var关键字声明
       var a;
       a = 123;
       console.log(a);

/*
        标识符：
            在js中所有的可以由我们自主民命的都可以是标识符
            命名规则：1.字母，数字,_,$,例如：var a_$_1;
                     2.标识符不能以数字开头
                     3.标识符不能是ES中的关键字或保留字
                     4.标识符一般都采用驼峰命名法
                            - 首写字符小写，每个单词开头单词字母大写，其余小写
                            helloWorld
                     5.中文也可以作为变量名，但是千万别这样用

    */

六种数据类型

  // String
        var str = "hello";
        alert(str);
        // number
        //     Infinity NaN
        // 精度不要用几个来计算钱
        var num = 123;
        num = 1.23;
        console.log(typeof num);
        console.log(Number.MAX_VALUE);
        console.log(typeof -Number.MIN_VALUE)
        //  null，表示空值（对象的）
        // boolean 布尔
        // Undefined 声明但未赋值

强制类型转换

String

 转换为String:
            - 方式一：toString（）
                    注意只能number，boolean可行
                    null和undefined不可行
            - 方式二：String(),null和undefined也可行
                    例如：num = String(num);

Number

转换为Number：
                注意：无toNumber()这个函数
                方式一：Number()函数 
                    - 如果是纯数字，直接转换
                    - 如果有非法数字，则转换为NaN,注意单个字母也不行，不是assicl码
                    - 如果为 var a = ""; 为空或全为空格则转换为0
                    - 布尔类型 true->1，false->0
                    - null -> 0
                    - undefined -> NaN
                方式二：专门用来对付字符串
                    - parseInt() 把一个字符串转换为一个整数 :从左读取数字，遇到非数字直接结束（首非数字输出NaN）
                    - parseInt(a,10) 10表示转换为10进制
                    - parseFloat() 把一个字符串转换为一个浮点数：规则同上,
                    - 如果遇到非String，会将其转为String，再进行转换

进制数

其他进制数字：
                16进制：0x开头
                8进制：0开头
                2进制：0b开头

转换为boolean

 转换为boolean
            - 使用Boolean函数
            - 数字-->boolean:除了0和NaN，其余都是true
            - 字母-->boolean:除了空串，全部为true
            - null ，undefined -->都为false

运算符

 运算符：typeof ：返回字符串类型    
            +： 加法运算，
                - 非Number+运算，如 false+13 转换为Number进行运算= 0+13
                - 但是string+其他就会将所有转换为string形式
                - String 多行，应该用加号连接
            -： 减法运算
                - 减法都是转换为Number计算 如100-"1"=99;
            *： 乘法运算
                - 任何值做 -，*，/ 都会自动转换为Number
                - 所以我们可以通过一个值-0 *1 /1 将其转换为Number，原理跟Number()一样
            /:  除法运算
            %:  取模运算
                -  任何数自动转换为Number

自增和自减

自增：
                - 通过自增可以使变量在自身基础上增加1
                - a++ 和 ++a 用法及内核同其他编译器
                d = 20
                    20 + 22 + 22
                d = d++ + ++d + d;
自减：
	同理

逻辑运算符

   逻辑运算符：转换为boolean值
                ! 非
                && 与
                || 或
				false || alert("不在检查第二次");

				对于非布尔值进行与或运算时，会先将其转换为布尔值，再进行运算，并返回原值
            与运算：
            		- 二者都为真，返回后面一个例如：res = 1 && 2; 返回2
                    - 二者都为假,则返回靠前的。
            或运算：
                    - 如果第一个值为true，必定返回第一个值
                    - 如果第一个值为false，则直接返回第二个值
                    - result = 1 || 2; 返回

关系运算符

一位位比较，一旦找到结果，就结束了

关系运算符：比较两个值之间的大小关系，成立返回true，不成立返回false
                    - 任何值和NaN比较，都是false
                    - 数字和字母比较，把字母转换为数字（NaN）
                    - 字符串和字符串比较，通过unicode编码比较，一位一位进行比较，如果两位一样，则比较下一位如：bbc < b = false,abb < aaa= false
                    - 如果比较的两个字符串型的数字，可能会得到不可预期的结果

Unicode编码

js中

 /*
            在字符串中使用转义字符输入Unicode编码
            \u四位编码
            例如：console.log("\u2620");
        */
        console.log("\u2620");

html中

<!-- 
        在网页中使用Unicode编码
        &#编码;(这里的编码是十进制的)
     -->
     <h1>&#1</h1>

相等运算符

相等

将左==右中转换为Number进行判断运算,但是 null == 0 是false
“1”==1" true
undefined == null true
NaN 不和任何值相等，NaN == NaN; false
isNaN(a); 判断a是不是NaN。

不相等

使用 !=

10 != 5 true
10 != 10 false
“1” != 1 false 对变量进行自动转换，转换后相等，所以为false

全等

===
用来判断两个值是否全等，他和相等类似，不同的是他不做类型转换，如果两个类型不同，直接返回false
“1” === 1; false

不全等

!==
是否不全等，不做类型转换
1 !== “1” true

条件运算符

三元运算符
语法：条件表达式 ? 语句 1 ：语句 2；
如果条件true 语句1
如果条件false 语句2
true ? alert(“语句1”) : alert(语句2); 执行语句1
会将非布尔转换为布尔，再进行运算

运算符优先级

> ( 在这里插入图片描述

语句

语句自上而下一条条运行
JS中可使用{}对语句进行分组
一个{}中的语句我么也称为一个代码块
代码块内部的内容与外部完全可见，都可以访问，不会存在不可访问的情况，将相当让我们方便看而已，类似于作文分段。

流程控制语句

语句的分类：
1.条件判断
2.条件分支
3.循环语句

if(判断)
{
	执行语句;
}
else if
{
	执行语句;
}
else
{
	执行语句;
}

小练习if语句

  /*
            - prompt()可以弹出一个提示框，该提示框会带有一个文本框
            - 用户可以在里面数据一段内容，该函数需要一个字符串作为参数
            - 该字符串会作为提示框的提示文字
            - 用户输入的内容就是返回值,string类型
            - 可用 + 转换为Number
        */
       var score;
        score = +prompt("请输入名字");
        // 如果不转换，这里就是String 转换为 Number 进行等的，C、python等都是全等
        if(score==100){
            alert("奖励你一个红🐎");
        }
        else if(score>=80){
            alert("奖励一个绿🐎");
        }
        else{
            alert("奖励一个黄🐎");
        }

条件分支语句

var num = prompt("请输入数字");
        switch(num)
        {
            case 1:console.log("case 1");
            case 2:console.log("case 2");
            default:console.log("default");
        }

循环语句

var num=1;
        while(num<100){
            document.write(num+"<br/>");
            num ++;
        }

        do{
            document.write(num+"<br/>");
            
        }while(num-->0);

for 循环
质数小练习

 var num = 1;
        num = prompt("请输入一个数字");
        if(num<=1)
            alert(num+"不合法");
        else{
            for(var i=2;i<num;i++)
            {
                if(num%i==0)
                {
                    alert(num+"不是质数");
                    break;
                }
            }
            if(i==num)
                alert(num+"是质数");
        }

对象简介

JS数据类型
String、Number、Boolean、Null、Undefined
Object 对象（非常重要）

基本数据累心都是单一的值，值与值之间没有任何的联系。
对象属于一个复合的数据类型，在对象中可以保存多个不同数据类型的属性。
例如：var name=“孙悟空”;
var gender=“男”;
var age = 18;

对象的分类
1.内建对象

由ES标准中定义的对象，自热河的ES的实现中都可以使用
比如Math String Number Boolean Function Object

宿主对象

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
比如BOM DOM
如console.log() console就是一个对象

自定义对象

由开发人员自己创建的对象

 // 创建对象
        // 使用new关键字调用的函数叫做构造函数 constructor
        // 构造函数时专门用来创建对象的函数
        var obj = new Object();
        console.log(obj);
        /*
            向对象中添加属性
                语法：对象 属性名 = 属性值;
        */
        //  向obj中添加一个属性
        obj.name = "孙悟空";    
        obj.gender = "男";
        obj.age = 18;
        
        /* 
            读取对象中的属性：
                语法：对象.属性名    
                如果读取的对象中没有的属性，不会报错，而是会返回 undefined
        */
       console.log(obj.age);
        /* 删除对象的属性
            语法：delete 对象.属性名 */
        delete obj.name;

命名方式：

 		var obj = new Object();
        obj.name = "孙悟空";
        obj.gender = "男";
        obj.age = 100;
        // 属性名不强制要求遵守标识符的规范，什么乱七八糟的都可以使用，但是我们尽量按照标准规范使用
        // 但是我们尽量按照规范来
        // 如果要使用特殊的属性名，不能采用. 的方式来操作，需要是用另一种
        //     语法：对象["属性名"] = 属性值 (存取都是这个格式)
        obj.var = "hello";
        obj["123"] = 123;
        console.log(obj["123"]);

内部嵌套对象，检查对象中是否存在什么属性

  var obj1 = new Object();
        var obj2 = new Object();
        obj2.name = "李四";

        obj1.name = "张三";
        obj1.obj2 = obj2;
        console.log(obj1.obj2.name);
        console.log("name" in obj1);

进阶

基本引用数据类型

基本数据量欸行都是在栈内存中保存，var a；var b=a；存储位置不一样，修改a，b不会改变。
对象：var obj1 = Object(); var obj2 = obj1; （这两个相同，前者改变，后者跟着改变）开辟内存中间，存的是！！内存地址！！，每创建一个新的对象，就会在堆内开辟出一个新的空间。

但是注意：obj2 = null改变后，obj1是不会改变的，只是obj2 存的地址变成null了，原本的obj1没改变。

对象字面量（建立对象另外一种方法）

// 使用对象字面量创建对象
        var obj = {};
        console.log(typeof obj);
        obj.name = "孙库空";
        console.log(obj.name);

        /* 
            使用对象字面量，可以在创建对象时，直接指定对象中的属性；
            语法：{属性名:属性值}
            属性名：普通英文单词可加可不加引号，使用逗号隔开，如果一个属性后没有其他属性了，就不要写逗号了。
        */
       var obj2 = {name:"猪八戒","gender":"男"};
       console.log(obj2.name+obj2.gender);

函数创建

 /* 
            函数：
                - 函数也是一个对象
                - 函数中可以封装一些代码和功能，在需要时可以直接执行这些功能。 
                - 函数中可以保存一些代码在需要的使用调用
        */
        // 以 封装的代码以字符串的形式传递给构造函数
        var fun = new Function("console.log('函数中的代码执行')");

        // 封装到函数中的代码不会立即执行
        // 函数中的代码会在函数调用的时候执行
        // 调用函数语法：函数对象+括号
        // 调用函数时会执行相关代码
        fun();
        // 基本不用
        fun.hello = "你好";
        console.log(fun.hello);
        /* 
            使用函数声明来创建语法。
            语法：
                function 函数名(形参1，形参2....){
                    语句1;
                    语句2;
                    语句3;
                }
        */
        
        function fun2(){
            console.log("这是我的第二个函数");
            document.write("~~~(>_<)~~~~~~");
        }
        fun2();

        /* 
            使用函数表达式创建一个函数
            var 函数名 = function(形参1，形参2......);
        */
        var fun3 = function(){
            console.log("我是函数表达式3");
        }
        fun3();
    </script>

函数参数

// 调用类型时，解析器不会检查实参的类型
        // 所以要注意是否有可能接收到非法参数，如果有可能，需要对参数进行类型检查
        function sum(a,b){
            console.log(a+b);
        }
        sum("hello","fales");

        /* 
            调用函数时，解析器也不会检查参数的数量
            多余的实参不会被赋值
            如果实参的数量少于形参的数量，则没有对饮实参的形参僵尸undefined
            */

函数返回值

 /* 
            创建一个函数，返回三个数的和。
            return 后面不跟任何值，就会返回undefined
        */
       function sum(a,b,c){
        var res = a+b+c;
        return res;
       }
       var res = sum(1,2,3);
       console.log(res);
		// 判定偶数
		function isOu(num){
			return num%2 == 0;	
		}

实参可以是任何值

/* 
            创建一个函数，返回三个数的和。
            return 后面不跟任何值，就会返回undefined
        */
       function sum(a,b,c){
        var res = a+b+c;
        return res;
       }
       var res = sum(1,2,3);
       console.log(res);

       var obj = Object();
       obj.name = "孙悟空";
       obj.age = 15;
       obj.gender = "男";

       function sayHello(obj){
        console.log("I'm"+obj.name);
       }
       sayHello(obj);

       // 实参是函数
       function fun4(fun){
            fun(obj);
       }
       fun4(sayHello);

函数加括号的区别

mianji()
            - 调用函数
            - 相当于使用函数的返回值
        mianji
            - 函数对象
            - 相当于直接使用函数对象

枚举

        var obj = {
            name:"孙悟空",
            age:18,
            gender:"男",
            address:"花果山"
        }

        // 枚举对象中的属性
        /* 
            语法：
                for (var 变量 in 对象){
                    语句。
                }

            for ... in 语句 对象中有几个属性，循环体就会执行几次
            每执行时会将对象中的一个属性的名字赋值给变量
        */
        for (var n in obj){
            console.log(n,obj[n]);
        }

方法

var obj = Object();
        obj.name = "孙悟空";
        obj.age = 15;
        obj.gender = "sex";
        // 对象的属性可以是对象，也可以是寒湖是
        obj.sayName = function(){
            console.log(obj.name);
        }
        obj.sayName();
        /* 
            函数也可以称为对象的属性
            如果一个函数作为一个对象的属性保存
            那么我们称这个函数时这个对象的方法
            调用这个函数就说调用对象的方法
            */
        function fun(){
            console.log("调函数");
        }

        obj.sayName(); // 调函数
        fun(); // 调方法

全局作用域

 /* 
            作用域
                - 作用域只一个变量的作用的范围
                - 两种作用域
                    - 全局作用域
                        - 直接编写在script中的JS代码，都是全局作用域
                        - 全局作用域在页面打开时创建，在页面关闭时销毁
                        - 全局作用域中有一个全局对象window可以直接使用
                        - 在全局变量中创建的变量都会作为window对象的属性
                        - 创建的函数都会变成window中的方法
                    - 函数作用域
                        - 调用函数时创建函数作用域，执行完毕则销毁
                      
            变量声明提前：(声明只是声明了，var a = 10; 只有声明： var a;)
                var 变量; 都会提前到代码最前面声明。
                    但是必须用 var
                    例如：
                        console.log(a);
                        var a = 1;
                        也可执行 
                函数声明提前：
                    使用 function 函数(){ } 会在所有代码执行前就被创建，所以我们可以在函数声名前调用
                    function fun1(){
                        语句;
                    }
                    使用函数表达式创建的函数，不会被声明提前
        */
        fun1();
        var a=1,b=2;
        console.log(window.a,window.b);
        console.log(window);
        console.log("c",c);
        var c = 1;
        function fun1(){
        console.log("我是提前函数",a);
       }