40.Javascript脚本语言详解（上）

最新推荐文章于 2023-06-26 11:54:08 发布

Mars_Loo

最新推荐文章于 2023-06-26 11:54:08 发布

阅读量3.6k

点赞数 3

分类专栏： Web前端技术文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/a464057216/article/details/52403652

版权

Web前端技术专栏收录该内容

6 篇文章 3 订阅

订阅专栏

文章目录

导语
基本语法
正则表达式
JSON
void

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52403652

后续此博客不再更新，欢迎大家搜索关注微信公众号“测开之美”，测试开发工程师技术修炼小站，持续学习持续进步。
在这里插入图片描述

导语

HTML定义网页内容，CSS定义网页布局，Javascript定义网页行为。
Javascript是浏览器客户端脚本语言，代码放在HTML文件的<head></head>或<body></body>中，需要用<script></script>标签包含。引用外部Javascript文件（以.js结尾，且脚本文件中不包含<script></script>标签），需要在<script>标签的src属性中指定脚本位置。

基本语法

Javascript运算符：+、-、*、/、（类型被忽略，只比较值，比如10 == "10"返回true）、=（值和类型都相等）、!=、!==（类型不相等或值不相等）、<、>、<条件>?<条件为true执行> :<条件为false执行> 。
单行注释采用//，多行注释采用/**/。

输出

window.alert()：弹出警告框。
document.write()：将内容写到HTML文档。如果在HTML文档加载完成后调用此方法，输出会覆盖整个页面。
innerHTML：写入到HTML元素。
console.log()：写入到浏览器控制台。

字面量

数字字面量：如3.14、1.23e5。
字符串字面量：单引号或双引号包含，如'str'，"str1"。
表达式字面量：如5 + 3。
对象字面量：如{name: "mars loo"}。
函数字面量：如function mySum(a, b) { return a + b;}。
数组字面量：如[1, 2]。

变量

有5种数据类型：string、number、boolean（取值true或false）、object、function，3种对象类型：Object、Date、Array，两个不包含任何数据的类型：null（清空变量）、undifined（变量未定义）。Javascript变量均可作为对象使用。

typeof可以获取变量的类型，如typeof null返回object，typeof undefined返回undefined。

使用var定义变量，变量名常用驼峰命名方式，对大小写敏感，采用unicode字符集。如果一个变量声明时未赋值，它的值将会是undefined。如果重新声明一个已经赋值的变量却未提供初始值，则该变量的原本的值不会丢失：var b = 3; var b;，变量b的值最终为3。

string

使用单引号或双引号包围的字符串，也可以用对象表示字符串，如：

var a = 'str';
var b = new String('str');
console.log(typeof a + ' ' + typeof b + ' ' + (a==b) + ' ' + (a===b));

输出：string object true false。
特殊字符转义：

代码	输出
`\'`	单引号
`\"`	双引号
\\	反斜杠
\n	换行
\r	回车
\t	制表
\b	退格
\f	换页

string变量属性：

length：字符串长度，如：'string'.length。
prototype：定义字符串的属性和方法，如：

String.prototype.myInner = "mars loo";
String.prototype.myFunc = function (str) {
   return this.concat(str);
}
console.log('str'.myInner + ' ' + 'str'.myFunc('-mars'));

输出为mars loo str-mars。

constructor：创建字符串属性的函数，'str'.constructor返回String()。

string变量方法（x表示一个string变量）：

方法	描述
x.charAt(n)	位置n的字符，也可以使用x[n]
x.charCodeAt(n)	位置n的字符的Unicode值
x.concat(str)	返回x与str拼接后的字符串
String.fromCharCode(n₁, n₂, …)	返回Unicode值为n₁, n₂, …的字符拼接后的字符串
x.indexOf(str, start)	从start位置开始，字符串str在x中首次出现的位置，没有找到返回-1
x.lastIndexOf(str, start)	从start位置开始，字符串str在x中倒序第一次出现的位置，没有找到返回-1
String.localeCompare(str1, str2)	返回str1、str2的语言本地排序结果
x.match(RegExp \| str)	在x中正则匹配或字符串匹配，将匹配到的字符串放在数组中返回，没有匹配返回null
x.replace(RegExp \| str, str \| func)	将x中找到的匹配替换为str，或者将找到的匹配替换为函数func作用后的返回值
x.search(RegExp \| str)	返回字符串x中查找到的第一个匹配的位置，没有找到匹配返回-1
x.slice(start, end)	返回字符串x的切片，左闭右开
x.split(str \| RegExp, n)	将字符串x按照匹配分隔，返回分隔出的字符串组成的数组，参数n定义最多分隔成几份
x.substr(start, length)	返回字符串x从位置start开始，长度为length的子字符串
x.substring(start, ?end)	返回字符串x从位置start开始，到end为止的子字符串（左闭右开）。end是可选参数，如果不提供，默认到字符串x的结尾
x.toUpperCase()	将字符串x中所有字符转换成大写后返回
x.toLowerCase()	将字符串x中所有字符转换成小写后返回
x.trim()	去除字符串x两端的空白后返回新串

