初始JavaScript

最新推荐文章于 2023-08-08 07:30:16 发布

意中猪

最新推荐文章于 2023-08-08 07:30:16 发布

阅读量113

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_52246406/article/details/124223330

版权

javaScript

解释型语言和编译型语言

1.概述：计算机不能直接理解任何除机器语言之外的语言，所以必须把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

单线程

数据存储

计算机内部使用二进制0和1来表示数据

单位

bit<byte<kb<mb<gb<tb…

位：1bit可以保存一个0或1
字节：1B=8b
千字节：1kb=1024B

javascript认识：

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言
- 脚本语言：不需要编译，运行过程由js解释器逐行来进行解释并执行
- 现在也可以基于Node.js技术进行服务器编程
作用：
- 表单动态校验
- 网页特效
- 桌面程序
- App
- 控制硬件-物联网
- 游戏开发

JavaScript组成

1.ECMAScript
2.Dom：文档对象模型
3.BOM：浏览器

JavaScript书写位置

行内：
内嵌：
- 在title标签下写script标签
外链：
- 新建一个后缀为.js的文件
- 通过script引入到html文件

JavaScript注释

1.单行注释：// ctrl+/
2.多行注释：/* */ shift + alt + A可以自行修改

js命名规范

变量、函数的命名必须有意义
变量的名称一般使用名词
函数的名词一般用动词

操作符规范

操作符的左右两侧个保留一个空格

单行注释规范

单行注释前面注意有个空格

输入输出语句

prompt：浏览器弹出一个输入框
alert：浏览器会弹出一个警示框
console：控制台输出：开发时在控制台测试使用

变量

变量是什么：
- 变量是用于存放数据的容器。我们可以通过变量名获取数据。
- 本质是程序在内存中申请的一块用来存放数据的空间
变量的初始化：
- 声明变量：var age；//声明一个名为age的变量
  - var是一个js关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
- 赋值：var age = 18；
- 更新变量：一个变量被重复赋值后，他原有的值会被覆盖，以最后一次赋值为准
- 同时声明多个变量之间用逗号隔开
- 可以只声明不赋值，也可以只赋值不声明，但是不可以不声明且不赋值而直接使用
- 变量的命名规范：
  - 1.由字母（A_Z和az）、数字0~9、下划线（_）、美元符号$组成。
  - 2.严格区分大小写。
  - 3.不能以数字开头。
  - 4.不可以是关键字。
  - 5.变量名必须有意义。
  - 6.遵守驼峰命名法。
数据类型：
- 只有在程序运行时才会根据代码确定变量的数据类型。
- 简单数据类型：
  - Number：控制台为蓝色
    - 二进制、八进制、十六进制
  - String：字符串控制台为蓝色
    - 字符串的拼接：字符串+任意数据类型数据
  - Boolean：深蓝色
    - true：真
    - false：假
  - Undefined：浅灰色
    - 和数值相加最后的结果是NaN
  - Null: 空值浅灰色
  - typeOf检测变量数据类型：
    - console.log(typeOf num);
    - undefined：未定义数据类型
- 数据类型转换：
  - 使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型。
  - 通常会实现3种方式的转换：
    - 转换为字符串类型
      - toString() :转换为字符串
        
        var num = 10;
        
        var str = num.toString();
        
        console.log(str);
      - String() :
        
        console.log(String(num));
      - 加号拼接字符串:(隐式转换常用这一种)
        
        console.log(num + ‘’)
    - 转换为数字型
      - parselnt(String)函数：将String类型转换成整数数值型(取整)
        
        var age = prompt(‘请输入您的年龄’);
        
        console.log(parseInt(age));
      - parseFloat(String) 函数：将String类型转换成浮点数数值型
        
        console.log(parseFloat(‘3.14’))
      - Number()强制转换函数：将String类型转换成数值型
        
        var str = ‘123’;
        
        console.log(Number(‘str’));
      - js隐式转换：利用算术运算隐式转换为数值型
        
        console.log(‘12’ - 0);
    - 转换为布尔型
      - Boolean()函数
        
        代表空、否定的值会被转换为false，如：’’, 0 NaN ,null , undefined
        
        其余值都会转换为true
- 复杂数据类型：
  - Object

