二、JS 进阶

作者: 焰火青春 | 来源:发表于2020-05-20 11:12 被阅读0次

二、JS 进阶
js进阶二
js进阶（二）
二、JS 进阶
Vue基础语法之v-model
JS------数组 reduce() 方法详解及高级技巧
JS基础到高级
webpack进阶【11】: babel-loader 配置高
最新web前端相关课程学习链接
rollup用法

JS 进阶

HTML 标记（结构）、CSS 样式（表示），HTML + CSS 只能编写出静态页面；JS 可以为网页添加动态效果（如：下拉菜单、图片轮播、信息滚动等）实现页面与用户之间的实时、动态交互（如：用户注册、登录验证等）

1、JS 基础语法

1.1、变量命名规则

变量是可变的量，是可存储数据的存储器，可以看作为一个盒子。

必须以字母、下划线或美元符（$）开头，后面可以跟字母、下划线、美元符和数字。中间也不能使用除下划线或美元符以外的符合（如：sum+num），不能包含空格。
变量名区分大小写
不允许使用 javascript 关键字和保留字做变量名

关键字：

break	else	new	var
case	finally	return	void
catch	for	switch	while
default	if	throw	delect
in	try	do	instanceof
typeof

保留字：

abstract	enum	int	short
boolean	export	interface	static
byte	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public	extends
long	super	char

1.2、变量声明

使用变量，首先需要声明变量。

var 就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。

语法：

var 变量名;
var num1,num2;          // 声明多个变量

1.3、变量赋值

把变量看作一个盒子，变量赋值即是给盒子里放东西，使用（=）可以给变量赋值。

语法：

var mynum = 5;            // 方法 一
var mynum;                // 方法 二
mynum = 5;

变量也可以存储字符串、布尔值等

var mynum = '123';
var mynum = true;

1.4、表达式

JS 中的表达式与数学中表达式相似，指具有一定的值，用操作符把常数和变量连接起来的代数式

串表达式：可以将变量与数值、字符串等连接起来（如：'I' + 'love' + 'you' + mychar）
数值表达式：值为数值（如：num + 5、2+3）
布尔表达式：值为布尔值（如：2>3、num == 5）

1.5、+ 号操作符

javascript 中有很多操作符，如算术操作符（+、-、*、/等）、比较操作符（<、>、=等）、逻辑操作符（&&、||、！）

“+” 号操作符，不只可以作为算术操作符，还可以连接字符串，如：

myname = 'first_name' + 'last_name';

自加（++）、自减（--）

算术操作符中还有两个比较常用的操作符自加一（++）、自减一（--）

mynum = 10;
mynum++;        // 等同于 mynum = mynum + 1;
mynum--;        // 等同于 mynum = mynum - 1;

1.6、比较操作符

比较操作符的值为布尔值（true、false）

操作符	描述	操作符	描述
<	小于	>	大于
<=	小于或等于	>=	大于或等于
==	等于	!=	不等于

1.7、逻辑操作符

逻辑操作符包括逻辑与（&&）、逻辑或（||）和逻辑非（!）

逻辑与（&&）：只有当两者都为真，其值才为真
逻辑或（||）：两者任意一个为真，其值为真，两者都为假，其值为假
逻辑非（!）：即非真即假，非假即真，与原有值刚好相反

实例：

var a,b,c;
a = 5;
b = 3;
c = 2;
d = a>b && b>c;          // 逻辑与，只有当a>b 且 b>c，d 才为真
d = a>b || b>c;          // 逻辑或，当a>b 和 b>c 中任意一个为真，d 就为真
d = !(b>a);              // 逻辑非，因为 b > a，为假，逻辑非为真，所有 d 为真

1.8、操作符优先级

在 javascript 中各操作符一起出现时有一定的优先级，一般地：

算术操作符 > 比较操作符 > 逻辑操作符 > 赋值（=）
同级运算符从左到右次序进行，多括号从里之外

实例：

var num1 = 4;
var num2 = 5;
js = num1 + 20 > 12 && num2 * 6 < 5;          // 结果为 false

2、数组

2.1、创建数组

一个变量只能存储一个内容，而数组可以存储多个数据内容。数组是一个值的集合，每个值都有一个索引号（从 0 开始）。

image

数组创建语法：

创建一个名为 new Array 的新的空数组，并将其存储在变量 myarray 中

var myarray = new Array();    // new Array 为数组名
var myarray = new Array(8);   // 也可以指定数组长度

新创建的数组为空，输出时显示为 undefined
即使创建时指定了数组长度，但仍然可以将元素存储到规定长度外

2.2、数组赋值

数组赋值可以在创建时同时赋值，也可以创建好后再赋值，数组可以存储任何数据类型（数字、字符串、布尔值等）。

方法一：创建后通过索引号赋值

var myarr = new Array();
myarr[0] = 80;
myarr[1] = 90;

方法二：创建时同时赋值

var myarray = new Array(66,80,90);

