JS的进阶操作

已于 2023-11-21 19:43:57 修改
阅读量38 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2023-11-21 16:54:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80263861/article/details/134530409
版权

JS进阶

JS的关键字与保留字

在这里插入图片描述

运算符及其逻辑运算符

与C语言大致相仿
其有以下不同

  1. 运算符优先级：C语言和JavaScript的运算符优先级有些不同。例如，在C语言中，逻辑与运算符（&&）的优先级高于逻辑或运算符（||），而在JavaScript中则是相反的。这意味着在JavaScript中，表达式a || b && c会首先计算b && c，而在C语言中则会首先计算a && b。
  2. 逻辑运算符的行为：在C语言中，逻辑与运算符（&&）在左侧的表达式为假时不会计算右侧的表达式，而逻辑或运算符（||）在左侧的表达式为真时不会计算右侧的表达式。但在JavaScript中，这两种情况都会计算右侧的表达式。这种行为被称为"短路"行为，C语言和JavaScript在这方面的行为有所不同。
  3. 三元运算符：C语言有一个三元运算符（?:），而JavaScript没有。三元运算符在C语言中用于进行条件判断，语法为condition ? expression1 : expression2。如果在条件为真时执行expression1，否则执行expression2。
  4. 位运算符：C语言支持位运算符（如&、|、^、~、<<、>>），而JavaScript不支持。这些运算符用于对二进制位进行操作。

字符串

定义：

  1. var str = “字符串”；
  2. var str = new String( “字符串” )

字符串长度的测量.length

var str = “hhhhh”;
alert(str.length);

字符串大小写转换toLowerCase() toLowerUpperCase()

var city = "ShanGHai";
city = city.toLowerCase();
city = city.toLowerUpperCase0);
alert(city);  //city is "shanghai" now
alert(city);  //city is "SHANGHAI" now

数组

测量数组长度

myarray.length; //获得数组myarray的长度

var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr 
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54

同时，JavaScript数组的length属性是可变的，这一点需要特别注意。

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加，长度也会改变，如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;  //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

二维数组

二维数组的表示: myarray[行][列]

  1. 二维数组的定义方法一
    用for循环，这与C语言相仿
var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

将上面二维数组，用表格的方式表示:
在这里插入图片描述

  1. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
  1. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。

语句

多选句switch

语法:

switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

语法说明:

Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。
代码如下:
在这里插入图片描述
执行结果:

 评语: 及格，加油!

注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句，看以下代码:
在这里插入图片描述
执行结果:

评语: 继续努力!
评语: 及格，加油!
评语: 凑合，奋进
评语: 很棒，很棒
评语: 高手，大牛

在上面的代码中，没有break停止语句，如果成绩是4分，则case 5后面的语句将会得到执行，同样，case6、7-10后面的语句都会得到执行。

循环

for循环

for语句结构：

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
 }

假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循环条件；循环后条件值更新
{   document.write("取出第"+num+"个球<br />");
}
</script>

while循环

while语句结构：

while(判断条件)
{
    循环语句
 }

使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>

Do…while循环

do…while语句结构：

do
{
    循环语句
 }
while(判断条件)

我们试着输出5个数字。

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("数值为:" +  num+"<br />");
     num++; //更新条件
   }
   while (num<=5)
</script>

跳出整个循环break

如：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  {break;}
  循环代码
}

跳出单次循环

for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况)
{ continue; }
循环代码
}

函数

函数的作用，可以写一次代码，然后反复地重用这个代码。
如：

function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需写一次就可以

add2(3,2);
add2(7,8);
....  //只需调用函数就可以

定义函数

function  函数名( )
{
     函数体;
}

##函数调用

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" οnclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

定义含参的函数

function 函数名(参数1,参数2)
{
     函数代码
}

如

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}

返回值的函数

我们只要把"document.write(sum)"这行改成如下代码：

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

还可以通过变量存储调用函数的返回值，代码如下:

result = add2(3,4);//语句执行后,result变量中的值为7。

注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。

事件

网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。（按钮）
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表:
在这里插入图片描述

鼠标单击事件（onclick）

当在网页上单击鼠标时，就会发生该事件。
代码如下：

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" οnclick="add2()" />
   </form>
</body>
</html>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

当鼠标悬停时触发事件（onmouseover）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" οnmοuseοver="message()"/>
</form>
</body>
</html>

