JavaScript的基本使用

ゝ一世哀愁。 2023-06-27 11:25 11阅读 0赞

1.JavaScript基本语法:  
(1)标识符:  
JavaScript中的标识符  
变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(\_)和美元符号( ) 组 成 ， 标 识 符 不 能 以 数 字 开 头 ， 不 能 是 J a v a S c r i p t 中 的 保 留 字 或 关 键 字 。 合 法 的 标 识 符 举 例 ： i n d e n t i f i e r 、 u s e r n a m e 、 u s e r n a m e 、 u s e r N a m e 、 )组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字。 合法的标识符举例：indentifier、username、user\_name、\_userName、 )组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字。合法的标识符举例：indentifier、username、username、userName、username  
非法的标识符举例：int、98.3、Hello World  
JavaScript严格区分大小写  
username和userName是两个完全不同的符号  
JavaScript程序代码的格式  
每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开 。  
语句块使用\{\}来表示  
JavaScript程序的注释  
/*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。 、/\*\*…文档注释.\*/

(2)变量  
声明变量要使用var关键字 variable  
例如：var name;//一般不使用name作为变量名  
声明变量的同时为其赋值  
例如：var name = “will”;  
对已赋值的变量赋予一个其他类型的数据  
例如：name = 17;  
不事先声明变量而直接使用  
例如：x = 1234;  
　提示：javascript定义变量无需指定类型，任何类型都使用var声明,感觉var就有点类型于java中的Object类型了

打印对象:  
方式1: alert(变量名);  
方式2: console.debug(变量名);(推荐使用)

(3)数字类型  
Number(数字类型)  
1、整型常量(10进制\\8进制\\16进制)  
十六进制以0x或0X开头，例如：0x8a。  
八进制必须以0开头，例如：0123。  
十进制的第一位不能是0（数字0除外），例如：123。  
２、实型常量  
12.32、193.98、 5E7、4e5等。  
特殊数值：NaN(Not A Number)、Infinity(除数为零)，所对应的判断函数isNaN()、isFinite()  
Boolean(布尔值) true和false。  
String字符串(注意js中没有char类型，所有’a’也是一个字符串)  
“a book of JavaScript”、‘a’、 “a”、“”。  
字符串中的特殊字符，需要以反斜杠（\\）后跟一个普通字符来表示。  
null常量  
undefined常量 (未定义,定义未赋值)

typeof运算符:typeof:判断变量的数据类型

var msg=‘hello’;  
console.debug(typeof msg );  
msg=17;  
console.debug(typeof msg );

(4)逻辑运算符:  
=和以及=符号.  
不要将比较运算符“==”误写成“=” ；  
=:为一个变量赋值  
==:判断两个变量的值是否相等,和Java中的equals方法一样  
=:判断两个变量的类型和值是否相等,先判断类型,再判断值 和java中的一样

console.debug(“17” == 17) true  
console.debug(“17” === 17) false

在逻辑运算中，0、""、false、null、undefined、NaN均表示false。

a && b : 将a, b转换为Boolean类型, 再执行逻辑与, 若表达式结果为true返回b, false返回a  
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, 若表达式结果为true返回a, false返回b

&& 和|| 运算符的区别(开关)：  
&&操作:返回最后一个为true的值,或者第一个为false的值.  
||操作: 返回第一个为true的值,或则最后一个为false的值.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 1]  
(5)函数的定义

/* 函数的定义 function 函数名称(参数列表){ //函数体 } */
     //无参数无返回
     function fun1() { 
         console.log('这是一个函数');
     }
     fun1();
     //有参数无返回
    function fun2(a,b) { 
        console.log(a+b);
    }
    fun2(1,2);
    //有参数又返回
    function fun3(a,b) { 
        return a+b;
    }
    var ret = fun3(1,2);
    console.log(ret);
    //匿名函数
    var fun4 = function () { 
        console.log('这是一个匿名函数');
    }
    var fun5 =fun4();
    //fun5();//fun5 is not a function
    console.log(fun5);//undefined

(6)全局变量和局部变量  
全局变量:function外部定义的变量称为全局变量  
局部变量:function内部定义的变量称为局部变量

访问变量原则：就近原则，谁离我最近我就使用谁。

注意:  
1.Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域(变量的位置,函数里或外)。  
2.当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope，当离开局部变量的scope后，又重回到全局变量的scope，而当全局变量遇上局部变量时，怎样使用全局变量呢？用window.globalVariableName。

var msg = '全局变量';
    function fun() { 
        //此时,因为在函数中从新定义了一个局部变量,名称和全局变量一致,
        // 此时会局部变量的作用域会覆盖全局变量的作用域,
        // 此时在函数中会认为msg未被定义,因为msg的作用域已经被修改为局部了
        //若此时一定要使用全局变量,可使用window来调用
        console.log(msg);//undefined
        console.log(window.msg);//全局变量
        var msg;
        msg='局部变量';
    
        console.log(msg);//局部变量
    }
    fun();
    //当离开了函数的作用域,msg的作用域又恢复为全局
    console.log(msg);//全局变量

(7)系统函数  
参见与:W3C javascript.chm —> JavaScript 全局对象参考手册