方法三：直接输入一个数组

var myarray = [66,80,90];

2.3、操作数组

向数组新增元素

使用索引号可以向数组新增元素

语法：

marray[x]=y;     // x 为元素索引号，y 为新增元素值

使用数组元素

数组中每个元素都有一个索引号，从 0 开始。要得到哪个元素值，只需引用数组变量并提供一个索引

语法：

myarr[0];        // 得到第一个元素值

2.4、数组长度属性

要想得到一个数组的长度，可以引用它的 length 属性，即数组中元素个数

语法：

var myarray = new Array(80,90,100);
myarray.length;         // 长度为 3
myarray.length=10;      // 数组长度也可以改变
document.write(myarray.length);   // 长度变为 10

myarray[10]=70;        //  新增元素长度也会改变
document.write(myarray.length);

2.5、二维数组

如果说一维数组是个盒子的话，那么二维数组是一组盒子，每个盒子还可以存放多个盒子

二维数组的两个唯独的索引值从 0 开始，最后一个索引值为长度 - 1

定义方法一

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
    }
}

定义方法二

var myarray = [[0,1,2],[1,2,3]]    // 定义一个一维长度为2，二维长度为3的二维数组
consolo.load(myarray[0][0]);      // 第一行第一列所在元素为 0

二维数组就是一个表格，上面定义的数组，用表格形式表示：

i / j	0	1	2
0	0	1	2
1	1	2	3

赋值

myarray[0][1]=5;       // 将 5 赋值到数组中的第一行第二列

变量二维数组中每个元素--循环嵌套

for(var i=0;i<myarray.length;i++){     // myarray.length = 3  即一维长度
    for(var j=0;j<myarray[i].length;j++){      // myarray[i].length = 6 即二维长度，不管 i 为多少
        document.write(myarray[i][j] + '<br />');
    }
    document.write('<br/>');
}

3、流程控制语句

3.1、条件判断语句

3.1.1、if 语句

if 语句基于条件成立才执行相关代码的语句

语法：

if(条件){
    代码;
}

实例：

<script type='text/javascript'>
    var mycarr = 'lina';
if(mycarr == 'lila'){
    document.write('Hello ' + mycarr);
}
</script>

3.1.2、if...else 语句

if...else 语句，条件成立时执行 if 后语句，不成立时执行 else 后语句

语法：

if(条件){
    代码1;
}
else{
    代码2;
}

3.1.3、if...else 嵌套语句（多重判断）

多重判断，可使用 if...else 嵌套语句

语法：

if(条件1)
{ 条件1成立时执行的代码}
else  if(条件2)
{ 条件2成立时执行的代码}
...
else  if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}

实例：

<script type="text/JavaScript">
var myage =99;
if(myage<=44)
  {document.write("青年");}
else if(myage<=59) 
  {document.write("中年人");}
else if(myage<=89)
  {document.write("老年人");}
else        
  {document.write("长寿老年人");}
</script>

3.1.4、switch 语句（多重选择）

多重选择可以使用 swicth 语句

语法：

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

实例：

<script type="text/JavaScript">
var myweek =3;//myweek表示星期几变量
switch(myweek)
{
 case 1:
 case 2:
     document.write("学习理念知识");
     break;
 case 3:
 case 4:
     document.write("到企业实践");
     break;
 case 5:
     document.write("总结经验");
 case 6:
 case 7:
     document.write("周六、日休息和娱乐");
}

3.2、循环语句

3.2.1、for 循环（重复）

循环语句可以减少代码量，增加维护性

语法：

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

实例：

// 计算 1+2+3+...+10值
<script type="text/JavaScript">
var mymoney,sum=0;        //mymoney变量存放不同面值，sum总计
for(mymoney=1;mymoney<=10;mymoney++)
{ 
  sum= sum + mymoney;
}
  document.write("sum合计:"+sum);
</script>

3.2.2、while 循环（反复）

while 循环与 for 循环类似，while 循环重复执行某段代码，直至不符合条件为止

while (条件){
    循环语句
}

实例：

// 计算 1+2+3+4+5 的值
<script type="text/javascript">
  var mynum =1,sum = 0;              //mynum初值化数值为  1
  while (mynum<=5)
  {
    document.write("数字:"+ mynum + '<br />');
    sum = sum + mynum;
    mynum = mynum + 1;
    
   }
   document.write("结果为：" + sum);
</script>

3.2.3、do...while 循环（来回）

do...while 循环与 while 循环类似，区别在于 do...while 至少保证循环被执行过一次，先循环再判断

语法：

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

实例：

<script type='text/javascript'>
    var num = 6;         // 初始化变量值
    do
    {
        document.write('数字：' + num);
        num = num -1;
    }
    while(num > 0)
</script>

3.3、退出循环

3.3.1、break 语句（退出当前循环）

在 while、for、do...while 、循环中使用 break 语句可退出当前循环，直接执行后面的代码

语法：

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

实例：

