JavaScript学习笔记

最新推荐文章于 2025-05-31 16:02:29 发布
最新推荐文章于 2025-05-31 16:02:29 发布
阅读量205 收藏
点赞数
分类专栏： 前端 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43395693/article/details/119981559
版权

一、 JS学习

前言 基础知识

1. 编程语言（逻辑性）&标记语言

2. 硬件软件

硬件：输入、输出、CPU、硬盘（永久存储）、内存（暂时存储）；
软件：系统软件、应用软件；

3. 数据存储

数据存储：计算机内部是使用二进制来表示数据，存放在硬盘上的；
数据存储单位：bit，byte，KB，GB，TB
程序都是放在硬盘里面的，GPU用来控制程序的运行，CPU不是直接从硬盘去取数据，而是先将硬盘中的程序代码加载到内存中，内存主要是为了加快数据的读取速度。内存条用的是点，硬盘（外存）用的是机械。

第一部分 JS基础（变量、数据类型）

1. JS基础知识

1.1 JS是什么？

一种运行在客户端的脚本语言。

1.2 浏览器执行JS代码的原理

逐行解释，不需要编译。描述类的

1.3 JS组成

浏览器有渲染引擎（内核）blink和JS引擎组成。
ECMAScript：编程语法和基础核心、
DOM：文档对象模型（元素）、
BOM：浏览器对象模型（弹出框、跳转、获取分辨率等）

1.4 JS的三个输入输出语句

行内式、内嵌式、外部

1.5 注释

//、/**/

1.6 JS输入输出

propmt：输入框
alert：警示框
console.log()：打印框

2. 变量

装东西的盒子（容器），是程序在内存中申请的一块用来存放数据的空间
空间+变量名。

2.1 变曩的主要作用？

存放数据

2.2 写出变量的初始化？

2.3 说出变量的命名规范

2.4 画出变量是如何在内存中存储的能够写出交换变量案例

3. 数据类型

3.1 简介

不同的数据类型所占用的存储空间不同。JS中变量的数据类型是在程序运行的过程中才确定下来的。动态语言：变量的数据类型是可变的。

3.2 分类

  1. 简单数据类型：Number(0),Boolean(false),String(""),undefined,Null;
  2. 复杂数据类型：
    \nbsp
    Number: var a = 10;
    String: var a = ‘cdsv’
    Boolean: flag = true
    字符串长度length

3.3. 获取变量数据类型typeof()

3.4. 数据类型转换

第二部分 JS运算符

不能直接拿着浮点数去比较大小

1. 运算符Operator

2. 算数运算符

加减乘除取模
表达式与返回值

//1. 加减乘除
var a = 10,
    b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

3. 递增和递减运算符

自增自减

a=a+1;
a+=1;
a++

4. 比较运算符

5. 逻辑运算符

//4. 逻辑运算符?||&&,,布尔值
var num = 7;
var str = "我爱你~中国~";
console.log(num > 5 && str.length >= num);
console.log(num < 5 && str.length >= num);
console.log(!(num < 10));
console.log(!(num < 10 || str.length == num));
//表达式参与逻辑运算
//逻辑中断
//A&&B如果A为真，返回B的值；如果A为假，返回A[短路运算，逻辑终端]：：当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
console.log(123 && 456); //456
console.log(0 && 456); //0
//A||B如果A为真的，返回A，如果A为假，返回B
console.log(123 || 456); //123
console.log(0 || 456); //456
//案例
var num = 0;
console.log(123 || num++); //没有参与num++,直接中断了
console.log(num); //0

6. 赋值运算符

var a=10;
var b=a;
a+=2;
b-+3;

7. 运算符优先级

//小括号
//一元运算符
//算数运算符
//关系运算符
//相等运算符
//逻辑运算符
//赋值运算符
//逗号运算符

第三部分 流程控制顺序流程控制

1. 流程控制

2. 顺序流程控制

if(条件){
    执行语句
}

3. 分支流程控制

3.1 if 语句

if(条件1){
    执行语句1
}
else if(条件2){
    执行语句2
}
三元表达式
var a = 10;
a > 5 ? 'yes' : 'no';//条件表达式?表达式1:表达式2

3.2 分支流程控制switch语句

switch(表达式){
    case value1:
        执行语句1;
        break;//如果没有break，不会退出，执行下一个选项
    case value2:
        执行语句2;
        break;
        ...
    default:
        执行最后语句;
}

4. 循环语句

4.1 for

for(初始化变量;条件表达式;操作表达式){
    执行语句//循环体
}

4.2 while 、do while

while(终止条件){
    执行语句//循环体
}
do{
    执行语句//循环体
}while(终止条件)

4.3 continue,break

continue:立即跳出当前循环，跳到i++

 for (var i=0; i<100; i++) {
        if (i%7==0) 
            continue;
        }
        sum+=i;

break:立即跳出整个循环，循环结束

第三部分 数组

一组数值集合

