程序员经验分享-hwhale

JS的初步了解学习笔记

2023-10-31

js学习笔记

一、初识js

1. 什么是js?

JavaScript是目前web开发中不可缺少的脚本语言，简称js。js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

  • 问：Js属于编程语言吗？
  • 编程语言分类：前端语言：JS（浏览器上）…
    后端语言：Java C++ Python Go JS C# …

2. js与html和css有什么区别

相同：html,css,js代码都可以在浏览器中运行，html，css，js它们的运行环境是浏览器
不同点：html，css 不叫编程语言 js是编程语言 js的运行环境不只浏览器，还可以在其它的环境中支行。

3. js有什么作用

js能做什么：
1）开发网站
2）开发app
3）小程序
4）游戏开发 小程序游戏 网页游戏
5）写后端 node.js
6）嵌入式
7）区块链

4. 作为一个前端开发工程师

明确：作为一个前端开发工程师 JS是核心 若总共占100分，那么js就站80分。

二、了解js

1.js的三种写法

1）行内写法

  • 写在开始的标签中，当成开始标签的属性
<button onclick="console.log(888)">点我</button>     //nclick单击事件

2）内部写法

  • js写在html文件中 学习时通常就写在script标签中，理论上js可以书写在页面的任意位置。
<script>

   alert("内嵌式")

</script>

3）内部写法

  • 首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
<script src="js文件路径地址"></script>

2.js的基本语法

基本语法：
1）JS是区分大小写 var a = 1; var A = 2;
2）忽略空白符（空格 换行 tab）
3）语句分号可加可不加
4）注释 单行注释 多行注释 注释是给程序员看的
5）标识符 和 关键字
  var a = 110; var 关键字 a变量名标识符
6）…

3.js的注释方法

注释方法：
单行注释： //注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

4.js的变量

定义：就是存放数据的、内存可以存储任意数据
   变量名：内存空间的别名 对变量名的操作就是对内存空间的操作
   变量值：存储在内存空间中的状态（数据）

var a = 1;   // var 变量名称 = 存储的数据
  • 变量命名规范:
       1)只能由字母、数字、_（下划线）、$（美元符号）组成。
       2)不能以数字开头。
       3)命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

什么是数据：
一个软件打开后，界面上有很多的数据，也叫状态，这个状态可以保存在
两个地方，一个是内存，一个是硬盘
项目运行起来，只有把数据加载到内存中，才使用使用数据。
内存中的数据，一断电，数据就没了，
还有一个地方，也可以保存数据，是硬盘，硬盘上的数据断电是不会丢失的。
内存空间地址：就是一块内存空间的地址，可以通过地址操作它对应空间中的数据，使用地址来操作非常不方便。

变量的分类

1.全局变量
2. 局部变量

全局变量和局部变量有什么特点：
1）全局变量可以在函数内部都能访问到
2）局部变量只能在函数内部访问到

  • 其分界点是：函数
    只要把变量写在函数里面就是局部变量，只要写在函数外面就是全局变量。

4.js的数据类型

为了更加合理使用内存空间，基本上所有的编程语言中都提出
数据类型的概念，研究针对不同的数据，分配不同的空间。

基本数据类型

包括： number string boolean undefiend null

a. number
数字, Number叫类，也叫构造器，也叫函数

var a = 110; 
var b = 3.14
console.log(typeof a)

注意点：
1）number是一个数据类型，这个数据类型对应的值有无数个。
2）在JS中number数据类型是不分整数和小数 都是number

  • number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）,浮点数会自动转换为整数，
let num = 1.00
console.log(num) // 输出：1，自动转换为了整数
  • number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后至少有一位数字）,浮点数会自动转换为整数，
let a = 0.1
let b = 0.2
console.log(a + b) // 输出：0.30000000000000004

3）可以通过typeof查看一个变量值的数据类型；(typeof是运算符 + - * / 都是运算符)

