JavaScript学习笔记（不间断更新）

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量264 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45776730/article/details/121194944
版权

JavaScript学习笔记

一、样例

  • 引入方法：内部标签，外部引入
  • 代码如下：
    • HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- 内部标签，script标签内，写Javascript代码  -->
    <script>
        alert('hello world');//弹窗
    </script>

<!--外部引入-->
    <script src="js/js1.js"></script>

<!--  不用显示定义type，也默认就是javascript  -->
    <script type="text/javascript">
        //所以注释可以//这样写
    </script>

</head>
<body>

<!--这里也可以存放js代码-->
</body>
</html>

	- js1.js

alert("引入的标签")

在这里插入图片描述在这里插入图片描述

二、基本语法

  • 定义变量var+变量名（=...）
  • 每一句加;和Java语法一样
  • ifelse语句
  • 注意，JavaScript也严格区分大小写
  • 可以在页面->审查元素->console直接编辑代码
  •  //console.log(score)在浏览器的控制台打印变量,等价于System.out.println();

在这里插入图片描述
在这里插入图片描述

  • 页面编辑器设置断点并调试：点击行号并刷新即可调试
    在这里插入图片描述
  • 浏览器常用的几个功能模块
    在这里插入图片描述

三、数据类型

  • javascript不区分小数和整数
  • 字符串
  • 布尔值
  • &&，||，！
  • 极其重要！！！不能用==判断相等！

