## javaScript 自己学习做的笔记（可以用来复习）

于 2024-02-28 09:51:14 发布
阅读量2k 收藏 49
点赞数 43
文章标签： javascript 学习 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/live_55368/article/details/136337081
版权

javaScript 自己学习做的笔记（可以用来复习）

第一章 js组成

1.1 js组成：

js语法 DOM（页面文档对象模型）BOM（浏览器对象模型）

DOM——文档对象模型

文档对象模型（Document Object Model , 简称DOM）通过DOM的接口可以对页面上的各种元素进行操作（大小，位置，颜色）。

BOM——浏览器对象模型

浏览器对象模型（Browser Object Model , 简称BOM）通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器跳转，获取分辨率等。

1.2 js的写法

  • 行内式

    可以将少量JS代码写在HTML标签中

  • 内嵌式

  • 外部JS文件

1.3 注释
  • 单行注释： //
1.4 变量声明

​ 声明一个变量a

​	var  a;
1.5 变量赋值

​ a可以被赋值为任何数据类型的值

​ a=20;

1.6 声明多个变量

​ 同时声明多个变量，只要写一个 var

​ var a=20 ,b=‘yy’;

1.7 输入与输出

​ alert(msg) 浏览器弹出警告框

​ console.log(msg) 浏览器控制台打印输出信息

​ prompt(info) 浏览器弹出输入框，用户可与输入

第二章——数据类型

js把数据类型分成两类：
  • 简单数据类型
  • 复杂数据类型
2.1简单数据类型

Number 数字型，包含整形和浮点型

Boolean 布尔型，true，false , 等价于1，0

String 字符串型，如 “张三”，在JS中字符串都要带引号

Undefined 声明了a，但是没有赋值，此时a=undefined

Null var a=null; 声明变量a为空值

在JS中 八进制前面加0 十六进制前面加 0x

2.2 数字类型

数字类型的三个特殊值

​ lnfinity 代表无穷大

​ -infinity 代表无穷小

​ NaN 代表一个非数值

2.3 判断是否位数字——isNaN()

isNaN(X)

X 是数字，返回false

X不是数字，返回true

2.4 转义字符
\n		换行

\\		斜杠

\'		单引号

\''		双引号

\t		Tap缩进

\b		空格
2.6 字符串类型

获取字符串长度 length

<script>
	var a= "hello word";
	console.log(a.length)// 打印出11
</script>
2.7 字符串拼接
<script>
	var a = "holle";
	var b = "word";
    console.log(a+b);//打印出holleword
</script>
2.8 获取数据类型typeof
<script>
	var a =24;
    console.log(typeof a) //结果number
</script>

第三章——操作符

3.1 算数运算符

加（+）

减（-）

乘（*）

除（/）

3.2 递增递减运算符

++a 先自加，在返值

a++ 先返值，在自增

第三章——比较运算符

<		小于号
>		大于号
=		等于号
%		摸除
>=		大于等于号
<=		小于等于号
==		判断号
!=		不等号
===		全等
&&		真真
||		真假

第四章——流程控制

4.1 if语句

语法结构

if(条件表达式){
	//条件表达式成立执行代码
}

if else 语句 （双分支语句）

if(条件表达式){
//如果成立执行这行代码
}else{
//否则执行这行代码
}

if else if (多分支语句)

if(条件表达式1){
//语句1
}else if（条件表达式2）{
//语句2
}....
4.2 三元表达式

表达式1 ？ 表达式2 ：表达式3 ；

  • 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
4.3 分支流程控制switch语句
switch(表达式){
	case value1:
		//表达式 等于value1 时执行的代码
		break;
	case value2:
	//表达式 等于value2 时执行的代码
		break;
	default:
	// 表达式不等于任何一个 value 时执行的代码
}

第五章——循环结构

5.1 for 循环
for(var i=0;i<10;i++){
	循环体 //循环体循环10次
}
5.2 while 循环

先执行条件表达式，结果为true，则继续执行循环体，如果为false，则循环过程结束

while (条件表达式) {
	//循环体代码
}
5.3 do while 循环

do while 循环会先执行一次循环体，在对表达式去进行判断，如果为真就重复执行，否则退出循环

do{
	//循环体
} while（条件表达式）
5.4 continue 与 break
  • continue:立即跳出本次循环，继续下次循环
  • break：用于立即跳出整个循环（循环结束）

第六章——数组

6.1 数组创建
var arr1 = new Array();						// 创建一个空数组
var arr2 = new Array(20);					// 创建一个包含20项的数组
var arr4 = [];							   // 创建一个空数组
var arr5 = [20];						   // 创建一个包含1项数据为20的数组
var arr6 = ["zhang san","lisi","wangwu"]	 // 创建一个包含3个字符串的数组
6.2 索引

数组下标从0开始