<script type="text/JavaScript">
var mynum =new Array(70,80,66,90,50,100,89);          //定义数组mynum并赋值
var i=0;
while(i<mynum.length)           // i < 7
{
  if(mynum[i]<60)              // munum[4] = 50 < 60，退出循环
   {
    document.write("成绩"+mynum[i]+"不及格，不用循环了"+"<br>");
    break;
   }
  document.write("成绩:"+mynum[i]+"及格，继续循环"+"<br>");
  i=i+1;
  
}
</script>

----------
成绩:70及格，输出!
成绩:80及格，输出!
成绩:66及格，输出!
成绩:90及格，输出!
成绩不及格，不输出！

3.3.2、continue 语句（跳过本次循环）

continue 语句仅跳过本次循环，整个循环体继续执行

语法：

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

实例：

<script type="text/JavaScript">
 var mynum =new Array(70,80,66,90,50,100,89);           //定义数组mynum并赋值
 var i;
 for(i=0;i<mynum.length;i++)
 {
    if(mynum[i]<60)          // mynum[4]=50 < 60，执行if 下代码，跳过本次循环
    {
    document.write("成绩不及格，不输出！"+"<br>");
    continue;
    }
    document.write("成绩:"+mynum[i]+"及格，输出!"+"<br>");
}
</script>

----------
成绩:70及格，输出!
成绩:80及格，输出!
成绩:66及格，输出!
成绩:90及格，输出!
成绩不及格，不输出！
成绩:100及格，输出!
成绩:89及格，输出!

3.4、练习

在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。

学生信息如下：

('小A','女',21,'大一'), ('小B','男',23,'大三'),

('小C','男',24,'大四'), ('小D','女',21,'大一'),

('小E','女',22,'大四'), ('小F','男',21,'大一'),

('小G','女',22,'大二'), ('小H','女',20,'大三'),

('小I','女',20,'大一'), ('小J','男',20,'大三')

<!DOCTYPE  HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>流程控制语句</title>
        <script type='text/javascript'>
            var infos =             // 创建一个二维数组，存储学生个人信息
             [
                ['小A','女',21,'大一'],
                ['小B','男',23,'大三'],
                ['小C','男',24,'大四'],
                ['小D','女',21,'大一'],
                ['小E','女',22,'大四'],
                ['小F','男',21,'大一'],
                ['小G','女',22,'大二'],
                ['小H','女',20,'大三'],
                ['小I','女',20,'大一'],
                ['小J','男',20,'大三']
              ];
            var arr = [];                 // 定义一个空数组 arr
            var n = 0;                    // 定义变量 n，初始值为 0
            for(i=0;i<infos.length;i++){
                if(infos[i][3] == '大一'){
                    arr[n] = infos[i];        // 给数组 arr 赋值（即写入数据到 arr 中）,arr[0] = infos[0]，arr[1] = infos[1]...  ，infos[0] = ['小A','女',21,'大一']
                    document.write('第一次筛选：' + arr[n] + '<br/>');
                    n = n +1;
                }
            }
            document.write('数组 arr：' + arr + '<br/>');
            document.write('大一总人数：' + arr.length + '<br/>');
                for(i=0;i<arr.length;i++){
                    if(arr[i][1] == '女'){
                        document.write('第二次筛选：' + arr[i][0] + '<br/>');
                    }
                }

        </script>
    </head>
</html>

-------------------- <!--输出数组没有带 [] -->
小A,女,21,大一

小D,女,21,大一

小F,男,21,大一

小I,女,20,大一

数组 arr1 为：小A,女,21,大一,小D,女,21,大一,小F,男,21,大一,小I,女,20,大一

大一人数: 4

小A
小D
小I

4、函数

函数可以把实现特定功能的代码封装在仪器，使用时直接调用即可，减少重复输入大量代码

4.1、定义函数

语法：

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

实例：

<script type='text/javascript'>
    function add(){
        sum = 5 -3
        alert('5 和 3 的差：' + sum);
    }
</script>
<body>
    <form>
        <input type='button' value='点击我' onclick='add()'>
    </form>
</body>

4.2、函数调用

定义好函数后，并不能直接执行，需要在需要的位置调用函数

一、<script> 标签内调用

<script type='text/javascript'>
    function add()
{
    sum = 1 + 2;
    alert(sum);
}
add();                    // 直接写函数名即可
</script>

二、HTML 文件中调用（通过点击按钮调用函数）

<html>
    <head>
        <script type='text/javascript'>
            function add(){
                sum = 5 -3
                alert('5 和 3 的差：' + sum);
            }
        </script>
    </head>
    <body>
        <form>
            <input type='button' value='点击我' onclick='add()'>  <!--通过点击事件，调用函数，直接写函数名-->
        </form>
    </body>
</html>

4.3、有参数的函数

函数还可以自带参数，参数可一个或多个。多个参数间使用逗号分隔，调用时直接输入参数的值即可

语法：

function 函数名(参数1，参数2，参数3...)
{
    函数体;
}