var b = 1;
console.log(typeof a);

4）最大值 和 最小值

console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALU

5）number可以通过不同进制显示 进制 10进制 2进制 16进制 8进制

var c = 123;     // 123是10进制
var d = 0x123;   // 16进制  0~f  以零x打头
console.log(d);  // 291
var e = 0123;    // 8进制  以零打头
console.log(e);  // 83
console.log("abc"*100) // NaN

6）NaN Not a Number 不是一个数字 特点：涉及到任何关于NaN的操作，都会返回NaN，而且NaN不等于自身。
7）JS中不要对小数运算 要运算先转成整数 (得到的结果往往不对)

b. string
字符串 ‘’ “” ；JS中不分字符和字符串 都叫字符串

<script>
    var b="hello";
    let name = 'zhangsan';
    console.log(typeof b);
</script>

注意点：
1）在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
2）string数据类型对应的数据有无数个
3）字符串有length属性，可以取得字符串的长度

let str = 'Hello world'
console.log(str.length)   // 输出：11

4）单引号不要嵌套单引号 双引号不要嵌套双引号  外单内双  外双内单

<script>
    var addrss = beijing; // beijing is not defined
    console.log(addrss);
    var a = "hello "abc"js"
    var a = "hello 'abc' js"
    console.log(a);
</script>

c. boolean
1）布尔类型只有两个值: true false
2）true 和 True 不一样的 JS是区分大小写的

<script>
    var b = true;
    console.log(b);
    console.log(typeof b);
</script>

c. undefined
只有一个值，即undefined，如果声明了一个变量，但是未给变量初始化值，那么这个变量的值就是undefined：

var name = 'zhangsan'
var age
  console.log(name) // 输出：zhangsan
  console.log(age) // undefined，因为声明了age，但是没有给初始化值

注意点：
什么时候会出现undeined?
答：1）一个变量没有赋值 它的值是undefiend 这个值的类型是undefiend；
  2）一个函数没有返回值，默认为undefiend。

引用数据类型

Object 对象
Array 数组
Function 函数

5.js的运算符

+叫运算符 123操作数 "abc"也叫操作数
一个运算符如果有两个操作数，这个运算符叫二元运算符，也叫二目运算符，还叫双目运算符: + - =
+是双元运算符 运算符你要保证两侧操作数的数据类型要一致
如果一个运算符只有一个操作数，这个运算符叫一元，单目运算符有：typeof ++

6.js的数据类型

-1）隐式类型转化：静悄悄地，不知不觉地就进行了类型转化

a.字符串转化

var res = 123 + "abc";   // 123隐式转化成字符串
console.log(res);        // 123abc
console.log(typeof res); // string   (typeof可以查看数据类型)

b.布尔值转化

  • 在JS中，下面的值转成false，其它值都转成true:
    0 -0 “” undefiend null
  • string中，除了空串都是true

前提：在JS中，运算符两侧需要保存数据类型一致，如果不一致，JS解释器会帮你把一个数据类型转成另一个数据类型。

2）强制类型转化：写代码进行转化

<script>
    console.log(parseInt(3.14));      // 把小数转成整数
    console.log(parseInt("3.14abc")); // 尝试把小数或非数字转成整数
    console.log(parseFloat(3))
    console.log(parseFloat("3.14abc"))
    console.log(Number("abc123"))     // NaN
    console.log(Number("123abc"))     // NaN
    console.log(Number("123"))        // 123
    console.log(String(123456))       // 123456
</script>

7.js的代码段

一个script标签就是一个代码段。
JS代码在执行时，是一个代码段一个代码段执行。

<!--<script>
    var a = 1;
    console.log(a);
</script>cs

8.js的执行

JS代码在执行时分两个阶段：
  1）预编译
  2）代码执行
每一个阶段做的事情是不一样的。

