JavaScript

2021-11-02  本文已影响0人  鱼来鱼往0709

===========part1=============

JavaScript

1.1 JavaScript 是什么

1.2 JavaScript的作用

1.3 浏览器执行 JS 简介

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

1.渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的blink，老版本的webkit
2.JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.4 JS 的组成

图片11.png

  1. ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

图片12.png

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

更多参看MDN: MDN手册

  1. DOM——文档对象模型

         **文档对象模型**（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

  2. BOM——浏览器对象模型

         **浏览器对象模型**(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.5 JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部。
  1. 行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />

  1. 内嵌式

    <script>
    alert('Hello  World~!');
</script>
    • 可以将多行JS代码写到 script 标签中
    • 内嵌 JS 是学习时常用的方式

  2. 外部JS文件

    <script src="my.js"></script>
    • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
    • 引用外部 JS文件的 script 标签中间不可以写代码
    • 适合于JS 代码量比较大的情况

2 JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

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

3 变量的概念

3.1 什么是变量

变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。

3.2 变量在内存中的存储

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

4 - 变量的使用

4.1 声明变量

//  声明变量  
var age; //  声明一个 名称为age 的变量

4.2 赋值

age = 10; // 给 age  这个变量赋值为 10

4.3 变量的初始化

var age  = 18;  // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。

4.4 变量语法扩展

4.5 变量命名规范

规则：

5 - 数据类型

5.1 数据类型简介

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

5.2 简单数据类型

简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：


  1. 数字型三个特殊值

    • Infinity ，代表无穷大，大于任何数值

    • -Infinity ，代表无穷小，小于任何数值

    • NaN ，Not a number，代表一个非数值

  2. isNaN

    用来判断一个变量是否为非数字的类型，返回 true 或者 false


  var usrAge = 21;
var isOk = isNaN(userAge);
  console.log(isNum);          // false ，21 不是一个非数字
var usrName = "andy";
  console.log(isNaN(userName));// true ，"andy"是一个非数字

5.3 获取变量数据类型

5.4 数据类型转换

什么是数据类型转换？

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

6 - 解释型语言和编译型语言

6.1 概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

6.2 执行过程

图片23.png

7 - 关键字和保留字

7.1 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

7.2 关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

7.3 保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

===========part2=============

1 运算符（操作符）

1.1 运算符的分类

    **运算符**（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：
- 算数运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符

1.2 算数运算符

1.3 递增和递减运算符

1.4 比较运算符

1.5 逻辑运算符

      console.log( 123 && 456 );        // 456
      console.log( 0 && 456 );          // 0
      console.log( 123 && 456&& 789 );  // 789

     console.log( 123 || 456 );         //  123
     console.log( 0 ||  456 );          //  456
     console.log( 123 || 456 || 789 );  //  123

1.6 赋值运算符

    概念：用来把数据赋值给变量的运算符。

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

1.7 运算符优先级

2 - 流程控制

2.1 流程控制概念

    在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

    简单理解：流程控制就是来控制代码按照一定结构顺序来执行

    流程控制主要有三种结构：顺序结构、分支结构、循环结构

2.2 顺序流程控制

2.3 分支流程控制

2.4 三元表达式

2.5 switch分支流程控制

switch( 表达式 ){ 
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }

===========part3=============

1 - 循环

1.1 for循环

for(初始化变量; 条件表达式; 操作表达式 ){
      //循环体
  }
名称 作用
初始化变量 通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

执行过程：

  1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
  1. 执行操作表达式，此时第一轮结束。
  2. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
  3. 继续执行操作表达式，第二轮结束。
  4. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

断点调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

//  基本写法
  for (var i = 1; i <= 100; i++) {
    console.log('这个人今年' + i + '岁了');
  }

例如，求输出1到100岁，并提示出生、死亡

// for 里面是可以添加其他语句的 
  for (var i = 1; i <= 100; i++) {
   if (i == 1) {
      console.log('这个人今年1岁了， 它出生了');
   } else if (i == 100) {
      console.log('这个人今年100岁了，它死了');
    } else {
         console.log('这个人今年' + i + '岁了');
    }
  }

for循环因为有了计数器的存在，还可以重复的执行某些操作，比如做一些算术运算。

1.2 双重for循环

  for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
      for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
         需执行的代码;
     }
  }

  var star = '';
  for (var j = 1; j <= 3; j++) {
      for (var i = 1; i <= 3; i++) {
        star += '☆'
      }
      // 每次满 5个星星 就 加一次换行
      star += '\n'
  }
  console.log(star);

核心逻辑：

1.内层循环负责一行打印五个星星

2.外层循环负责打印五行

1.3 while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

注意：

1.4 do-while循环

do... while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

1.5 continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

运行结果：


break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

  for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

运行结果：


2 - 代码规范

2.1 标识符命名规范

2.2 操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
}

2.3 单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

===========part4=============

1 - 数组

1.1 数组的概念

1.2 创建数组

JS 中创建数组有两种方式：

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

注意 Array () ，A 要大写

1.3 获取数组中的元素

    索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。


    数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

1.4 遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

1.5 数组中新增元素

    数组中可以通过以下方式在数组的末尾插入新元素：

  数组[ 数组.length ] = 新数据;

2 - 函数

2.1 函数的概念

    在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

    函数：就是**封装了一段可被重复调用执行的代码块**。通过此代码块可以**实现大量代码的重复使用**。

2.2 函数的使用

声明函数

// 声明函数
function 函数名() {
    //函数体代码
}

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

函数的封装

例子：封装计算1-100累加和


