JavaScript基础中作用域的知识点

1.作用域： 就是代码的名字（变量）在某个范围内起效果和作用，目的是为了提高程序的可靠性，更重要的是减少命名冲突
（1）JavaScript（es6前）中的作用域有两种：
①全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
②局部作用域（函数作用域）：作用于函数内的代码环境，就是局部作用域。 这个代码的名字只在函数内部其效果和作用。因为跟函数有关系，所以也称为函数作用域
eg：

function fn（）{
var num=10;
console.log(num);
//局部作用域
}

（2）JS没有块级作用域： 块作用域由 { } 包括。
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

// java有块级作用域：
if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错

以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；而与之类似的JavaScript代码，则不会报错。Js中没有块级作用域（在ES6之前）

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

2. 变量的作用域
在JavaScript中，根据作用域的不同，变量可以分为两种：全局变量和局部变量
（1）全局变量：在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
全局变量在代码的任何位置都可以使用， 在全局作用域下 var 声明的变量是全局变量， 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）。
eg:

function fun(){
var num=10;//num是局部变量，只能在函数内部使用
num1=20;//在函数内不使用 var 声明的变量也是全局变量
}
fun();
console.log(num1);//20

（2）局部变量：在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量），局部变量只能在该函数内部使用，在函数内部 var 声明的变量是局部变量，函数的形参实际上就是局部变量。
（3）从执行效率来看全局变量和局部变量的区别：
全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存。
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。
3.作用域链： 只要是代码都在一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在 内部函数可以访问外部函数变量 的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。作用域链：采取就近原则的方式来查找变量最终的值。

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

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的值4 
            console.log(b); //b的值 22
        }
    }
}
fn1();

4.预解析： JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 js代码的时候分为两步：预解析和代码执行。
①预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中提升到当前作用于的最前面。预解析会把变量和函数的声明在代码执行之前执行完成。
②代码执行： 按照代码书写的顺序从上到下执行JS语句。
（1）变量预解析：预解析也叫做变量、函数提升。 变量的声明会被提升到当前作用域的最前面，变量的赋值不会提升。

console.log(num);  
var num = 10;      // 结果是undefined
//相当于执行了以下代码：
var num;
console.log(num);
num=10;

注意：变量提升只提升声明，不提升赋值
（2）函数预解析(函数提升)： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();
function fn() {
    console.log(22);//结果：22 
}
//相当于执行了以下代码
function fn() {
    console.log(22);
}
fn();

注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！
（3） 函数表达式声明函数问题:函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('???');//结果：报错提示 "fn is not a function"
}
//相当于执行了以下代码
var fn;
fn();
fn=function(){
console.log('???')
}

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

 // 预解析案例
        // 案例1
         var num = 10;
         fun();
         function fun() {
       console.log(num);
        var num = 20;
         }
        //  相当于执行了以下操作
        var num; //这个是var num=10
         function fun() {
         var num;//这个是var num=20
        console.log(num);
        num = 20;
         }
         num = 10;
         fun();
         //结果：undefined
        // 案例2
        var num = 10;
        function fn() {
        console.log(num);//结果：undefined
        var num = 20;
        console.log(num);//结果：20
         }
        fn();
        //  相当于以下代码
         var num;
         function fn() {
         var num;
         console.log(num);
         num = 20;
         console.log(num);
         }
         num = 10;
         fn();
        //  案例3
         var a = 18;
         f1();
         function f1() {
         var b = 9;
         console.log(a);//结果：undefined
         console.log(b);//结果：9
        var a = '123';
         }
         相当于以下代码
         var a;
         function f1() {
         var b;
         var a;
        b = 9;
        console.log(a);
        console.log(b);
       a = '123';
         }
        a = 18;
         f1();
        // 案例4
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 以下代码
         function f1() {
         var a;
        a = b = c = 9;
        // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明当全局变量看
        // 集体声明  var a = 9, b = 9, c = 9;
       console.log(a);//9
       console.log(b);//9
       console.log(c);//9
         }
        f1();
         console.log(c);//9
         console.log(b);//9
        console.log(a);//结果：报错提示

5.对象: 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为或者动作，在对象中用方法来表示（常用动词）
(1)利用对象字面量创建对象 {}
var obj = {}; // 创建了一个空的对象
① 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
② 多个属性或者方法中间用逗号隔开的
③ 方法冒号后面跟的是一个匿名函数
(2) 使用对象
① 调用对象的属性 我们采取 对象名.属性名 ，我们理解为的 console.log(obj.uname);
② 调用属性还有一种方法 对象名['属性名']我们理解为的console.log(obj['age']);
③ 调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号obj.sayHi();
JS中的对象表达结构更清晰，更强大，使用利用字面量创建对象 记录一组数据为：

//  
var obj = {
    "uname":"yingaying",
    "sex":"女",
    "age":128,
    "height":170,
     sayHi: function() {
                  console.log('hi~');
              }
}

