三篇文章快速全面了解主流脚本语言——JavaScript(2)---进阶


前言

对于JavaScript的不断发展,其已经成为主流脚本语言的JavaScript需要我们不断的进行学习
话不多说,开启我们的JavaScript第二篇,各位加油


一. JavaScript操作符

算术运算符有 :+ 、- 、 * 、 / 、 %、++、–

赋值运算符有: = 、+=、-=、 *=、/=、

比较运算符有: >、>=、<、<=、== 、 ===(全等)

逻辑运算符有:&&(与)、||(或)、! (非)

1. 算数运算符

  • 算数运算符用于对数字执行算数运算:
运算符描述
+加法
-减法
*乘法
/除法
%系数
++递加
- -递减

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<p id="demo3"></p>
		<p id="demo4"></p>
		<p id="demo5"></p>
		<p id="demo6"></p>
		<p id="demo7"></p>
		<p id="demo8"></p>
		<script>
		    var a = 1;
		    var b = 5;
		    var c = a + b;
		    var d = a - b;
		    var e = a * b;
		    var f = a / b;
		    var g = a % b;                  // 返回除法的余数
		    a++; var h = a;                 // 递增,对数值进行递增
		    a--; var i = a;                 // 递减,对数值进行递减 当前的a变量已经为2 减1为1
		    var j = b ** 2;                 // 幂运算符(**)将第一个操作数提升到第二个操作数的幂。
		    document.getElementById("demo1").innerHTML = c;
		    document.getElementById("demo2").innerHTML = d;
		    document.getElementById("demo3").innerHTML = e;
		    document.getElementById("demo4").innerHTML = f;
		    document.getElementById("demo5").innerHTML = g;
		    document.getElementById("demo6").innerHTML = h;
		    document.getElementById("demo7").innerHTML = i;
		    document.getElementById("demo8").innerHTML = j;
		</script>
	</body>
</html>

补充解释

  • % :返回除法的余数
  • ++ :递增,对数值进行递增
  • –:递减,对数值进行递减
  • ** :幂运算符,将第一个操作数提升到第二个操作数的幂

2. 赋值运算符

  • 赋值运算符向 JavaScript 变量赋值:
运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var a = 1;                          //  赋值,= 赋值运算符向变量赋值。
		    a += 10;                            // += 赋值运算符从变量中减去一个值。
		    a -= 10;                            // -= 赋值运算符从变量中减去一个值。
		    a *= 8;                             // a乘以8后赋值给a
		    a /= 8;                             // a乘以8后赋值给a
		    a %= 8;                             // %= 赋值运算符把余数赋值给变量。
		    document.getElementById("demo1").innerHTML = a;
		</script>
	</body>
</html>

3. 比较运算符

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

代码

代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<p id="demo2"></p>
		<p id="demo3"></p>
		<p id="demo4"></p>
		<p id="demo5"></p>
		<p id="demo6"></p>
		<p id="demo7"></p>
		<p id="demo8"></p>
		<script>
		    var a = 10;
		    document.getElementById("demo1").innerHTML = (a == 10);         // 等于
		    document.getElementById("demo2").innerHTML = (a === 10);        // 值相等并且类型相等
		    document.getElementById("demo3").innerHTML = (a != 8);          // 不相等
		    document.getElementById("demo4").innerHTML = (a !== 8);         // 值不相等或类型不相等
		    document.getElementById("demo5").innerHTML = (a > 8);           // 大于
		    document.getElementById("demo6").innerHTML = (a < 8);           // 小于
		    document.getElementById("demo7").innerHTML = (a >= 8);          //	大于或等于
		    document.getElementById("demo8").innerHTML = (a <= 8);          //	小于或等于
		</script>
	</body>
</html>
</script>
</body>

4. 逻辑运算符

  • 逻辑运算符用于判定变量或值之间的逻辑
运算符描述
&&逻辑与
||逻辑或
!逻辑非

