js的知识点总结（一）

面具浪人

已于 2024-04-03 21:54:04 修改

阅读量1.4k

点赞数 39

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2024-04-02 22:48:08 首次发布

本文链接：https://blog.csdn.net/m0_72047330/article/details/137278875

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、js简介

js是什么
- JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
  - 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
  - 现在也可以基于 Node.js 技术进行服务器端编程

js作用
- 表单动态校验（密码强度检测）（ JS 产生最初的目的）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)

html/css/js关系
- HTML/CSS 标记语言--描述类语言
  - 1-HTML 决定网页结构和内容( 决定看到什么 )，相当
    于人的身体
    2-CSS 决定网页呈现给用户的模样( 决定好不好看 )，
    相当于给人穿衣服、化妆
- HTML/CSS 标记语言--描述类语言
  - 实现业务逻辑和页面控制( 决定功能 )，相当
    于人的各种动作

浏览器执行 JS 简介
- 浏览器分成两部分：渲染引擎和 JS 引擎
  - 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
  - JS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

JS组成
- ESMAScript-js语法:值、运算符、表达式、关键词和注释。
- DOM-页面文档对象模型
  - 处理可扩展标记语言的标砖编程接口。
    - 通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- DOM-浏览器对象模型
  - 它提供独立于内容的、可以与浏览器窗口进行互动的对象结构。
    - 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

js-3种书写位置
- 行内
  - 语法
    - <input type="button" value="点我试试" οnclick="alert('Hello World')" />
      - 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
      - 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
      - 特殊情况下使用
- 内嵌
  - 语法
    - <script>
      alert('Hello World~!');
      </script>
      - 可以将多行JS代码写到 <script> 标签中
      - 内嵌 JS 是学习时常用的方式
- 外部
  - 语法
    - <script src="my.js"></script>
      - 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
      - 引用外部 JS文件的 script 标签中间不可以写代码
      - 适合于JS 代码量比较大的情况

JS注释
- 单行注释
  - // 用来注释单行文字（快捷键 ctrl + / ）
- 多行注释
  - /* */ 用来注释多行文字（默认快捷键 alt + shift + a ）
  - 快捷键修改为： ctrl + shift + /
  - vscode  首选项按钮  键盘快捷方式  查找原来的快捷键  修改为新的快捷键  回车确认

输出输入语句

二、JS-标识符、字面量和变量

1-标识符
- 就是指给变量、函数、属性或函数的参数起名字。
- 标识符可以是按照下列格式规则组合起来的一或多个字符：
  - 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
    其它字符可以是字母、下划线、美元符号或数字。
    按照惯例，ECMAScript 标识符采用驼峰命名法。
    标识符不能是关键字和保留字符。

2-字面量
- 字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

3-变量
- 什么是变量
  - 白话：变量就是一个装东西的盒子。
  - 通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
  - 概述
    - 变量在内存中的存储
      - 变量是程序在内存中申请的一块用来存放数据的空间。
        类似我们酒店的房间，一个房间就可以看做是一个变量。
- 变量的使用
  - 变量在使用时分为两步： 1. 声明变量 2. 赋值
  - 1. 声明变量
    - 语法
      - // 声明变量
        var age; // 声明一个名称为age 的变量主题
        var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配
        内存空间，不需要程序员管
        age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
  - 2. 赋值
    - age = 10; // 给 age 这个变量赋值为 10
      - = 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
      - 变量值是程序员保存到变量空间里的值
  - 3. 变量的初始化
    - var age = 18; // 声明变量同时赋值为 18
      - 声明一个变量并赋值，我们称之为变量的初始化。
- 变量语法扩展
  - 1. 更新变量
    - 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
      - var age = 18;
        age = 81; // 最后的结果就是81因为18 被覆盖掉了
  - 2. 同时声明多个变量
    - 同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。
      - var age = 10, name = 'zs', sex = 2;
  - 3. 声明变量特殊情况
    - 情况
      - 说明
        结果
    - var age ; console.log (age);
      - 只声明不赋值
        undefined
    - console.log(age)
      - 不声明不赋值直接使用
        报错
    - age = 10; console.log (age);
      - 不声明只赋值
        10
