JavaScript - JavaScript网页编程（1）- 必掌握知识点 - #博学谷IT学习技术支持#

一、计算机基础

1. 编程语言

1. 计算机语言：机器语言、汇编语言、高级语言。

2. 编程语言：用于控制接计算机，如今通用的编程语言有两种形式：汇编语言和高级语言。

   1. 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
   2. 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

3. 编程语言和标记语言的区别

   1. 编程语言有很强的逻辑和行为能力。
   2. 标记语言（HTML）不用向计算机发出指令，常用于格式化和链接。它的存在是用来被读取的。

2. 计算机组成

1. 硬件——输入设备、输出设备、CPU、硬盘、内存

2. 软件——系统软件、应用软件

3. 数据存储单位

   bit < byte < KB < MB <GB <TB < …

   • 位（bit）：1bit可以保存一个 0 或者1（最小的存储单位）
   • 字节（Byte）：1B = 8b
   • 千字节（ KB）：1KB = 1024B
   • 兆字节（MB）：1MB = 1024KB
   • 吉字节（GB）：1GB = 1024MB
   • 太字节（TB）：1TB = 1024GB

4. 程序运行

   硬盘——>内存条——>CPU

   1. 打开某个程序时，先 从硬盘中把程序的代码加载到内存中

   2. CPU执行内存中的代码

      注意：之所以要内存的一个重要原因，是因为CPU运行太快了，如果只从硬盘中读数据，会浪费 CPU性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

二、JavaScript 初识

1. JavaScript 介绍

1. JavaScript

   • 是一种运行在客户端的脚本语言

   • 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行

   • 现在也可以基于Node.js 技术进行服务器端编程。

2. JavaScript的作用

   • 表单动态校验（最初的目的）

   • 网页特效

   • 服务端开发（Node.js）

   • 桌面程序（Electron）

   • App（Cordova）

   • 控制硬件-物联网（Ruff）

   • 游戏开发（cocos2d-js）

3. 浏览器执行 JS 简介

   • 浏览器分成两部分：渲染引擎和 JS 引擎

     • 渲染引擎

     • JS 引擎：也称为 JS 解释器。用来读取网页中的 JavaScript 代码，对其处理后运行，比如 chrome 浏览器的 V8

       JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

4. JS 的组成

   • ECMAScript（JavaScript、Jscript）：规定了JS的编程语法和基础核心只是，是所有浏览器厂商共同遵守的一套 JS 语法工业标准。

   • DOM：文档对象模型

   • BOM：浏览器对象模型

5. JS 书写位置

   • 行内式 JS

     • <input type="button" value="点我" onclick="alert('Hello World')" />
     • 注意单双引号的使用：在 HTML 中我们推荐使用双引号，JS 中我们推荐使用单引号

   • 内嵌式 JS

     • <script>
           alert('Hello World!');
       </script>
       

   • 外部 JS 文件

     • <script src="my.js"></script>

6. 注释

   • 单行注释：// ctrl + /
   • 多行注释：/* */ 默认 shift + alt + a ——> 设置更改为 shift + alt + /

7. JS 输入输出语句

   方法	说明	归属
   alert(msg)	浏览器弹出警示框	浏览器
   console.log(msg)	浏览器控制台打印输出信息	浏览器
   prompt(info)	浏览器弹出输出框，用户可以输入	浏览器

2. JavaScript 变量

1. 变量

   本质：变量是程序在内存中申请的一块用来存放数据的空间

2. 变量的使用

   1. 声明变量
      • var 变量名;
      • var 是一个 JS 关键字
   2. 赋值
   3. 变量的初始化
      • var age = 18; // 声明变量同时赋值为18
   4. 变量语法扩展
      1. 更新变量
         • 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
      2. 声明多个变量
         • var 变量名1 = 值1, 变量名2 = 值2, ...;
      3. 声明变量的特殊情况
         1. 只声明不赋值 ——> undefined
         2. 不声明不赋值，直接用 ——> 直接报错
         3. 不声明直接赋值使用 ——> 可以，但是不提倡，会变成全局变量
   5. 变量命名规范
      • 由字母、数字、下划线、美元符号组成
      • 严格区分大小写
      • 不能以数字开头，不能是关键字、保留字
      • 变量名必须有意义
      • 遵循驼峰命名法，首字母小写，后面单词的首字母需要大写。
      • 推荐翻译网站：有道 爱词霸
      • 注意：尽量不用name命名，name在有的浏览器中有特殊含义。

