JavaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布

73、

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量514

点赞数 1

分类专栏： # 前端基础文章标签： javascript基础

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103519661

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript，他和Python一样是一门编程语言，而浏览器内置了JavaScript语言的解释器，所以JavaScript代码在浏览器上就可以运行。
DOM，（Document Object Model）是指文档对象模型，通过它，可以操作HTML文档的相关功能，例如：对标签内容进行删除和替换等。
BOM，（Browser Object Model）是指浏览器对象模型，通过他，可以操作浏览器相关的功能，例如：浏览器设置定时器，浏览器定时刷新页面。
他们三者之间的关系可以简单理解为：JavaScript是编程语言，DOM和BOM是两个模块，利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。

javascript

一句话概括就是，js是一门独立的语言，浏览器具有js的解释器。

1. 代码存在形式

常见的JavaScript代码有两种存在方式：
方式一：Script代码块，只能在当前页面使用
应用场景：所有功能只当前页面需要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
    <script>
           function GetData(){
               var i = document.getElementById('user')
               alert(i.value);
           }
       </script>     
</head>
<body>
    <input type="text" id="user">
    <input type="button" οnclick="GetData();" value="check me">
</body>
</html>

方式二：独立js文件，可以被多个引入之后使用。
应用场景：多个页面公共功能可以放入文件，避免重复编写。
commons.js

function GetData(){
    var i = document.getElementById('user')
    alert(i.value);
}

s1.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="commons.js"></script>
    </head>
    <body>
        <input type="text" id="user">
        <input type="button" οnclick="GetData();" value="check me">
    </body>
</html>

推荐位置
浏览器在解析HTML、CSS、JavaScript文件时，是按照从上到下逐步解释并执行，如果JavaScript代码或文件放在head中可能会有因为耗时（网络请求或代码）导致页面显示速度太慢，影响用户感受，所有建议将js代码都放在body标签的底部。

2. 注释

单行：//
多行：/* */

3. 变量

JavaScript中，局部变量必须以var开头，如果未使用var，则默认表示声明的是全局变量。

4. 定时器

setInterval(“执行代码”, 时间间隔)

5. 常见数据类型

数字(Number)

javascript中不区分整数和浮点数，所有数字均用浮点数来表示。

// 声明
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;

字符串转换成数字：
parseInt(“1.2”) 将某值转换成数字，不成功则NaN
parseFloat(“1.2”) 将某值转换成浮点数，不成功则NaN

特殊值：
NaN，非数字，可用isNaN(num)来判断
Infinity，无穷大，可使用isFinity(num)来判断

字符串

// 声明
var obj = "xueguoxiang" 创建字符串
var name = String("xueguoxiang");
var age_str = String(18);

//常用方法
obj.charAt(n): 返回字符串中的第n个字符 
obj.substring(from,to): 根据索引值获取子序列，n<=子序列<m
obj.length : 获取当前字符串长度
obj.trim() : 移除空白
obj.trimLeft() : 移除左空白
obj.triRight() : 移除右空白
obj.concat(value, ...) : 拼接
obj.indexOf(substring, start) : 子序列位置
obj.lastIndexOf(substring, start): 子序列位置
obj.slice(start, end): 切片
obj.toLowerCase():	大写
obj.toUpperCase(): 小写
obj.split(delimiter, limit): 分割，根据delimiter分割，limit表示取分割后的几个

案例：跑马灯
https://blog.csdn.net/weixin_40318474/article/details/103522620

布尔类型(Boolean)

布尔类型仅包含真假，与python不同的是其首字母是小写。

var status = true;
var status = false;
/*
在js中进行比较时，需要注意：
    ==       比较值相等
    !=       不等于
    ===      比较值和类型相等
    !===     不等于
    ||        或
    &&        且
*/

数组

js中的数组类似于python中的数组

常见功能：

// 声明
var names = ['seth', 'tom', 'jack']
var names = Array('seth', 'tom', 'jack')

//常用方法
obj.length 数组长度
obj.push(ele) 在尾部追加内容
obj.pop() 尾部获取一个元素
obj.unshift() 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素,start起始位置，deleteCount要删除的个数，value新值
	obj.splice(n,0,val) 指定n位置插入元素
	obj.splice(n,1,val) 指定n位置替换元素
	obj.splice(n,1) 指定位置删除元素
obj.slice() 切片
obj.reverse() 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串，ex:sep='-' 
obj.concat(val, ...) 连接数组
obj.sort() 对数组元素进行排序

字典

a = {‘k1’:‘v1’, ‘k2’:‘v2’}

// 声明
info = {
    name:'seth',
    "age":22
}
// 常用方法
var val = info['name']      // 获取
info['age'] = 20            // 修改
info['gender'] = 'male'     // 新增
delete info['age']          // 删除

6. for循环

//第一种方式：循环的元素是索引
//默认生成索引，适用于：字符串、元组、字典。
a = [11,22,33,44]
for(var item in a){
	console.log(a[item]);
}

a = {'k1':'v1', 'k2':'v2'}
for(var item in a){
	console.log(a[item]); // item是key，a[item]是values
}

//第二种方式：不支持字典的循环
//自定义索引并设置增加步长，适用于：字符串、元组。（字典索引非有序）
for(var i=0; i<10; i++){
	
}

a = [11,22,33,44]
for(var i=0; i<a.length; i++){
		
}

7. 条件语句

if(条件){
	
}else if(条件){
	
}else{
	
}


var num = 18;
switch(num){
    case 10:
        console.log('未成年');
        break;
    case 18:
        console.log('成年');
        break;
    case 35:
        console.log('老男人');
        break;
    case 100:
        console.log('....');
        break;
    default:
        console.log('太大了');
}

8. 函数