- 变量命名规范
  - 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
  - 严格区分大小写。var app; 和 var App; 是两个变量
  - 不能以数字开头。 18age 是错误的
  - 不能是关键字、保留字。例如：var、for、while
  - 变量名必须有意义。 MMD BBD nl → age
  - 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
  - 推荐翻译网站：有道爱词霸
  - 交换两个变量的值 ( 实现思路：使用一个临时变量用来做中间存储 )

三、JS基础-数据类型

数据类型
- 为什么需要数据类型
  - 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利
    用存储空间，于是定义了不同的数据类型。
    - 数据类型就是数据的类别型号
- 变量的数据类型
  - 变量的数据类型决定了如何将代表这些值的位存储到计算机的
    内存中。JavaScript 是一种弱类型或者说动态语言。
    - var age = 10; // 这是一个数字型
      var areYouOk = '是的'; // 这是一个字符串
      - 在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定
        了数据类型。
  - avaScript 拥有动态语言，同时也意味着相同的变量可用作不同的类型：
    - var x = 6； // x 为数字
      var x = “Bill”; // x 为字符串
- 数据类型的分类
  - JS 把数据类型分为两类：
    - 简单数据类型
      - 字符串型（String）
      - 数值型（Number）
      - 布尔型（Boolean）
      - undefined型（Undefined）
      - null型（Null）
    - 这5种之外的类型都称为复杂数据类型（object)

简单数据类型分类：

数字型-Number
- 概念
  - JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。
    - var age = 21; // 整数
      var Age = 21.3747; // 小数
- 1. 数字型进制
  - 最常见的进制有二进制、八进制、十进制、十六进制。
    - // 1.八进制数字序列范围：0~7
      var num1 = 07; // 对应十进制的7
      var num2 = 019; // 对应十进制的19
      var num3 = 08; // 对应十进制的8
      // 2.十六进制数字序列范围：0~9以及A~F
      var num = 0xA;
      - 在JS中八进制前面加0，十六进制前面加 0x
- 2. 数字范围
  - JavaScript中数值的最大和最小值
    - alert(Number.MAX_VALUE); // 1.7976931348623157e+308
      alert(Number.MIN_VALUE); // 5e-324
      - 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+30
      - 最小值：Number.MIN_VALUE，这个值为：5e-32
- 3. 数字型三个特殊值
  - alert(Infinity); // Infinity
    alert(-Infinity); // -Infinity
    alert(NaN); // NaN
    - nfinity ，代表无穷大，大于任何数值
    - -Infinity ，代表无穷小，小于任何数值
    - NaN ，Not a number，代表一个非数值
- 4. isNaN( )
  - 用来判断一个变量是否为非数字的类型，返回 true 或者 false
    - X是数字，返回 false
    - X不是数字，返回 ture

字符串型 string
- 概念
  - 字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''
    - var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
      var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
      // 常见错误
      var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法
    - 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
- 1. 字符串引号嵌套
  - JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
    - var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
      var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
      // 常见错误
      var badQuotes = 'What on earth?"; // 报错，不能单双引号搭配
- 2. 字符串转义符
  - 转义符都是 \ 开头的
    - \n
      - 换行符，n 是 newline 的意思
    - \ \
      - 斜杠 \
    - \'
      - ' 单引号
    - \''
      - " 双引号
    - \t
      - tab 缩进
    - \b
      - 空格，b 是 blank 的意思
- 3. 字符串长度
  - 概念
    - 字符串是由若干字符组成，这些字符的数量就是字符串的长度。通过字符串的length属性可以获得整个字符串的长度
  - 语法
    - var strMsg = "我是帅气多金的程序猿！";
      alert(strMsg.length); // 显示 11
- 4. 字符串拼接
  - 概念
    - 1. 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
    - 2. 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的
  - 语法
    - //1.1 字符串 "相加"
      alert('hello' + ' ' + 'world'); // hello world
      //1.2 数值字符串 "相加"
      alert('100' + '100'); // 100100
      //1.3 数值字符串 + 数值
      alert('11' + 12); // 1112