1）预编译： 目的是提升

  • a. 把加var的变量进行提升, 变量声明会提升, 变量的赋值是不会提升
    提升到了代码段最前面
    b. 把使用function声明的函数进行提升 提升的是整个函数声明
<script>
    console.log(a);  // und
    var a = 110;
    console.log(a); // 110

    f();        使用function声明了一个函数,函数名是f,数值是{} 
    function f() {    //定义了一个函数f
        console.log("f...")
    }
</script>

2）代码的执行： 一行一行执行

9.js中的++在前和在后的区别

++在前和++在后，对于i的值来说，都是加1操作
1）++在前： ++在前，整体的值是一个新值
2）++在前： ++在后，整体的值是一个旧值

    var i = 0;
    var r1 = i++;    // i本身是个值，加1；i++整体也有一个值
    var r2 = ++i;    // i本身是个值，加1；++i整体也有一个值
    console.log(i);  // 2
    console.log(r1); // ++在后，整体的值是一个旧值  0
    console.log(r2); // ++在前，整体的值是一个新值  2

例子：

<!--<script>
    console.log(a);          // und
    console.log(b);          // und
    for (var a=1; a<2; a++){
        for(var b=1; b<2; b++){

        }
    }
    console.log(a);          // 2
    console.log(b);          // 2
</script>-->

三、初始执行上下文

为了表示不同的运行环境，有个执行上下文，Execution Context，下面简称EC

可以把EC栈比作杯子每产生一个EC就会放到杯子中，然后在杯子中放鸡蛋，先放进去的后出来。

  • 代码分两类：
    全局代码：函数外面的代码叫全局代码
    函数代码：一个函数就是一个局部代码

1）全局执行上下文：

全局代码在执行时时，就会产生全局变量，这全局的数据会存储到一个VO的区域，VO为与EC(G)中；VO用于存储全局中加var的变量和加function的

a. 在执行全局代码前将window确定为全局执行上下文
b.对全局数据进行预处理

  • var定义的全局变量==>undefined,添加为window的属性
  • function声明的全局函数==>赋值，
  • this===>赋值(window)
    c.开始执行全局代码

2）局部执行上下文：函数代码在执行时，就会产生局部的EC。调用一个函数就产生一个EC，调用100个函数，就产生100个EC。

EC（f）函数执行上下文：EC（f）中有个存储数据的活动对象AO，存储局部加var的或者加function的局部数据。当函数执行完毕，如果没有形成闭包，则就出栈销毁。

  • 加var的变量和没有加var的变量的区别

a）在全局代码中，加var会提升，没有var的不会提升。

console.log(a);
a = 110;       // a is not defined

b）不管加没加var的全局变量，都会作为window的属性

var a = 1;
b = 2;
console.log(window.a)
console.log(window.b)

c）没有加var的变量，只能作为全局变量，只要是全局变量，肯定是window的属性

function f() {
    a = 666;
}
f()
console.log(window.a)

d）加var的局部变量，不会作为window的属性

function f() {
    var a = 666;
}
f()
console.log(a)
console.log(window.a) // undefined（访问一个对象上不存在的属性，结果就是und)

例子：

var n = 100;
console.log(n);         // 100
console.log(window.n);  // 100
m = 200;                // 只会放到GO中
console.log(m);         // 从GO拿  写全 window.m  window省略了
console.log(x);         //   GO和VO中都没有

解释图：在这里插入图片描述

三、了解函数

函数定义: f叫函数名 , ()是函数特有的标识 , {} 叫函数体
定义 = 声明 + 赋值

**函数调用：**用函数时，就会把函数体中的代码都执行了

function f() {
    console.log("hello")
    console.log("js")
    console.log("vue")
}
f();    //调

函数的返回值：： 函数的返回值是返回到了函数调用处

function f() {
    return 666;
}
var a = f();      // 函数调用
console.log(a);
console.log(f()); // f()得到的就是函数的返回值

一个函数如果没有返回值，默认返回undefiend