标识符：就是开发人员为变量，属性、函数、参数取的名字（标识符不能是关键字或保留字）

算数运算符

概念：算数运算使用的符号，用于执行两个变量或值的算数运算
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUaxeoyn-1650124863003)(C:/Users/Administrator/Desktop/%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

表达式和返回值

由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

递增和递减运算符

概念：在JavaScript中，递增(++)和递减(–),即可放在变量前也可以放在变量后。放在前面则称为前置递增（递减）运算符，反之则是后置递增（递减）运算符
必须和变量配合使用
二者单独使用效果一样，后置自加：先返回原值，后自加

比较运算符

概念：比较运算符是两个数据进行比较时使用的运算符，比较后会返回一个布尔值（true或者false）作为比较运算的结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akfLQqxH-1650124863005)(C:/Users/Administrator/Desktop/%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后者开发中常用于多个条件的判断。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TYm4jORh-1650124863006)(C:/Users/Administrator/Desktop/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6.png)]

逻辑与运算符

短路运算的原理：当有多个表达式时，左边的表达式可以确定结果时，就不再继续计算右边的表达式
语法：表达式1 && 表达式2
- 如果第一个为真则返回第一个表达式
- 如果第一个为假，则返回第一个表达式

逻辑或运算符

如果第一个为真则返回第一个表达式1.如果第一个为假，则返回第二个表达式

JavaScript流程控制-分支结构

流程控制

概念：流程控制就是来控制我们的代码按照什么样的结构顺序来执行

顺序结构：

分支结构：
- 概念：由上到下执行代码的过程中，根据不同的条件执行不同的路径代码，从而得到不同的结果
- if语句：
  - ```
    if(条件表达式){
    	执行语句1
    }else{
        执行语句2
    }
```
  如果条件为真则执行内部语句，反之则执行else中的语句
- 三元表达式：
  - ```
    条件表达式？表达式1：表达式2
```
- 如果条件表达式为真则返回表达式1，反之返回表达式2
- switch语句：
  - 当要针对变量设置一系列特定的值的选项时，就可以使用switch
  - ```
    switch(表达式){
            case value值1：执行语句;
            break;
            case value值2：执行语句；
            break;
            ...
        default:
            执行最后的语句;
    }
```
- 注意事项：
  1. 我们开发里表达式经常写成变量
  2. 我们的num值和case值必须是全等的
  3. 如果当前case里没有break则不会退出switch，而是继续执行下一个case
if语句和switch语句的区别：
1. 一般情况下，可以互换
2. switch…case经常用来处理case为比较确定值的情况，而if语句比较灵活，常用于范围判断
3. switch语句进行条件判断后直接进入到程序的条件语句，效率更高。而if。。。else语句有几种条件就得判断几次。
4. 当分支较少时，if语句效率更高
5. 当分支较多时switch语句效率比较高，且结构清晰
循环结构：
- 目的：可以重复执行某些代码
for循环
- 重复执行某些代码，通常和计数有关系
- 语法结构：
```
for(初始化变量;条件表达式;操作表达式){
    循环体;
}
```
- 初始化变量就是用var声明的一个普通变量，通常用于作为计数器使用
- 条件表达式就是用来决定每一次循环是否继续执行
- 操作表达式就是每次循环最后执行的代码，经常用于我们计数器变量进行更新(递增或者递减)
while循环
- while语句可以在条件表达式为真的前提下，循环执行某一段代码，直到条件表达式不为真
- 语法结构：
```
while(条件表达式){
    循环体代码;
}
```
do…while循环

continue关键字
- 用于立即跳出本次循环，继续下一次循环。本次循环体中（continue之后的代码少执行一次）
break关键字
- 用于立即跳出整个循环

数组

概念：是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

数组的创建方式

利用new创建数组

var arr = new Array();

利用数组字面量创建数组

var 数组名 = [];