3. JavaScript 数据类型

1. 变量数据类型

   • JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会自动确定。
   • 根据 = 右边变量值的数据类型来判断
   • Javascript 拥有动态类型，同时也意味着相同的变量可作用不同的类型。

2. 数据类型分类

   1. 简单数据类型（Number，String，Boolean，Undefined，Null）

      • 简单数据类型	说明	默认值
        Number	数字型，包含 整型值和浮点型值，如 21、0.21	0
        Boolean	布尔值类型，如 true、false，等价于 1 和 0	false
        String	字符串类型，如 “张三” 注意 js 里面，字符串都带引号	“”
        Undefined	var a; 声明了变量 a 但是没有给值，此时 a = undefined	undefined
        Null	var a = null; 声明了变量 a 为空值	null

      • number

        • 八进制 0~7 我们程序里面数字前面加 0 表示八进制
        • 十六进制 0~9 a~f 数字前面加 0x 表示十六进制
        • 数字型的最大值console.log(Number.MAX_VALUE);
        • 数字型的最小值console.log(Number.MIN_VALUE);
        • 数字型三个特殊值
          • Infinity，代表无穷大，大于任何数值
          • -Infinity，代表无穷小，小于任何数值
          • NaN，Not a number，代表一个非数值
            • 方法 isNaN() 用于判断变量是否为非数字，返回 true 和 false

      • String

        • 字符串转义符

        • 转义符	解释说明
          \n	换行符，n 是 newline 的意思
          \\	斜杠
          \'	单引号
          \"	双引号
          \t	tab 缩进
          \b	空格，b 是 blank 的意思

        • 字符串长度：通过字符串的 length 属性可以获得

        • 字符串拼接：字符串 + 任何类型 ——> 拼接成字符串

      • Undefined

        • 拼接
          • undefined + str ——> str
          • undefined + number ——> NaN

      • Null

        • Null + str ——> str
        • Null + number ——> number

   2. 复杂数据类型（Object）

3. 获取变量数据类型

   • typeof 可用来获取检测变量的数据类型

     console.log(typeof 变量名)
     