实例：

function add3(x,y)
{
    sum = x + y;
    alert(sum);
}
add3(4,5);    // 求 4、5 的和
add3(2,3);

4.4、返回值的函数

使用 return 语句可以将返回值返回给函数，还可以通过变量存储调用函数的返回值

语法：

function add2(x,y)
{
    sum = x + y;
    return sum;      // sum 为返回值，将 sum 返回给函数本身
}
req = add2(3,4);     // req 为变量，处理函数的值

实例：

<script type="text/javascript">
  function  app2(x,y)
  { var sum,x,y;
    sum = x * y;
    return sum;
  }
  req1 = app2(5,6);          // 将函数的值存储到变量中
  req2 = app2(2,3);
  sumq = req1 + req2;        // 处理函数的值
document.write("req1的值:"+req1+"<br/>");
document.write("req2的值:"+req2+"<br/>");
document.write(req1+"与"+req2+"和:"+sumq);
</script>

4.5、编程练习

使用 javascript 编写一个函数，如何以下条件：

有两个参数，当传入两个整数时判断其大小并弹出最大值
可以使用 if...else if 语句

<!DOCTYPE  HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>函数</title>
        <script type = 'text/javascript'>
            function compare(a,b)
            {
                if (a > b)
                {
                    return a;
                }
                else if (a == b)
                {
                    return '一样大';
                }
                else
                {
                    return b;
                }
            }
            req1 = compare(5,4);
            req2 = compare(6,4);
            document.write(" 5 和 4 的较大值是:"+ req1 + "<br>");
            document.write(" 6 和 3 的较大值是:" + req2);
        
        </script>
    </head>
    <body>
    </body>
</html>

-----------------

5 和 4 的较大值是:5
6 和 3 的较大值是:6

5、事件响应，与网页交互

5.1、事件

javascript 创建动态页面，事件是可以被 javascript 侦测到的行为。每个元素都可以产生某些可以触发 javascript 函数或程序的事件

如用户点击按钮或提交表单数据，发生一个鼠标单击（onclick ）事件，需要浏览器处理，返回给用户一个结果

主要事件表：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚集
onblur	光标离开
onload	网页导入
onunload	关闭网页

5.2、鼠标单击事件（onclick）

当在网页上单击鼠标时，就会发生该事件。同时 onclick 事件调用的程序块会被执行，通常与按钮一起搭配使用

实例：

点击 onclick 调用函数，计算两个数的和

<html>
    <head>
        <script type='text/javascript'>
            function add()
            {
                var sum,a,b;
                sum = a + b;
                document.write('a 和 b 的和是：' + sum);
            }
        </script>
    </head>
    <body>
        <form>
            <input type='button' value='点击我' onclick='add()'/>  <!-- 点击按钮 触发 onclick 事件-->
        </form>
    </body>
</html>

5.3、鼠标经过事件（onmouseover）

当鼠标移动到某个对象上时，触发 onmouseover 事件，并执行 onmouseover 事件调用的程序

实例：

鼠标移动到确定上时，出发 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="确定" onmouseover="message()"/>
        </form>
    </body>
</html>

5.4、鼠标移开事件（onmouseout）

当鼠标移动到某个对象上再移开时，触发 onmouseout 事件，并执行 onmouseout 事件调用的程序

实例 1：

<!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" onmouseout="message()">点击我</a>
        </form>
    </body>
</html>

实例 2：

实现鼠标移动到链接文字，显示提示信息，移开时提示信息消失

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <title>鼠标经过提示，移开消失</title>
        <style type='text/css'>
            .box{
                display: none;
                width: 315px;
               height: auto;
               background: #FFFFDF;
               border: 1px solid #333;
               padding: 12px;
               text-align: left;
               position: absolute;
                
            }
        
        </style>
        
        <script type='text/javascript' language='javascript'>
            function show()      // 显示函数
            {
                document.getElementById('box').style.display='block';  // 将元素显示为块级元素
            }
            function hide()      // 隐藏函数
            {
                document.getElementById('box').style.display='none';    // 隐藏该元素
            }
        </script>
    </head>
    <body>
        <a href='#' onmouseover='show()' onmouseout='hide()'>鼠标移动到这</a>
        <div id='box' class='box'>
            提示信息。。。。
        </div>
    </body>
</html>

5.5、光标聚焦事件（onfocus）

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

实例：

鼠标移动到选项时，获得聚焦

<!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>
请选择您的职业：<br>
  <form>
    <select name="career" onfocus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>

5.6、失焦事件（onblur）

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

实例：

<!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>
       用户:<input name="username" type="text" value="请输入用户名！" ><br/>
       密码:<input name="password" type="text" value="请输入密码！" onblur="message()" >
      </form>
    </body>
</html>

5.7、内容选中事件（onselect）

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

实例：

当选择文本框内文字时，触发 onselect 事件，调用函数 message（）