鼠标移开时触发（onmouseout）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
  function message(){
    alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
  <a href="http://www.imooc.com" οnmοuseοut="message()">点击我</a>
</form>
</body>
</html>

光标聚焦事件（onfocus）（了解）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如：将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

失焦事件（onblur）（了解）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。
在这里插入图片描述

内容选中事件（onselect）（了解）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

内容选中事件（onselect）（了解）

函数message()
当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：

  1. 加载页面时，触发onload事件，事件写在标签内。
  2. 此节的加载页面，可理解为打开一个新页面时。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onLoad ="message()">
  欢迎学习JavaScript。
</body>
</html>

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；

对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

  1. 定义对象
  var objectName =new Array();//使用new关键字定义对象
或者
  var objectName =[];
  1. 访问对象属性的语法:
objectName.propertyName

       如使用 Array 对象的 length 属性来获得数组的长度：

var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性

       以上代码执行后，myl的值将是：6

  1. 访问对象的方法：
objectName.methodName()

       如使用string 对象的 toUpperCase() 方法来将文本转换为大写：

var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法

       以上代码执行后，request的值是：HELLO WORLD!

Date 日期对象

定义一个时间对象 :

var Udate=new Date();   //使用关键字new，Date()的首字母必须大写。

使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

我们最好使用下面介绍的“方法”来严格定义时间。

访问方法语法：“<日期对象>.<方法>”

Date对象中处理时间和日期的常用方法：
在这里插入图片描述

返回/设置年份方法

get/setFullYear() 返回/设置年份，用四位数表示。

var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。

注意:不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。
结果:

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

  1. 结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
  2. 不同浏览器，时间格式有差异。

返回星期方法

getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:

<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//返回值存储在变量mynum中
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

结果:

n  //当前星期
今天是：星期n //当前星期

返回/设置时间方法

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:

<script type="text/javascript">
  var mydate=new Date();
  document.write("当前时间："+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推迟一小时时间：" + mydate);
</script>

结果:

当前时间：————————

推迟一小时时间：————————

注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒

  2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

String 字符串对象

访问字符串对象的属性length:

var mystr="Hello World!";
var myl=mystr.length;

以上代码执行后，myl 的值将是：12
访问字符串对象的方法：
使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：

var mystr="Hello world!";
var mynum=mystr.toUpperCase();

以上代码执行后，mynum 的值是：HELLO WORLD!

返回指定位置的字符

charAt() 方法可返回指定位置的字符。==返回的字符长度为 1 ==的字符串。

语法:

stringObject.charAt(index)

参数说明：
注意：

  1. 字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
  2. 如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
    如:在字符串 “I love JavaScript!” 中，返回位置2的字符：
<script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

注意：一个空格也算一个字符。（页面上不显示）
以上代码的运行结果：

l

返回指定的字符串首次出现的位置

indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置。
语法

stringObject.indexOf(指定字符串, 开始检索的位子（默认为0）)

参数说明：
说明：

  1. 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
  2. 可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
  3. 如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
    注意：
  4. indexOf() 方法区分大小写。
  5. 如果要检索的字符串值没有出现，则该方法返回 -1。
    例如: 对 “I love JavaScript!” 字符串内进行不同的检索：
<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>

以上代码的输出：

0
4
9

字符串分割split()

split() 将字符串分割为字符串数组，并返回此数组。
语法：

stringObject.split(separator,截止位数)

参数说明:

注意：如果把空字符串 (" ") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

我们将按照不同的方式来分割字符串：

使用指定符号分割字符串，代码如下:

var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

运行结果:

www,imooc,com
www,imooc

将字符串分割为字符，代码如下：

document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));

运行结果:

w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i

提取字符串substring()

substring() 用于提取字符串中介于两个指定下标之间的字符。
语法:

stringObject.substring(startPos,stopPos)

参数说明:
在这里插入图片描述
注意：

  1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
  2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
  3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
    使用 substring() 从字符串中提取字符串，代码如下：
<script type="text/javascript">
  var mystr="I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2,6));
</script>

运行结果:

JavaScript
love

提取指定数目的字符substr()

substr() 从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:

stringObject.substr(startPos,length)

参数说明:
在这里插入图片描述
注意：

  1. 如果参数startPos是负数，从字符串的尾部开始算起的位置。
    也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
  2. 如果startPos为负数且绝对值大于字符串长度，startPos为0。

使用 substr() 从字符串中提取一些字符，代码如下：

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

运行结果：

JavaScript!
love

Math对象

Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

运行结果:

3.141592653589793
15

注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。

Math 对象属性
在这里插入图片描述
Math 对象方法
在这里插入图片描述

向上取整ceil()

ceil() 可对一个数进行向上取整。
语法:

Math.ceil(x)

参数说明:
在这里插入图片描述
注意：它返回值是大于或等于x，并且与x最接近的整数。

我们将把 ceil() 方法运用到不同的数字上，代码如下：

