JavaScript知识备忘

最新推荐文章于 2023-05-29 20:33:13 发布
最新推荐文章于 2023-05-29 20:33:13 发布
阅读量247 收藏
点赞数
分类专栏： WEB前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mochen20/article/details/111962662
版权

[文章标题：JavaScript知识备忘]

博文总目录

1. 简介

JS组成：

  • ECMAScript：定义核心语法
  • DOM：文档对象模型
  • BOM：浏览器对象模型

2. JS数据类型

2.1 数据类型

JS中数据类型包括：Number，String，Boolean（基本数据类型），对象，数组。

typeof(XXX) 返回变量的类型，number，string，boolean，Object

注意：

  1. JS中直接给未申明的变量赋值没有问题，但直接访问未申明的变量会报错。
  2. 全局变量都是属于window的，故而也可以用 window.XXX 调用；所也说window.XXX与直接写XXX是等价的。所以不用var声明，直接为变量赋值，那么此变量就是全局变量。

2.2 运算符

  1. === 与 !==

    == 与 != 判断时，是不考虑类型的，=== 与 !== 判断时需要考虑类型

  2. ~~常用作取整

  3. && 短路与，也常用与代替 if 语句（这只有JS中可以吧。）

2.3 Number类型

JS中只有一种数值类型，及64位浮点数。

1. 特殊数字

  • NaN （not a number）非数值，可以用 isNaN( XXX )判断
  • Infinity：无穷大，（分正负无穷大）

2. 数据类型转换

  1. 数字 转 字符串

    x.toString(radix);  // 转化为对应进制的字符串，radix默认10进制

    注意：这里的x可以直接为数值 变量，这与java使用包装类不同，JS中数值变量调用方法，会自动视其为Number对象。

  2. 字符串 转 数字

    Number( xxx ); // 参数可以填：Date 转化为对应毫秒数；String 尽可能的转化为数字
parseInt(String, radix); // radix 可省略，默认为10进制
parseFloat(XXX)

    注意：“15ghb” 可以转化为 15，这就是 所谓的 尽可能的转化为数字。

3. Number类的属性及方法

console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308 
console.log(Number.MIN_VALUE);  // 5e-324

x.toFixed(n)  // 固定 n  位小数

2.4 Boolean 类型

1. 等价于false的情况

在需要布尔值的地方，变量为如下值时，等价于false：

false 0 “” NaN Undefined null

尤其注意 空字符串 和 0

2. 自动类型转换

数字 + 布尔类型 布尔类型化为 0 或 1

字符串 + 布尔类型 布尔类型转化为字符串 “true” 或 “false” 【仅字符串连接操作】

布尔类型 + 布尔类型 先转化为 0 或 1 再进行运算

总结：Boolean在非逻辑运算中，等价于0和1，但与字符串进行连接操作时特殊。

2.5 String类型

1. 注意

  • JS中字符串可以用 单引号 也可以用 双引号

  • 获取字符串长度 用 length 属性

    注意：JS中数组和字符串的长度都是属性，Java中数字是属性，字符串是方法。

2. 数据类型转换

  • 在字符串连接操作中，其他类型转化字符串
  • 在其他操作中，字符串努力的转化为数值类型。

3. 字符串相关方法

// 查找
indexOf("xxx",start) // 返回查询串，首次出现的位置，未找到返回-1，start可省，表示从头开始找。
lastIndexOf("xxx") // 从后先前找
search("xxx")  // 无法接受第二个参数，但支持正则表达式
// 截取
slice(s,e) // s 其实位置（包含） e 结束位置（不含）
subString(s,e)  // 同slice，但支持 负索引 【用它就行了】
// 替换
replace("old","new") // 默认只替换第一个，“old”支持正则表达式， 
					 //  /.../i 忽略大小写
					 //  /.../g 替换全部