<!DOCTYPE>
<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>
            个人简介：<br/>
            <textarea name='summary' cols="60" rows='5' onselect='message()'>请写入个人简介，不少于200字！</textarea>
        </form>
    </body>
</html>

5.8、加载事件（onload）

页面加载完毕后事件触发，同时调用程序，事件写在 body 标签内

实例：

<!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。<br/>
    </body>
</html>

5.9、卸载事件（onunload）

当用户退出页面时（页面刷新、页面关闭），触发 onunload 事件，同时执行被调用程序。每个浏览器对 onunload 事件支持不同。

onbeforeunload：对刷新、关闭当前页面有效

window.onbeforeunload = function(){return "Are you sure?";}

onunload：对加载其他网页，离开当前网页时有效

实例：

目前发现 ie 浏览器兼容性比较好，chrome 和 firefox 不怎么友好

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">   
     window.onbeforeunload = function(){return "Are you sure?";}
</script>   
</head>
<body>
  欢迎学习JavaScript。
</body>
</html>

6、内置对象

6.1、对象的定义

JS 中所有事物都可以是对象，如：字符串、数组、函数等，而每个对象又都带有属性和方法

对象属性：反映该事物某些特定性质。如：字符串长度
对象方法：能够在对象上执行的动作。如：表单的提交（submit），时间的获取（getYear）

JS 提供了很多内置对象，如 String、Date、Array 等，使用对象前先定义

定义对象语法：

// 定义一个数组对象
var objectName = new Array();   // 使用 new 关键字定义对象
var objectName = [];       // 或

访问对象属性语法：

objectName.propertyName;           // 对象名.属性名

实例 1：

var myarray = new Array(6);
var myl = myarray.length;            // 获取数组长度属性

访问对象方法的语法：

objectName.methodName();        // 对象名.方法名

实例 2：

var mystring = 'hello world';       // 定义一个字符串对象
var request = mystring.toUpperCase();     // 使用 string 对象的 toUpperCase（）方法将文本转换为大写

6.2、Date 日期对象

日期对象可以用来存储任意一个日期，并精确到毫秒数（1/1000秒）

定义 Date 对象，要使用 new 关键字，并且首字母 Date 要大写
定义的 Date 对象，初始值与当前电脑系统时间同步

定义一个时间对象：

var Udate = new Date();

实例 1：

定义初始值方法

var d = new Date(2012, 10 , 1);     // 2012.10.1
var d = new Date('Oct 1, 2012');    // 2012.10.1

Date 对象中处理时间和日期的常用方法：

方法名称	功能描述
get/setDate（）	返回/设置日期
get/setFullYear（）	返回/设置年份，用四位数表示
get/setYear（）	返回/设置年份
get/setMonth（）	返回/设置月份
get/setHours（）	返回/设置小时，24小时制
get/setMinutes（）	返回/设置分钟数
get/setSeconds（）	返回/设置秒钟数
get/setTime（）	返回/设置时间（毫秒为单位）

6.2.1、返回/设置年份方法

get/setFullYear（）返回/设置年份方法，四位数表示

实例：

var mydate = new Date();        // 定义日期对象（当前时间）
document.write(mydate + '<br/>');   // 输出当前时间

document.write('当前年份: ' + mydate.getFullYear() + '<br/>');     // 输出当前年份

mydate.setFullYear(2019);   // 设置年份为 2019 年
document.write('设定年份： ' + mydate +'<br/>');  // 输出设定后的年份
------
    
当前时间：Tue May 15 2018 16:14:26 GMT+0800 (中国标准时间)
年份:2018
设定年份：Wed May 15 2019 16:14:26 GMT+0800 (中国标准时间)

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

6.2.2、返回星期方法

getDay（）方法返回星期，返回的是数字（0-6，0 表示星期天），要得到星期几可以用数组

实例：

<script type='text/javascript'>
    var mydate = new Date();
    var weekend = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    document.write('今天是:' + mydate.getDay() + '<br/>');  // 输出数字
    document.write('今天是:' + weekend[mydate.getDay()]);   // weekend[2]
</script>
-------

今天是: 2
今天是：星期二

6.2.3、返回/设置时间方法

getTime/setTime（）返回/设置时间，单位毫秒，计算从 1970 年 1 月 1 日零时到日期对象所指的日期毫秒数

object.setTime(object.getTime() + 60*60*1000)      // 1 秒等于 1000 毫秒

实例：

<script type='text/javascript'>
    var mydate = new Date();
    document.write('当前时间: ' + mydate + '<br/>');
    mydate.setTime(mydate.getTime() + 2*60*60*1000);
    document.write('推迟二小时后的时间: ' + mydate);
</script>

6.2.4、返回/设置月份方法

get/setMonth（）方法可以返回或设置月份，返回的是 0（一月）~11（十二月）的一个整数，因此获得当前月份还应再后面加 1

设置月份语法：

var d = new Date();
d.setMonth(month,day);
document.write(d);

