JavaScript学习笔记

JavaScript学习笔记

基本

组成方式

（1）核心ECMAScrip

（2）文档对象模型DOM

（3）浏览器对象模型BOM

JavaScript输入输出语句

（1）alert（msg）

​ 浏览器弹出警示框

（2）console.log(msg)

​ 浏览器控制台打印输出信息

（3）prompt（info）

​ 浏览器弹出输入框，用户可以输入

JavaScript 变量

声明变量

​ var age =10

var：是一个js的关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理

age：是程序员定义的变量名，我们通过变量名来访问内存中分配的空间

变量的本质

​ 是去内存中申请空间

变量语法

​ 更新变量：一个变量被重新赋值后，它原有的值会被覆盖，变量值将以最后一次赋值为准

​ 同时声明多个变量：同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

​ var age=18 ，name=‘ 张三’， sex=2；

变量命名规范

（1）由字母、数字、下划线、美元符号组成

（2）严格区分大小写

（3）不能以数字开头

（4）不能是关键字、保留字

（5）变量名必须是有意义。

（6）遵守驼峰命名法则

数据类型

​ JavaScript是一种弱类型或者说动态语言。这就意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

​ 例如： var age=10；//数字型

​ var areyouok =‘是的’；//是一个字符串

JavaScript拥有动态类型，同时也以为着相同的变量可用做不同的类型

简单数据类型（数据类型）

isNaN是用来判断是否为非数字，并且返回一个值，如果是数字返回的是false，如果不是则返回true

字符串类型换行

转换字符串

转换为数字型

运算符

​ 用于实现复制、比较和执行算数运算符等功能的符号

算数运算符

逻辑运算符

运算符优先级

函数

声明函数

​ function 函数名（）{

//函数体代码

}

function是声明函数的关键字

调用函数

​ 函数名（）；

函数返回值

高级

argument对象

在JavaScript中，arguments是对象的一个特殊属性。arguments对象就像数组，但是它却不是数组。所以被称为伪数组。

属性

（1）具有数组的length属性

（2）按照索引的方式进行存储的

（3）它没有真正数组的一些方法 pop（） push（）等

（4）callee, 引用当前正在执行的函数。

对象

字面量创建对象

var obj={

​ name： tom，

​ age：18，

​ fn：function{}

}

用new Object创建对象

对象、方法、变量区别

构造函数

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

基本语法：
function 构造方法名字（）{

​ this.属性 = 值

​ this.方法 =function（）{}

}

new 构造方法名（）；

​ 注意：

​ （1）构造函数名字首字母要大写

​ （2）构造函数不需要return就可以返回结果

​ （3）调用函数必须使用new

内置对象

​ 内置对象是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

Math数学对象

​ Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math 用于 Number 类型。它不支持 BigInt

属性：

Math.E

欧拉常数，也是自然对数的底数，约等于 2.718。

Math.LN2

2 的自然对数，约等于 0.693。

Math.LN10

10 的自然对数，约等于 2.303。

Math.LOG2E

以 2 为底的 E 的对数，约等于 1.443。

Math.LOG10E

以 10 为底的 E 的对数，约等于 0.434。

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159。

方法

​ Math.abs(x)

​ 返回一个数的绝对值。

​ Math.floor(x)

​ 返回小于一个数的最大整数，即一个数向下取整后的值。

​ Math.fround(x)

​ 返回最接近一个数的单精度浮点型表示。

​ Math.max([x[, y[, …]]])

​ 返回零到多个数值中最大值。

​ Math.min([x[, y[, …]]])

​ 返回零到多个数值中最小值。

​ Math.pow(x, y)

​ 返回一个数的 y 次幂。

​ Math.random()

​ 返回一个 0 到 1 之间的伪随机数。

​ Math.round(x)

​ 返回四舍五入后的整数。

Date日期对象

​ 创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。

说明：

• 如果没有输入任何参数，则Date的构造器会依据系统设置的当前时间来创建一个Date对象。
• 如果提供了至少两个参数，其余的参数均会默认设置为 1（如果没有指定 day 参数）或者 0（如果没有指定 day 以外的参数）。
• JavaScript的时间由世界标准时间（UTC）1970年1月1日开始，用毫秒计时，一天由 86,400,000 毫秒组成。Date 对象的范围是 -100,000,000 天至 100,000,000 天（等效的毫秒值）。
• Date 对象为跨平台提供了统一的行为。时间属性可以在不同的系统中表示相同的时刻，而如果使用了本地时间对象，则反映当地的时间。
• Date 对象支持多个处理 UTC 时间的方法，也相应地提供了应对当地时间的方法。UTC，也就是我们所说的格林威治时间，指的是time中的世界时间标准。而当地时间则是指执行JavaScript的客户端电脑所设置的时间。
• 以一个函数的形式来调用 Date 对象（即不使用 new 操作符）会返回一个代表当前日期和时间的字符串。

方法

日期格式化：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bwv7U05q-1608813244285)(E:\MarkDownPad\图片\image-20201223194316398.png)]

数组对象

​ JavaScript的 **Array** 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

​ 创建数组的两种方式：

​ （1）字面量方式

​ （2）new Array（）；

基本用法

创建数组

var fruits = ['Apple', 'Banana'];

console.log(fruits.length);
// 2

通过索引访问数组元素

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

遍历数组

fruits.forEach(function (item, index, array) {
    console.log(item, index);
});
// Apple 0
// Banana 1

添加元素到数组的末尾

var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]

删除数组末尾的元素

var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];

删除数组最前面（头部）的元素

var first = fruits.shift(); // remove Apple from the front
// first: "Apple"; fruits: ["Banana"];

添加元素到数组的头部

var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];

找出某个元素在数组中的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

通过索引删除某个元素

var removedItem = fruits.splice(pos, 1); // this is how to remove an item

// ["Strawberry", "Mango"]

方法

Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例。

Array.isArray()

用来判断某个变量是否是一个数组对象。

Array.of()

根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

数组转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7iFjbWfc-1608813244286)(E:\MarkDownPad\图片\image-20201223201847793.png)]

var arr=[green,blue,pink];
arr.join(-)//green-blue-pink

字符串对象

基本包装类型

基本包装类型就是把简单的数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

为了方便操作基本数据类型JavaScript还提供了三个特殊的引用类型：String、Number、Boolean

步骤：

//1.生成临时变量，把简单类型包装为复杂数据类型
var temp =new String('andy');
//2.赋值给我们声明的字符变量
str=temp
//3.销毁临时变量
temp =null;

(1)字符串所有的方法，都不会修改字符串本（字符串是不可变的），操作完成会返回一个新的字符串

（2）根据位置返回字符

rr.join(-)//green-blue-pink

##### 字符串对象

######  基本包装类型

基本包装类型就是把简单的数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法

为了方便操作基本数据类型JavaScript还提供了三个特殊的引用类型：String、Number、Boolean

步骤：

//1.生成临时变量，把简单类型包装为复杂数据类型
var temp =new String(‘andy’);
//2.赋值给我们声明的字符变量
str=temp
//3.销毁临时变量
temp =null;

(1)字符串所有的方法，都不会修改字符串本（字符串是不可变的），操作完成会返回一个新的字符串

[外链图片转存中...(img-4pBlO0VQ-1608813244287)]

（2）根据位置返回字符

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201224204347727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2M1ZGZnMjU=,size_16,color_FFFFFF,t_70)