// 大小写转换
toUpperCase()
toLowerCase()
// 修剪
trim()  // 作用好像跟JAVA一样，只能去除两遍的空格。   而且 IE8 以下不支持
// 提取字符
charAt(index)   // 注意：找不到返回 “”
charCodeAt(index)  // 获取对应字符的 Unicode 编号
str[index]  // 注意：它找不到 返回 Undefined 
// 分割
split(s)  // s 分割符 s=“” 时，相当与 tocharArray()【JS中没有】

2.6 Array数组类型

1. 数组定义

  1. var arr = [] 【用这种】
  2. var arr = new Array(X, X, X, X)
  3. var arr = new Array( len )

注意：

  • JS中访问数组不存在越界，但返回的可能是 undefined
  • 获取数组长度，用 length ，也是属性。

2. 数组方法

// 转化为字符串
toString()  // 转化为字符串，元素之间以 逗号 连接
join(s)	    // 转化为字符串，元素之间以 连接符s 连接
// 增删操作
push()   // 向最后添加一个元素
pop()	 // 弹出最后的元素
shift()  // 弹出第一个元素
unshift() // 向开头添加一个元素
delete arr[0]  // 将数组arr的第一个元素替换为 undefined 注意这个元素不会消失
splice(s,l,...) // 从 s 开始 删除 l 个元素，并将之后的参数，作为数组元素插入。
// 合并
a1.concat(a2)  // 连接数组 a1 a2 并以新数组返回
// 截取
slice(s,e)  // 跟字符串一样 s 开始位置，e结束位置
// 反转
reverse()
// 排序
sort((a,b)=>{return a-b}) // 不指定比较器，默认按字母排序，

3. JS控制语句

for…in…语句：

for(var x in XXX){
	XXX[x];
}
// 注意：这里的 x 只是索引，而非XXX中的元素

4. JS函数

4.1 传参问题

JS中函数的形参个数与实参给定的个数不必一致；

当形参多余所给实参时：多余的形参为默认值【可在定义形参时给出】，或者 undefined

当所给实参多余形参时：多余的实参可在 arguments 数组中访问。

arguments是一个数组，它包含了函数调用时所传递的所有实参。在方法中遍历arguments即可获得所有实参

在参数传递方式上：

  • 原始数据类型【number，string，boolean】：值传递
  • 应用类型【对象，数组】：引用传递

4.2 闭包

JS中作用域分为：全局作用域 和 函数作用域

什么是闭包：

​ 在函数的内部嵌套定义另一个函数，并将其作为返回值返回，从而在函数外部直接访问函数内部的函数。

闭包有什么用：

​ 实现变量的私有化，由于子作用于永远可以访问父作用域中的变量，即使父函数已经执行完毕。这样就可以做到，父函数的局部变量只能由内部函数操作，在外部看来好像是内部函数私有的一般，从而保证数据安全。

4.3 全局函数

  • isNaN( X )：检查其参数是否是非数字值
  • eval( str )：用来转换字符串中的运算【将str当做js执行】
  • encodeURI 与 decodeURI 注意是 URI

4.4 函数自调用

在JS中，全局变量，全局函数都隶属于window对象，在开发中应该减少定义全局的变量和函数，以避免命名冲突。函数自调用就是一种有效的方式。

什么是函数自调用：

(function(){ . . . })();

如上：函数在定义之后直接跟上括号，也就是定义完函数就执行；这样在函数内部就形成了一个独立的命名空间，其中的变量隶属于函数作用域，从而有效避免冲突。

4.5 函数的方法

在JS中，函数也是一种对象，它也拥有自己的属性和方法，下面的call和apply都是函数对象所拥有的方法。

  1. call方法

    作用：将某对象的方法应用于其他对象，也就是改变this的值

    格式：obj1.func1.call(obj2, arg1.arg2);

    其中func1是obj1的方法，而obj2中没有该方法，但是obj2有需要使用func方法，这时就可以通过call将 func1方法应用到obj2；arg1和arg2都是传给func1的参数。 具体效果就是，使得func1函数中的this指向了obj2对象

  2. apply方法

    apply方法与call方法相似，区别在于方法的参数以数组传递，而且obj2可省，会有默认值；

    常见应用：Math.max.apply( [ . . . ] )