function f(){
}
console.log(f());     // undefined

形参就是函数内部的局部变量,函数调用的过程就是实参向形参赋值的过程

function f(a,b) {       // a b叫形式参数  形参
        return a+b;
    }
var r = f(1,2);         // 1 2叫实际参数(实参), 函数调用的过程就是实参向形参赋值的过程
console.log(r);

数据的存储：内存分堆内存和栈内存
在JS中，基本数据类型存储在栈中,栈中存储数据，执行代码。
引用数据类型存储在堆中，堆只存储数据。

例子1：

<script>
    var a = 1;
    var b = "hello";
    function f()
    {
        console.log("f...")
    }
    window.f();
    var arr = [1,2,3];    // 数组
    console.log(window.arr)
</script>

解释图：
在这里插入图片描述

例子2：

<script>
    function f(a) {
        console.log(a)     // 111
    }
    f(111);
    console.log(a);        // a is not defiend
</script>

解释图：在这里插入图片描述
例子3：

<script>
    var a = 1;
    var obj = { name: "wangcai" };
    function f() {
        var a2 = a;
        obj2 = obj;
        a2 = a;
        obj.name = "xiaoqiang"
    }
    f();
    console.log(a);
    console.log(obj);
</script>

结果展示：
在这里插入图片描述
解释图：
在这里插入图片描述

赋值：都是把栈空间的数据拿来赋值给别人，一定是栈空间的数据，不是堆空间的数据

赋值运算符：整体会是个值，是右值
a=b=c=1;考虑是可以从后向前考虑，c=1,“c=1”整体也是个值，为1；然后又把“c=1”整体的值1赋值给了b,以此类推。但是在计算机中是同时进行的。

例子：

<script>
    var a = { n: 110 };
    var b = a;
    b.m = b = { n: 330 };   
    console.log(a);
    console.log(b);
<script>

结果展示：
在这里插入图片描述
解释图：
b.m = b = { n: 330 }; 此时b={n:330},但是b={n:330}整体又是个值是{n:330}，赋值给了b.m，则b.m={n;330},在计算机中这些都是同步进行
在这里插入图片描述

四、let变量和const变量

let变量:
1）let声明的变量没有提升
2）let配合{}可以形成块级作用域，let+{}形成的块级作用域，只能在{}中被访问到，出了块就不可以了

<script>
        if (true) {
            var a = 110;
            let b = 666;
        }
        console.log(a);
        console.log(b);
    </script>

结果展示：只能显示a,因为b在{}外，无法访问到，b则报错在这里插入图片描述

<script>
        if (true) {
            var a = 110;
            let b = 666;
            console.log(b);
        }
        console.log(a);
    </script>

结果展示：b在{}块内，因此可以访问达到
在这里插入图片描述
3）使用let声明的变量不会挂载到GO上

<script>
    let a =110;
    console.log(window.a);
</script>

结果展示：undefined
在这里插入图片描述
4）let不能重复声明

<script>
    let a=1;
    let a=2;
    console.log(a);
</script>

结果展示：报错
在这里插入图片描述

const变量:
1）声明的变量没有提升
2）配合{}可以形成块级作用域
3）使用let声明的变量不会挂载到GO上
4）不能重复声明
5）在声明常量时必须赋值

练习题
例1：

  • !是取反操作，!false意思就是对的，
    !123,!“hello” 隐形类型转化
<script>
        var a = 1;
        function b() {
            if (!a) {
                var a = 2;
            }
            console.log(a)
        }
        b();       
</script>

结果展示：
在这里插入图片描述
例2:

  • 在js中，变量名只要提升过一次后，就不再啊提升第二次。
<script>
    fn();
    function fn() { console.log(1); }
    fn();
    function fn() { console.log(2); }
    fn();
    var fn = function () { console.log(3); }
    fn();
    function fn() { console.log(4); }
    fn();
    function fn() { console.log(5); }
    fn();