&&(与)代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<p id="demo2"></p>
 		<p id="demo3"></p>
 		<script>
 		    var x = 6;
 		    var y = 3;
 		    document.getElementById("demo1").innerHTML =x < 10 && y > 1
 		    document.getElementById("demo2").innerHTML =x < 10 && y < 1
 		    document.getElementById("demo3").innerHTML =(x < 10 && y > 1) +"<br>" +  (x < 10 && y < 1);
 		</script>
 	</body>
 </html>

||(或)代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<p id="demo2"></p>
 		<p id="demo3"></p>
 		<script>
 		    var x = 6;
 		    var y = 3;
 		    document.getElementById("demo1").innerHTML = x == 5 || y == 5
 		    document.getElementById("demo2").innerHTML = x == 6 || y == 0
 		    document.getElementById("demo3").innerHTML =
 		        (x == 5 || y == 5) + "<br>" + 
 		        (x == 6 || y == 0) + "<br>" +
 		        (x == 0 || y == 3) + "<br>" +
 		        (x == 6 || y == 3);
 		</script>
 	</body>
 </html>

!(非)代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<p id="demo2"></p>
 		<p id="demo3"></p>
 		<script>
 		    var x = 6;
 		    var y = 3;
 		    document.getElementById("demo1").innerHTML = !(x === y)
 		    document.getElementById("demo2").innerHTML = !(x > y)
 		    document.getElementById("demo3").innerHTML =
 		        !(x === y) + "<br>" + !(x > y);
 		</script>
 	</body>
 </html>

5. 补充:JS字符串运算符

5.1 + 运算符

  • +运算符也可用于对字符串进行相加(concatenate,级联)。

代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<script>
 		    var t1 = "阿德";
 		    var t2 = "很帅";
 		    var t3 = t1 + " " + t2;
 		    document.getElementById("demo1").innerHTML = t3;
 		</script>
 	</body>
 </html>

5.2 += 赋值运算符

  • += 赋值运算符也可用于相加(级联)字符串

代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<script>
 		    var t1 = "阿德";
 		    var t1 += "很帅";
 		    document.getElementById("demo1").innerHTML = t1;
 		</script>
 	</body>
 </html>

5.3 字符串和数字的相加

  • 相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串
  • 提示:如果您对数字和字符串相加,结果类型将是字符串

代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
 	<body>
 		<p id="demo1"></p>
 		<p id="demo2"></p>
 		<p id="demo3"></p>
 		<script>
 		    x = 7 + 8;
 		    y = "7" + 8;
 		    z = "Hello" + 7;
 		    document.getElementById("demo1").innerHTML = x;
 		    document.getElementById("demo2").innerHTML = y;
 		    document.getElementById("demo3").innerHTML = z;
 		</script>
 	</body>
 </html>

补充解释:
x结果为15
y结果为78(类型为字符串)
z结果为Hello7

二. JavaScript流程控制

  • 简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行。

  • 流程控制主要有三种结构:分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

  • 顺序结构:顺序执行

  • 分支结构:条件判断执行。根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果

  • 循环结构:循环判断执行。

1. 顺序流程控制:

  • 按照代码的先后顺序,依次执行, 这个是最好理解的,我在这里就不多赘述了

2. 分支流程控制

  • 按照代码的先后顺序,依次执行的过程中,根据不同的条件,执行判断条件的代码,从而得到不同的结果
  • Javascript中提供了两种分支结构语句:
    1.if语句
    2.switch语句

2.1 if语句

  • 语法:
if (条件表达式) {
            // 执行语句1
        } else {
            // 执行语句2
        }

if 案例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var age = prompt('请输入您的年龄:');
		        if (age >= 18) {
		            alert('可以进入网吧');
		        } else {
		            alert('孩子,成年人的世界你不懂');
		        }
		    document.getElementById("demo1").innerHTML = age;
		</script>
	</body>
</html>

补充解释
prompt() 方法用于显示可提示用户进行输入的对话框。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

if 判断闰年案例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var year = prompt('请您输入年份:');
		        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
		            alert('您输入的年份是闰年');
		        } else {
		            alert('您输入的年份是平年');
		        }
		    document.getElementById("demo1").innerHTML = year;
		</script>
	</body>
</html>

补充解释
算法:能被4整除且不能整除100的为闰年,或者能够被400整除的就是闰年