month：必需，0 ~ 11数字
day：可选，设置那一月的某一天

实例：

<script type='text/javascript'>
    var mydate = new Date();
    document.write(mydate.getMonth() + 1 + '月');
</script>
----

5月

6.3、String 对象

定义字符串对象，直接赋值即可

var mystr = 'I love JavaScript';

// 获取长度的属性
mystr.length;
// 将字符串对象转换为大/小写的方法
mystr.toUpperCase();     // 转换为大写
mystr.toLowerCase();     // 转换为小写

6.3.1、获取指定位置字符 charAt（）方法

charAt（）方法可以获取指定位置字符

语法：

var mysrt = 'xxxx';
mystr.charAt(index);        // index 为索引值

索引值从 0 开始（第一个字符），到 object.length - 1 结束（最后一个字符）
空格也占用一个字符
如果索引值不在（0 -- object.length -1）范围内，返回一个空字符串

实例：

获取字符串 mystr 最后一个字符

<script type='text/javascript'>
    var mysrt = 'I Love You!';
    document.write('最后一个字符是: ' + mystr.charAt(mystr.length-1));
</script>

6.3.2、返回指定字符串首次出现的位置 indexOf（）方法

indexOf（）方法可以返回某个字符串首次出现的位置

语法：

stringObject.indexOf(substring, startpos);      // 2 个参数

substring：必须，即要检索的字符串
startpos：可选，规定字符串检索开始的位置。省略时从首字符开始检索
没有检索到字符，返回 -1

实例：

返回第二个字母 o 的位置

<srcript type='text/javascript'>
    var mystr = 'I love You!';
    document.write(mystr.indexOf('o', 5));   <!--检索字符 o ，从位置 5 开始检索-->
    document.write(mystr.indexOf('o',mystr.indexOf('o')+1));  <!--也可以这样-->
</srcript>

6.3.3、分割字符串 split（）方法

split（）方法将字符串分割成字符串数组，并返回该数组

语法：

stringObject.split(separator,limit);

separator：必须，从该参数指定的地方分割（即以这个为分割符分割）
limit：可选，分割次数
如果用空字符串作为分隔符，那么将分割每个字符

实例：

<script type="text/javascript">
var mystr="86-010-85468578";
    document.write(mystr.split('-') + "<br />");      // 以 - 作为分隔符
    document.write(mystr.split('') + "<br />");       // 分割每个字符
    document.write(mystr.split('' ,3));              // 分割每个字符，限制分割次数为 3
</script>
-----

86,010,85468578
8,6,-,0,1,0,-,8,5,4,6,8,5,7,8
8,6,-

6.3.4、提取字符串 substring（）方法

substring（）方法用于提取字符串中介于两个指定下标之间的字符

语法：

stringObject.substring(startPos,stopPos);

startPos：必须，一个非负整数，开始位置
stopPos：可选，一个非负整数，省略的话检索到字符串对象结尾
返回的内容，从start 开始（包括start 位置），到 stop 结束（不包括结束）

关于区间：

区间有常闭 [ ]：两端都可以取到
常开 ( )：两端都不能取到
左常闭右常开 [ )：左能取到，右取不到
左常开右常闭 ( ]：左不能取到，右可取

实例：

提取字符串 mystr 中的 World！和 Hello

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>string对象</title>
        <script type="text/javascript">
            var mystr="Hello World!"
            // mystr.indexOf(' ') 返回空格首次出现的位置 ，为 5
            document.write(mystr.substring(mystr.indexOf(' '), mystr.length) + '<br/>');
            document.write(mystr.substring(0, mystr.indexOf(' ')));
        </script>
    </head>
    <body>
    </body>
</html>

6.3.5、提取指定数目的字符 substr（）方法

substr（）方法用于提取字符串中从 startPos 位置开始的指定数目的字符

语法：

stringObject.substr(startPos, length);

startPos：必须，要提取字符的开始位置，必须是数值
length：可选，要提取字符的长度。省略的话就从提取 startPos 到结尾的字符
若 startPos 是负数，则从后往前提取
若 startPos 是负数，且绝对值大于字符串长度，则 startPos 为 0

实例：

提取 World！和 Hello 字符

<script type='text/javascript'>
    var mystr = 'Hello World!';
    document.write(mystr.substr(mystr.indexOf('W')) + '<br/>');
    document.write(mystr.substr(0,mystr.indexOf('o') + 1));
</script>

6.4、Math 对象

Math 对象，提供对数据的数学计算。为固有对象，无需创建，可直接引用

Math 对象属性：

Math 对象属性

Math 对象方法：

Math 对象方法

6.4.1、向上取整 ceil （）方法

ceil（）方法对一个数进行向上取整

语法：

Math.ceil(x);   // 返回大于或等于 x ，并且最接近 x 的整数

实例：

<script type="text/javascript">
    document.write(Math.ceil(3.3) + '<br/>');
    document.write(Math.ceil(-0.1) + '<br/>');
    document.write(Math.ceil(9.9) + '<br/>');
    document.write(Math.ceil(8.9) + '<br/>');