/* 
   计算1-100之间值的函数
*/
// 声明函数
function getSum(){
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

2.3 函数的参数

函数参数语法

参数 说明
形参 形式上的参数 函数定义的时候传递的参数，当时并不知道是什么
实参 实际上的参数 函数调用的时候传递的参数，实参是传递给形参的 
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

函数参数的运用：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
  1. 调用的时候实参值是传递给形参的
  2. 形参简单理解为：不用声明的变量
  3. 实参和形参的多个参数之间用逗号（,）分隔

函数形参和实参数量不匹配时

参数个数 说明
实参个数等于形参个数 输出正确结果
实参个数大于形参个数 只取到形参的个数
实参个数小于形参个数 多的形参定义为undefined，结果返回NaN 
注意：在JavaScript中，形参的默认值是undefined。

小结：

2.4 函数的返回值

return 语句

返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

break ,continue ,return 的区别

2.5 arguments的使用

    当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

2.6 函数案例

    函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行。

2.7 函数的两种声明方式

===========part5=============

1 - 作用域

1.1 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

1.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

1.4 JS没有块级作用域

Js中没有块级作用域（在ES6之前）

if(true){
  var num = 123;
  console.log(num); //123
}
console.log(num);   //123

2 - 变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

2.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

2.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

2.3 全局变量和局部变量的区别

3 - 作用域链

只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在[内部函数可以访问外部函数变量]的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

案例分析1：

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

作用域链：采取就近原则的方式来查找变量最终的值。

var a = 1;
function fn1() {
    var a = 2;
    var b = '22';
    fn2();
    function fn2() {
        var a = 3;
        fn3();
        function fn3() {
            var a = 4;
            console.log(a); //a的值 ?
            console.log(b); //b的值 ?
        }
    }
}
fn1();

4 - 预解析

4.1 预解析的相关概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

4.2 变量预解析

预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是多少？
var num = 10;      // ？

结果：undefined

注意：**变量提升只提升声明，不提升赋值**

4.3 函数预解析

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();
function fn() {
    console.log('打印');
}

结果：控制台打印字符串 --- ”打印“

注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

4.4 函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('想不到吧');
}

结果：报错提示 ”fn is not a function"

解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

5 - 对象

5.1 对象的相关概念

5.2 创建对象的三种方式

方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器

===========part6=============

1 - 内置对象

1.1 内置对象

     JavaScript 中的对象分为3种：**自定义对象 、内置对象、 浏览器对象**
    前面两种对象是JS 基础 内容，属于 ECMAScript；  第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是**最基本而必要的功能**（属性和方法），内置对象最大的优点就是帮助我们快速开发

    JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

1.2 查文档

    查找文档：学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
    Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
    MDN:https://developer.mozilla.org/zh-CN/

1.3 Math对象

    Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
属性、方法名 功能
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值 
注意：上面的方法使用时必须带括号

**获取指定范围内的随机整数**：

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

1.4 日期对象

    Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间
方法名 说明 代码
getFullYear() 获取当年 dObj.getFullYear()
getMonth() 获取当月(0-11) dObj.getMonth()
getDate() 获取当天日期 dObj.getDate()
getDay() 获取星期几(周日0到周六6) dObj.getDay()
getHours() 获取当前小时 dObj.getHours()
getMinutes() 获取当前分钟 dObj.getMinutes()
getSeconds() 获取当前秒钟 dObj.getSeconds()

1.5 数组对象

创建数组的两种方式

检测是否为数组

添加删除数组元素的方法

数组排序

注意：sort方法需要传入参数来设置升序、降序排序

数组索引方法

数组转换为字符串

注意：join方法如果不传入参数，则按照 “ , ”拼接元素

其他方法

1.6 字符串对象

基本包装类型

    为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

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

// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);

    按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为

    js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

字符串的不可变

    指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

    当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
    由于字符串的不可变，在**大量拼接字符串**的时候会有效率问题

根据字符返回位置

    字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：
方法名 说明
indexOf('要查找的字符', 开始的位置) 返回指定内容在原字符串中的位置，找不到返回-1，开始位置是index索引号
lastIndexOf() 从后往前找，只找第一个匹配的 
    案例：查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
  1. 先查找第一个o出现的位置
  2. 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
  3. 因为indexOf 只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

根据位置返回字符

    字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：
方法名 说明 使用
charAt(index) 返回指定位置的字符(index字符串的索引号) str.charAt(0)
charCodeAt(index) 获取指定位置处字符ASCII码(index索引号) str.charCodeAt(0)
str[index] 获取指定位置处字符 HTML5，IE8+支持 和charAt()等效 
    在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

    例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

  1. 核心算法：利用 charAt(） 遍历这个字符串

  2. 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1

  3. 遍历对象，得到最大值和该字符

    注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数

字符串操作方法

    字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：
方法名 说明
concat(str1, str2, str3...) concat()方法用于连接两个或多个字符串。拼接字符串，等效于+，+更常用
substr(start, length) 从start位置开始(索引号)，length取的个数 重点记住这个
slice(start, end) 从start位置开始，截取到end位置，end取不到(他们俩都是索引号)
substring(start, end) 从start位置开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值

replace()方法

    replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：  

字符串.replace(被替换的字符串， 要替换为的字符串)；

split()方法

    split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

    其使用格式如下：

字符串.split("分割字符")

2 - 简单数据类型和复杂数据类型

2.1 简单数据类型

    **简单类型**（**基本数据类型**、**值类型**）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null

2.2 复杂数据类型

    **复杂数据类型（引用类型）**：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

2.3 堆栈

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。


2.4 简单类型传参

    函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a) {
    a++;
    console.log(a); 
}
var x = 10;
fn(x);
console.log(x)；

    运行结果如下：

2.5 复杂数据类型传参

    函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?  

    运行结果如下：
上一篇下一篇

猜你喜欢

热点阅读