<script type="text/javascript">
  document.write(Math.ceil(0.8) + "<br />")
  document.write(Math.ceil(6.3) + "<br />")
  document.write(Math.ceil(5) + "<br />")
  document.write(Math.ceil(3.5) + "<br />")
  document.write(Math.ceil(-5.1) + "<br />")
  document.write(Math.ceil(-5.9))
</script>

运行结果：

1
7
5
4
-5
-5

向下取整floor()

floor() 对一个数进行向下取整。
语法:

Math.floor(x)

参数说明：
在这里插入图片描述
注意：返回的是小于或等于x，并且与 x 最接近的整数。
我们将在不同的数字上使用 floor() 方法，代码如下:

<script type="text/javascript">
  document.write(Math.floor(0.8)+ "<br>")
  document.write(Math.floor(6.3)+ "<br>")
  document.write(Math.floor(5)+ "<br>")
  document.write(Math.floor(3.5)+ "<br>")
  document.write(Math.floor(-5.1)+ "<br>")
  document.write(Math.floor(-5.9))
</script>

运行结果：

0
6
5
3
-6
-6

四舍五入round()

round() 把一个数字四舍五入为最接近的整数。
语法:

Math.round(x)

参数说明：
在这里插入图片描述
注意：

  1. 返回与 x 最接近的整数。
  2. 对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
  3. 如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值 。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6)。
    把不同的数舍入为最接近的整数,代码如下：
<script type="text/javascript">
  document.write(Math.round(1.6)+ "<br>");
  document.write(Math.round(2.5)+ "<br>");
  document.write(Math.round(0.49)+ "<br>");
  document.write(Math.round(-6.4)+ "<br>");
  document.write(Math.round(-6.6));
</script>

运行结果：

2
3
0
-6
-7

随机数 random()

random() 可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：

Math.random();

注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。

  1. 我们取得介于 0 到 1 之间的一个随机数，代码如下：
<script type="text/javascript">
  document.write(Math.random());
</script>

运行结果：

0.190305486195328

注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
2. 获得0 ~ 10之间的随机数，代码如下:

<script type="text/javascript">
  document.write((Math.random())*10);
</script>

运行结果：

8.72153625893887

Array 数组对象

数组定义的方法：

  1. 定义了一个空数组:
var  数组名= new Array();
  1. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);

3.定义数组的时候，直接初始化数据：

var  数组名 = [元素1, 元素2, 元素3...];

我们定义myArray数组，并赋值，代码如下：

var myArray = [2, 8, 6];   //定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

数组元素使用：

数组名[下标] = 值;

注意: 数组的下标用方括号括起来，从0开始。

       数组属性：

length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

       数组使用方法：

在这里插入图片描述

数组连接concat()

concat() 用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法

arrayObject.concat(array1,array2,...,arrayN)

参数说明：
在这里插入图片描述
注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

运行结果：

1,2,3,4,5
1,2,3

我们创建了三个数组，然后使用 concat() 把它们连接起来，代码如下：

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

运行结果：

hello!,I,love,JavaScript,!

连接后，是用逗号给开对应字符串

指定分隔符连接数组元素join()

join()用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：

arrayObject.join(分隔符)

参数说明:
在这里插入图片描述
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

运行结果：

I,love,JavaScript

我们将使用分隔符来分隔数组中的元素，代码如下：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

运行结果：

I.love.JavaScript

颠倒数组元素顺序reverse()

reverse() 用于颠倒数组中元素的顺序。
语法：

arrayObject.reverse()

注意：该方法会改变原来的数组，而不会创建新的数组。

定义数组myarr并赋值，然后颠倒其元素的顺序：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

运行结果：

1,2,3
3,2,1

选定元素slice()

slice() 可从已有的数组中返回选定的元素。
语法

arrayObject.slice(start,end)

参数说明：
在这里插入图片描述

  1. 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
  2. 该方法并不会修改数组，而是返回一个子数组。

注意：

  1. 可使用负值从数组的尾部选取元素。
  2. 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
  3. String.slice() 与 Array.slice() 相似。

我们将创建一个新数组，然后从其中选取的元素，代码如下

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>

运行结果：

1,2,3,4,5,6
3,4
1,2,3,4,5,6

数组排序sort()

sort()使数组中的元素按照一定的顺序排列。
语法:

arrayObject.sort(方法函数)

参数说明：
在这里插入图片描述
1.如果不指定<方法函数>，则按unicode码顺序排列。

2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

1.使用sort()将数组进行排序，代码如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