5. JS对象

5.1 概念

对象：包含变量的变量，是命名值的无序集合。

**属性：**对象中的命名值称为属性

**方法：**包含函数定义的属性称为方法

5.2 创建对象的方法

  1. 使用字面量创建单个对象；即用大括号，键值对表示。其中键加不加引号都可以。

    var user = {
    username : "孙悟空",
    age : 527,
    say : function(){
        console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
    }
};

  2. 使用Object创建对象

    var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
	console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}

  3. 使用构造器创建对象

    function UserInfo(name , age){
    this.name = name;
    this.age = age;
    this.say = function(){
    	console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
    }
}
var user = new UserInfo("詹姆斯",35);

注意：

​ JS中的对象可以随意扩展，修改；不似面向对象的语言，对象由类创建，一经创建不可改变其结构。

5.3 访问属性

  1. obj.属性名
  2. obj[“属性名”]
  3. obj[X] X为包含属性名的变量

5.4 删除属性

delete obj.属性名

将该属性从对象中去除【连名带值】

5.5 JSON

json 即 JavaScript Object Notation “ javascript对象表示法”。是一种轻量级的数据交换格式。特点在于易于人阅读和编写，同时也易于机器解析和生成。

通俗来说就是java对象的字符串形式，产用于数据传输

注意：json中属性名必须使用引号包裹，而对象中不用。

6. JS常用对象

6.1 Math

Math常用函数

Math.max(a1,a2,a3,a4)
Math.max.apply(arr)     // 数组中找最大值。
Math.min() // 同理

Math.random()  // 返回 [0,1) 之间的随机数

6.2 Date 对象

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); 
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); 
var hour = time.getHours(); 
var mm = time.getMinutes(); 
var s = time.getSeconds(); 
var ms = time.getMilliseconds();

注意：月份要加一

7. 正则表达式

1. 正则表达式语法

正则表达式全集

image-20201230121143103

原网址 https://tool.oschina.net/uploads/apidocs/jquery/regexp.html

2. JS中使用正则表达式

// 创建 正则表达式对象
var reg = /^[a-z0-9_-]{3,16}$/;
var reg = new RegExp("^[a-z0-9_-]{3,16}$");
// 使用 正则表达式对象 的 test 方法测试字符串
reg.test("mochen2020");

8. 弹框 输出

  • alert( x x x ); 普通弹框
  • console.log( x x x ); 控制台输出
  • b = confirm( x x x ); 确认提示框，返回true 和false
  • c = prompt( x x x ); 带一个输入框的弹窗，返回输入的值。
  • document.wirte( "x x x " ); 向页面输出内容，注意会覆盖页面原有的全部内容。基本不会用到。

9. 定时函数

  1. 周期性定时器

    // 创建定时器，每隔 100 毫秒 执行一次
var timer = setInterval(function(){
    // do something ...   
},100);
// 取消定时器
clearInterval(timer) // 传入 要关闭的定时器

  2. 延时定时器

    // 创建 延时器 100 毫秒后 执行 ...