（2）变量、属性、函数、方法总结：
属性是对象的一部分，而变量不是对象的一部分，变量是单独存储数据的容器
①变量：单独声明赋值，单独存在
②属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
③方法：对象里面的函数称为方法，方法不需要声明，使用对象.方法名()的方式就可以调用，方法用来描述该对象的行为和功能。方法是对象的一部分，函数不是对象的一部分，函数是单独封装操作的容器
④ 函数：单独存在的，通过函数名()的方式就可以调用
（3）利用 new Object 创建对象

//通过内置构造函数Object创建对象，此时andy变量已经保存了创建出来的空对象
  var andy = new Object();
  //通过对象操作属性和方法的方式，来为对象增加属性和方法
  andy.name = '你好';
  andy.age = 18;
  andy.sex = '男';
  andy.sayHi = function(){
  alert('大家好啊~');
    // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
    // (2) 每个属性和方法之间用 分号结束
      console.log(obj.uname);
      console.log(obj['sex']);
      obj.sayHi();

注意： Object() ：第一个字母大写 new Object() ：需要 new 关键字，使用的格式：对象.属性 = 值;
构造函数的封装格式：

      function 构造函数名(形参1,形参2,形参3) {
           this.属性名1 = 参数1;
           this.属性名2 = 参数2;
           this.属性名3 = 参数3;
           this.方法名 = 函数体;
      }
//构造函数的调用格式
 var obj = new 构造函数名(实参1，实参2，实参3)

 // 利用构造函数创建对象
        // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sing) {
                console.log(sing);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('忘情水');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('祝福')
        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this

以上代码中，obj即接收到构造函数创建出来的对象。
注意事项：
① 构造函数约定首字母大写。
② 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
③构造函数中不需要 return 返回结果。
④当我们创建对象的时候，必须用 new 来调用构造函数。
构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类，类似于java语言中的类（class）
对象：特指某一个具体的事物，通过 new 关键字创建对象的过程我们也称为对象实例化
（4）new关键字的作用
①在构造函数代码开始执行之前，创建一个空对象；
②修改this的指向，把this指向创建出来的空对象；
③执行构造函数的代码，给这个新对象添加属性和方法；
④返回这个新对象（所以构造函数里面不需要return）
6.遍历对象
for...in 语句用于对数组或者对象的属性进行循环操作。

for (变量 in 对象名字) {
      // 在此执行代码
  }
var obj = {
                name: '你好',
                age: 18,
                sex: '男',
                fn: function() {}
            }
语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
      console.log(k);      // 这里的 k 是属性名
      console.log(obj[k]); // 这里的 obj[k] 是属性值
  }

7.内置对象： JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象，前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发，JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
（1） 查文档： 学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
（2）Math对象： Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

注意：上面的方法使用时必须带括号

 // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);//3.141592653
        console.log(myMath.max(1, 6, 3));//6
        console.log(myMath.min(1, 6, 3));//1
//获取指定范围内的随机整数,并且包括两个数在内
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}
console.log(getRandom(1, 10));
// 随机点名  
var arr = ['张三', '王五', '赵柳', '李四', '李思思', '你好'];
console.log(arr[getRandom(0, arr.length - 1)]);

// 猜数字游戏
        // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
        // 2.需要一直猜到正确为止，所以需要一直循环。
        // 3.while 循环更简单
        // 4.核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);
        while (true) { // 死循环
            var num = prompt('你来猜？ 输入1~10之间的一个数字');
            if (num > random) {
                alert('你猜大了');
            } else if (num < random) {
                alert('你猜小了');
            } else {
                alert('太棒了，猜对了');
                break; // 退出整个循环结束程序
            }
        }
        //1-10
        function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var random = getRandom(1, 10);
    for (i = 2; i >= 0; i--) {
      var num = prompt('你有3次机会,猜1~10之间的一个数');
      if (num > random) {
        alert('你猜大了' + '\n你还剩' + i + '次机会');
      } else if (num < random) {
        alert('你猜小了' + '\n你还剩' + i + '次机会');
      } else {
        alert('恭喜你猜对啦!' + '\n答案就是' + random);
        break;
      }
    }

（3）日期对象: Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。Date 实例用来处理日期和时间, 获取当前时间必须实例化：

 var now = new Date();

如果创建实例时并未传入参数，则得到的日期对象是当前时间对应的日期对象,使用Date实例的方法和属性
通过Date实例获取总毫米数，不是当前时间的毫秒数，是距离1970年1月1日（世界标准时间）过了多少的毫秒数

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

// 倒计时效果
        // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
        // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        // 转换公式如下： 
        //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
        //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
        //  m = parseInt(总秒数 /60 %60 );     //   计算分数
        //  s = parseInt(总秒数%60);            //   计算当前秒数
        function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2022-10-1 18:00:00'));
        var date = new Date();
        console.log(date);

（4）数组对象

        // 创建数组的两种方式
        // 1. 利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);

        // 2. 利用new Array()
        // var arr1 = new Array();  // 创建了一个空的数组
        // var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 
        var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
        console.log(arr1);

注意：上面代码中arr1创建出的是一个空数组，如果需要使用构造函数Array创建非空数组，可以在创建数组时传入参数
参数传递规则如下：