1. 创建数组

 //创建数组
    ///1. new关键字
    var arr1 = new Array();
    ///2. 利用数组自变量创建数字[]
    var arr2 = [1,2,'a',true];
//遍历数组、数组长度arr.length;

2. 遍历数组

3. 数组长度

4. 新增数组元素

  1. 修改数组长度
  2. 修改索引号

5. 删除数组元素

6. 反转数组

7. 数组排序

案例解读：冒泡排序

第四部分 JS函数

1. 函数的参数（实参与形参）

function f(a,b) {//形参
    函数体
}
f(a,b);//实参
var f =new function(){
    函数体
}

2. 函数的返回值return

function f(a,b) {//形参
    return a+b;
}

3. arguments

4. 函数封装

5. 函数内嵌（内部引用）

6. 块级作用域

7. 预解析

预解析和代码执行

  1. 我们js引擎运行js分为两步:预解析代码执行
    1）预解析js引擎会把js里面所有的var 还有 function 提升到当前作用域的最前面
    2） 代码执行按照代码书写的顺序从上往下执行
  2. 预解析分为变量预解析（变量提升）和函数预解析（函数提升）
    1）变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
    2）函数提升就是把所有的函数声明提升到当前的作用域最前面不提升调用操作

8. Math 对象

Math.PI//圆周率
Math.floor()//向下取整
Math.ceil()//向上取整
Math.round()//四舍五入
Math.abs()//绝对值
Math.max()/Math.min()//最大值和最小值
//随机数方法
Math.round()//返回一个浮点数
Math.floor(Math.random()*(max-min+1))+min

9. Data日期对象

function getTime() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    //var day2 = date.getTime();
    var hour = date.getHours();
    hour = hour < 10 ? '0' + hour : hour;
    var minute = date.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;
    var second = date.getSeconds();
    second = second < 10 ? '0' + second : second;
    return year + '年' + (month + 1) + '月' + dates + '日 ' + arr[day] + ' ' + hour + ':' + minute + ':' + second;
}
console.log(getTime());

时间戳

    //getTime();
    //获得Date总的毫秒数﹑不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数
    // 1.通过valueof()\getTime()
    var date = new Date();
    console.log(date.valueof()); // 就是我们现在时间距离1970.1.1总的毫秒数
    console.log(date.getTime());
    // 2.简单的写法
    var date1 = +new Date();
    // +new Date() 返回的就是总的毫秒数console.log(date1);
    console.log(date1);
    // 3.H5新增的函数
    console.log(Date.now());

倒计时（时间戳相减，时间戳转换为其他的）

10. 数组对象

创建数组

    var arr = [];
    var arr = new Array(2);//length
    var arr = new Array(2,3);//元素

检测是否为数组方法

    arr instanceof Array
    Array.isArray(arr);

添加数组元素

    var arr = [1,2,3];
    arr.push(4);//参数是数组元素
    console.log(arr.push());//返回值是4=>数组长度
    console.log(arr);//[1,2,3,4]
    arr.unshift(0);//最前面添加
    console.log(arr.unshift());//返回值是5=>数组长度 
    console.log(arr);//[0,1,2,3,4]

删除数组元素

    var arr = [1,2,3];
    arr.pop(2);//参数是数组元素，一次只能删除一个元素
    console.log(arr.pop());//返回值是2=>删除元素
    console.log(arr);//[1,3]
    arr.shift(1);
    console.log(arr.pop());//返回值是1=>删除元素
    console.log(arr);//[3]

筛选数组元素

 var arr = [1500, 1200, 2000, 2100, 1800]; //要求把工资超过2000的删除，剩下的放到新的数组中
        var newarr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 2000) {
                newarr.push(arr[i]);
            }
        }

反转数组元素

    var arr = [1,2,3];
    arr.reverse();
    console.log(arr);//[3,2,1]

冒泡排序

    var arr = [1,2,3];
    arr.sort(function(a,b){
        return a-b;//升序
        //return b-a;//降序
    });
    console.log(arr);//[3,2,1]

获取数组元素的索引

var arr = [0,1,2,2,2];
console.log(arr.indexof('2'));
console.log(arr.lastIndexof('2'));

去重案例

//去重
function unique(arr) {
    var newarr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newarr.indexOf(arr[i]) === -1) {
            newarr.push(arr[i]);
        }
    }
    return newarr;
}
var demo = unique([1, 5, 6, 9, 8, 5, 2, 2, 1, 2, 6, 5, 4, 5, 2, 3, 6]);
console.log(demo);