var timer = setTimeout(function(){
    // do something ...   
},100);
// 延时结束前 取消 延时器
clearTimeout(timer) // 传入 要关闭的延时器
贫僧法华
关注
专栏目录
JAVA面向对象程序设计
qq_64924526的博客
04-19 3156
第二章 继承 2.1 继承 相同的属性和方法从父类继承，避免了代码的重复，也方便了日后的修改。 语法： 修饰符 class SubClass extends SuperClass { //类定义部分 } 继承(inheritance)通过extends关键字了实现，其中的SubClass称为子类，SuperClass称为父类、基类或超类。修饰符如果是public，则该类在整个项目中可见；若无public修饰符，则该类只在当前包可见，不可以使用private和protected.
Java面向对象程序设计（基础篇）
小小本科生
10-06 7788
一：类与对象 1.1类的声明 类可理解为Java中的一种新的数据类型，他是Java程序设计的基本单位。这种数据类型中封装了数据的内容和对数据内容的操作。类的定义可以看作是建立对象的模板，当程序运行时，已声明的类用来创建新对象。由类创建对象对象的过程称为实例化（instantiation），每个对象都是类的一个新实例（instance）。 1.2类与对象的关系 类→对象（具体化过程） 对象→类（抽象化过程） 对象包括 1.属性（对象的特征） 2.方法（对象的行为） 1.3类的声明格式 [修饰符] class
JAVA-面向对象程序设计
m0_68711597的博客
05-29 201
面向对象能够使编程逻辑更符合人类思考的逻辑当要实现的功能没有对象时 我们就自己去构造对象 调用它来解决问题这时候就需要用到面向对象编程
javascript语法备忘.doc
09-30
JavaScript 是一种广泛用于网页和网络应用的轻量级编程语言，它的语法灵活，易于学习。在JavaScript中，数据类型和变量是基础概念，对于...理解并熟练运用这些基础知识，将有助于编写出高效、可维护的JavaScript代码。
javascript学习网址备忘
10-30
JavaScript是一种广泛应用于Web开发的脚本语言，它主要在客户端运行，为用户提供动态交互体验。JavaScript的学习涵盖了语法、数据类型、...通过这些资源，你可以深入实践并巩固JavaScript知识，提升你的Web开发技能。
html制作的备忘录html制作的备忘录
最新发布
06-27
在HTML备忘录的创建过程中，主要涉及以下几个关键知识点： 1. **HTML基础结构**：每个HTML文档都始于`<!DOCTYPE html>`声明，接着是`<html>`元素，它是整个文档的根元素。在`<html>`内，有两个重要的子元素——`...
JavaScript 正则表达式备忘单实例代码
10-17
正则表达式在JavaScript中应用非常广泛，除了上述的基本知识点之外，还有许多高级功能和技巧，比如捕获组、前瞻和后顾断言等，这些都需要在实际的编码实践中不断学习和应用。熟练掌握正则表达式，能够显著提高处理...
BlueMoon:BlueMoon Js是初学者的Javascript备忘单
05-06
"BlueMoon: BlueMoon Js是初学者的Javascript备忘单"这个资源可能是为了帮助新手快速掌握JavaScript的基础知识，以便他们能够创建功能丰富的网页或应用程序。 JavaScript语法基础： 1. 变量：JavaScript中的变量...
Java面向对象程序设计
05-28
《Java面向对象程序设计》和《Java面向对象程序设计习题解答与实验》，使用超星阅读器浏览，仅供学习和参考使用。
java面向对象
11-02
JavaSE进阶　JavaSE面向对象入门资料：面向对象 , 异常 , 数组 , 常用类 , 集合 , IO流, 线程, 反射 。
2021-03-30
qq_51448910的博客
03-30 81
Day07 类与对象、内存划分、构造器 面向过程与面向对象 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了； 面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。 看大家怎么说 来自知乎的【大魔头-诺铁】这么说： 面向对象是把世界描绘成N个有主动性的"活物"之间的交互 面向过程是有一个"上帝之手"通过制定一系列规则来操纵一堆"死物" 来自知乎的【叶晓斌】这么说： 面向
JavaScript正则表达式实例与实战备忘
JavaScript正则表达式备忘单实例代码提供了一个实用的指南，帮助开发者理解和运用正则表达式在JavaScript中的各种应用场景。正则表达式是一种强大的文本处理工具，用于查找、替换和验证字符串中的特定模式。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值