</script>

结果展示:
在这里插入图片描述
例3:

<script>
    var i = 5;
    function fn(i) {
        return function (n) {
            console.log(n+(++i));   
        }
    }
    var f=fn(1); 
    f(2);     //n=2,i=1,++i为一个整体，是新值为2，此时EC(fn)中i=2;
    fn(3)(4);   //开辟新的EC（fn(3)),i=3，然后赋值n=4,++i为新值前面的i从3变为4；执行完出栈销毁
    fn(5)(6);
    f(7);      
    //n=7,找i,,自己没有，去前面的EC找，i=2,++i为一体，是新值为3，此时EC(fn)中i由2变为3;
    console.log(i);   //前面执行完出栈，直接到EC(G)中找，i=5
</script>

结果展示：
在这里插入图片描述
例4:

  • 闭包:因为还被调用,就形成了一个不会释放的空间,称为闭包。
    好处是延长了一个局部变量的生命周期
    缺点会造成内存的泄露
<script>
    var i = 0;
    function A() {
        var i = 10;
        function x() {
            console.log(i);
        }
        return x;       //返回了函数x
    }
    var y = A();        //因此此时y的地址为。".log(i)"  此时形成了闭包。
    y();                 
    function B() {
        var i = 20;
        y();
    }
    B(); 
</script>

结果展示：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

js

JS的初步了解学习笔记 的相关文章

  • dart 学习列表 List

    List 列表 在 Dart 编程语言中 List 是一种有序的集合数据类型 用于存储一系列项目 它允许您在单个变量中存储多个项目 并提供了许多操作来管理列表中的数据 以下是关于 Dart 中的 List 的一些重要信息 创建 List 您

  • QDialog类

    QDialog类 QDialog类 api 使用方式 调用exec 槽函数 调用accept槽函数 调用reject槽函数 调用done槽函数 例子 QDialog类 QWedget类中的函数 在QDialog中都可以使用 api 构造函数

