python笔记（二十二）：JavaScript

最新推荐文章于 2024-10-18 00:00:00 发布

baikai666

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量73

点赞数

文章标签： python 笔记 javascript

本文链接：https://blog.csdn.net/baikai666/article/details/132465817

版权

为什么学习JavaScript

HTML定义网页的内容
CSS描述网页的布局及渲染
JavaScript网页的行为
三者之间相辅相成

定义

javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。

javascript是由三部分组成：ECMAScript、DOM、BOM

ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口(着重点)
BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

ECMAScript 描述了以下内容：

语法
类型
语句
关键字
保留字
运算符
对象 (封装继承多态) 基于对象的语言.使用对象.

引入方式

存在形式

<!``-``- 方式一 ``-``-``>

<!``-``- 方式二 ``-``-``>

``Js代码内容

<``/``script>

—|—

存放位置

HTML的head中
HTML的body代码块底部(推荐)

为什么推荐存放位置在body代码块的底部

HTML文档代码依次由上自下执行,预先加载CSS样式,而不会让用户看到单纯的文本内容
如果head中js代码耗时严重,则导致用户长时间无法看到网页内容;如果放在底部,不会影响网页效果,减少等待时间

变量

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号，也可以在声明变量时对其赋值

推荐在每行js代码加一个分号，代表语句的结束

``/``/ 全局变量

``name ``= 'Tony'``;

``function func(){

``/``/ 局部变量声明一个age变量

``var age;

``/``/ 赋值操作

``age ``= 18``;

``/``/ 全局变量

``gender ``= "男"

``}

<``/``script>

—|—

JavaScript中代码注释（此注释仅在Script块中生效）：

单行 //
多行 /* */

常量和标识符

常量：直接在程序中出现的数据值

标识符的规范即变量规范在上文已介绍过

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

运算符

算数运算符

加(＋)、减(－)、乘(``*``) 、除(``/``) 、余数(``% ) 加、减、乘、除、余数和数学中的运算方法一样例如：``9``/``2``=``4.5``，``4``*``5``=``20``，``9``%``2``=``1

-``除了可以表示减号还可以表示负号例如：x``=``-``y

+``除了可以表示加法运算还可以用于字符串的连接例如：``"abc"``+``"def"``=``"abcdef"

—|—

递增，递减

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1

i++相当于i=i+1，i--相当于i=i-1

递增和递减运算符可以放在变量前也可以放在变量后：--i

var i=1;

console.log(i++);

console.log(++i);

console.log(i--);

console.log(--i);

// ++i 表示先+再赋值 --i 表示先减再赋值

—|—

一元加减法

var a=1;

``var b=1;

``a=-a; ``//a=-1

``var c=``"10"``;

``alert(``typeof (c));

``c=+c; ``//类型转换

``alert(``typeof (c));

// -------------------

``var d=``"Tony"``;

``d=+d;

``alert(d);``//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

``alert(``typeof``(d));``//Number

``//NaN特点: not a number

``var n=NaN;

``alert(n>3);

``alert(n<3);

``alert(n==3);

``alert(n==NaN);

``alert(n!=NaN);``//NaN参与的所有的运算都是false,除了!=

—|—

逻辑运算符

等于 ( == ) 、不等于( != ) 、大于( > ) 、小于( < ) 大于等于(>=) 、小于等于(<=)

与 (&&) 、或(||) 、非(!)

1 && 1 = 1 1 || 1 = 1

1 && 0 = 0 1 || 0 = 1

0 && 0 = 0 0 || 0 = 0

—|—

逻辑and运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果一个运算数是对象，另一个是 Boolean 值，返回该对象。

如果两个运算数都是对象，返回第二个对象。

如果某个运算数是 ``null``，返回 ``null``。

如果某个运算数是 NaN，返回 NaN。

如果某个运算数是 undefined，返回undefined。

—|—

逻辑and运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值：

如果一个运算数是对象，并且该对象左边的运算数值均为 ``false``，则返回该对象。

如果两个运算数都是对象，返回第一个对象。

如果最后一个运算数是 ``null``，并且其他运算数值均为 ``false``，则返回 ``null``。

如果最后一个运算数是 NaN，并且其他运算数值均为 ``false``，则返回 NaN。

如果某个运算数是 undefined，返回undefined。

—|—

&&常用操作

1> 取代``if``语句

//前面条件成立则运行后面操作