var arr = [1,2,3];
console.log(arr[1]) //输出2
6.3 获取数组长度
var arr = [1,2,3]
console.log(arr.length) //输出3
6.4数组增删查
arr.push()		// 新增一个元素到数组末尾
arr.unshift()	// 新增一个元素到数组开头
arr.pop()	    // 删除数组末尾的一个元素
arr.shift()	    // 删除数组开头的一个元素
arr.splice()    // 删除指定的元素
arr.indexOf()   // 查找数组是否存在这个元素，存在返回下标，不存在返回-1

第七章——函数

7.1 声明函数
// 声明函数
function 函数名() {
    //函数体代码
}
  • function 是声明函数的关键字,必须小写
7.2 调用函数
// 调用函数
函数名();  // 通过调用函数名来执行函数体代码
7.3 函数参数和实参
function 函数名( 形参 ) {    
    //函数体代码
}
函数名( 实参 );

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参

参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

7.4 函数形参和实参个数不匹配问题
function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);            // 形参和实参个数相等，输出正确结果(300)
sum(100, 400, 500, 700);  // 实参个数多于形参，只取到形参的个数(500)
sum(200);                 // 实参个数少于形参，多的形参定义为undefined，结果为(NaN)

注意点：

  1. 在JavaScript中，形参的默认值是undefined
  2. 函数可以带参数也可以不带参数
  3. 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
  4. 调用函数的时候，函数名括号里面的是实参
  5. 多个参数中间用逗号分隔
    形参的个数可以和实参个数不匹配
7.5 函数返回值

在定义函数的时候，用return语句代表这个函数的返回值，函数内程序一旦执行到return 语句，代表该函数执行结束

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准

function add(num1，num2){
    //函数体
    return num1，num2;
}
var resNum = add(8,6); // 调用函数，传入两个实参，并通过 resNum 接收函数返回值
alert(resNum);          // 6
7.6匿名函数
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

  • 因为函数没有名字，所以也被称为匿名函数

  • 这个fn 里面存储的是一个函数

  • 函数表达式方式原理跟声明变量方式是一致的

  • 函数调用的代码必须写到函数体后面

7.7 箭头函数

所谓箭头函数，它就是匿名函数，它简化了匿名函数，它的调用方法和匿名函数是一样的

// 1.下面是匿名函数的常用的方法
let fun1 = (a,b) =>{ return a + b;}
// 2.如果箭头函数没有参数，那么也要写括号
let fun2 = () => { console.log('你好');}
// 3.如果只有一个参数，那么括号可以省略
let fun3 = name =>{ console.log(`你好${name}`);}
// 4.如果箭头函数只有一句代码，那么可以省略大括号，同时代码默认会被return出去
let fun4 = name =>`你好${name}`;
contsole.log(funt4(小明));
// 上层作用域 window
// 5.箭头函数没有自己的this，它的this是来自上层作用域的this（所在的{}属于谁它就指向谁）
let obj ={
    fun5(){console.log('fun5:'this);}
    fun6:() =>{console.log('fun6:',this);}
// 所在作用域 obj
}
obj.fun5();
obj.fun6();

第八章——作用域

8.1 全局作用域
  • 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
  • 全局作用域是最大的作用域
  • 这个作用域会一直存在，直到页面关闭
8.2 局部作用域
  • 局部作用域是在全局作用域下的一个相对小的作用域
  • 在局部作用域中定义的变量只能在这这局部使用
  • 在一个js中只有函数能生成一个作用域，别的不行
  • 每一个函数的是一个局部作用域
var num = 100;	//这是一个全局作用域下的变量
funation fn(){
    var num2 = 200;
    //这是一个在fn函数局部作用域下的变量
}
fn();
8.3块作用域

在JS中使用{ }包裹起来的叫代码块，代码块内部将声明的变量外部将【有可能】无法被访问

for(let i=1; i<3;i++){
    console.log(i) //输出正常
}
//超出了i的作用域
console.log(i)//报错

第九章——闭包

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域

闭包 = 内层函数 + 外层函数的变量

两个函数嵌套在一起，里层的函数使用的外层的变量，就会产生闭包

闭包的作用：使用函数内部的变量在函数执行完毕后，仍然存活在内存中(延长了局部变量的生命周期)；让函数外部可以操作(读写)*到函数内部的数据*(变量/函数)

	 function fn1(){
        var a = 2;
        function fn2(){//执行函数定义就会产生闭包(不用调用内部函数)
            console.log(a);
        }
        //新版的chrome需要返回一下内部函数才会显示闭包
        return fn2()
    }
    fn1()

第十章——面向对象

面向对象 :Everything is object （一切皆对象）

面向对象编程 —— Object Oriented Programming，简称 OOP

面向对象的特性：封装性 继承性 多态性