4. 数据类型转换

   1. 转换为字符串

      方式	说明	案例
      toString()	转成字符串	var num=1; alert(num.toString());
      String()强制转换	转成字符串	var num=1; alert(String(num));
      加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+"我是字符串");

   2. 转换为数字型（重点）

      方式	说明	案例
      ❗parseInt(string)函数	将string 类型转成整数数值型	parseInt('78')
      ❗parseFloat(string)函数	将string 类型转成浮点数数值型	parseFloat('78.21')
      Number()强制转换函数	将string 类型转成数值型	Number('12')
      js 隐式转换（- * /）	利用算术运算隐式转换为数值型	‘12’ - 0

   3. 转换为布尔型

      方式	说明	案例
      Boolean()函数	其他类型转成布尔值	`Boolean(‘true’);

      • 代表空、否定的值会被转换为 false，如 ‘’、0、NaN、null、undefined
      • 其余值都会被转换为 true

5. 拓展阅读

   1. 编译和解释语言的区别

      编程语言—————>翻译器————>机器语言

      • 翻翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
        • 编译器是在代码执行之前进行编译，生成中间代码文件
        • 解释器实在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称之为解释器）

   2. 标识符、关键字、保留字

      1. 标识符：指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字和保留字。
      2. 关键字：是指 JS 本身已经使用了的字，不能再用它们充当变量名、方法名。
      3. 保留字：实际上就是预留的”关键字“，意思是现在虽然还不是关键字，但是未来可能成为关键字，同样不能使用它们当变量名或方法名。

4. JavaScript 操作符

1. 算数运算符

   运算符	描述
   +	加
   -	减
   *	乘
   /	除
   %	取余数（取模）

2. 浮点数的精度问题

   浮点数值的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数。

   所以：不要直接判断两个浮点数是否相等！

3. 前置、后置 递增/减 运算符（前置【先己后人】，后置【先人后己】）

   • ++ num，先自加1，后返回值

     var p = 10;
     console.log(++p + 10);			// 返回值 21
     

   • num ++，先返回原值，后自加1

     var p = 10;
     console.log(p++ + 10);			// 返回值 20
     consol.log(p);					// 返回值 11
     

   • 开发时，大多使用后置递增/减，并且代码独占人行。

4. 比较运算符

   运算符名称	说明
   <	小于
   >	大于
   >=	大于等于
   <=	小于等于
   ==	判断号**（有隐式转换，会把字符串型数据转换为数字型）**
   !=	不等号
   === !==	全等 要求 值 和 数据类型 都一致

5. 逻辑运算符

   逻辑运算符	说明
   &&	“逻辑与”，简称“与” and
   ||	“逻辑或”，简称“或” or
   !	“逻辑或”，简称“或” not

   • 短路运算（逻辑中断）

     短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

     • 逻辑与短路运算 &&

       • 表达式1 && 表达式2 如果表达式1为真，返回表达式2；表达式1为假，返回表达式1；

       console.log(0 && 1 + 2 && 456 * 12345555)// 判断第一个&&时，得到值为0，后面的就不用管了
       

     • 逻辑或短路运算 || （会影响程序运行结果）

       • 表达式1 || 表达式2 如果表达式1为真，返回表达式1；表达式1为假，返回表达式2；

6. 赋值运算符

   =、+=、-=、*=、/=、%=

7. 运算符优先级

   优先级	运算符	顺序
   1	小括号	()
   2	一元运算符	++ – !
   3	算数运算符	先 * / % 后 + -
   4	关系运算符	> >= < <=
   5	相等运算符	== != === !==
   6	逻辑运算符	先 && 后 ||
   7	赋值运算符	=
   8	逗号运算符	,

5. JavaScript 流程控制

1. if 分支语句

   if (条件表达式) {
       执行语句
   }
   

2. if-else 语句（双分支）

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

3. if-else if 语句（多分支）

   if (条件表达式1) {
       执行语句1
   } else if (条件表达式2) {
       执行语句2
   } else {
       执行语句3
   }
   

4. 三元表达式

   语法：条件表达式 ? 表达式1 : 表达式2

   如果条件表达式为真，返回表达式1；如果条件表达式为假，则返回表达式2的值；

5. 分支流程控制 switch 语句

   switch (表达式) {
       case value1:
           执行语句1;
           break;
       case value2:
           执行语句3;
           break;
       ...
       default:
           执行最后的语句;
   }
       
   

6. JavaScript 循环

1. for 循环

   for (初始化变量; 条件表达式; 操作表达式) {
       循环体
   }
   

2. while 循环

   计数器
   while (条件表达式) {
       循环体
       计数器加加
   }
   

3. do-while 循环

   do {
       循环体
   } while (条件表达式)
   

   • 与while循环不同的地方在于，do-while先执行一次循环体，在判断条件，如果体哦阿健表达式结果为真，则继续执行循环体，否则退出循环。

4. continue 和 break

   • continue 跳出本次循环，直接进入下次循环
   • break 直接跳出整个循环

5. 标识符命名规范

   • 变量、函数的命名必须要有意义
   • 变量的名称一般用名词
   • 函数的名称一般用动词

7. JavaScript 数组

1. 创建数组

   1. 利用 new 创建数组

      var 数组名 = new Array();
      var arr = new Array();	// 创建一个新的空数组
      

   2. 利用数组字面量创建数组

      // 1.使用数组字面量方式创建空的数组
      var 数组名 = [];
      // 2.使用数组字面量方式创建带初始值的数组
      var 数组名 = [1, '小黑', '小黄', true];
      

2. 获取数组元素

   1. 通过索引号获取

      数组名[索引号]

   2. 遍历数组

      使用 for 循环

3. 数组长度

   数组名.length

4. 数组中新增元素

   1. 通过修改 length 长度新增数组元素

      arr = ['blue','red','green'];
      console.log(arr.length);
      arr.length = 5;
      console.log(arr);
      

      新增的元素为 undefined

   2. 通过修改数组索引新增数组元素

      arr = ['blue','red','green'];
      arr[3] = 'pink';
      arr[0] = 'yellow';		// 这里是替换原来的数组元素
      

8. JavaScript 函数

1. 函数的使用

   1. 声明函数

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

   2. 调用函数

      函数名(实参1,实参2...);
      

2. 参数-形参和实参

   • 形参：形式上的参数，函数定义的时候，传递的参数，当前并不知道是什么
   • 实参：实际上的参数，函数调用的时候传递的参数，实参是传递给形参的
   • 函数形参实参个数匹配
     • 如果实参的个数和形参的个数一致，则正常输出结果
     • 如果实参的个数多余形参的个数，只取到形参的个数
     • 如果实参的个数小于形参的个数，多于的形参定义为 undefined，最终的结果就是 NaN

3. 函数的返回值

   • return 语句
     • return 语句后的代码不会被执行
     • return 只能返回一个值，返回的结果是最后一个值。（可以存入数组进行 return 返回）
     • 如果函数没有 return 则返回 undefined

9. JavaScript 作用域

1. arguments 的使用

   • 当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JS 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
   • arguments 展示形式是一个伪数组，因此可以进行遍历。
   • 伪数组的特性（并不是真正的数组）
     • 具有数组的 length 属性
     • 按照索引的方式进行存储的
     • 它没有真正数组的一些方法 如：pop()、push() 等等

2. 函数的两种声明方式

   1. 利用函数关键字自定义函数

      function fn() {
          
      }
      

   2. 函数表达式（匿名函数）

      var 变量名 = function(){};
      例:
      var fun = function() {
          console.log('我是函数表达式');
      }
      

      • fun 是变量名，不是函数名
      • 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数
      • 函数表达式也可以进行传递参数

3. 作用域

   1. js 的作用域（es6）之前：全局作用域、局部作用域 （es6 的时候新增的块级作用域【后期学习】）

      1. 全局作用域：整个 script 标签或者是一个单独的 js 文件
      2. 局部作用域（函数作用域）：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用

   2. 变量作用域：全局变量、局部变量

      1. 全局变量：在全局作用域下的变量

         注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量

      2. 局部变量：在局部作用域下的变量，或者在函数内部的变量就是局部变量

         注意：函数的形参也可以看作是局部变量

      3. 从执行效率来看全局变量和局部变量

         1. 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
         2. 局部变量，当我们程序执行完毕就会销毁，比较节约内存资源

   3. 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构称为作用域链

4. ❗❗预解析（面试考核点）

   1. js 引擎运行 js 分为两步：预解析 代码执行
      1. 预解析：js 引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面
      2. 代码执行：按照代码书写的顺序从上往下执行
   2. 预解析分为：变量预解析（变量提升） 和 函数预解析（函数提升）
      1. 变量提升：就是把所有的变量声明提升到当前作用域最前面，但不提升赋值操作。
      2. 函数提升：就是把所有的函数声明提升到当前作用域最前面，但不调用函数。

   var a = b = c =9;		// 相当于 var a = 9; b = 9; c = 9;（b，c是全局bi'a）
   var a = 9, b = 9, c = 9; // 相当于 var a = 9; var b = 9; var c = 9; 
   

10. JavaScript 对象

1. 对象

   • JS 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。
   • 对象时有属性和方法组成的
     • 属性：事物的特征，在对象中用属性来表示（常用名词）
     • 方法：事物的行为，在对象中用方法来表示（常用动词）
   • 变量、属性、函数、方法总结
     • 变量：单独声明赋值，单独存在
     • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
     • 函数：单独存在的，通过“函数名()”的方式就可以调用
     • 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能

2. 创建对象

   1. 利用字面量创建对象

      • 对象字面量：就是花括号 {} 里面包含了表达这个具体事物（对象）的属性和方法

        // var obj = {}; // 创建了一个空的对象
        var obj = {
            uname: 'jack',
            age: 18,
            sex: '男',
            sayHi: function() {
                console.log('hi!');
            }
        } 
        

        • 里面的属性或者方法我们采用键值对的形式
        • 多个属性或者方法中间用都好隔开的
        • 方法冒号后面跟的是一个匿名函数

   2. 利用 new Object 创建对象

      // var obj = new Object(); // 创建了一个空的对象
      obj.uname = 'jack';
      obj.age = 18;
      obj.sex = '男';
      obj.sayHi = function() {
          console.log('hi!');
      }
      

   3. 利用构造函数创建对象（前两种创建对象的方法一次只能创建一个对象）【利用函数的方法】

      // 利用构造函数创建对象
      // 构造函数的语法格式
      function 构造函数名() {
          this.属性 = 值;
          this.方法 = function() {}
      }
      
      new 构造函数名();
      

3. new 关键字执行过程

   1. new 构造函数可以在内存中创建了一个空的对象
   2. this 就会指向刚才创建的空对象
   3. 执行构造函数里面的代码，给这个空对象添加属性和方法
   4. 返回这个对象（因此不需要 return）

4. 遍历对象

   for in 遍历我们的对象

   for (var k in obj) {
       console.log(k);	// 得到的是 属性名
       console.log(obj[k]); // 得到的是 属性值
   }
   // 我们使用 for in 里面的变量我们喜欢写 k 或者 key
   

11. JavaScript 内置对象

1. 内置对象

• JavaScript 中的对象分为 3 种：自定义对象、内置对象、浏览器对象
• 内置对象 就是指 JS 自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能

2. 查阅 MDN 文档

• 学习方法：
  • 查阅该方法的功能
  • 查看里面参数的意义和类型
  • 查看返回值的意义和类型
  • 通过 demo 进行测试

3. Math 对象

• Math.abs()

• Math.floor()

• Math.ceil()

• Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊，它往大了取

• Math.random() 返回一个随机小数 [0,1)

  function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
  }
  

4. 日期对象

• Date() 是一个 构造函数 必须使用 new 来调用创建我们的日期对象

  var date = new Date();
  // 1. 如果没有参数 返回当前系统的当前时间
  console.log(date);
  // 2. 参数常用的写法 数字型 2020，10，01   或者是 字符串型 ‘2020-10-1 8：8：8’
  var date1 = new Date(2020, 10, 1);
  console.log(date1);		// 返回的是 11 月 不是 10月
  var date2 = new Date('2020-10-1 8:8:8');
  console.log(date2);		// 返回 10 月
  

• 日期格式化

  方法名	说明
  getFullYear()	获取当年
  getMonth()	获取当月（0-11）
  getDate()	获取当天日期
  getDay()	获取星期几（周日 0 到周六 6）
  getHours()	获取当前小时
  getMinutes()	获取当前分钟
  getSeconds()	获取当前秒钟

• 获得 Date 总的毫秒数（不是当前时间的毫秒数，而是近距离 1970年1月1日过了多少毫秒数）

  1. 通过 valueOf() getTime()

     var date = new Date();
     console.log(date.valueOf());
     console.log(date.getTime());
     

  2. 简单写法

     var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
     

  3. H5 新增 获得总的毫秒数

     console.log(Date.now());
     

5. 数组对象

1. 利用数组字面量

   var arr = [1,2,3];
   console.log(arr[0]);
   

2. 利用 new Array()

   var arr = new Array()
   var arr1 = new Array(2);	// 这个 2 表示 数组的长度为 2，里面有 2 个空的数组元素
   var arr2 = new Array(2,3);	//等价于 [2,3] 里面有 2 个数组元素 2和3
   

3. 检测是否为数组

   1. instanceof 运算符

var arr = [];
console.log(arr instanceof Array); // true

   2. `Array.isArray()` H5 新增的方法 ie9 以上版本支持

```js
var arr = [];
console.log(Array.isArray(arr));		// true