- 如果只传入一个参数，则参数规定了数组的长度

- 如果传入了多个参数，则参数称为数组的元素

检测是否为数组：
①instanceof 运算符： 可以判断一个对象是否是某个构造函数的实例

   var arr = [1, 23];
    var obj = {};
    console.log(arr instanceof Array); // true
    console.log(obj instanceof Array); // false

②Array.isArray()：用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

添加删除数组元素的方法： 数组中有进行增加、删除元素的方法，部分方法如下表
注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

        // 添加删除数组元素方法
        // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
        var arr = [1, 2, 3];
        // arr.push(4, '你好');
        console.log(arr.push(4, '你好'));

        console.log(arr);
        // (1) push 是可以给数组追加新的元素
        // (2) push() 参数直接写 数组元素就可以了
        // (3) push完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化
        // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
        console.log(arr.unshift('red', 'purple'));

        console.log(arr);
        // (1) unshift是可以给数组前面追加新的元素
        // (2) unshift() 参数直接写 数组元素就可以了
        // (3) unshift完毕之后，返回的结果是 新数组的长度 
        // (4) 原数组也会发生变化

        // 3. pop() 它可以删除数组的最后一个元素  
        console.log(arr.pop());
        console.log(arr);
        // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        // (2) pop() 没有参数
        // (3) pop完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化
        // 4. shift() 它可以删除数组的第一个元素  
        console.log(arr.shift());
        console.log(arr);
        // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        // (2) shift() 没有参数
        // (3) shift完毕之后，返回的结果是 删除的那个元素 
        // (4) 原数组也会发生变化

 // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                // newArr[newArr.length] = arr[i];
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);

数组排序： 数组中有对数组本身排序的方法，部分方法如下表
注意：sort方法需要传入参数来设置升序、降序排序。 如果传入function(a,b){ return a-b;}，则为升序；如果传入function(a,b){ return b-a;}，则为降序

 // 数组排序
        // 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);

数组索引方法： 数组中有获取数组指定元素索引值的方法，部分方法如下表

// 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
        // 它只返回第一个满足条件的索引号 
        // 它如果在该数组里面找不到元素，则返回的是 -1  
        // var arr = ['red', 'green', 'blue', 'purple', 'blue'];
        var arr = ['red', 'green', 'pink'];
        console.log(arr.indexOf('blue'));
        // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
        var arr = ['red', 'green', 'blue', 'purple', 'blue'];

        console.log(arr.lastIndexOf('blue')); // 4

数组去重

// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
        // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
        // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
        // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
        // 封装一个 去重的函数 unique 独一无二的 
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
       var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
        console.log(demo);

数组转换为字符串： 数组中有把数组转化为字符串的方法，部分方法如下表
注意：join方法如果不传入参数，则按照 , 拼接元素

         // 数组转换为字符串 
        // 1. toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString()); // 1,2,3
        // 2. join(分隔符) 
        var arr1 = ['green', 'blue', 'purple'];
        console.log(arr1.join()); // green,blue,purple
        console.log(arr1.join('-')); // green-blue-purple
        console.log(arr1.join('&')); // green&blue&purple

其他方法：
（5）字符串对象
基本包装类型： 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

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

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

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

字符串的不可变： 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。由于字符串的不可变，在大量拼接字符串的时候会有效率问题
根据字符返回位置： 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

根据位置返回字符： 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：
在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码

  // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));
        // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }
        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); // 97
        // 3. str[index] H5 新增的
        console.log(str[0]); // a

 // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if (o['sex']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');

        }

        //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);

注意：在遍历的过程中，把字符串中的每个字符作为对象的属性存储在对象总，对应的属性值是该字符出现的次数
字符串操作方法： 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法

     // 字符串操作方法
    // 1. concat('字符串1','字符串2'....)
    var str = 'angle';
    console.log(str.concat('red'));
    // 2. substr('截取的起始位置', '截取几个字符');
    var str1 = '今天阳光明媚春意盎然';
    console.log(str1.substr(2, 2)); //结果：阳光  第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

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

 //替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
        var str = 'angleangle';
        console.log(str.replace('a', 'b'));
        // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 * 可以用来屏蔽敏感词
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

split()方法： 用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。其使用格式如下：字符串.split("分割字符")

   // 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
    var str2 = 'red, pink, blue';
    console.log(str2.split(','));
    var str3 = 'red&pink&blue';
    console.log(str3.split('&'));

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

  // 简单数据类型 null  返回的是一个空的对象  object 
    var timer = null;
    console.log(typeof timer);
    // 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 
    // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
    // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据

// 简单数据类型传参
        function fn(a) {
            a++;
            console.log(a);
        }
        var x = 10;
        fn(x);
        console.log(x);

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

   // 复杂数据类型传参
        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. 这个输出什么 ?   张学友

（3） 堆栈
栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
简单数据类型的存储方式： 值类型变量的数据直接存放在变量（栈空间）中
复杂数据类型的存储方式： 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
（4）简单类型传参：函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

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

运行结果如下：
（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. 这个输出张学友 

运行结果如下：