</script>
----

4、0、10、9

6.4.2、向下取整 floor （）方法

floor（）方法对一个数进行向上取整

语法：

Math.floor(x);   // 返回小于于或等于 x ，并且最接近 x 的整数

实例：

<script type="text/javascript">
    document.write(Math.floor(3.3) + '<br/>');
    document.write(Math.floor(-0.1) + '<br/>');
    document.write(Math.floor(-9.9) + '<br/>');
    document.write(Math.floor(8.9) + '<br/>');
</script>
----

3、-1、-10、8

6.4.3、四舍五入 round（）方法

round（）方法可以把一个数字四舍五入为最近的整数

语法：

Math.round(x);

如果 x 与两侧整数同等接近，则结果接近正无穷方向的数值
比如：-5.5---5，5.5---6

实例：

<script type="text/javascript">
    document.write(Math.round(3.3) + '<br/>');
    document.write(Math.round(-0.1) + '<br/>');
    document.write(Math.round(-9.9) + '<br/>');
    document.write(Math.round(8.9) + '<br/>');
    document.write(Math.round(5.5) + '<br/>');
    document.write(Math.round(-5.5) + '<br/>');
</script>
----
3、0、-10、9、6、-5

6.4.4、随机数 random（）方法

random（）方法可返回 0 ~ 1（大于或等于0，但小于 1）之间的一个随机数

语法：

Math.random();

实例：

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Math </title>
    <script type="text/javascript">
        function li()
        {
            document.getElementById('la').innerHTML = Math.round(Math.random()*10);
        }

    </script>
    </head>
    <body>
        <form id = 'la'>
            <input type='button' name = 'button' value = '点击刷新' onclick = 'li()'>
        </form>
    </body>
</html>

6.5、Array 数组对象

数组对象是对象的集合，里面的对象可以是不同类型，同样支持索引

数组对象定义：

var 数组名 = new Array();
var 数组名 = new Array(n);   // 指定有 n 个空元素
var 数组名 = [2,3,4];
数组名[下标] = 值;   // 数组元素的使用

数组属性：

数组名.length；     // 数组长度

数组方法：

数组方法

6.5.1、数组连接 concat（）方法

concat（）方法用于连接两个或多个数组，返回被连接数组的一个副本，不改变原数组

语法：

arrayObject.concat(array1,array2..arrayn);

实例：

<script type="text/javascript">
    var myarr1= new Array("010")
    var myarr2= new Array("-","84697581");
    document.write(myarr1.concat(myarr2) + '<br/>');
    document.write(myarr1);
</script>
----

010,-,84697581
010

6.5.2、指定分隔符连接数组元素 join（）方法

join（）方法用于把数组中所有元素放入在一个字符串中，不改变原数组，参数为分隔符号

语法：

arrayObject.join(分隔符);   // 若省略分隔符，则默认以逗号分隔

实例：

<script type="text/javascript">
    var myarr1= new Array("86","010")
    var myarr2= new Array("84697581");
    var myarr3= myarr1.concat(myarr2);
    document.write(myarr3.join("-"));
</script>
----

86-010-84697581

6.5.3、颠倒数组元素顺序 reverse（）方法

reverse（）方法用于颠倒数组中元素顺序，改变原数组

语法：

arrayObject.reverse();

实例：

<script type="text/javascript">
   var myarr1= ["我","爱","你"];
   document.write(myarr1.reverse());
</script>
----

你,爱,我

6.5.4、选定元素 slice（）方法

slice（）方法可以从已有数组中返回选定的元素（切片）

语法：

arrayObject.slice(start,end);

start：必需，规定从何处开始选取，若为负数则表示从最后一位开始
end：可选，规定到何处结束，若没写这个参数则选区范围为 start 到最后一个
选定的元素不包括 end 处的元素（即含头不含尾）
不修改原数组，只是返回原数组的一个子数组

实例：

将选定数组元素"爱","你"，并输出

<script type='text/javascript'>
    var myarr1 = ['我','爱','你'];
    document.write(myarr1.slice(1));
</script>

6.5.5、数组排序 sort（）方法

sort（）方法使数组中元素按照一定顺序排列

语法：

arrayObject.sort(方法函数);

方法函数：可选，规定排序函数，必须是函数

若不指定方法函数，则按 unicode 码顺序排列
若指定方法函数，则按方法函数所指定排序方法排序

myarray.sort(sortMethod);

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

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

实例：

<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

6.6、编程练习

某班的成绩出来了，请求出该班的平均分（保留整数）；并打印当前日期，输出效果图如下：

xxxx年xx月xx日 星期x--班级总分为:81

同学成绩数据如下：

"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第七章：编程练习</title>