在这里插入图片描述
须知：
- NaN===NaN不能判断，NaN不等于任何数！包括自己！
- 只能通过isNaN(NaN) 来判断这个数是否是NaN
在这里插入图片描述

  • 浮点数存在精度的损失
    在这里插入图片描述

  • 粗略判断浮点数相等的方法：Math.abs(1/3-(1-(2/3))<0.000000001

  • null和undefined

  • 数组var nums=[1,2,"3",null,true]

    • 打印数组console.log(var[0])
      在这里插入图片描述

  • 对象

    • 对象是大括号，数组是中括号
    • 每个属性之间用逗号隔开，最后一个不用
var person={
            name:"111",
            age:1
        }

在这里插入图片描述

四、严格检查类型strict

  • 'use strict'严格检查模式，预防JavaScript的随意性导致一些问题，必须写在JavaScript第一行
  • 局部变量建议使用 let 定义
<script>
	'use strict';//加入这条语句，全局变量就会报错
	//全局变量
	i=1
	//局部变量
	let j=1
</script>

在这里插入图片描述

五、字符串类型

  • 转义'\'
  • ``Tab与Esc之间：
    • 多行字符串
    • 模板字符串
<script>
    'use strict';
    let num=1;
    console.log(num);
    console.log('a\'a\'b');
    let nums=`模板字符串
    换行 模板字符串
    `;
    let msg=`hello,${nums}`;
    console.log(msg);
</script>

在这里插入图片描述

  • 字符串长度str.length

  • 取字符串某一元素：str[0]

  • 字符串的可变性：不可变
    在这里插入图片描述

  • 这里插句话，一开始我在控制台输入var num=1后反复报错，一直以为是文件本身格式有问题，上网搜半天，最后查看代码才发现原来是反复定义的问题
    在这里插入图片描述

  • 大小写转换str.toUpperCase(),str.toLowerCase()

let str="abc"
console.log(str.toUpperCase());
console.log(str.toLowerCase());

在这里插入图片描述

  • 字符串取字符下标str.indexOf()
let str="abccc"
console.log(str.indexOf("c"));//2
  • 删去部分字符串srb.substring()
let str="abccc"
console.log(str);
console.log(str,str.substring(1,2));//前闭后开
console.log(str,str.substring(1));//按0算，第1个往后

在这里插入图片描述

六、数组类型

  • arr.length可赋值，数组长度可变

  • 给数组添empty类型

  • 赋值过小会丢失元素
    在这里插入图片描述

  • 取索引值：arr.indexOf()

  • 类型不同数值相同索引值不同在这里插入图片描述

  • arr.slice()截取数组一部分，返回一个新的数组在这里插入图片描述

  • push() pup()
    在这里插入图片描述

  • unshift()首部插入

  • shift()首部弹出
    在这里插入图片描述

  • sort()排序

  • reverse()倒置
    在这里插入图片描述

  • arr.concat()数组拼接

在这里插入图片描述

  • 连接符arr.join()打印拼接数组，使用特定的输入内容拼接在这里插入图片描述

  • 注意：上2并没有修改原来的数组，只是返回了一个新的数组

  • 多维数组

七、对象

  • JavaScript中的所有键都是字符串，值是任意对象！！！
  • 格式：
var 对象名={
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}
  • JavaScript中键值对描述对象属性，多个属性间逗号隔开，最后一个不带逗号
  • 对象赋值：使用一个不存在的属性，不会报错，undefined
  • 动态的删减属性delete
  • 动态的添加属性：直接给新的属性增加值即可
    在这里插入图片描述
    在这里插入图片描述
  • 判断属性值是否在对象中in，可以判断继承toString

在这里插入图片描述

  • 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
    在这里插入图片描述

八、流程控制

  • if-else 同java
  • while 同java
<script>
    var a=1
    while(a<10){
        console.log(a);
        a++;
    }
</script>

在这里插入图片描述

  • for循环，fori自动弹出，let定义局部变量
    在这里插入图片描述在这里插入图片描述
  • foreach方法循环
<script>
    var age=[312,21,332,1,31]
    age.forEach(function (value){
        console.log(value)
    })
</script>

在这里插入图片描述

  • for...in和for...of
    for index in...这里index是索引值而非元素值
<script>
    var age=[312,21,332,1,31]
    for(var index in age){//这里index是索引值而非元素值
        console.log(index,age[index]);
    }
</script>

在这里插入图片描述

在这里插入图片描述

  • for _ of...这里_可以表示元素值
<script>
    var arr=[1,2,3,4]
    for(_ of arr){
        console.log(_);
    }
</script>

在这里插入图片描述

九、集合Map和Set

  • Map
<script>
    var map1=new Map([["a",1],["b",2],["c",3]]);
    var name1=map1.get("a");//通过key获得value
    map1.set("d",4);
    console.log(name1);
    var name2=map1.get("d");
    console.log(name2)
</script>

在这里插入图片描述

  • Set：无序不重复的集合
<script>
    var set1=new Set([1,2,3,3,3])
    set1.add(4)
    console.log(set1.has(1))
    console.log(set1)
</script>

在这里插入图片描述

  • iterable
<script>
    var map1=new Map([["a",33],["b",44],["c",55]]);
    for (let x of map1){
        console.log(x);
    }
</script>

在这里插入图片描述

  • 注意：一个早期的漏洞
<script>
    var arr=[3,4,5]
    console.log(arr);
    for (let x in arr){
        console.log(x);
    }
    for (let x of arr){
        console.log(x);
    }
    arr.name="2131321";
    console.log(arr);
    for (let x in arr){
        console.log(x);
    }
    for (let x of arr){
        console.log(x);
    }
</script>

在这里插入图片描述

十、函数

  • 定义函数

方法一：

function 方法名(参数值){
	...;
	...;
	return ...
}

方法二：function(参数值){}是一个匿名函数，但可以把结果赋值给方法名，通过方法名调用函数

var 方法名=function(参数值){
	...;
	...;
	return ...
}

方法一和方法二等价

  • JavaScript方法可以传入多个参数，也可以不传参数且不报错，需要自定义异常
<script>
    function abs(x){
        if (typeof x!=='number'){
            throw 'Not a number';
        }
        if (x<0){
            return -x;
        }else{
            return x;
        }
    }
</script>

在这里插入图片描述

  • arguements是js免费赠送的关键字，代表传进来的所有参数是一个数组，可以利用这个关键字获取传进来的特定的参数值
<script>
    function abs(x) {
        console.log("x->", x);
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        if (arguments.length>1){
            var target=arguments[1];
            console.log("Target:",target)
        }
    }
</script>

在这里插入图片描述

  • 问题：arguements包含所有的参数，如何排除已有的参数去使用特定的参数？

  • ...rest获取除已定义的参数外的所有参数，rest参数放最后，必须用...标识

以前的操作：

<script>
    function a(a,b){
        console.log("a:",a);
        console.log("b:",b);
        if(arguments.length>2) {
            for (var i = 2; i < arguments.length; i++) {
            }
        }
    }
</script>

现在的操作：

<script>
    function a(a,b,...rest){
        console.log("a:",a);
        console.log("b:",b);
        console.log(rest);
    }
</script>

在这里插入图片描述

十一、变量作用域

  • 在JavaScript中，var定义的变量是有作用域的，在函数体中声明的变量函数外不可用
<script>
    function a(){
        var x_=1;
        function b(){
            var y=2;
            y=x_+1;//x_可用
        }
        var z=y+x_;//y不可用
    }
</script>

在这里插入图片描述

  • 假设内部函数变量和外部重名
<script>
    function a(){
        var x_=1;
        function b(){
            var x_=2;
            console.log("inner x_",x_);
        }
        console.log("调用内部b()");
        b();
        console.log("outer x_",x_);
    }
</script>

在这里插入图片描述

  • 注意：假设在JavaScript中函数查找变量从自身函数开始，由"内"向“外"查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。|

  • 提升变量的作用域

<script>
    function a(){
        var x="x"+"+"+y;
        console.log(x);
        var y="y";
    }
</script>

在这里插入图片描述等价于

<script>
    function a(){
        var y;
        var x="x"+"+"+y;
        console.log(x);
        var y="y";
    }
</script>
</head>

  • 说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值。建议养成规范，提前声明变量

  • 全局对象window----重点

    <script>
        var x="21"
        alert(x);
        alert(window.x)//默认所有的全局变量，都会自动绑定在window对象下
        window.alert(x);
        window.alert(window.x)
    </script>
  • alert()函数本身也是window的一个变量
  • Javascript 实际上只有一个全局作用域，任何变量（函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenleError
    <script>
        var old_alert=window.alert;
        window.alert=function (){

        };
        window.alert("12");//无显示
        window.alert=old_alert;
        window.alert(123);
    </script>

在这里插入图片描述

十二、规范！

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量会导致冲突。
解决办法：把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

    <script>
        var XZZ={};
        XZZ.name='xzz';
        XZZ.add=function (a,b){
            return a+b;
        }
    </script>

在这里插入图片描述

  • jQuery等价于“&”
  • 局部作用域let
    <script>
        function a(){
            for(var i = 0;i<5;i++){

            }
            console.log(i+1)//出问题，i出了定义域还能使用
        }
    </script>

在这里插入图片描述
改成let关键字

    <script>
        function a(){
            for(let i = 0;i<5;i++){

            }
            console.log(i+1)//报错
        }
    </script>

在这里插入图片描述

  • const常量，自定义即不可修改，只读变量
    <script>
        const PI=3.14;
        PI = 1;
        console.log(PI);
    </script>

在这里插入图片描述

十三、方法

  • 方法就是把函数放在对象的里面，对象只有两个东西:属性和方法
  • 调用对象内的方法要带()
  • Date方法
<script>
    var XZZ={
        name:"xzz",
        birth:2001,
        age:function (){
            var now=new Date().getFullYear();//获取今年年份
            age=now-this.birth;//this关键字
            console.log(age);
        }
    }
</script>

在这里插入图片描述
拆开分解分析

    <script>
        function getAge(){
            var now=new Date().getFullYear();
            return now-this.birth;
        }

        var XZZ={
            name:"xzz",
            birth:2001,
            age:getAge
        }
    </script>
    //getAge() NaN 因为此时this为window对象，不含birth属性
    //XZZ.age() ok 因为此时this为XZZ对象，包含birth属性

在这里插入图片描述

  • 注意：this是无法指向的，是默认指向调用它的那个对象
  • 在js中控制this指向，使用方法apply()，任何方法都自带这个方法
    <script>
        function getAge(){
            var now=new Date().getFullYear();
            return now-this.birth;
        }

        var XZZ={
            name:"xzz",
            birth:2001,
            age:getAge
        }
        getAge.apply(XZZ,[])//this指向XZZ，参数为空
    </script>

在这里插入图片描述

十四、内部对象

  • Date

在这里插入图片描述
在这里插入图片描述

时间戳：1970 1.1 0:00:00起的毫秒数：
在这里插入图片描述

时间戳转本地时间：
在这里插入图片描述
本地时间：toLocaleString()在这里插入图片描述console.log(now.toLocaleString())
在这里插入图片描述

JSON
  1. JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  2. 在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示
  3. JSON格式：
    • 对象都用{}
    • 数组都用[]
    • 所有键值对都是用 key:value
  4. js对象转为JSON字符串：
    <script>
        var user={
            name:"XZZ",
            age:2,
            sex:"nan"
        }
        var jsonuser=JSON.stringify(user)

    </script>

在这里插入图片描述

  1. JSON字符串转为js对象：
    <script>
    	//注意：parse方法内参数为字符串
        var user=JSON.parse('{"name":"XZZ","age":2,"sex":"nan"}')
    </script>

在这里插入图片描述

Ajax
  • 原生的js写法 xhr 异步请求
  • jQuery 封装好的方法 $("#name").ajax("")
  • axios请求

十五、面向对象

原型对象

  • 类：模板 原型对象
  • 具体实例
  • JavaScript不一样
  1. 原型继承__proto__
    <script>
        var user={
            name:"xzz",
            run:function (){
                console.log(this.name+" run")
            }
        }
        var Aperson={
            name:"duixiang"
        }
        //原型对象
        Aperson.__proto__= user;


    </script>

在这里插入图片描述
2. class继承

  • 定义一个类，属性，方法
    <script>
        //class定义一个学生类，继承
        class Student{
            //构造器
            constructor(name) {
                this.name=name
            }
            hello(){
                console.log("hello"+" "+this.name)
            }
        }
        var student1=new Student("xzz")
        student1.hello()

    </script>

在这里插入图片描述

        class littleStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }
            MyGrade(){
                console.log("MyGradeis"+this.grade)
            }
        }
        var ls=new littleStudent("继承","grade")
        ls.MyGrade()
        ls.hello()