encodeURI及encodeURIComponent方法。  
返回对一个URI字符串编码后的结果。  
decodeURI及decodeURIComponent()方法。  
将一个已编码的URI字符串解码成最初始的字符串并返回。  
parseInt方法  
将一个字符串按指定的进制转换成一个整数，语法格式为：parseInt(numString, \[radix\])。如果没有指定第二个参数，则前缀为 ‘0x’ 的字符串被视为十六进制，前缀为 ‘0’ 的字符串被视为八进制，所有其他字符串都被视为是十进制。  
parseFloat方法  
将一个字符串转换成对应的小数。  
isNaN方法  
检查一个值是否为NaN。  
escape方法(不推荐使用,改为encodeURIComponent)  
返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中xx等于表示该字符的Unicode编码的十六进制数，字符值大于255的字符以%uxxxx格式存储。  
unescape 方法(不推荐使用，改为decodeURIComponent)  
将一个用escape方法编码的结果字符串解码成原始字符串并返回。  
eval 方法 \*  
将参数字符串作为一个JavaScript表达式执行。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 2]  
(8)面向对象  
对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。  
类是对某一类事物的描述，是抽象上的概念；而对象实例是一类事物中的具体个例。  
能够被用来创建对象实例的函数就叫对象的构造函数。使用new关键字和对象的构造函数就可以创建对象实例，语法格式如下：var objInstance = new ObjName(传递给该对象的实际参数列表);

//js创建一个类,只需要定义类的构造函数(方法);  
this关键字:  
//在构造函数中:this指新创建的对象  
//在函数/方法中:谁调用this所在的函数/方法,this就是谁.  
this 在构造函数中,代表的是创建的当前对象  
this在函数中,代表的是调用者

//定义一个类,和定义一个函数的方式相同,一般一般类名首字母大写
    function User() { 
        //为当前对象定义属性
        this.username='小明';
        this.age=20;
        //定义函数(类似于匿名函数的定义方式,使用一个变量来接收)
        this.fun = function () { 
            console.log(fun());
        }
    }
    //创建一个对象
    //User u = new User();不能使用User来接收,这和Java中不一样
     var u = new User();
    console.log(u);

(9)函数值的传递方式  
①将基本数据类型的变量作为函数参数传递的情况：传递值的副本

function changeValue(x){ 
    		x = 5;
    	}
    	var x = 3;
    	changeValue(x);
    	alert(x);//3

②将对象类型的变量作为函数参数传递的情况：传递地址

unction Person(name,age){ 
    		this.age = age;
    		this.name = name;
    		this.say = sayFunc;	
    	}
    	function sayFunc(){ 
    		alert(this.name + ":“ + this.age);
    	}
    	function change(p1){ 
    		p1.name = "李四";
    
    	} 
    	var person1 = new Person("张三",18);
    	change(person1);
    	person1.say();//李四,18

(10)内置对象  
参见与:W3C javascript.chm —> ECMAScript 对象类型.  
**Object:**  
创建对象,并设置属性和方法  
var obj = new Object();  
obj.age = 17;  
obj.sayHello = function() \{  
\};  
// 对象的构造函数  
alert(obj.constructor);  
// 是否有指定的属性  
debug(obj.hasOwnProperty(“name1”));  
// 迭代对象所有的属性+方法:for…in  
for (attr in obj) \{  
alert(attr)//属性名  
\}  
**Boolean:true/false**  
**Date:**  
打印当前系统时间:  
var d = new Date();  
var day = d.getDate();  
day = day<10?“0”+day:day;  
var time = d.getFullYear() + “-” + (d.getMonth()+1) + “-” + day + " "  
\+ d.getHours() + “:” + d.getMinutes() + “:” + d.getSeconds();  
**Math:**  
var num = Math.random();//获取一个0~1的随机数  
**Number**  
var num = new Number(100);  
console.debug(num.valueOf());  
**String:**  
// 随机生成A到Z之间的字母:65+26  
// 随机生成0~25  
var num = parseInt(Math.random() \* 26);//  
num = num + 65;  
alert(String.fromCharCode(num));  
**RegExp**:正则表达式

(11)数组  
js中的数组,类似于ArrayList  
//创建数组  
//方式1:  
var arr1 = new Array();  
arr1\[0\]=“A”;  
arr1\[1\]=“B”;  
arr1\[2\]=“C”;  
arr1\[4\]=“E”;  
//print(arr1);  
//方式2:  
var arr2=new Array(“A”,“B”,“C”,“D”);  
//print(arr2);  
//方式3:  
//new Array(Number size):创建指定长度的数组  
var arr3 = new Array(“A”,“B”);  
//print(arr3);  
//方式4:推荐  
var arr4 = \[10,20,30,40,50\];  
length－获得数组的长度；  
concat－连接数组；  
join－把数组转换成字符串；  
pop－弹出一个元素；  
push－放入一个元素；  
reverse－颠倒数据中的元素顺序；  
shift－移出第一个元素；  
slice－截取数组;  
sort－排序数组;  
unshift－在前面追加元素；  
splice 从数组中添加/删除/替换元素,若是删除操作,则返回被删除的元素。  
(12)原型修改原有的函数,自定义函数,在所有的对象中都可以使用

[api手册][api]  
提取码:q8r3

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200106170921558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200106171143732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020010618154085.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTU4ODc1MQ==,size_16,color_FFFFFF,t_70
[api]: https://pan.baidu.com/s/1OyqziVxNCUhLIKsuFoVvBQ