运行结果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代码没有按照数值的大小对数字进行排序。

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100
Alfredorw
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js基础进阶
weixin_44920161的博客
08-07 275
基本数据类型(存储于栈内存): number ,string,boolean,null,undefined, number:包括整数,浮点数,科学计数,进制 string:包括"",’’,`` null:只有null undefined:只有undefined 引用数据类型(存储于堆内存)…考点:深浅复制: Array,function,object… var arr = [] var fn = ...
Vue.js进阶知识点总结
10-18
通过学习和熟练运用这些进阶知识点，开发者可以更好地驾驭Vue.js，提高开发效率，编写出更加健壮和易于维护的前端应用。同时，对Vue生态中的其他工具如Webpack、Vue Router和Vuex的深入了解也是成为Vue.js大师的重要...
JavaScript进阶
xmq119729的博客
07-09 478
防抖：类似于王者中的回城操作，中间有操作就会重新计时节流：类似于王者中的技能，技能发动一次，如何在冷却时间时候点击无效。
【前端开发】JavaScript进阶操作
张林克的博客
07-29 161
pass
javascript进阶
u012536120的博客
08-13 498
【背景】 工作是用VS，感觉太笨重，随便安装下就10G+，后来接触了JS，python这些只用几M的解释型语言，就很喜欢。 后来看过很多JS的教程，包括w3cschool的教程、JS权威指南、JS语言精粹...... 写得不好，感觉没有说到点子上（仅代表个人感受） 最近看了《JavaScript启示录》英文版的。跟我们平常看的语法书思考角度不同，有一些【进阶】意义，所以就想把里面的一些东西...
Js高级进阶
weixin_41325924的博客
03-02 3845
一、面向对象 (1) 通过class 关键字创建类 类名 我们还是习惯性定义首字母大写 (2) 类里面有个 constructor 函数 可以接受传递过来的参数 同时返回实例对象 (3) constructor 函数 只要 new 生实例时 就会自动调用这个函数 如果我们不写这个函数 类也会自动生成这个函数 (4) 生成实例 new 不能省略 (5) 最后注意语法规范 创建类 类名后面不要加小括号 生成实例 类名后面加小括号 构造函数不需要加 function 1.创建类和生成实例 <..
Js进阶22-new 操作符
晴雪月乔的博客
04-28 165
new 操作符
JS进阶
weixin_45683908的博客
11-02 177
JS进阶Web APIs阶段与JavaScript语法阶段的关联性JS的组成什么是API？什么是Web API？ Web APIs阶段与JavaScript语法阶段的关联性 JS的组成 什么是API？ 什么是Web API？
vue + JavaScript进阶
weixin_49739911的博客
03-02 959
vue + JavaScript进阶
Javascript进阶内容
triggerV的博客
04-08 905
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
JavaScript进阶：如何写出优雅的JavaScript代码
热门推荐
学Java，找哪吒
04-05 1万+
目录一、可维护性代码二、编码规范-可读性三、变量和函数命名四、松散耦合1、解耦HTML和JavaScript2、解耦CSS和JavaScript3、解耦应用程序逻辑和事件处理程序五、编码惯例六、作用域意识1、避免全局查找2、不适用with语句七、优化循环1、简化终止条件2、简化循环体3、使用后测试循环4、展开循环八、语句最少化1、多个变量声明2、插入迭代性值3、使用数组和对象字面量九、优化DOM交互1、实时更新最小化2、使用innerHTML3、使用委托事件4、注意HTMLCollection 一、可维护性
2.JavaScript进阶1
08-03
JavaScript是一种广泛用于网页和...总之，JavaScript进阶学习涵盖了对象的概念、DOM操作和事件处理等方面，这些都是构建交互式Web应用的基础。通过熟练掌握这些知识，开发者可以创建出更加动态和用户体验丰富的网页。
全面了解JavaScript对象进阶
10-21
在深入探讨JavaScript对象进阶之前，我们需要理解JavaScript对象的基础概念。JavaScript对象是一种键值对的数据结构，其中键是字符串（或Symbol，从ES6开始引入），值可以是任何JavaScript数据类型。对象是动态的，...
javascript 进阶教程
01-04
JavaScript是一种广泛应用于Web开发的...总的来说，JavaScript进阶教程涵盖了语言核心、ES6新特性、异步编程、DOM操作、库和框架的使用，以及性能优化等多个方面。掌握这些内容，你将在Web开发领域拥有更强的竞争力。
javascript进阶教程.doc
06-09
这个JavaScript进阶教程涵盖了以下主题： 1. **基础知识**：介绍JavaScript的基本语法，如何在HTML中引入脚本，以及简单的示例。 2. **JavaScript对象**：讲解JavaScript的面向对象特性，如何定义和使用对象。 3. *...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 408
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 838
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 997
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值