10.1 JavaScript 如何创建对象

字面量方式

通过 new Object() 创建：

var person = new Object()
person.name = '张三'
person.age = 18
person.sayName = function () {
  console.log(this.name)
}

简写形式对象字面量来创建：

var person = {
  name: '张三',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}
10.2 常见内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象

Math

Math.PI		 // 圆周率
Math.floor() 	 // 向下取整
Math.ceil()            // 向上取整
Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		 // 绝对值
Math.max()/Math.min()	 // 求最大和最小值 
Math.random()//随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

第十一章——事件

11.1 事件监听

一个简单的点击事件监听

// 获取你想要添加监听器的元素，这里假设它的ID是"myButton"
var button = document.getElementById("myButton");

// 使用addEventListener方法添加点击事件监听器
button.addEventListener("click", function() {
  // 这里是当按钮被点击时要执行的代码
  console.log("按钮被点击了！");
});

内联事件监听器

<button onclick="myFunction()">点击我</button>

11.2事件处理

1.点击事件click

在JavaScript中，可以使用addEventListener方法来监听元素的点击事件，如果你有一个ID为"Button"的按钮，并在点击该按钮时执行某个函数

document.getElementById('Button').addEventListener('click', function() {
  // 在这里编写你想要执行的代码
});
2.鼠标移动事件mousemove

在JavaScript中，鼠标移动事件通常指的是mousemove事件。当用户移动鼠标指针时，就会触发这个事件。你可以通过监听mousemove事件来跟踪鼠标的位置，并在需要时执行相应的操作

document.addEventListener('mousemove', function(a) {
	  // a.clientX 和 a.clientY 提供了鼠标指针相对于浏览器窗口可视区的坐标
	  var x = a.clientX;
	  var y = a.clientY;
	  console.log('鼠标当前位置：', x, y);
	});
3.键盘事件
  1. keydown：当用户按下键盘上的任意键时触发。这个事件会持续触发，直到用户松开按键。
  2. keypress：当用户按下键盘上的字符键（例如字母、数字、标点符号等）时触发。这个事件通常用于捕获用户输入的字符。
  3. keyup：当用户松开键盘上的按键时触发。
document.addEventListener('keydown', function(event) {
  console.log('按键码：', event.keyCode);
});

第十二章——ES6 + 新特性

12.1 异步编程

JavaScript是单线程的,所以解决方式——异步

异步解决方案是 事件轮询

事件轮询的核心是——回调函数

12.2 定时器

setTimeout函数用于在指定的毫秒数后执行一段代码，只执行一次。它接受两个参数：要执行的函数和延迟的毫秒数。例如，以下代码将在1000毫秒（1秒）后弹出一个Hello, world!

setTimeout(function() {
  alert("Hello, world!");
}, 1000);