数组转化为字符串

  1. toString()
  2. join(分隔符)
    arr.join(,)
  3. 根据位置返回字符
    charAt(index);
    charCodeAt(index);//ASICC
    str[index];
   var str = 'abcdefcxeafmafmsdeicmfaxas';
        var o = {};

        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i);
            // chars是字符串的每一个字符
            if (o[chars]) {
                // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);

11. 字符串对象

​

​

JS学习之运算符
weixin_44079801的博客
06-26 109
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>逻辑运算符</title> <script> //1.&&两侧都为true 返回true，否则返回false console.log(3 > 5 && 3> 2);//false console.log(3 > 5 &
JavaScript运算符
m0_72313625的博客
07-27 260
JavaScript运算符 主要包括：算术运算符 比较运算符 逻辑运算符 赋值运算符 位运算符
笔试问题记录
Kratial的博客
11-01 399
1.对于未初始化和未声明的变量为输出什么： 实例： var a; console.log(typeof a); console.log(typeof b); 运行结果： undefined undefined 2.事件绑定addEventListenter和on()的区别： 3.cookie属性有哪些： 1.name：cookie的名称。 2. value ：cookie的...
JavaScript
qq_43489683的博客
09-29 313
JavaScript初识 web标准: 结构: html 表现: css 行为: javascript => JS 弱类型的语言 js初识 JavaScript是一种专为与网页交互而设计的客户端脚本语言 JS组成: ECMAScript 基础语法 ECMAScript5 => ES5 => ES6 BOM (Browser Object Model) 浏览器对象模型 操作浏览器的接口和方法 (页面跳转 前进后退 识别设备类型) DOM (Docum
02【JS基础】-【 运算符】运算符 /  算数运算符 /  递增和递减运算符 /  比较运算符 / 逻辑运算符 / 赋值运算符 / 运算符优先级
嘿嘿_哈哈的博客
08-08 820
第二天【JS运算符】 运算符 / 算数运算符 /递增和递减运算符 / 比较运算符/ 逻辑运算符 / 赋值运算符 /运算符优先级 一. 运算符 1. 运算符（operator） 也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符有： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 2. 算数运算符 2.1 算术运算符概述 概念：算术运算使用的符号，用于执行两个变量或值的算术运算 2.2 浮点数的精度问...
JavaScript 学习笔记
qq_45800521的博客
01-31 396
JS学习笔记
尚硅谷JavaScript学习笔记
qq_43813373的博客
07-09 2058
文章目录变量关系运算逻辑运算数组函数 变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入和自定义只能用一个，不能像css似的进行逻辑覆盖--> <script type="text/javascript" src="javascript.js"
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1415
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javascript学习笔记
02-15
JavaScript学习笔记涵盖了多个核心主题，旨在帮助学习者掌握JavaScript编程语言的高级知识和应用技巧。首先，学习笔记从高级程序设计的角度出发，探讨了JavaScript的基础和进阶知识，这包括了编程范式、作用域、闭包...
uni-app学习笔记十五-vue3页面生命周期(二)
shenxiaomo1688的博客
05-28 537
onShow：用于监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面；onHide:监听页面隐藏，当离开当前页面时触发。
vue3 driverjs
高山景行，一尘不染
05-29 207
【代码】vue3 driverjs。
vue3 el-input type=“textarea“ 字体样式 及高度设置
最新发布
往事知多少？
05-31 402
在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。
深入理解JavaScript中的async/await
weixin_74183307的博客
05-28 690
JavaScript中的async/await是异步编程的重大改进，它让异步代码拥有同步的书写风格。async函数隐式返回Promise，await则暂停函数执行直到Promise完成，期间主线程继续执行其他任务。本文详细解析了async/await的工作原理、执行时机和Event Loop关系，并通过典型场景比较了与Promise的差异：async/await更适合顺序异步操作和复杂流程，而Promise在简单异步和并行操作上更直接。合理使用async/await能显著提升代码可读性。
Bootstrap法进行随机模拟
所念皆星河
05-28 319
本研究对26名神经功能受损儿童的空间知觉测试数据进行了分析。问题一采用Bootstrap方法计算A组与B组得分的皮尔逊相关系数，得到点估计0.821，95%置信区间为[0.662,0.913]。问题二以B组为因变量、A组为自变量建立一元线性回归模型，回归系数a的Bootstrap点估计为0.656，95%置信区间[0.49,0.847]，假设检验p值接近0，表明回归系数显著不为零。分析结果表明两组测试得分存在显著相关性和线性关系。
vue组件和插件的区别
u014642921的博客
05-28 510
只要有install方法并且接受Vue构造函数作为参数，就能够被Vue.use使用。可以是第三方库，也可以是自己编写的组件。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 648
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
vue+threeJs 绘制3D圆形
weixin_44565776的博客
05-30 577
本文介绍了使用Vue+Three.js绘制圆形并实现3D效果的方法。通过THREE.ShapeGeometry和THREE.ExtrudeGeometry类，可以将2D圆形路径转化为3D几何体，并通过参数控制拉伸深度、倒角效果等。文章提供了完整的实例代码，包括场景设置、相机控制、灯光创建等核心功能，并展示了如何开启线框模式（wireframe）进行可视化调试。该技术适用于需要将2D图形转化为3D模型的场景开发，如游戏、可视化项目等。作者通过实践掌握了2D图形3D化的基本技巧，强调了持续学习的重要性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Remote_Han

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

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

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

打赏作者

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

抵扣说明：

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

余额充值