JavaScript day(1）

最新推荐文章于 2023-09-27 18:45:50 发布

初心魏

最新推荐文章于 2023-09-27 18:45:50 发布

阅读量216

点赞数

分类专栏：前端知识文章标签： javascript RegExp对象 Global对象 js数据类型

本文链接：https://blog.csdn.net/qq_42306803/article/details/87887483

版权

前端知识专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、JavaScript与Html结合方式
- 1.1 JavaScript代码写在Html文件内部
- 1.2 JavaScript代码写在Html文件的外部
二、ECMAScript规范（语法）

一、JavaScript与Html结合方式

1.1 JavaScript代码写在Html文件内部

定义<script>标签，标签里书写JavaScript代码。
注意：<script>标签定义的位置，会影响执行顺序

1.2 JavaScript代码写在Html文件的外部

定义<script>标签,通过src属性导入外部js文件

二、ECMAScript规范（语法）

2.1常量

2.1.1 Java中的基本数据类型（四类八种）

整型	byte 、short 、int、 long
浮点型	float、double
布尔型	boolean
字符型	char

2.1.2 JavaScript中的基本数据类型（五类）

number类型	数字类型，包含整数和小数和 NaN(非数)
string类型	字符串和字符类型
boolean类型	true 和 false
null类型	空类型。对象的占位符
undefined类型	未定义,如果一个变量没有初始化值，默认为undefined

2.2 变量

使用 var定义变量 var i = “abc”;
js是一门弱类型语言：定义变量时，不需要规定其数据类型。
typeof运算符：获取变量的数据类型

<script type="text/javascript">
		var a = 3;
		alert(typeof a);
</script>

输出结果: number

var关键字如果不书写，该变量则为全局变量

2.3 js中的自动类型转换

在js中，如果传递给运算符的值，和运算符想要接受的值的类型不匹配，则会自动类型转换
例如:下面需要的是数组类型，则在进行运算时将a变量转换为number类型。

<script type="text/javascript">
		var a = "3";
		document.write(a-1)
</script>
	
输出结果:2

2.4 js中基本数据类型之间的转换

2.4.1其他类型转为number

string：将字符串的字面值，转为number，如果字面值不是数字，则转为NaN
boolean： true转换为为1 false转换为0

2.4.2 其他类型转boolean

number：非0为true，0和NaN为false，
string: 除了空字符串("")，其他都是true
null 和 undefined:转为false
对象:所有对象都为true

2.5 js中的运算符

2.5.1 比较运算符

NaN参与的运算，结果都为fasle，除了(!=)
字符串比较小大：如果长度一致按照字典顺序比较 ,长度不一致,那谁的长度长那就谁大
===(全等于) ：全等于比较时，先比较数据类型，如果类型不一致，直接返回false
==（等于）：等于比较时看字面值

<script type="text/javascript">
		var a = "3";
		var b = 3;
		document.write(a == b);
		document.write("<hr>");
		document.write(a === b);
	</script>
	
结果:
true
-------------------------
false

2.5.2 逻辑运算符

&& 和||和!

2.5.3 算术运算符

加减乘除%（取余）
注意:NaN 参与数学运算结果都为NaN

2.5.4 赋值运算符

= += …

2.5.5 三元运算符

表达式 ? 值1 : 值2;

2.5.6 void运算符

拦截返回值，一般结合a标签一起使用
注销a标签跳转功能，保留可被点击的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="javascript:void(0) " onclick="exit();">一个链接</a>
	</body>
</html>

结果:

一个链接

如果不加的话:

三、Function(参数): 代表函数

3.1 函数的创建方式：

var fun = new Function(“方法体”,“参数列表”);
function 方法名称(形参列表){方法体}
var fun = function(){}

<script type="text/javascript">
		function fun(a, b, c) {
			document.write(a + " " + b + " " + c);
		}
		fun(1, 2, 3);
</script>

结果:
1 2 3

3.2 函数的属性：

length：形参的个数

3.3 函数的使用：

函数名称(实参列表);

3.4 函数的特点：

函数的调用，只与函数名称有关，与实参列表无关
函数内部有内置对象 arguments 封装实参数组

<script type="text/javascript">
		function fun() {
			document.write(arguments[0] + " " + arguments[1] + " " + arguments[2]);
		}
		fun("Java", "my", "love");
</script>

结果:
Java my love

四、 js中的对象：

4.1 js中对象的特点

js是一门基于对象的语言
基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系

4.2 JS中的内置对象

4.2.1 String 对象

4.2.1.1 定义方式

定义方式1： String str=new String(“abckdddd”);
定义方式2：var str=“我爱你爱你”;

4.2.1.2 属性

length属性可以求字符串的长度

4.2.1.3 常用方法：

charAt()
返回在指定位置的字符。
concat()
连接字符串。
indexOf()
根据字符检索此符在字符串中的索引。
lastIndexOf()
从后向前搜索字符串。
substring()
提取字符串中两个指定的索引号之间的字符。(含头不含尾)
toLowerCase()
把字符串转换为小写
toUpperCase()
把字符串转换为大写。
replace()
替换字符串。
参1：被替换的字符/或字符串参数2：替换成哪个字符/或字符串
split()
把字符串分割为字符串数组。
trim()
去除字符串两端的空格

4.2.2 Number对象

4.2.2.1 定义方式

var num=new Number(555.6666);
var num1=Number(5694);

4.2.2.2 方法：

toString()
把数字类型转成字符串类型
toPrecision()
把数字格式化为指定的长度。也就是小数后面保留几位

4.2.3 Date 对象

4.2.3.1 定义方式

var myDate=new Date();

4.2.3.2 方法：

getTime()
获取从1970-01-01 00:00：00 到当前的毫秒值
toLocaleString()
将时间转化成本地格式利于阅读

4.2.4 Math 对象

4.2.4.1 特点

该对象不需要创建直接对象名点上方法

4.2.4.2 方法

Math.random()
随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36)
对小数进行四舍五入得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25)
取最小值
Math.max(15,25)
取最大值
Math. abs(-2)
返回数的绝对值。
Math.floor(2.6)
向下取整
Math.ceil(3.82)
向下取整