(a == b) && dosomething();

2> 用于回调函数

//若没有给参数a传值，则a默认为undefined假值，所以不执行a()。

function fn(a){

``a && a();

}

—|—

||常用操作

1> 变量设置为默认值

//如果没有向参数a传入任何参数，则将该参数设置为空对象

function func(a){

``a = a || {};

}

—|—

赋值运算符

赋值 =

JavaScript中=代表赋值，两个等号==表示判断是否相等

例如，x=1表示给x赋值为1

if (x==1){...}程序表示当x与1相等时，怎样怎样

if``(x==“on”){…}程序表示当x与“on”相等时，怎样怎样

``配合其他运算符形成的简化表达式

例如i+=1相当于i=i+1，x&=y相当于x=x&y

—|—

运算符更新中

控制语句

1、条件控制语句

javascript支持俩个条件语句if和switch(选择控制语句)

//if语句

if``(条件){

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

``}``else``{

}

—|—

switch

switch (条件) {

``case 值1:语句1;``break``;

``case 值2:语句2;``break``;

``case 值3:语句3;``break``;

``default``:语句4;

}

—|—

结语

//switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。

首先要看一个问题，``if 语句适用范围比较广，只要是 boolean 表达式都可以用 ``if 判断；而 ``switch 只能对基本类型进行数值比较。两者的可比性就仅限在两个基本类型比较的范围内。

说到基本类型的数值比较，那当然要有两个数。然后重点来了——

if 语句每一句都是独立的，看下面的语句：

if (a == 1) ...

else if (a == 2) ...

这样 a 要被读入寄存器两次，1 和 2 分别被读入寄存器一次。于是你是否发现其实 a 读两次是有点多余的，在你全部比较完之前只需要一次读入寄存器就行了，其余都是额外开销。但是 ``if 语句必须每次都把里面的两个数从内存拿出来读到寄存器，它不知道你其实比较的是同一个 a。

于是 ``switch case 就出来了，把上面的改成 ``switch case 版本：

switch (a) {

``case 0:

``break``;

``case 1:

}

总结:

1.``switch``用来根据一个整型值进行多路分支，并且编译器可以对多路分支进行优化

2.``switch``-``case``只将表达式计算一次,然后将表达式的值与每个``case``的值比较,进而选

``择执行哪一个``case``的语句块

3.``if``..``else 的判断条件范围较广，每条语句基本上独立的，每次判断时都要条件加载

``一次。

所以在多路分支时用``switch``比``if``..``else if .. ``else``结构要效率高。

—|—

2、循环控制语句

JavaScript中支持四种循环语句，分别是：for、for in、while、do-while

for、for in

for (初始值;条件;增量){

``......

}

//例如1到100的和为多少

var x = 0,sum = 0;

for (x;x<101;x++){

``sum += x;

}

alert(sum);

//例如一个数组索引取值

//for语句

var names = [``"Alex"``,``"Egon"``,``"Tony"``];

for (``var i=0;i<names.length;i++){

``console.log(i);

``console.log(names[i])

}

//for in 语句

var names = [``"Alex"``,``"Egon"``,``"Tony"``];

for (``var i ``in names){

``console.log(i);

``console.log(names[i]);

}

—|—

while、do while

// while

while``(条件){

``// break;

``// continue;

}

// 例如1到100的和

while (x<=100){

``sum+=x;

``x++;

}

alert(sum);

// do whill

//循环的代码至少执行一次，结果为1

``var num = 0;

``do {

``num++;

``}``while (num>10);

—|—

3、label语句

更新中…

4、异常处理语句

try {

``//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

``// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。

``//e是一个局部变量，用来指向Error对象或者其他抛出的对象

}

finally {

``//无论上述代码怎么，finally代码块始终会执行

}

//主动跑出异常 throw Error('xxxx')

—|—

数据类型

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

基本数据类型

Number

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

转换：

parseInt(…) 将某值转换成数字，不成功则NaN
parseFloat(…) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

Number	对数字的支持
Number.MAX_VALUE	最大数值
Number.MIN_VALUE	最小数值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷大
Number.POSITIVE_INFINITY	正无穷大
Number.toExponential( )	返回四舍五入的科学计数法，加参数为保留几位
Number.toFixed( )	小数点后面的数字四舍五入，加参数为保留几位
Number.toPrecision( )	四舍五入，自动调用toFixed()或toExponential()
Number.toLocaleString( )	把数字转换成本地格式的字符串
Number.toString( )	将数字转换成字符串
Number.valueOf( )	返回原始数值