2.2 switch语句

  • switch 语句用于基于不同条件执行不同动作。
  • 语法
switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
  } 

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo"></p>
		<script>
		    var x = 0;
		    switch (x) {
		        case 0:
		          text = "我是零";
		          break;
		        case 1:
		          text = "我是壹";
		          break;
		        default:
		          text = "未找到";
		    }
		    document.getElementById("demo").innerHTML = text;
		</script>
	</body>
</html>

补充解释
计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配,则执行关联代码

  • break 关键词:
    如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。
  • 不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。
  • default 关键词规定不存在 case 匹配时所运行的代码
  • switch规则细节
    • 如果多种 case 匹配一个 case 值,则选择第一个 case。
    • 如果未找到匹配的 case,程序将继续使用默认 label。
    • 如果未找到默认 label,程序将继续 switch 后的语句。

三. JavaScript循环

  • 假如您需要运行代码多次,且每次使用不同的值,那么循环相当方便使用。

1. 不同类型的循环

类型解释
for多次遍历代码块
for/in遍历对象属性
while当指定条件为 true 时循环一段代码块
do/while当指定条件为 true 时循环一段代码块

2. for 循环

  • 语法
    for (语句 1; 语句 2; 语句 3) {
    要执行的代码块
    }
    运行顺序原理:
    语句 1 在循环(代码块)开始之前执行。
    语句 2 定义运行循环(代码块)的条件。
    语句 3 会在循环(代码块)每次被执行后执行。

  • 语法中的语句一
    案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var text = "";
		    for (i = 0; i < 5; i++) {
		        text += "数字:" + i + "<br>";
		        }
		    document.getElementById("demo1").innerHTML = text;
		</script>
	</body>
</html>

城市名循环案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
			var a = ["北京", "上海", "广州", "深圳"];
			var i , len , b;
			for (i = 0,len = a.length,b = ""; i < len; i++) {
				b += a[i] + "<br>";
				}
			document.getElementById("demo1").innerHTML = b;
		</script>
	</body>
</html>

补充解释
语法中的语句1可以初始化多个值,用逗号隔开即可

案例:
代码

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
 	</head>
		<body>
			<p id="demo1"></p>
			<script>
				var a = ["北京", "上海", "广州", "深圳"];
				var i = 2;
				var len = a.length;
				var text = "";
				for (; i < len; i++) {
					text += a[i] + "<br>";
					}
				document.getElementById("demo1").innerHTML = text;
			</script>
		</body>
 </html>