普通函数

function function_name(a,b,c){
	
}

//调用
function_name(1,2,3)

匿名函数

function (arg){
    return arg + 1;
}
// 一般用于当做参数使用
//例子
setInterval(function(){
	console.log(123);
}, 5000);

自执行函数

//创建函数并且自动执行
//例子
(function(arg){
})(1)

9. 异常

在JavaScript的异常处理中有两个注意事项：

主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
catch只能破获一次，如果想要对异常精细化处理可以在catch代码块中再做类型判断。

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
    var name = ''
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

10. 序列化

JSON.stringify(obj) 序列化，把一个对象转换成字符串
JSON.parse(str) 反序列化，把字符串转换成对象

在这里插入图片描述
应用场景：网络中数据传输本质上是基于字符串进行，如果想要把一个js的对象通过网络发送到某个网站，就需要对对象进行序列化然后发送.

11. 转义

decodeURI()          URI中未转义的字符
decodeURIComponent() URI组件中的未转义字符
encodeURI()          URI中的转义字符
encodeURIComponent() 转义URI组件中的字符

//下面这三个应用在登录之后保存登录信息的场景下面，将数据经过转义之后，保存在cookie中
escape()             对字符串转义
unescape()           给转义字符串解码
URIError()           由URI的编码和解码方式抛出

encodeURI和decodeURI的例子在这里插入图片描述
encodeURIComponent和decodeURIComponent的例子

自动登录并点赞

pip3 install requests

### 1、首先登录任何页面，获取cookie
i1 = requests.get(url="http://dig.chouti.com/help/service")
### 2、用户登录，携带上一次的cookie，后台对cookie中的gpsd进行授权
i2 = requests.post(
	url="http://dig.chouti.com/login",
	data = {
		'phone': '86手机号',
		'password': '密码',
		'oneMonth': ""
	},
	cookies = i1.cookies.get_dict()
)
### 3、点赞（只需携带已经被授权的gpsd即可）
gpsd = i1.cookies.get_dict()['gpsd']
i3 = requests.post(
	url = requests.post(
		url = "http://dig.chouti.com/link/vote?linksId=8979998",
		cookies = {'gpsd': gpsd}
	)
)
print(i3.text)

12. eval

JavaScript中的eval是Python中eval和exec的集合，既可以编译代码也可以获取返回值。

eval()
EvalError() 执行字符串中的JavaScript代码

13. 时间

Date类

var d = new Date()；// d 代表了当前时间
d.getXXX 获取
d.setXXX 设置

14. 作用域

其他语言：以代码块作为作用域
python：以函数作为作用域
JavaScript：

以函数作为作用域
函数的作用域在函数未被调用之前就已经创建

函数的作用域存在作用域链，并且也是在被调用之前创建

//1
name = "73";
function func(){
	//var name = "bob";
	function inner(){
		//var name = "peter";
		console.log(name);
	}
	inner();
}
func();

//2
name = "73";
function func(){
	var name = "bob";
	function inner(){
		console.log(name);	
	}
	return inner;
}
var ret = func();
ret(); //bob

//3
name = "73";
function func(){
	var name = "bob";
	function inner(){
		console.log(name);	
	}
	var name = "peter";
	return inner;
}
var ret = func();
ret(); //peter

函数内部局部变量提前声明

function func(){
	console.log(xxoo); // undefined
	var xxoo = 'xue';
	console.log(xxoo); // xue
}
func();

15. 词法分析 ×××（非常重要）

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

16. JavaScript面向对象

//1、this代指对象（相当于python self）
//2、创建对象时，new 函数()
function Foo(n){
	this.name = n;
	this.sayName = function(){
		console.log(this.name);
	}
}
var obj = new Foo('xue');
obj.sayName()

在python的面向对象中，创建对象时，内存空间存储形式如下
在这里插入图片描述
JavaScript创建对象时如下所示

可以看到，JavaScript每创建一个对象时，内部都保存了一次函数，而python没有，这样做完全没有必要，那怎么改呢，看下面

//原型
function Foo(n){
	this.name = n;
}
//Foo的原型，这样做的好处是：由于Foo类只创建一次，Foo的原型也就只创建一次
Foo.prototype = {
	'sayName': function(){
		console.log(this.name);
	}
}
obj1 = new Foo('xue');
obj1.sayName();
obj2 = new Foo('bob');
obj2.sayName();

//现在这样就和python很类似了

在这里插入图片描述

17. 正则表达式

1、定义正则表达式
/…/ 用于定义正则表达式
/…/g 表示全局匹配
/…/i 表示不区分大小写
/…/m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和 $KaTeX parse error: Expected group after '^' at position 9: ，m模式也会使用^̲$ 来匹配换行的内容

var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
res = pattern.exec(text)
res = pattern.exec(text)
res = pattern.exec(text)

在这里插入图片描述
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：

test(string) 检查字符串中是否和正则匹配

n = 'uui99sdf'
reg = /\d+/
reg.test(n) # true

# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加^和$

exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组

获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组

非全局模式
	获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配(正则内容分组匹配)
	var pattern = /\bJava\w*\b/;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);

	var pattern = /\b(Java)\w*\b/; //分组，（）表示再拿出括号内匹配到的内容
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);
全局模式
	需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
	var pattern = /\bJava\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);

	var pattern = /\b(Java)\w*\b/g;
	var text = "JavaScript is more fun than Java or JavaBeans!";
	result = pattern.exec(text);

73、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

一句话概括就是，js是一门独立的语言，浏览器具有js的解释器。代码存在形式常见的JavaScript代码有两种存在方式：方式一：Script代码块，只能在当前页面使用应用场景：所有功能只当前页面需要。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8...
复制链接

扫一扫

专栏目录