更多数值计算

复制代码

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

复制代码

String

String.length	字符串的长度
String.trim()	移除空白
String.trimLeft()	移除左侧空白
String.trimRight()	移除右侧空白
String.concat(value, …)	拼接
String.slice(start, end)	切片
String.split( )	分割
String.search( )	从头开始匹配，返回匹配成功的第一个位置(g无效)
String.match( )	全局搜索，如果正则中有g表示找到全部，否则只找到第一个
String.replace( )	`替换，正则中有g则替换所有，否则只替换第一个匹配项；`

```$数字：匹配的第n个组内容；`

```$&：当前匹配的内容；`

```$：位于匹配子串左侧的文本；

```$'：位于匹配子串右侧的文本`

```$ $：直接量$ 符号`

常用转义字符

+ View Code

Boolean

布尔类型仅包含真假，与Python不同的是其首字母小写。即true和false，也代表1和0，也是常作用于条件语句

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

Array(数组)

Array.length	数组的长度
Array.push()	尾部添加元素
Array.pop()	删除并返回数组的最后一个元素
Array.unshift()	在数组头部插入一个元素
Array.shift( )	在数组头部移除一个头部元素
Array.slice( )	切片
Array.reverse( )	反转
Array.join( )	将数组元素连接起来以构建一个字符串
Array.concat( )	拼接
Array.sort( )	排序按照最高位
Array	对数组的内部支持
Array.splice( start, deleteCount, value, …)

插入、删除或替换数组的元素

obj.splice(n,``0``,val) 指定位置插入元素

```obj.splice(n,1,val) 指定位置替换元素`

```obj.splice(n,1) 指定位置删除元素`

Array.toLocaleString( ) | 把数组转换成局部字符串
Array.toString( ) | 将数组转换成一个字符串

复制代码

 1 Array 对象用于在单个的变量中存储多个值。
 2 语法:
 3 
 4 创建方式1:
 5 var a=[1,2,3];
 6 
 7 创建方式2:
 8 new Array();     //  创建数组时允许指定元素个数也可以不指定元素个数。
 9 new Array(size);//if 1个参数且为数字,即代表size,not content
10     初始化数组对象:
11     var cnweek=new Array(7);
12         cnweek[0]="星期日";
13         cnweek[1]="星期一";
14         ...
15         cnweek[6]="星期六";
16 
17 new Array(element0, element1, ..., elementn)//也可以直接在建立对象时初始化数组元素，元素类型允许不同
18 
19 var test=new Array(100,"a",true);