数组的字面量是[ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后常用的方式

数组的使用

数组的长度

使用“数组名.lenght”可以访问数组元素的长度
数组长度是元素个数，不要和索引混淆
arr.lenght动态监测数组元素的个数

数组的索引

用来访问数组元素的符号（数组下标从0开始）
数组可以通过索引来访问、设置、修改对应的数组元素、我们可以通过“数组名[ 索引]”的形式来获取数组中的元素

遍历数组

概念：把数组中的每个元素从头到尾访问一遍

数组中新增元素

可以通过修改length长度来实现数组扩容的目的（length属性是可以读写的）
通过修改数组索引新增数组元素

添加删除数组元素的方式

添加删除
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rktqCqls-1650124863007)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220410222330597.png)]

数组筛选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tkk2RuUZ-1650124863009)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220410223409230.png)]

获取数组索引

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrWP5M4N-1650124863010)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220410224540328.png)]

数组转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wW7UMAd5-1650124863012)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220410224626437.png)]

字符串对象

基本包装类型

就是把简单数据类型包装成了复杂数据类型
过程：
1. 生成临时变量，把简单类型包装为复杂类型
2. 赋值给我们的声明变量
3. 销毁临时变量

算法

冒泡排序

是一种算法，将一系列的数据按照一定的顺序进行排列显示（从小到大或从大到小）

JavaScript函数

函数的概念：函数就是封装了一段可以被重复执行调用的代码块。目的就是为了让大量代码重复使用

函数的使用

声明函数：(声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码)
```
//声明函数的关键字，全部小写
function  函数名(){
    //函数体
}
```
调用函数：
```
函数名();
```

函数的封装

概念：就是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

函数的参数（函数的参数可以有也可以没有）

如果实参个数多于形参个数，那么会取到形参个数
如果实参个数少于形参，多余的形参定义为undefined，最终结果是NaN.

形参

  function 函数名 (形参1,形参2...){
      在声明函数的小括号()中的参数称为形参（也称为形式参数）
  }

用来接收实参的

实参

函数名(实参1,实参2);在函数调用的小括号()中的参数称为实参

形参和实参的执行过程

function cook(aru){ //形参拿来接收实参
    console.log(aru);
}
cook('酸辣土豆丝');
cook('大肘子');

函数的返回值

我们的函数只是实现某种功能，最终的结果需要返回函数的调用者。通过renturn实现

function  函数名(){
	return 需要返回的结果;(return 后面的代码不会执行)
}

函数名();

我们的函数有return，则返回return后面的值。若是没有return，则返回undefined。

arguments的使用

当我们不确定有多少个参数需要传递时，可以用arguments来获取。在JavaScript中，arguments相当于当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组：具有数组的属性，不具备真正数组的一些方法

JavaScript作用域

作用域

概念：通常来说，一段程序中所用到的名字并不总是有效和可用的，而先限定这个名字的可用性的代码范围就是这个名字的作用域。作用域提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域

整个script标签后者是一个单独的js文件

局部作用域(函数作用域)

在函数内部就是局部作用域

变量的作用域：根据作用域的不同分为全局变量和局部变量

全局变量 : 在全局作用域下的变量

注意：如果在函数内部，没有声明直接赋值的变量也是全局变量

局部变量：在局部作用域下的变量，后者在函数内部的变量就是局部变量

从执行效率来看全局变量和局部变量

全局变量只有在浏览器关闭的时候才会销毁比较占内存资源
局部变量：当程序执行完毕就会被销毁；比较节约内存资源

作用域链

写在函数内部的局部作用域
只要是代码，就至少会有一个作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部访问，就称为作用域链

JavaScript 预解析

对象

new关键字执行过程

new构造函数在内存中创建了一个空的对象
this机会指向刚才创建的空对象
执行构造函数中的代码，给这个空对象添加属性和方法
返回这个对象

什么是对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。
对象由属性和方法组成

创建对象

利用对象字面量创建对象
- 里面的属性或方法采取键值对的形式，键属性名：值
- 多个属性或方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
利用new Object创建对象
1. 我们利用等号 = 赋值的方法，添加对象的属性方法
2. 每个属性和方法之间用分号结束
利用构造函数创建对象:指某一大类这个过程也称为对象的实例化
1. 因为之前的方法一次只能创建一个对象
2. 构造函数就是把对象中一些相同的属性和方法抽象出来，封装到函数里面
3. 语法
  - ```
    function 构造函数名(){
        this.属性=值;
        this.方法 = function (){
            
        };
    }
    
    new 构造函数名();
```