setInterval`函数则用于每隔指定的毫秒数重复执行一段代码。它也接受两个参数：要执行的函数和每次执行之间的间隔毫秒数。例如，以下代码将每隔1000毫秒（1秒）更新一次控制台的时间戳：

setInterval(function() {
  console.log(new Date());
}, 1000);
12.3 回调函数

理解：函数可以作为一个参数传递到另外一个函数中，并且该函数不会立即执行;当满足某个条件时才执行该函数

function fn(){
    console.log('callback')
}
setTimeout(fn,3000)

同步任务：在主线程队列中，只有前一个任务完成后才会执行下一个任务

异步任务：不进入主线程队列,而是进入异步队列,前一个任务完成与否不影响后一个任务的执行(不阻塞后续任务执行的任务)

回调地狱

是在JavaScript等异步编程语言中常见的一个问题，它发生在很多嵌套的回调函数

setTimeout(function(){
    console.log('日日复月月');
    setTimeout(function(){
        console.log('月月复年年');
        setTimeout(function(){
            console.log('年年复此生')
        },1000)
    },2000)
},3000)
 
//    日日复月月
//    月月复年年
//    年年复此生

代码的可读性差、可维护性差 代码的扩展性差

12.4 promise对象

promise是一个原生的JavaScrip对象，是一种异步编程解决方案，通过一个回调，避免更多的回调

Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）

12.5 async / await关键字

声明异步函数

async function myAsyncFunction() {
  // 异步操作
}

12.6

使用await等待异步操作

在异步函数内部，你可以使用await关键字来等待Promise的解决或拒绝。请注意，await只能在async函数内部使用

async function fetchData() {
  const response = await fetch('https://api.example.com/data'); // 等待网络请求
  const data = await response.json(); // 等待响应解析为JSON
  console.log(data);
}
12.6 错误处理

使用try...catch语句来处理可能的错误和异常

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
12.7 调用异步函数

使用.then()和.catch()：

javascriptfetchData().then(() => {  
    console.log('Data fetched successfully');
}).catch((error) => { 
    console.error('Error:', error);
});

或者在另一个异步函数中使用await：

javascriptasync function main() { 
    await fetchData(); 
    console.log('Continuing after data fetch...');
}
main();
12.8 let和const关键字

let允许你声明一个作用域受限于块级、语句或表达式的变量

这意味着在for循环等结构中，每次迭代都可以为变量获得一个新的绑定

特点：

  • 块级作用域
  • 不存在变量提升（hoisting）
  • 在同一个作用域内，不允许重复声明同一个变
if (true) {
  let x = 10; // 只在if语句块内有效
}
console.log(x);
12.9 const关键字

const用于声明一个只读的常量

一旦声明，常量的值就不能改变 const声明的变量也有块级作用域，与let相同 尝试修改const声明的变量会导致运行时错误

特点：

  • 块级作用域
  • 声明时必须赋值
  • 常量的值不能通过重新赋值来改变，但如果常量是一个对象或数组，其内容（如对象的属性或数组的元素）是可以被修改的。
  • 不存在变量提升
  • 在同一个作用域内，不允许重复声明同一个常量
const PI = 3.14159;
PI = 3.14; // TypeError: Assignment to constant variable

const obj = { property: "Hello" };
obj.property = "Hi"; // 允许修改对象属性
console.log(obj.property); // 输出 "Hi"

const arr = [1, 2, 3];
arr.push(4); // 允许修改数组内容
console.log(arr); // 输出 [1, 2, 3, 4]
12.10 与var的区别
  1. 作用域：var声明的变量具有函数作用域或全局作用域，而let和const具有块级作用域。
  2. 变量提升：var声明的变量会发生变量提升，即变量可以在声明之前被访问，但let和const不会。
  3. 重复声明：在同一作用域内，var允许重复声明同一个变量，但let和const不允许。
  4. 暂时性死区（TDZ）：let和const声明的变量存在一个“暂时性死区”，在声明之前的区域中访问这些变量会抛出错误，而var则不会。
  5. 初始赋值：const声明时必须赋值，而var和let可以先声明后赋值。
  6. 赋值限制：const声明的常量值不能改变（但对象属性和数组元素可以修改），而var和let声明的变量值可以重新赋值
12.11模块

模块的概念 模块是一种封装代码的方式，可以将相关的代码组织在一起，形成一个独立的单元，模块可以包含变量、函数、类等，并且可以被其他模块引用和使用。

模块的导入

是通过使用import语句来实现的

// 有一个math.js文件
export function add(x, y) {
  return x + y;
}
// 在另一个模块中使用import语句来导入并使用这个函数：
import { add } from './math.js';

console.log(add(2, 3)); // 输出 5

需要注意的是，在上面的例子中，'./math.js'表示math.js文件位于当前文件的同一目录下。

如果文件位于其他目录，你需要相应地修改路径

模块的导出

export语句用于导出模块中的变量、函数、类等

// 导出一个变量
export const myVariable = 'Hello, world!';

// 在另一个模块中导入
import { myVariable } from './myModule.js';

// 导出一个类
export class MyClass {
  constructor() {
    console.log('MyClass instantiated!');
  }
}

// 在另一个模块中导入
import { MyClass } from './myModule.js';

// 导出多个值
export const name = 'Alice';
export function greet() {
  console.log('Hello!');
}

// 在另一个模块中导入
import { name, greet } from './myModule.js';

需要根据你的项目结构和文件位置进行调整,在Web环境中使用ES模块时，通常需要包含完整的文件路径和扩展名

12.12 类和继承

Class(类)的基本概念：在JavaScript中，类是一种特殊的函数，用于创建对象。

它定义了一类对象的共同属性和方法 通过类，我们可以更方便地组织和管理代码，实现代码的封装和复用。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

在上面的示例中，我们声明了一个名为Person的类，并定义了一个带有name和age参数的构造函数。构造函数将这两个参数赋值给类的实例属性this.name和this.age。我们还定义了一个名为greet的方法，用于输出问候信息。

12.13 …extends(继承)

extends关键字后跟要继承的父类的名称

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类的构造函数
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

在上面的示例中，我们声明了一个名为Student的类，并继承了Person类。在Student类的构造函数中，我们使用super(name, age)来调用父类Person的构造函数，并传递name和age参数。然后，我们添加了一个名为grade的属性，并定义了一个名为study的方法

现在，我们可以创建Student类的实例，并调用其继承自父类的方法和自己的方法：

const student = new Student("Alice", 18, 12);
student.greet(); // 输出: Hello, my name is Alice and I'm 18 years old.
student.study(); // 输出: Alice is studying in grade 12.

可能写的不是很好，可以用来复习，这篇文章是自己在学习javaScript，做的笔记，若有出错，指出，我会改正😀😀😀

秋枫ઇଓ
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值