复制代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VERKsgEl-1692834820315)(https://common.cnblogs.com/images/copycode.gif)]

//即数组内包含数组

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

复制代码

//  js中数组的特性
         //java中数组的特性,  规定是什么类型的数组,就只能装什么类型.只有一种类型.
         //js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
         //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
         var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
        /*  alert(arr5.length);//8
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */

复制代码

Function函数

1、定义及分类

// 普通函数

``function func(arg){

``return true``;

``}

// 匿名函数

``var func = ``function``(arg){

``return "Tony"``;

``}

// 自执行函数

``(``function``(arg){

``console.log(arg);

``})(``'123'``)

—|—

注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以

2、参数

函数传参的个数可以小于实际需传参的个数，没传参的默认为undefined

参数传多默认不起作用

function man(name,age) {

``console.log(name,age);

}

man(``"Tony"``,18); ``//Tony 18

man(``"Tony"``); ``//Tony undefined

man(``"Tony"``,18,19); ``//Tony 18

—|—

arguments参数 argument 对象包含了函数调用的参数数组。

arguments取最大值

big = findMax(1, 123, 500, 115, 44, 88);

function findMax() {

``var i, max = arguments[0];

``if``(arguments.length < 2) ``return max;

``for (i = 0; i < arguments.length; i++) {

``if (arguments[i] > max) {

``max = arguments[i];

``}

``return max;

}

console.log(big)

—|—

arguments求和

xx = sum(1, 123, 500, 115, 44, 88);

function sum() {

``var i, sum = 0;

``for (i = 0; i < arguments.length; i++) {

``sum += arguments[i]

``}

``return sum;

}

console.log(xx);

—|—

3、作用域

js的作用域和py相似，if while等控制语句并没有自己作用域；而函数是有自己的作用域的

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。

切记：所有的作用域在创建函数且未执行时候就已经存在。

function f1(){

``var arg= [11,22];

``function f2(){

``console.log(arg);

``}

``arg = [44,55];

``return f2;

``}

ret = f1();

ret();

// Array [44,55]

—|—

3、闭包

闭包就是能够读取其他函数内部变量的函数。

4、面向对象

在JS中并没有类、但是它使用了函数充当了类

function Foo (name,age) {

``this.Name ``= name;

``this.Age ``= age;

``this.Func ``= function(arg){

``return this.Name ``+ arg;

``}

}

var obj ``= new Foo(``'alex'``, ``18``);

var ret ``= obj.Func(``"sb"``);

console.log(ret);

—|—

基于上述代码：

Foo充当的构造函数
this代指对象
创建对象时需要使用 new

复制代码

var v = 123;
function foo(){
    var v = 456;
    function inner(){
        console.log(v)   // 456 
    }
    return inner
}

result = foo()
console.log(result())    // undefined

/*    题中、当代码编译完成,函数在未执行
前作用域就已经存在,出现函数嵌套产生作
用域链,寻找值时会从内到外一层一层找,
找不到则出错
*/


Name='root';
Age = 18;
function Foo(name,age){
    // this代指obj
    this.Name = name;
    this.Age = age;
    this.Func = function(){
        console.log(this.Name,this.Age);     // 'alex' 666
        (function(){
            // this代指window
            console.log(this.Name,this.Age); // 'root' 18
        })();
    }
}
obj = new Foo('alex',666);
obj.Func()

/* js中用new的方式创建类对象 */

复制代码

5、补充

其它

A，Js时间处理

时间操作中有两种时间：

时间统一时间
本地时间（东8区）

复制代码

Date                      // 操作日期和时间的对象
Date.getDate( )           // 返回一个月中的某一天
Date.getDay( )            // 返回一周中的某一天
Date.getFullYear( )       // 返回Date对象的年份字段
Date.getHours( )          // 返回Date对象的小时字段
Date.getMilliseconds( )   // 返回Date对象的毫秒字段
Date.getMinutes( )        // 返回Date对象的分钟字段
Date.getMonth( )          // 返回Date对象的月份字段
Date.getSeconds( )        // 返回Date对象的秒字段
Date.getTime( )           // 返回Date对象的毫秒表示
Date.getTimezoneOffset( ) // 判断与GMT的时间差
Date.getUTCDate( )        // 返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )         // 返回该天是星期几(世界时)
Date.getUTCFullYear( )    // 返回年份(世界时)
Date.getUTCHours( )       // 返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )// 返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )     // 返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )       // 返回Date对象的月份(世界时)
Date.getUTCSeconds( )     // 返回Date对象的秒字段(世界时)
Date.getYear( )           // 返回Date对象的年份字段(世界时)
Date.parse( )             // 解析日期/时间字符串
Date.setDate( )           // 设置一个月的某一天
Date.setFullYear( )       // 设置年份，也可以设置月份和天
Date.setHours( )          // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )   // 设置Date对象的毫秒字段
Date.setMinutes( )        // 设置Date对象的分钟字段和秒字段
Date.setMonth( )          // 设置Date对象的月份字段和天字段
Date.setSeconds( )        // 设置Date对象的秒字段和毫秒字段
Date.setTime( )           // 以毫秒设置Date对象
Date.setUTCDate( )        // 设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    // 设置年份、月份和天(世界时)
Date.setUTCHours( )       // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )// 设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )     // 设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )       // 设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )     // 设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )           // 设置Date对象的年份字段
Date.toDateString( )      // 返回Date对象日期部分作为字符串
Date.toGMTString( )       // 将Date转换为世界时字符串
Date.toLocaleDateString() // 回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    // 将Date转换为本地已格式化的字符串
Date.toLocaleTimeString() // 返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )          // 将Date转换为字符串
Date.toTimeString( )      // 返回Date对象日期部分作为字符串
Date.toUTCString( )       // 将Date转换为字符串(世界时)
Date.UTC( )               // 将Date规范转换成毫秒数
Date.valueOf( )           // 将Date转换成毫秒表示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3dWX2as-1692834820316)(https://common.cnblogs.com/images/copycode.gif)]

B，Js序列化