Array

Javascript中，同一数组可以存储不同类型的变量。定义数组有三种形式：

var a = new Array("Chery", "Geely");
var b = ["Volvo", "Saab"];
var c = new Array();
c[0] = "Audi";
c[1] = "Volkswagen";

typeof 数组名返回object。访问一个不存在的位置的数组元素，返回undefined。

数组只能以数字作为索引，如果使用字符串作为索引，则数组自动转换为对象。
Array类型变量属性：

length属性：数组长度。
constructor属性：可以用来判断变量类型，比如判断对象是否为数组：

这里写图片描述

undefined和null

undefined == null：结果为true
undefined === null：结果为false
检查对象是否存在：先检查是否是undefined，再检查是否是null，typeof myObj !== "undefined" && myObj !== null。

对象

对象寻址有两种方式：

var person = {
    name: "mars loo",
    "age": 25,
};

console.log(person.name + " " + person.age);
console.log(person['name'] + " " + person['age']);

对象访问自身变量的方法：

var person = {
    first_name: "mars",
    last_name: "loo",
    "age": 25,
    full_name: function (){
        return this.first_name + " " + this.last_name;
    }
};

console.log(person.full_name()

function

把函数当做一个属性访问的话，会返回函数本身：

var person = {
    first_name: "mars",
    last_name: "loo",
    "age": 25,
    full_name: function (){
        return this.first_name + " " + this.last_name;
    }
};

console.log(person.full_name);
document.write(person.full_name);

效果是在网页上显示函数的定义，在浏览器控制台输出函数的类型及位置信息：

这里写图片描述

number

NaN（非数值）的类型是number，使用isNaN可以判断变量是否是NaN。
Infinity / -Infinity分别表示正负无穷大，正负无穷大也是number。正数除以0结果为正无穷大，负数除以0结果为负无穷大。
浮点数以64位存储，但是精度和其他语言一样是无法确定的。

类型转换

Javascript支持自动类型转换（比如整数和一个字符串用+运算，整数会被自动转换为字符串参与拼接运算），也可以显示转换。

转换为string

数字转化为字符串：String(num)，或者调用数字变量的toString()方法，比如x.toString()或者(23).toString()。

toString(?radix)：数字转换为字符串，radix表示基数（可选字段）。
toFixed(num)：数字转换为字符串，num指定小数点后保留指定的位数。
toPrecision(num)：数字转化为字符串，num指定有效数字位数。
toExponential(?num)：数字转换为指数计数法字符串，num指定aEb中，a的小数点后的位数。

boolean型变量转换为字符串使用String(bool)或者bool.toString()方法。
Date对象转换为字符串使用String(date)或者date.toString()方法。
Date对象方法如下：

方法	描述
getFullYear()	获取年
getMonth()	获取月，0表示1月，1表示2月，…
getDate()	获取月的第几天
getDay()	获取周的第几天，0表示周日，1表示周一，…
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒
getMilliseconds()	获取毫秒
getTime()	获取1970年1月1日至今的秒数

转换为number

字符串转换为数字，可以使用Number(str)方法，除非str中数字的前后包含空白字符，否则任何非法字符都会导致转换返回NaN。

parseFloat(str)函数：将字符串str转换为浮点型number。
parseInt(str)函数：将字符串str转换为整型number。
+：一元运算符将字符串str转换为number，比如+"23"返回23。

boolean型变量转换为数字，使用Number(bool)方法，true -> 1 、false -> 0。
Date对象转换为数字，使用Number(date)方法，与date.getTime()效果一样。

关键字

abstract	else	instanceof	super	boolean	enum
int	switch	break	export	interface	synchronized
byte	extends	let	this	case	false
long	throw	catch	final	native	throws
char	finally	new	transient	class	float
null	true	const	for	package	try
continue	function	private	typeof	debugger	goto
protected	var	default	if	public	void
delete	implements	return	volatile	do	import
short	while	double	in	static	with

语句

Javascript支持if语句，if…else语句，多重if…else语句，switch语句（支持default关键字，使用的是===恒等运算符），for循环，while循环、do…while循环。
支持break语句、continue语句，其中break语句可以跳出任何代码块（冒号前面的mars相当于给大括号中的代码加了标签）：

这里写图片描述