在这里插入图片描述
本质是查看对象原型

  • 原型链__proto__
  • 简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》
  • 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
  • 所以Object.prototype.__proto__值为null

十六、操作BOM对象！重点

  1. BOM浏览器模型
  2. JavaScript的诞生就是为了在浏览器中运行
  3. window代表浏览器窗口(重要)
    在这里插入图片描述
  4. navigator封装了浏览器的信息
    在这里插入图片描述
  • 大多数时候，不会使用navigator对象，，因为会被人为修改
  • 不建议用这些属性判断和修改代码
  1. screen代表屏幕尺寸
<script>
	screen.width
	screen.height
</script>
  1. location（重要）：代表当前网页的URL信息
host: "localhost:63342"
href: "http://localhost:63342/MyProject1/.idea/1.MyProject1/lesson2…ml?_ijt=se47neoaar5rtmuic1usb2dhfn&_ij_reload=RELOAD_ON_SAVE"
protocol: "http:"
reload:function reload()//刷新网页
location.assign('https://www.bilibili.com/video/BV1JJ41177di?p=19')//设置新的地址

在这里插入图片描述在这里插入图片描述

  1. document代表当前的页面

在这里插入图片描述
在这里插入图片描述

-Thanx-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习笔记
04-10
JavaScript学习笔记
JavaScript 学习笔记（六）
10-29
JavaScript 定义类或对象,javascript步入高手行列必须要了解的。
JavaScript 基础笔记总结(全部)
2401_84433974的博客
06-17 389
14.流程控制。
JavaScript学习笔记-B站动力节点
m0_52041525的博客
02-19 1493
文章目录1.1.什么是JavaScript，有什么用？1.2.HTML，CSS，JavaSript三者关系2.在HTML中怎么嵌入JavaScript代码？3.4.5.6.7.8.9.10.11.12.13.14.15. 1.1.什么是JavaScript，有什么用？ JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。 LiveScript的出现让浏览器更加的生动
JavaScript学习笔记（DOM编程案例）
少不入川。的博客
03-28 280
文章目录1.前言2.实例2.1 获取文本框的value2.2 通过innerText和innerHTML来操作div和span2.3 关于正则表达式2.4 使用正则表达式验证邮箱地址2.5 使用正则表达式去除字符串前后的空白2.6 表单验证2.7 复选框的全选和取消全选2.8 获取下拉列表选中项的value2.9 显示系统时间2.10 内置支持类：Array 1.前言 1、JavaScript包括三大块： ECMAScript：JS的核心语法（ES规范 / ECMA-262标准） DOM：Document
JavaScript API学习笔记
Samuel的博客
08-23 653
JavaScript API Web API数量之多令人难以置信，这里我们了解开发中常用的一些 Atomics与SharedArrayBuffer 多个上下文访问SharedArrayBuffer时，如果同时对缓冲区进行操作，可能出现资源争用问题 Atomic API通过强制同一时刻只能对缓冲区执行一个操作，让多个上下文安全地读写一个SharedArrayBuffer；Atomic API是ES2017中定义（类似于操作系统的原语） SharedArrayBuffer SharedArrayBuffer与A
JavaScript学习笔记-第十章 BOM
百念成诗
09-28 156
JavaScript学习笔记 第十章 BOM 1、BOM-window对象 BOM全称Browser Object Model-浏览器对象模型，提供了很多对象，用于访问浏览器的功能，没有规范，由各个浏览器厂商制定标准，兼容性差。 BOM的核心是window： 所有浏览器都支持window对象，它表示浏览器窗口。 所有js的全局对象、函数及变量均自动成为window对象的成员。 全局变量是window对象的属性。 全局函数是window对象的方法。 HTML DOM的document也是window对象的属
JavaWeb前端内容学习笔记
2202_75452684的博客
07-19 865
本文包含前端内容：HTML、CSS、JavaScript、BOM、DOM、VUE、Element、Nginx
Three.js 学习笔记之模型 | 几何体 - 材质
好好学习天天向上
01-17 1416
说明：几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，用来模拟物体的表面。4.1使用点模型渲染顶点数据，会把几何体渲染为点，网格模型Mesh会把几何体渲染为面。4.2使用线模型渲染顶点数据，从第一个点开始到最后一个点，依次连成线。在上述案例中，坐标4和坐标5其实是重复的坐标，重复的坐标可以复用吗？顶点坐标：一个矩形平面，可以至少通过两个三角形拼接而成。三个点可以构成一个三角形，从第一个点往第三个点连接。是一个没有任何形状的空几何体，通过定义顶点数据将。几何体顶点位置数据和点模型。
react自学笔记总结不间断更新
weixin_30760895的博客
01-07 57
React React 是由Facfbook维护的一套框架，并且引用到instagram React只是我们熟悉MVC框中的V层，只是视图层面的一个框架，只有俩个半api(createClass,createElement,render) React与Angular的区别 React: 性能好，单向数据绑定，不是完整的框架。 ...
WEB前端学习笔记-JavaScript-DOM
祁十二的博客
02-05 175
001-DOM编程-获取文本框的value.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取文本框的value</title> </head> <body> <script type="text...
JavaScript 学习笔记（四）
10-29
今天继续学习JS中的对象，昨天学完了本地对象中的两个重要对象Array和Date。今天看下内置对象Global对象和Math对象。
JavaScript学习笔记之数组求和方法
10-22
主要介绍了JavaScript学习笔记之数组求和方法的相关资料,需要的朋友可以参考下
JavaScript 学习笔记（十五）
10-29
事件是DOM（文档对象模型）的一部分。事件流就是事件发生顺序，这是IE和其他浏览器在事件支持上的主要差别。
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 635
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1295
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 251
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值