随机推荐

  • 进程的状态与task_struct结构体

    一 什么是进程 进程 就是程序的一个执行实例 或正在执行的程序 详细介绍请看 点击打开链接 那么进程在Linux中有几种状态呢 如下 1 R 处于运行或可运行状态 即进程正在运行或在运行队列 可执行队列 中等待 只有在该状态的进程才可能在C

  • 程序员工作之后如何提升自己？

    IT行业人士里有不少人似乎从来就没晋升过 年复一年 他们工作在同一岗位上 停留在同一职位上 我不知道他们是否得到过晋升机会 你认识这样的人吗 这事居然出人意料地常见 如果你不想终老在这条死胡同上 就得做点什么 在本章中 我将给你一些如何攀登

  • git - 简明指南

    git 简明指南 助你入门 git 的简明指南 木有高深内容 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹 打开 然后执行 git init 以创建新的 git 仓

  • windows开机运行jar

    windows开机自启动jar包 一 保存bat批处理文件 echo off 1 mshta vbscript CreateObject WScript Shell Run s0 0 FALSE window close exit java

  • 邮局选址问题

    邮局选址问题 题目描述 一条直线上有居民点 邮局只能建在居民点上 给定一个有序整形数组arr 每个值表示居民点的一维坐标 再给定一个正数num 表示邮局数量 选择num个居民点建立num个邮局 使所有的居民点到邮局的总距离最短 返回最短的总

  • 中国被黑站点统计系统 2006年9月分析报告

    源 中国被黑站点统计系统 http www zone h com cn amxku amxku at msn com 自在轮回 zizailunhui at msn com wayking wayking at hotmail com 目录

  • Matlab机器人工具箱画图卡顿解决方法

    机器人工具箱画图卡顿问题的解决 一般情况下 使用机器人工具箱画图就只是使用下面的命令 robot plot q 其中q为角度 但是这样画出的图非常卡顿 问题分析 默认画图指令画图效果如下 可以很清楚的看到 下面都是的方格已经多到模糊了 修改

  • FSDataOutputStream (浅析hadoop写入数据api)

    对于一般文件 都有满足随机读写的api 而hadoop中的读api很简单用FSDataInputStream类就可以满足一般要求 而hadoop中的写操作却是和普通java操作不一样 Hadoop对于写操作提供了一个类 FSDataOutp

  • 【JS&Html】一些总结

    html里面 监听回车事件 监听回车 若回车按下 执行相应操作 document onkeypress kDown if document layers window captureEvents Event KEYDOWN function

  • 提示工程师：如何高效的向ChatGPT提问对话

    最近ChatGPT真的火出圈了 现在打开知乎 博客 抖音 B站都是这方面的信息 ChatGPT相关的信息铺天盖地的袭转而来 对于这种类似新一轮信息技术革命 作为普通人的我们 该如何做呢 这是我们该思考的 英伟达创始人兼CEO黄仁勋 this

  • 闪回数据库案例

    闪回数据库案例 测试数据 create table sct4 id number 4 name varchar2 20 insert into sct4 values 1 lili insert into sct4 values 2 lil

  • 小孩报数问题

    import java util LinkedList import java util List import java util Scanner public class Main public static void main Str

  • Java笔记-多线程之线程池

    介绍 在前面的文章中 我们使用线程的时候就去创建一个线程 这样实现起来非常简便 但是就会有一个问题 程序启动一个新线程成本是比较高的 因为它涉及到要与操作系统进行交互 而使用线程池可以很好的提高性能 尤其是当程序中要创建大量生存期很短的线程

  • 最萌算法学习，一秒让程序员及其女友都能学会！

    普通程序员 不学算法 也可以成为大神吗 对不起 这个 绝对不可以 可是算法好难啊 看两页书就想睡觉 所以就不学了吗 就一直当普通程序员吗 如果有一本算法书 看着很轻松 又有代码示例 又有讲解 怎么会有那样的书呢 哎呀 最好学了算法人还能变得

  • OC中的copy和mutableCopy

    在OC中 对对象的拷贝可分为深拷贝和浅拷贝 深拷贝 会生成新的指针和新的内存 新的指针指向新开辟的内存空间 并且会将原来的内存中的内容也拷贝过来 浅拷贝 会生成新的指针 但是不会开辟新的内存空间 也不会拷贝原来内存中的内容 新生成的指针会指

  • 程序员的前20个搜索和排序算法面试问题

    大家好 如果您正在准备编程工作面试或正在寻找新工作 那么您知道这不是一个容易的过程 在您职业的任何阶段 您都必须幸运地接到电话并进行第一轮面试 但是在初学者方面 当您寻找第一份工作时就更加困难 这就是为什么您不能只是轻描淡写 您必须准备抓住

  • vue2：Vant底部导航栏记录active，刷新页面记录active的值

    话不多说 直接上代码

  • python ddt数据驱动

    python ddt数据驱动 1 背景 在自动化测试当中 我们通常会将测试数据从测试代码中抽离出来放在单独的文件中 既能减少代码量 也能降低代码的维护成本 通过数据的改变从而驱动自动化测试的执行 接触python自动化测试的第一个框架通常都

  • 模型推理那些事

    模型推理那些事 目前主流的深度学习框架有目前越来越多的深度学习框架 工具集以及定制化硬件使得构建 部署和跨框架管理深度学习越来越复杂 常用的深度学习框架有TensorFlow Pytorch MXNet和CNTK 因为训练最为耗时 所以常使

  • JS的初步了解学习笔记

    js学习笔记 一 初识js 1 什么是js JavaScript是目前web开发中不可缺少的脚本语言 简称js js不需要编译即可运行 运行在客户端 需要通过浏览器来解析执行JavaScript代码 问 Js属于编程语言吗 编程语言分类 前

热门标签