4.3.5 数组对象：

4.3.5.1定义方式

var arr=new Array(2,6,8);
var arr1=[6,“a”,6];

var array = new Array(1,2,4,"sa","asd");
var array1 = [array, 1, 3, 4];
document.write(array1[0]);

结果:
1,2,4,sa,asd

4.3.5.2 属性

length 数组的长度

4.3.5.3 特点

在js中数组可以存储任意类型元素
在js中数组的长度可变

4.3.5.4 方法

concat()
连接两个或更多的数组，并返回结果。

var array = new Array(1,2,4,"sa","asd");
var array1 = ["sd", 1, 3, 4];
document.write(array.concat(array1));

结果:
1,2,4,sa,asd,sd,1,3,4

join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

var array = new Array(1,2,4,"sa","asd");
document.write(array.join("-"));

结果:
1-2-4-sa-asd

pop()
删除并返回数组的最后一个元素;

var array = new Array(1,2,4,"sa","asd");
document.write(array.pop());

结果:
asd

push()
向数组的末尾添加一个或更多元素，并返回新的数组长度。

var array = new Array(1,2,4,"sa","asd");
document.write(array.push("asd", 2));

结果:
7

reverse()
颠倒数组中元素的顺序。
sort() （默认字典顺序排序）

var array = new Array(1,12,4,"sa","asd");
document.write(array.sort());

结果:
1,12,4,asd,sa

shift()
删除并返回数组的第一个元素

var array = new Array(1,12,4);
document.write(array.shift());
结果:
`

splice(var n)
将指定索引处到末尾处的元素以新的数组的形式返回，原数组剩下索引处前的元素。

var array = new Array(1,12,4);
document.write(array.splice(1).join("-"));
document.write("<br>">;
document.write(array);
var judge = (array.splice(1) instanceof Array);
document.write("<br>");
document.write(judge);
结果:
12-4
1
true

添加新的元素
参数一：要删除元素的索引位置
参数二：要删除的元素的个数
参数三~参数n：要添加的元素

var array = new Array(1,12,4,2,3,2,3,5);
var s = array.splice(2,3,4,23,23,43);
document.write(s);
document.write("<br>");
document.write(array);    

结果:
4,2,3
1,12,4,23,23,43,2,3,5

toString()
把数组转换为字符串，并返回结果

var array = new Array(1,12,4,2,3,2,3,5);
document.write(array.toString());
结果:
1,12,4,2,3,2,3,5

4.3.5.5 排序

默认排序方式：字典顺序
要想实现自己的比较方式，需要传入比较器方法对象

function compare(a, b) {
		return a-b;
}
var array = new Array(1,12,4);
document.write(array.sort(compare));
}

结果:
1,4,12

4.3.6 Global全局方法对象

4.3.6.1 特点

该对象中的方法调用，不需要对象的引用，可直接使用

4.3.6.2 方法

isNaN()
检查某个值是否是NaN。
parseInt()
解析一个字符串并返回一个整数。
从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字

4.3.7 RegExp 正则表达式对象

4.3.7.1RegExp 常用语句

^	开头
$	结尾
*	0或者多个
+	1或者多个
？	0或者1个
{n}	就是n个
{n,}	至少n个
{n,m}	最少n个，最多m个
\d	任意数字
\D	任意非数字
\s	任意空白
\S	任意非空白
.	任意字符

4.3.7.2 正则表达式对象的创建

var reg = new (pattern, attributes)

var str = "32ksdjo2 678 h";
var reg = new RegExp("[0-9]{3}",'g');
document.write(reg.test(str));

结果:
true

var reg = / pattern / attributes

var str = "32ksdjo2 678 h";
var reg = /[0-9]{3}/g;
document.write(reg.test(str));

结果:
true

4.3.7.3 常用方法

match()
找到一个或者多个正则表达式的匹配

var str = "i love java, java love  javal me, too";
var conquence = str.match(new RegExp("java",'g'));
document.write(conquence);

结果:
java,java,java

replace()
替换与正则表达式匹配的子串

var str = "i love java, java love  javal me, too";
var conquence = str.replace(new RegExp("java",'g'),"c++");
document.write(conquence);

结果：
i love c++, c++ love c++l me, to

split()
按照正则表达式分割字符串

var str = "i love java, java love  javal me, too";
var conquence = str.split(new RegExp(" "));
document.write(conquence);

结果:
i,love,java,,java,love,,javal,me,,too

exec()
检索字符串中指定的值。返回找到的值，并确定其位置。
如:输出字符串中3个字母组成的单词

注意：要加\b来限制单词边界

var str = "hello world , the good day 345 i  343 eat";
var reg = /\b[a-z0-9]{3}\b/g;
var line = " ";
while((line = reg.exec(str))!= null) {
		document.write(line);
		document.write("<br>");
}

结果:
the
day
345
343
eat

初心魏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
JavaScript day(1）

文章目录一、JavaScript与Html结合方式1.1 JavaScript代码写在Html文件内部1.2 JavaScript代码写在Html文件的外部二、ECMAScript规范（语法）2.1常量2.1.1 Java中的基本数据类型（四类八种）2.1.2 JavaScript中的基本数据类型（五类）2.2 变量2.3 js中的自动类型转换2.4 js中基本数据类型之间的转换2.4.1其他类型...
复制链接

扫一扫

专栏目录