当前位置 博文首页 > Venusoooooo:JavaScript小记

    Venusoooooo:JavaScript小记

    作者:Venusoooooo 时间:2021-01-24 16:47

    JavaScript小记

    1. 简介

    1. 语言描述

    JavaScript 是一门跨平台、面向对象的弱类型动态脚本编程语言

    JavaScript 是一门基于原型、函数先行的语言

    JavaScript 是一门多范式的语言,它支持面向对象程序设计、命令式编程以及函数式编程

    其最初被创建的目的是“使网页更生动”

    脚本被以纯文本的形式提供和执行;它们不需要特殊的准备,编译即可运行

    2. 名称渊源

    JavaScript 原型于 1995年4月 被在NetScape工作的布兰登?艾克(Brendan Eich ; Moizlla/Brave浏览器创始人)创造

    诞生之初名为“LiveScript ”,后因推广搭上当时的编程热词“Java”,所以更名为 JavaScript

    JavaScript 和 Java 除了语法上有一些类似,两者的应用领域以及后续的发展均无联系

    语言标准化:

    1997年6月,ECMA(European Computer Manufacturers Association 后更名 Ecma International) 以 JavaScript为语言基础

    制定了 ECMAScript标准规范 ECMA-262, JavaScript 也成为了 ECMAScript 最著名的实现之一

    3. 其它简介

    随着 JavaScript不断发展,JavaScript 不仅可以在浏览器中执行,也可以在服务端执行(node.js),甚至可以在任意搭载 JavaScript 引擎的设备中执行

    浏览器中嵌入了 JavaScript 引擎,有时也称作 “JavaScript 虚拟机”

    不同的引擎有不同的 “代号”

    • V8 ———— Chrome 和 Opera 中的 JavaScript 引擎
    • SpiderMonkey ———— Firefox 中的 JavaScript 引擎
    • Chakra ———— IE 中的 JavaScript 引擎
    • ChakraCore ———— Microsoft Edge 中的 JavaScript 引擎
    • NitroSquirrelFish ———— Safari 中的 JavaScript 引擎

    引擎是如何工作的 ?

    ? 引擎很复杂,但是基本原理很简单

    1. 引擎(如果是浏览器,则引擎被嵌入其中)读取(“解析”)脚本
    2. 然后,引擎将脚本转化(“编译”)为机器语言
    3. 然后,机器代码快速执行
    • 引擎会对流程中的每个阶段都进行优化;它甚至可以在编译的脚本运行时监视它

      分析流经该脚本的数据,并根据获得的信息进一步优化机器代码

    浏览器中的 JavaScript 能做什么?

    现代的 JavaScript 是一种 “安全的” 编程语言;

    它不提供对内存或 CPU 的底层访问;因为它最初是为浏览器创建的,不需要这些功能

    浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情

    • 在网页中添加新的 html ,修改网页已有的内容和网页的样式
    • 响应用户的行为,响应鼠标的点击,指针的移动,按键的移动
    • 向远程服务器发送网络请求,下载和上传文件(AJAX 和 COMT 技术)
    • 获取或设置 cookie ,向访问者提供问题或发送消息
    • 记住客户端的数据(“ 本地存储 ”)

    浏览器中的 JavaScript 不能做什么 ?

    为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是受限的

    目的是防止恶意网页获取用户私人信息或损害用户数据

    • 网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件;它没有直接访问操作系统的功能

      现代浏览器允许 JavaScript 做一些文件相关的操作,但这个操作是受限制的

      仅当用户做出特定的行为,JavaScript 才能操作这个文件

      例如:用户把文件” 拖放“ 到浏览器中 或者通过<input>标签选择了文件

    • 不同的标签页/窗口之间通常互不了解

      有时候,也会有一些联系

      例如:一个标签通过 JavaScript 打开的另一个标签页;但即使在这种情况下

      ? 如果两个标签页打开的不是同一个网站(URL中协议、域名或者端口任一不相同的网站),他们都不能相互通信

      ? 这就是所谓的 “同源策略” (同源策略仅适用于脚本)

      ? 为了解决“同源策略”问题,两个标签必须都包含一些处理这个问题的特定的 JavaScript 代码,并均允许数据交换

    • JavaScript 可以轻松的通过互联网与当前所在的服务器进行通信;但是从其他网站/域的服务器中接收数据的能力被削弱了

      尽管可以,但需要来自远程服务器的明确协议(在 HTTP header 中)

      倘若在浏览器外(例如在服务器上)使用 JavaScript,则不会存在此类限制

      现代浏览器还允许安装可能会要求扩展权限的插件/扩展

      JavaScript “上层” 语言

      随着发展推进,JavaScript的语法无法满足所有人的需求,因此出现了很多新语言

      这些语言在浏览器中执行之前,都会被 编译(转化)成 JavaScript

      此类语言诸如:CoffeeScript 、TypeScript 、Flow 、Dart 、Brython 等

    2. 语法

    1. JavaScript引入方式

    1.内嵌

    在 html 文档中可以放置任意数量的 JavaScript脚本

    1. <head>中的 JavaScript脚本

      <!DOCTYPE html>
        <html>
          <head>
            <script>
            	function myFunction(){
                document.getElementById("demo").innerHTML="段落被更改";
              }
            </script>
          </head>
          <body>
            <h1>一张网页</h1>
            <p >一个段落</p>
            <button type="button" onclick="myFunction()"> 试一试</button>
          </body>
      	</html>
      
    2. <body>中的 JavaScript 脚本

      <!DOCTYPE  html>
      	<html>
          <head>
            <title>body中的JavaScript脚本</title>
            <style type="text/css">
              #Oliva{
                color: blue;
                font-family: serif;
                font-style: italic;
              }
            </style>
          </head>
          <body>
            <p >Oliva is a beautiful words!</p>
            <script>
              document.getElementById("Oliva").style.color= "gray";
              document.getElementById("Oliva").style.fontFamily= "san-serif";
              document.getElementById("Oliva").style.fontStyle= "oblique";
              /*注意 italic与oblique的区别;italic指文本样式为斜体,而oblique是人为倾斜字体*/
              /*通常把脚本置于<body>元素底部*/
            </script>
          </body>
      	</html>
      

    2. 外联

    当然也可通过完整的 URL 或相对于当前网页的路径引用外部脚本

    <script src=“xxxxx”></script> 放在 head 和 body 都可以

    1. 完整的 URL 链接脚本

      <!DOCTYPE html>
      <html>
        <head>
          <title>一个椭圆</title>
          <style type="text/css">
            #oval{
              width= 200px;
              height= 100px;
              border-width: 1px;
              border-style: groove;
              border-color: rgb(129,60,133);
              border-radius: 40px/20px; 
            }
          </style>
        </head>
        <body>
          <div >Draw an oval</div>
          <script src="https://github.com/Kuiperabxy/libertas/tree/main/oval.js">
          /*通过完整的 URL 来链接至脚本*/
          </script>
        </body>
      </html>
      
    2. 引入当前网站上指定文件夹中的脚本

      <script src="/Kuiperabxy/libertas/tree/main/oval.js">
       /*引入当前网站指定文件夹的脚本*/</script>
      
    3. 引入与当前页面相同文件夹的脚本

      	<div >Draw an oval</div>
          <script src="oval.js"> /*引入当前网站相同文件夹的脚本*/</script>
      	<!--若需要引入多个JavaScript文件 需要多个script标签-->
      

      外联的优势:

      • 分离了 html 和 JavaScript 代码
      • 使 html 和 JavaScript 更易于阅读和加载
      • 已缓存的 JavaScript 文件可加速页面加载

    2. JavaScript 输出方式

    JavaScript 不提供任何内建的打印或显示函数

    JavaScript 能够以不同的方式 “显示”数据:

    • 使用 window.alert( ) 写入警告框

    • 使用 document.write( ) 写入 html 输出 ( 仅用于测试 )

    • 使用 innerHTML 写入html 元素 ( 更改 html 元素的 innerHTML 属性是在 html 中显示数据的常用方法 )

    • 使用 console.log( ) 写入浏览器控制台

      <!DOCTYPE  html>
      <html>
      <head>
          <title>JavaScript不同的输出方式</title>
        </head>
        <body>
          <script>window.alert(2+8);</script>
          <script>document.write(2+8);</script>
          <p>更改 html 元素</p>
          <p >改变的内容在这里</p>
          <script>
           	document.getElemntById("nua").innerHTML="SiChuan University is best university in SiChuan!" 	
          </script>
          <script>console.log(2+8);</script>
        </body>
      </html>
      

    3. JavaScript 基础语法

    计算机程序是计算机“执行”的一系列的“指令”

    在编程语言中,这些编程“指令“被称为语句

    JavaScript 程序 就是一系列编程语句

    1. JavaScript 语句构成

    ? 值 、 运算符 、 表达式 、 关键词 和 注释

    2. JavaScript 值

    JavaScript 语句定义两种类型的值:混合值( 字面量值 literal ) 和 变量值 ( 变量 )

    字符串属于字面量的一种;用双引号或者单引号包围

    常量也属于字面量的一种

    Javascript 变量

    在编程语言中,变量是 存储 数据值的容器

    例如: var x = 7; var y = 10;(x 存储 7 ; y 存储 10)

    类似代数

    例如: var total = x + y; ( total 也是一个变量,采用类似代数的方式表达)

    3. JavaScript 表达式

    表达式是值、变量和运算符的组合,计算结果是值

    如:6*10“Bill” + “ ” + “Gates”

    4. JavaScript 关键词

    JavaScript 语句常常通过某个关键词来 标识 需要执行的 JavaScript 动作

    • 附:JavaScript关键词

      关键词 描述
      break 终止 switch 循环
      continue 跳出循环并在顶端开始
      debugger 停止执行 JavaScript,并调用调试函数(若可用)
      do……while 执行语句块,并在条件为真时重复执行代码块
      for 标记需要被执行的语句块,在条件为真的情况下
      function 声明函数
      if……else 标记需要被执行的语句块,根据某个条件
      return 退出函数
      try……catch 对语句块实现错误处理
      var 声明变量

    5. JavaScript 代码块

    ? 代码块的作用是 定义一同执行的语句

    ? 代码块的内容一般需要空格缩进,增强可读性

    注意:

    1. 分号分隔 JavaScript 语句,一定要加
    2. 给 JavaScript 语句添加空格以增强可读性(在运算符旁)
    3. 为了达到最佳可读性,代码行字符往往控制在80个以内

    6. JavaScript 注释

    并非所有 JavaScript 语句 都被 “执行”

    双斜杠 // (单行) 或者 介于 / / (多行) 之间的代码被视为注释

    7. JavaScript 标识符

    标识符是名称,JavaScript 标识符对大小写敏感 且 具有唯一性

    在 JavaScript 中,标识符用于 命名变量(以及关键词 、 函数、 标签)

    大多数编程语言,合法名称的规则近乎相同

    规则: 首字符必须是 字母、下划线 (__) 或者 美元符号 ( $)

    ? 连串字符可以是字母、数字、下划线或美元符号

    ? 连串字符用 驼峰式大小写方式 (eg: getElementById)

    8. JavaScript 字符集

    JavaScript 使用 Unicode ( 万国码 ) 字符集

    Unicode 覆盖世界上 几乎所有的字符、标点和符号

    9. JavaScript 运算符

    详情查阅网址:https://www.w3school.com.cn/js/js_operators.asp

    10. JavaScript 数据类型

    数据类型即具体的值类型

    • 5 种 可能包含值得数据类型
      • 字符串值 (string)
      • 数字值 (number)
      • 布尔值 (boolean)
      • 对象 (object)
      • 函数( function)
    • 3种 对象类型
      • 对象(object)
      • 日期(date)
      • 数组(array)
    • 2 种 不能包含值的类型
      • null
      • undefined

    JavaScript 拥有动态类型,意味着相同变量可用作不同类型 ;例如: var x = 10; var x = “bill”

    在 JavaScript 中,没有值的变量,其值是 undefined ,类型也是 undefined;即任何变量可以将其值设为 undefined 进行清空

    空值 (“ ”) 和 undefined 不是一回事,空的字符串既有值也有类型

    null 的值是 null ,数据类型是 对象;当然也可设置值为 null 清空对象

    在 JavaScript中 ,数组也是对象 例如:typeof [3,5,6,8] 返回的是 object 而非 array

    原始数据: 原始数据值是一种没有额外属性和方法的单一简单数据值

    例如:string 、 number 、boolean 、undefined

    对象 、 函数 属于复杂数据

    11. JavaScript 函数

    JavaScript 函数是被设计为执行特定任务的代码块;通常只要定义一次,就可多次调用

    JavaScript 函数 会在某代码调用它时被执行

    语法结构

    function myFuncationName ( param1 , param2 , param3 ) {

    ? 要执行特定任务的代码;

    }

    myFuncationName 是函数名 ,在被调用时使用

    param 是在调用函数时,由函数接收的真实的值

    在函数中 , param 是局部变量,即仅在函数内部才能被访问;在函数开始时创建,完成时被删除

    在其他编程语言中,函数近似 程序( Procedure)或 子程序(Subroutine

    函数调用

    • 当事件发生时(用户点击按钮时)
    • 当 JavaScript 代码调用时
    • 自动的(自调用)

    函数返回

    当 JavaScript 到达 return语句时,函数停止执行

    通常函数会计算返回值返回给调用者

    12. JavaScript 对象

    在真实生活中,汽车是一个对象

    汽车有诸如 车重 和 颜色 等属性;也有诸如 启动 和 停止 等方法

    所有汽车都拥有同样的 属性,但 属性值 因车而异

    所有汽车都拥有相同的 方法,但是方法会在不同时间被执行

    对象也是变量;但是对象包含很多值(即对象属性);对象无法被比较

    对象属性以名称:值 对的方式来书写

    JavaScript 对象 是被命名值 (对象属性) 的容器

    例如:var car = {type: "porsche", model: "911", color: "white"};

    对象的方法是在对象上执行的动作

    方法以 函数定义 被存储在属性中; 即 方法是作为属性来存储的 函数

    例如: var person = {

    ? firstName: “Bill” ,

    ? lastName: “Gates” ,

    ? fullName: function( ) {

    ? return this.firstName + “ ” + this.lastName ;

    ? }

    ? }

    this关键词

    在函数定义中,this 引用 该函数的 “拥有者”,即当前对象; 上述例子中,this.firstName 等价于 person.firstName;

    访问对象属性

    有两种方式可访问对象的属性

    1. objectName.propertyName 即 对象名:属性名
    2. objectName[“ propertyName ”] 即 对象名[“ 属性名” ]

    访问对象方法

    objectName.methodName( ) 即 对象名.方法名( )

    13. JavaScript 事件

    html 事件是发生在 html 元素上的 “事情”,JavaScript 能够 “应对” 这些事件

    html 事件可以是 浏览器 或 用户做的某些事情,通常事件发生时,用户会希望做某件事

    通过 JavaScript 代码,可以在 html 元素添加事件处理程序

    事件处理程序 可用于 处理、验证用户输入、用户动作和浏览器动作

    • 每当页面加载时应该做的事情
    • 当页面被关闭时应该做的事情
    • 当用户点击按钮时应该被执行的动作
    • 当用户输入数据时应该被验证的内容

    代码格式(单/双引号都可)

    < element event= “一些 JavaScript">

    例如:

    改变 id=“demo”的元素的内容

    <button onclick = ‘document.getElementById(“demo”).innerHTML = Date( )'>现在时间是?</button>

    改变当前元素自身的内容

    <button onclick = ‘this.innerHTML = Date( )'>现在时间是?</button>

    事件属性直接调用函数

    <button onclick = 'displayDate()'>现在时间是?</button>

    在 Js 文件中声明一个 displayDate( ) 函数,html 文档中直接调用

    14. JavaScript 字符串

    JavaScript 字符串 用于 存储和操作文本

    可用 + 对字符串进行换行

    例如:document.getElementById("demo").innerHTML ="Hello"+

    ? “Kitty”!;

    字符串可通过 关键词 new 定义为对象;但是会拖慢执行速度

    例如:var x = new String("Bill"); 创建一个 Bill 对象

    字符串相加 叫级联 ( concatenation)

    字符串中的原始属性和方法

    1. length 属性返回字符串的长度

      var txt = "ABCDEFGHIJKMNA"
      var sln = txt.length;
      
    2. indexOf( ) / lastIndexOf( )方法 分别返回字符串中指定文本首次/最后一次 出现的索引

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.indexOf("A");
      // JavaScript 从0开始索引,若未找到对应文本,indexOf()/lastIndexOf()均返回 -1
      
    3. search( ) 方法搜索特定值的字符串,并返回匹配的索引

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.search("A");
      

    注意 indexOf( )search( ) 的区别

    • search( ) 方法无法设置第二个开始位置的参数
    • indexOf( ) 方法无法设置更强大的搜索值 (正则表达式)
    1. slice( ) / substr( ) 提取字符串的某个部分并在新字符串中返回被提取的部分

      slice( param1,param2)

      param1 表示起始索引,param2 表示结束索引

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.slice(7,14);
      // 若某个参数为负数,则从字符串的结尾开始计数(从右向左)
      // 若省略第二个参数,则改方法将裁剪字符串的剩余部分
      
    2. replace( ) 方法用另一个值替换在字符串中指定的值

      默认地,replace( ) 只替换首个匹配 且对大小写敏感

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.replace(/A/g,"a");
      //替换所有匹配,使用正则表达式 g 修饰符(全局搜索) 且正则表达式不带引号
      
    3. toUpperCase( ) / toLowerCase( ) 分别把字符串转换为 大/小写

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.toUpperCase();
      
    4. concat( ) 方法连接两个或多个字符串

      var txt1 = "ABCD"
      var txt2 = "abcd"
      var txt3 = "EFGH"
      var txt = txt1.concat("",txt2).concat("",txt3);
      // concat() 方法可用于代替加运算符,txt 和 txt4 是等效的
      var txt4 = "ABCD" + "" + "abcd" + "EFGH";
      
    5. charAt( ) / charCodeAt( ) 分别返回字符串指定下标(索引)的字符串 和 指定索引的字符 Unicode编码

      var txt = "ABCDEFGHIJKMNA"
      var pos = txt.charAt(0);
      // 若找不到字符,返回空串
      
    6. split( ) 将字符串转换为数组

      var txt = "a,b,c,d,e"
      var arr = txt.split(",")/txt.split("")/txt.split("|");
      // 分别用 逗号、空格、竖线 分隔符分隔数组
      // 若省略分隔符,返回数组包含整个字符串 
      

    15. JavaScript 数字

    JavaScript 与其他编程语言不同的是 只有一种数值类型 且书写数值时带不带小数点都可

    JavaScript 数值始终是以 64 位的双精度浮点数来存储,根据国际 IEEE 754标准

    整数精度(不使用科学计数法) 会被精确到15位

    小数精度是17位,但浮点的算数并不总是100%精准

    例如:var x = 0.2 + 0.1 得到的结果将是0.30000000000000004

    使用乘除法可有助于解决上述问题:var x = (0.2 * 10 + 0.1 * 10) // x = 0.3

    数字字符串

    在所有数字运算中,JavaScript 会尝试将字符串转换为数字进行运算

    var x = "100"; var y = 10 ; var z = x / y; // z = 10

    需要注意的是,数字相加 和 字符串级联 都用 + 号表示,所以上述只适用于 */- 三种运算

    var x = "100" ; var y = 10 ; var z = x + y // z = 10010 而非110

    NaN (非数值) 数据类型是number

    NaN (Not a Number ) 属于 JavaScript 保留词,指示某个数 不是合法数

    var x = 100 / "a" // x = NaN

    对于确定某个值是否是数值,可用全局 JavaScript 函数 isNaN( ) 来判定,返回布尔值

    var x = 100 / "a" ; isNaN(x); //返回true

    关于 NaN 的一些有趣例子:

    var x = NaN; var y = 6; var z = x + y; // z = NaN而非 6

    var x = NaN; var y ="6"; var z = x + y; // z = NaN5 而非NaN 此处是级联

    Infinity (无穷) 数据类型是number

    Infinity/-Infinity 是 JavaScript 在计算数时超出最大可能数范围时返回的值

    除以0 返回的也是 Infinity

    var num1 = 2; while (num1 != Infinity) { num1 = num1 * num 1;} //执行直到Infinity

    十六进制 / 八进制

    JavaScript 会把前缀为 0x 的数值常量解释为 十六进制

    JavaScript 会把前缀为 0 的数值常量解释为 八进制

    var x = 0xff; //x = 255

    var x = 077; // x = 63 而非 77

    使用 toString( ) 方法可以实现 二进制 / 八进制 / 十六进制进型转换(以字符串形式返回)

    var x = 128; var y = x.toString(16); //y = 80

    Number 中的 方法和属性

    所有数字方法均可用于任意类型的数字(字面量(常量)、变量、表达式)

    1. toString( ) 方法 以字符串返回数值

      var x = 123;
      x.toString();          //从变量x 返回 123
      (123).toString();      // 从常量 返回 123
      (100 + 24).toString(); // 从表达式 返回 124
      
    2. toExponential( param ) / toFixed(param )方法 分别以返回字符串值,包含已被四舍五入并使用指数计数法/ 直接返回指定位数小数 的数字

      param 定义小数点后的字符数,参数可选,若未设置,JavaScript 不会对数字进行舍入

      var x = 98.8998;
      x.toExponential(3);  // 返回 9.890e+1
      x.toExponential();   // 返回 9.88998e+1
      x.toFixed(2);        // 返回 98.90  适合处理关于金钱的数字
      
    3. toPrecision(param ) 以字符串返回数值,包含了指定长度

      var x = 98.8998
      x.toPrecision(3)       //返回 98.9
      
    4. valueOf( ) 以数值返回数值

      在 JavaScript 中, 数字可以是 原始值(typeof = number ) 或 对象 (typeof = object )

      在 JavaScript 内部 使用 valueOf( ) 方法可将 Number 对象 转换为 原始值

      所有 JavaScript 数据类型 都有 valueOf( ) 和 toString( ) 方法

      var x = 123;
      x.valueOf();          // 从变量 x 返回 123
      (123).valueOf();      // 从字面量 123 返回 123
      (100+25).valueOf();   // 从表达式 100+25 返回 125
      
    5. 关于数值的全局方法

      JavaScript 全局方法 可用于 所有 JavaScript 数据类型

    • Nubmer( ) 方法 把 JavaScript 变量 转换为数值, 由其参数转换而来

      x = true ; Number(x);         // 返回 1
      x = new Date(); Number(x);    // 返回 1611294882633  以时间戳形式
      x = "10 20" ; Number(x);      // 返回 NaN
      
    • parseInt( ) / parseFloat( ) 方法解析一段字符串,允许空格,分别以 整数/浮点数形式返回首个数字

      parseInt ("10.33");         // 返回 10
      parseFloat ("10.33");       // 返回 10.33
      

      数字属性

      数字属性属于名为 number 的 JavaScript 数字对象包装器,仅对number这个数字对象有效

    1. MAX_VALUE / MIN_VALUE 属性分别返回 JavaScript 中可能的最大 / 最小 数字

      var x = Number.MAX_VALUE;     //返回 1.7976931348623157e+308
      var x = Number.MIN_VALUE;     //返回 5e-324
      
    2. POSITIVE_INFINITY / NEGATIVE_INFINITY 属性表示 正/负 的无穷大,溢出时返回该属性

      var x = Number.POSITIVE_INFINITY;  //返回 infinity
      var x = Number.NEGATIVE_INFINITY;  //返回 -infinity
      
    3. NaN 属性 表示非数字

      var x = Number.NaN;
      

    16. JavaScript 数组

    数组是一种特殊的变量,它能够一次存放一个以上的值;并可以通过引用索引号来访问这些值

    语法结构

    var arrayName = [item1 , item2 , …] ;

    访问数组及其元素

    数组是对象,可直接通过引用 数组名来访问完整的数组

    通过引用索引号(即下标号) 来访问某个数组元素

    var varName = arrayName[ n] ;

    数组元素也可以是对象

    JavaScript 变量可以是对象;数组是特殊类型的对象

    正因如此,可以在相同数组中存放不同类型的变量

    数组中可以保存对象,数组中也可以保存函数,甚至数组中可以保存数组

    数组的原始属性和方法

    1. length 属性 返回数组的长度( 数组元素的数目)

      var person = [Jim,Tom,Sam,Tim]
      var personNumber = person.length;      // personNumber = 4  
      
    2. 访问第一个/最后一个 数组元素

      var person = [Jim,Tom,Sam,Tim]
      var firstPerson = person[0];									// 返回 firstPerson = Jim
      var lastPerson = person[person.length - 1];   // 返回 lastPerson = Tim
      
    3. 遍历数组元素

      for 循环 / Array.foreach( ) 都可用来遍历数组

      var person , personNumber , personText , i;
      person = [Jim,Tom,Sam,Tim];
      personNumber = person.length;
      personText = "<ol>"
      for (i = 0 ; i < personNumber;i++ ) {
        personText += "<li>" + person[i] + "</li>";
      }
      text += "</ol>"
      
      
      
      var person , personText;
      person = [Jim,Tom,Sam,Tim];
      personText = "<ul>";
      person.forEach(myFunction);
      personText += "</ul>";
      document.getElementById("demo").innerHTML = personText;
      
      function myFunction(value){
        personText += "<li>" + value + "</li>";
      }
      
    4. push( ) 方法 和 length 属性 可向数组添加新元素;pop( ) 方法 从数组中删除最后一个元素

      var person = [Jim,Tom,Sam,Tim];
      person.push("Dom");      // 从数组最后添加一个元素"Dom"
      person.push();           // 返回 新数组的长度 5
      person[person.length] = "Xom";
      
      person.pop();          // 删除最后一个元素 “Xom”;返回被弹出的值"Xom"
      
    5. 关联数组

      很多编程元素支持命名索引的数组

      具有命名索引的数组被称为 关联素组(或散列)

      JavaScript 不支持 命名索引的数组

      在 JavaScript中, 数组只能使用 数字索引

      var person = [];
      person[0] = "Jim";
      person[1] = "Tom";
      person[2] = "Sam";
      var x = person.length;         // x = 3;
      var y = person[0];             // y = "Jim";
      
      // 若在JavaScript 中使用命名索引,JavaScript 会把数组重定义为标准对象
      // 之后,所有数组的方法和属性将产生非正确的结果
      
      var person = [];
      person["fistName"] = "Jim";
      person["secondName"] = "Tom";
      person["lastName"] = "Sam";
      var x = person.length;        // x = 0 ; 
      var y = person[0];            // y = undefined;(未定义)
      
    • 数组和对象的区别

      JavaScript 中 ,数组使用 数字索引 ; 对象使用 命名索引

      即 元素名为字符串(文本) 应该用对象;元素名为数字应该用数组

    1. 如何识别某个变量是否为数组
    • ECMAScript 5 定义了新方法 Array.isArray( ) ,返回布尔值判断

      Array.isArray(person);
      
    • 创建 isArray( ) 函数, 返回布尔值判断

      function isArray(person){
        return person.constructor.toString().indexOf("Array")> -1 ;
      }
      // 若对象原型包含单词"Array",则返回true
      
    • 若对象由给定的构造器创建,则 instanceof 运算符 返回 true

      var person = [Jim,Tom,Sam,Tim];
      person instanceof Array
      
    1. toString( ) / join( ) 方法 把数组转换为数组值的字符串

      var person = [Jim,Tom,Sam,Tim];
      person.toString();       // 返回 Jim,Tom,Sam,Tim  默认逗号分隔
      
      person.join("*");        // 返回 Jim * Tom * Sam * Tim  可指定分隔符
      

    17. JavaScript 数组综合

    位移元素

    位移与弹出等同,但处理首个元素而非最后一个

    1. shift ( ) 方法会删除首个数组元素 ,并把所有其它元素“位移”到更低的索引

      var person = [Jim,Tom,Sam,Tim];
      person.shift();       // 删除首个元素“Jim”,可返回被删除的元素“Jim”
      
    2. unshift( ) 方法(在开头) 向数组添加新元素,并“反向位移”旧元素

      var person = [Jim,Tom,Sam,Tim];
      person.unshift("Dom");   // 在person数组开头添加新元素“Dom”
      person.unshift();				// 返回新数组的长度 5
      

    拼接和删除元素

    1. delete 运算符 可删除数组中指定索引的元素的值, 而数组结构不变

      var person = [Jim,Tom,Sam,Tim];
      delete person[1];       // 把person数组中第二个元素“Tom”删除
      // 使用delete 会在数组中留下未定义(undefined)的空洞;请使用 pop() 或 shift()取而代之
      
    2. splice(param1 ,param2, param3 … ) 方法可用于向数组添加新项

      param1 定义应添加新元素的索引位置(拼接)

      param2 定义了应删除多少元素

      其余参数 定义需要添加的新元素值

      var person = [Jim,Tom,Sam,Tim];
      person.splice(1,1,"Dom","Xom");  // 删除"Tom",并在其后添加“Dom”和"Xom"
      

      通过 splice( ) 方法 删除指定元素,可避免出现未定义的空洞

      var person = [Jim,Tom,Sam,Tim];
      document.getElementById("demo1").innerHTML ="第二个人是:"+ person[1];
      person.splice(1,1);
      document.getElementById("demo2").innerHTML ="第二个人是:"+ person[1];
      
      // 元素id ="demo1" 返回"Tom"
      // 元素id =”demo2“ 返回"Sam"
      // 可以发现删除了”Tom“,原数组结构即数字索引发生了改变
      

    合并(连接)数组

    1. concat( ) 方法通过合并(连接) 现有数组来创建一个新数组

    改方法不会更改现有数组,而总是返回一个新数组 ; 且可使用任意数量的数组参数(合并多个数组)

    var arr1 = ["1","2","3"];
    var arr2 = ["4","5"];
    var arr3 = ["6","7","8"];
    var arr4 = ["9","10"];
    var arr0 = arr1.concat(arr2,arr3,arr4);    // 连接4个数组
    
    var arr5 = arr1.concat("6","7");
    // concat参数也可以是具体的元素值
    

    裁剪数组

    1. slice( param1 , param2 )