4. 添加删除数组元素

   1. push() 在我们数组的末尾，添加一个或者多个数组元素

var arr = [1,2,3];
// arr,push(4, ‘pink’)
console.log(arr,push(4, ‘pink’)); // push 完毕之后，返回的结果是新数组的长度
console.log(arr); // [1,2,3, 4, ‘pink’]

​			1. push() 参数直接写数组元素就可以了

​			2. push完毕之后，返回的结果是新数组的长度

​			3. 原数组也会发生变化

   2. unshift() 在我们数组的开头，添加一个或者多个数组元素

```js
var arr = [1,2,3];
arr.unshift('red');
console.log(arr);	// ['red', 1,2,3]

​ 1. unshift() 参数直接写数组元素就可以了

​ 2. unshift 完毕之后，返回的结果是新数组的长度

​ 3. 原数组也会发生变化

  3. 添加删除数组元素的方法

方法名	说明	返回值
push()	末尾添加一个或者多个数组元素，注意修改原数组	返回新的长度
pop()	删除数组最后一个元素，把数组长度减 1 无参数、修改原数组	返回删除的那个元素
unshift()	开头添加一个或者多个数组元素，注意修改原数组	返回新的长度
shift()	删除数组的第一个元素，数组长度减 1 无参数、修改原数组	返回删除的那个元素

5. 数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

// 1. 反转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);

// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a,b) {
   // return a - b;	// 升序的顺序排列
    return b - a;	// 降序的顺序排列
})
console.log(arr1);

6. 数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	存在则返回索引号，不存在返回 -1
lastIndexOf()	在数组种的最后一个的索引	存在则返回索引号，不存在返回 -1

var arr = ['pink', 'red', 'blue', 'blue'];
console.log(arr.indexOf('blue'));		// 返回2 ，只返回第一个的索引
console.log(arr.lastIndexOf('blue'));	// 返回3 ，倒着查，但索引仍是正序

7. 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

var arr = [1,2,3];
console.log(arr.toString());	// 1,2,3
var arr1 = ['pink', 'red', 'blue'];
console.log(arr1.join());	// pink,red,blue
console.log(arr1.join('-'));	// pink-red-blue
console.log(arr1.join('&'));	// pink&red&blue

12. JavaScript 简单类型和复杂类型

对象才有属性和方法 复杂数据类型才有属性和方法

1. 基本包装类型

• 就是把简单数据类型包装成为了复杂数据类型，这样基本数据类型就有了属性和方法

• 操作步骤

  • 把简单数据类型包装成为了复杂数据类型
  • 把临时变量的值给 str
  • 销毁这个临时变量

2. 字符串对象

1. 字符串是不可变的

   • 字符串拼接，相当于在内存中重新开辟了一个新资源进行指向
   • 所以不要重复的拼接字符串

2. 根据字符返回位置

   方法名	说明
   indexOf('要查找的字符', 开始的位置)	返回指定内容在原字符串中的位置，如果找不到就返回 -1，开始的位置是index 索引号
   lastIndexOf()	从那个后往前找，只找第一个匹配的

3. 根据位置返回字符（重点）

   方法名	说明	使用
   charAt(index)	返回指定位置的字符（index 字符串的索引号）	str.charAt(0)
   charCodeAt(index)	获取指定位置处字符串的ASCII码（index 索引号）	str.charCodeAt(0)
   str[index]	获取指定位置处字符	HTML5，IE8+支持 和 charAt()等效

4. 字符串操作方法（重点）

   方法名	说明
   concat(str1, str2, str3...)	concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
   substr(start, length)	从start位置开始（索引号），length 取的个数 （重点记住这个）
   slice(start, end)	从start位置开始，截取到end位置，end取不到（他们俩都是索引号）
   substring(start, end)	从start位置开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值