补充解释
语法中的语句1可以省略

  • 语法中的语句二
    通常语句 2 用于计算初始变量的条件。
    如果语句 2 返回 true,那么循环会重新开始,如果返回 false,则循环将结束。
    如果省略语句 2,那么必须在循环中提供一个 break。否则循环永远不会结束。

  • 语法中的语句3:
    通常语句 3 会递增初始变量的值。
    语句 3 可做任何事情,比如负递增(i–),正递增(i = i + 15),或者任何其他事情。
    语句 3 也可被省略(比如当您在循环内递增值时:
    只需要去语句3,在循环体里面添加i++即可:

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var a = ["北京", "上海", "广州", "深圳"];
		    var i = 0;
		    var len = a.length;
		    var text = "";
		    for (; i < len;) {
		        text += a[i] + "<br>";
		        i++;
		        }
		    document.getElementById("demo1").innerHTML = text;
		</script>
	</body>
</html>

3. for/in 循环

  • for/in 语句遍历对象的属性

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
		<script>
		    var txt = "";
		    var user_data = {name:"xxx", age:18, sex:"男"};
		    var x;
		    for (x in user_data) {
		      txt += user_data[x] + " " + "<br>";
		    }
		    document.getElementById("demo1").innerHTML = txt;
		</script>
	</body>
</html>

4. while循环

  • 只要条件为 true,循环能够一直执行代码块
  • 语法:
    while (条件) {
    要执行的代码块
    }

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
		<body>
			<p id="demo1"></p>
			<script>
			var text = "";
			var i = 0;
			while (i < 10) {
			  text += "<br>数字是 " + i;
			  i++;
			}
			document.getElementById("demo1").innerHTML = text;
			</script>
		</body>
</html>

注意
如果忘了对条件中使用的变量进行递增,那么循环永不会结束。这会导致浏览器崩溃。

5. do/while循环

  • do/while 循环是 while 循环的变体。在检查条件是否为真之前,这种循环会执行一次代码块,然后只要条件为真就会重复循环。
  • 语法
    do {
    要执行的代码块
    }
    while (条件);

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
		<body>
			<p id="demo1"></p>
			<script>
			var text = "";
			var i = 0;
			do {
			  text += "<br>数字是 " + i;
			  i++;
			}
			while (i < 10);
			document.getElementById("demo1").innerHTML = text;
			</script>
		</body>
</html>

注意
不要忘记对条件中所用变量进行递增,否则循环永不会结束,会导致浏览器崩溃

四. JavaScript字符串方法

1. length长度

  • length 属性返回字符串的长度:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
		<body>
			<p id="demo1"></p>
			<script>
			var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
			document.getElementById("demo1").innerHTML = txt.length;
			</script>
		</body>
</html>

2. charAt()下标

  • charAt() 方法返回字符串中指定下标(位置)的字符串:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
		<body>
			<p id="demo1"></p>
			<script>
			var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
			document.getElementById("demo1").innerHTML = txt.charAt(0);
			</script>
		</body>
</html>

3. repalce()替换

  • replace() 方法用另一个值替换在字符串中指定的值:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
		<button onclick="onclick_test()">点击</button>
	</body>
	<script>
	    function onclick_test() {
	        var str = document.getElementById("demo1").innerHTML;
	        var txt = str.replace("ABCD","1234");
	        document.getElementById("demo1").innerHTML = txt;
	    }
	</script>
</html>

4. split()分割

  • split()方法可以将字符串转换为数组,然后查找下标位置:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1">a,b,c,d</p>
		<button onclick="onclick_test()">点击</button>
	</body>
	<script>
	    function onclick_test() {
	        var str = 'a,b,c,d'
	        var txt = str.split(",");
	        document.getElementById("demo1").innerHTML = txt[0];
	    }
	</script>
</html>

将英文单词拆分成字母:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo1"></p>
	</body>
	<script>
		var str = "helloworld";
		var arr = str.split("");
		alert(arr);
		var text = "";
		var i;
		for (i = 0; i < arr.length; i++) {
		  text += arr[i] + "<br>"
		}
		document.getElementById("demo1").innerHTML = text;
	</script>
</html>

5. toUpperCase()大写

  • 通过 toUpperCase() 把字符串转换为大写:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<button onclick="onclick_test()">试一试</button>
		<p id="demo">Hello World!</p>
	</body>
	<script>
	    function onclick_test() {
	      var text = document.getElementById("demo").innerHTML;
	      document.getElementById("demo").innerHTML = text.toUpperCase();
	        }
	</script>
</html>

6. toLowerCase()小写

  • 通过 toLowerCase() 把字符串转换为小写:(同五,改个参数即可)

7. indexOf()索引

  • indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo">I am Chinese</p>
	</body>
	<script>
	      var str = "I am Chinese";
		  // 空格算一位索引
	      var pos = str.indexOf("e");
	      document.getElementById("demo").innerHTML = pos;
	</script>
</html>

注意
空格算一位索引
索引选择为文本中首次出现的字符串

8. Substring()截取

  • substring() 类似于 slice()切割。
    设置两个参数:起始索引(开始位置),终止索引(结束位置)。
    不同之处在于 substring() 无法接受负的索引。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
	    <p id="demo">I am Chinese</p>
	    <script>
	          var str = "I am Chinese";
	          var res = str.substring(5, 12);
	          document.getElementById("demo").innerHTML = res;
	    </script>
	</body>
</html>

注意
如果省略str.substring(5,12);第二个参数,则该 substring() 将裁剪字符串的剩余部分。

9. slice()切割

  • slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
    设置两个参数:起始索引(开始位置),终止索引(结束位置)。
    可接受负索引
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id="demo">I am Chinese</p>
		<script>
			  var str = "I am Chinese";
			  var res = str.slice(5,12);
			  document.getElementById("demo").innerHTML = res;
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
	    <p id="demo">I am Chinese</p>
	    <script>
	          var str = "I am Chinese";
	          var res = str.slice(-7);
	          document.getElementById("demo").innerHTML = res;
	    </script>
	</body>
</html>

注意:

  • 如果某个参数为负,则从字符串的结尾开始计数。
    如果省略第二个参数,则该方法将裁剪字符串的剩余部分:

五. JavaScript数组方法

常用方法

1.长度:length()
2.下标:[ ]
3.索引:indexOf()
4.追加:push(),加在数组最后面
5.添加:unshift(),加在数组最前面
6.后删:pop(),删除数组里面最后一个
7.前删:shift(),删除数组里面最前面一个
8.切片:slice()
9.替换:splice()
10.拼接:join()
11.排序:sort():是按照字符编码的顺序进行排序
12.反向:reverse()
13.连接:concat()

代码

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<p id='demo'></p>
	</body>
	<script type="text/javascript">
		var array = ['北京', '上海', '广州', '深圳']
		// 通过索引拿数组元素
		alert(array[2]);
		// 在数组最后添加元素 返回值为当前数组长度
		alert(array.push('长沙'));
		// 查看当前数组所有元素
		alert(array);
		// 在数组前添加元素 返回值为当前数组长度
		alert(array.unshift('城市'));
		// 显示当前数组元素
		alert(array);
		// 删除数组最后一个 返回当前删除的元素值
		alert(array.pop())
		// 显示当前数组元素
		alert(array);
		// 删除数组第一个元素 返回当前删除的元素值
		alert(array.shift());
		// 显示当前数据元素
		alert(array);
		
		// 切片 不包含第二个值本身
		document.write(array.slice(1, 3) + '<br>')
		
		//替换
		var fruits = ["Banana", "Orange", "Apple", "Mango"];
		// 在位置 2,添加 2 个元素,删除 1 个元素:
		fruits.splice(2, 1, "Lemon", "Kiwi");
		document.getElementById('demo').innerHTML = fruits;
		
		// 拼接
		alert(fruits.join('-'));
		
		// 新建数组
		var arr1 = ['a', 'b', 'd', 'c']
		var arr2 = ['4', '2', '9', '6']
		
		// 排序
		alert(arr1.sort());
		alert(arr1.reverse());
		
		// 链接
		alert(array.concat(arr1, arr2));
		
		// 几位数的排序
		var a = [100, 90, 200, 300, 50]
		var b = a.sort(function (a, b){
			return a - b;
		})
		// function(a, b){ return a-b }
		// sort() 方法比较两个值时,将值发送给比较函数,根据返回的(负、零、正)值对值进行排序。
		
		// 举例:
		// 比较 40 和 100 时,sort() 方法调用比较函数(40,100)。
		
		// 该函数计算 40-100,并返回 -60(负值)。
		
		// sort 函数会将 40 排序为小于 100 的值。
	</script>
</html>

补充方法

<script>
    var num = 3.1415926;// 新建变量赋值备用
    console.log(num.toString());// 把数字转换为字符串
    console.log(num.toFixed(5));// 把数字转换为字符串,四舍五入指定小数位数的数字
    var str = '123.456 px';//新建变量赋值备用
    var str1 = '1000';//新建变量赋值备用
    console.log(parseInt(str));//解析一个字符串,返回一个整数
    console.log(parseFloat(str));//解析一个字符串,返回一个浮点数
    console.log(Number(str));//把对象的值转换为数字
    console.log(Number(str1));//把对象的值转换为数字
    console.log(isNaN(Number(str)));//isNaN() 函数用于检查其参数是否是非数字值。
    console.log(isNaN(Number(str1)));//isNaN() 函数用于检查其参数是否是非数字值。
    var arr = [1,2,3];//新建数组备用
    console.log(typeof arr);// typeof 操作符来检测变量的数据类型。
    console.log(Array.isArray(arr));//isArray()判断数组
    console.log(Array.isArray(str));//isArray()判断数组
    console.log(Array.isArray([1,2]));//isArray()判断数组
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值