- 5. 字符串拼接加强
  - console.log('pink老师' + 18); // 只要有字符就会相连
    var age = 18;
    // console.log('pink老师age岁啦'); // 这样不行哦
    console.log('pink老师' + age); // pink老师18
    console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
    - 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
    - 变量是不能添加引号的，因为加引号的变量会变成字符串
    - 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

typeof运算符
- 使用typeof操作符可以用来检查一个变量的数据类型
- 使用方式：
  - typeof 数据
- 示例代码：
  - console.log(typeof 123);
    console.log(typeof "Hello,World!");
    console.log(typeof true);
    console.log(typeof undefined);
    console.log(typeof null);

Number
- Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。
- Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。
  - 最大值：+1.7976931348623157e+308
    最小值：-1.7976931348623157e+308
    0以上的最小值：5e-324
- 特殊的数字：
  - Infinity：正无穷
    -Infinity：负无穷
    NaN：非法数字（Not A Number）
- 其它的进制：
  - 二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
    八进制：0 开头表示八进制
    十六进制：0x 开头表示十六进制
- 注意：使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

Boolean
- 布尔型也被称为逻辑值类型或者真假值类型。
- 布尔型只能够取真（true）和假（false）两种数值。除此以外，其它的值都不被支持。

Undefined
- Undefined 类型只有一个值，即特殊的 undefined。
- 在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。
- 注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

Null
- Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
- undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。
- 注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

四、复杂数据类型
复杂数据类型（引用类）
- 引用类型的值是保存在内存中的对象。
- 通过new关键字创建的对象（系统对象、自定义对象），如object、Array、Date等

栈和堆梳理
- 堆
  - 堆内存是用来保存对象
- 栈
  - 栈内存用来保存变量和基本类型
- 我们在声明一个变量时，实际上就是在栈内存中创建了一个空间用来保存变量。
- 如果是基本类型则在栈内存中直接保存
- 如果是引用类型则会在堆内存中保存，变量中保存的实际上对象在堆内存中的地址。
- 当我们写了下边这几句代码的时候，栈内存和堆内存的结构如下：
  - var a = 123;
    var b = true;
    var c = "hello";
    var d = {name: 'sunwukong', age: 18};
- 栈的特点：先进后出，后进先出

五、强制类型转换
- 转换为String类型
  - 将其它数值转换为字符串有三种方式：toString()、String()、拼串。
  - 方式一：
    - 调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。
      - var a = 123;
        a = a.toString();
        console.log(a);
        console.log(typeof a);
  - 方式二：
    - 调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。
      - var a = 123;
        a = String(a);
        console.log(a);
        console.log(typeof a);
        
        var b = undefined;
        b = String(b);
        console.log(b);
        console.log(typeof b);
        
        var c = null;
        c = String(c);
        console.log(c);
        console.log(typeof c);
  - 方式三：
    - 为任意的数据类型 +""
      - var a = 123;
        a = a + "";
        console.log(a);
        console.log(typeof a);
- 转换为Number类型
  - 有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。
  - 方式一：
    - 使用Number()函数
      - 字符串 --> 数字
        如果是纯数字的字符串，则直接将其转换为数字
        如果字符串中有非数字的内容，则转换为NaN
        如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
      - 布尔 --> 数字
        true 转成 1
        false 转成 0
      - null --> 数字
        null 转成 0
      - undefined --> 数字
        undefined 转成 NaN
  - 方式二：
    - 这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数
      - var a = "123";
        a = parseInt(a);
        console.log(a);
        console.log(typeof a);
  - 方式三：
    - 这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数
      - var a = "123.456";
        a = parseFloat(a);
        console.log(a);
        console.log(typeof a);
  - 注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作
- 转换为Boolean类型
  - 将其它的数据类型转换为Boolean，只能使用Boolean()函数。
  - 使用Boolean()函数
    - 数字 —> 布尔
      - 除了0和NaN，其余的都是true
    - 字符串 —> 布尔
      - 除了空串，其余的都是true
    - null和undefined都会转换为false
    - 对象也会转换为true

面具浪人

关注

39
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
js的知识点总结（一）

浏览器分成两部分：渲染引擎和 JS 引擎渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkitJS 引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。概述变量在内存中的存储变量是程序在内存中申请的一块用来存放数据的空间。
复制链接

扫一扫