<script type="text/javascript">
    var mydate = new Date();
    var weekend = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    //获得当前年月日星期（格式：XXXX年XX月X日 星期X）
    var timeStr = '';
    timeStr += mydate.getFullYear() + '年';
    timeStr += mydate.getMonth() + 1 + '月';  // getMonth() 获得的是 0~11 的数字，因此需要加 1
    timeStr += mydate.getDate() + '日';
    timeStr += ' ' + weekend[mydate.getDay()];

    //将成绩分割成一个个的字符串数组（split() 可以将字符串分割成字符串数组，并返回该数组）
    var sorceStr = "小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
    var arr = sorceStr.split(';');       // 以 ; 为分割符
    var sum = 0;
    var av = 0;

    // 获得每个字符串中成绩第一次出现的位置
    for(i=0;i<arr.length;i++)
    {
        var index = arr[i].indexOf(':');   // 返回 : 出现的位置
        sum += parseInt( arr[i].substr(index+1,2) );  // 提取成绩（从 ：后开始提取，提取长度为 2）
    }

    // 求平均值，取整
    av = sum/arr.length;
    av = Math.floor(av);

    // 输出
    document.write(timeStr + '--班级总分为:' + av);


</script>
</head>
<body>
</body>
</html>
------

2018年5月20日 星期日--班级总分为:81

二、JS 进阶
JS 进阶 HTML 标记（结构）、CSS 样式（表示），HTML + CSS 只能编写出静态页面；JS 可以为网...
js进阶二
JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么?六种：...
js进阶（二）
第十二天 04-基础进阶-第02天{对象进阶、内置对象} 第十二天对象工厂模式创建对象构造函数模式创建对象原型模式...
二、JS 进阶
JS 进阶 HTML 标记（结构）、CSS 样式（表示），HTML + CSS 只能编写出静态页面；JS 可以为网...
Vue基础语法之v-model
（普通）一、js文件内容：二、html文件三、效果展示四、对比五、备注：(进阶) /***********...
JS------数组 reduce() 方法详解及高级技巧
JS进阶篇--JS数组reduce()方法详解及高级技巧
JS基础到高级
JS高级-进阶目录======================基础Web API面向对象编程继承函数进阶正则表达式...
webpack进阶【11】: babel-loader 配置高
webpack: babel-loader 配置高版本的 js，使之兼容注意：本进阶在webpack进阶【10】...
最新web前端相关课程学习链接
js基础篇 js进阶篇 js高级篇 vue基础篇 vue高级篇 react基础 react高级 Nodejs基础 ...
rollup用法
10分钟快速入门rollup.js 10分钟快速进阶rollup.js

二、JS 进阶

JS 进阶

1、JS 基础语法

1.1、变量命名规则

1.2、变量声明

1.3、变量赋值

1.4、表达式

1.5、+ 号操作符

1.6、比较操作符

1.7、逻辑操作符

1.8、操作符优先级

2、数组

2.1、创建数组

2.2、数组赋值

2.3、操作数组

2.4、数组长度属性

2.5、二维数组

3、流程控制语句

3.1、条件判断语句

3.1.1、if 语句

3.1.2、if...else 语句

3.1.3、if...else 嵌套语句（多重判断）

3.1.4、switch 语句（多重选择）

3.2、循环语句

3.2.1、for 循环（重复）

3.2.2、while 循环（反复）

3.2.3、do...while 循环（来回）

3.3、退出循环

3.3.1、break 语句（退出当前循环）

3.3.2、continue 语句（跳过本次循环）

3.4、练习

4、函数

4.1、定义函数

4.2、函数调用

4.3、有参数的函数

4.4、返回值的函数

4.5、编程练习

5、事件响应，与网页交互

5.1、事件

5.2、鼠标单击事件（onclick）

5.3、鼠标经过事件（onmouseover）

5.4、鼠标移开事件（onmouseout）

5.5、光标聚焦事件（onfocus）

5.6、失焦事件（onblur）

5.7、内容选中事件（onselect）

5.8、加载事件（onload）

5.9、卸载事件（onunload）

6、内置对象

6.1、对象的定义

6.2、Date 日期对象

6.2.1、返回/设置年份方法

6.2.2、返回星期方法

6.2.3、返回/设置时间方法

6.2.4、返回/设置月份方法

6.3、String 对象

6.3.1、获取指定位置字符 charAt（）方法

6.3.2、返回指定字符串首次出现的位置 indexOf（）方法

6.3.3、分割字符串 split（）方法

6.3.4、提取字符串 substring（）方法

6.3.5、提取指定数目的字符 substr（）方法

6.4、Math 对象

6.4.1、向上取整 ceil （）方法

6.4.2、向下取整 floor （）方法

6.4.3、四舍五入 round（）方法

6.4.4、随机数 random（）方法

6.5、Array 数组对象

6.5.1、数组连接 concat（）方法

6.5.2、指定分隔符连接数组元素 join（）方法

6.5.3、颠倒数组元素顺序 reverse（）方法

6.5.4、选定元素 slice（）方法

6.5.5、数组排序 sort（）方法

6.6、编程练习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读