作用域

• 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
• JS的作用域（es6之前）分为：全局作用域和局部作用域。
• 全局作用域：整个script标签或者是一个单独的JS文件。
• 局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部其效果和作用。

变量的作用域

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

• 全局变量：在全局作用域下用 var 声明的变量，在全局作用域下都可以使用。
• 注意事项（1）：如果在函数内部没有声明直接赋值的变量也属于全局变量。

    <script>function fun() {num = 10;}fun();console.log(num);</script>

• 局部变量：在局部作用域下用 var 声明的变量，只在函数内部使用。
• 注意事项（2）：函数的形参也可以看做是局部变量。
• 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。
• 局部变量在我们程序执行完毕就会销毁，比较节约内存资源。
• JS 在 es6 版本新增了块级作用域。

作用域链

• 只要是代码，就至少有一个作用域。
• 写在函数内部的局部作用域。
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找哪些数据能被内部函数访问，就称为作用域链。
• 作用域案例：请问结果是多少？（123）

      // 案例： 结果是多少？function f1() {var num = 123;function f2() {console.log(num);}f2();}var num = 456;f1();

预解析（重点）

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

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

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

      // 请问结果为：(22)var fun = function () {console.log(22);};fun();// 请问结果为：(报错)fun();var fun = function () {console.log(22);};/*  相当于执行了以下代码：*  var fun;*  fun();*  fun = function() {console.log(22);}*/

• 函数提升就是把所有的函数声明提升到当前作用域的最前面，不调用函数。

      // 请问结果为：(11)function fn() {console.log(11);}fn();// 请问结果为：(11)fn();function fn() {console.log(11);}/* function fn() {*  console.log(11);* }* fn();*/

• 案例：输出结果为~

      // 输出结果为：undefinedvar num = 10;fun();function fun() {console.log(num);var num = 20;}// 相当于执行了以下操作// var num;// function fun() {//   var num;//   console.log(num);//   num = 20;// }// num = 10;// fun();

• 案例：输出结果为~

    <script>f1();console.log(c);console.log(b);console.log(a);function f1() {var a = b = c = 9;// 相当于 var a =9; b = 9; c = 9;// 集体声明格式 var a = 9, b = 9, c = 9;console.log(a);console.log(b);console.log(c);}</script>

JS对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

利用字面量创建对象

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

    <script>var obj = {}</script>

• 对象的属性调用有两种方式。

    <script>var obj = {name: '公子欢喜',age: 16,sex: '男',sayHi: function() {console.log('Hi~');}}console.log(obj.name);console.log(obj['age']);obj.sayHi();</script>

利用 new Object 创建对象

    <script>// 创建一个空的对象var obj = new Object();obj.name = '公子欢喜';obj.age = 16;obj.sex = '男';obj.sayHi = function() {console.log('Hi~');}console.log(obj.name);console.log(obj['sex']);obj.sayHi();</script>

利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

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

• 构造函数名字首字母要大写。
• 构造函数不需要 return 就可以返回结果。
• 构造函数的属性和方法前面必须添加 this。

    <script>function Star(name, age, sex) {this.name = name;this.age = age;this.sex = sex;this.sing = function(song) {console.log(song);}}var gs = new Star('公生', 16, '男');console.log(typeof(gs));console.log(gs.name);console.log(gs.age);console.log(gs['sex']);gs.sing('四月是你的谎言');</script>

• 构造函数：如 Star()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）。
• 创建对象：如 new Star()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化。

new 关键字执行过程

• new 构造函数可以在内存中创建了一个空的对象。
• this 就会指向刚才创建的空对象。
• 执行构造函数里面的代码，给这个空对象添加属性和方法。
• 返回这个新对象。

遍历对象

• for(变量 in 对象) {} 语句用于对数组或者对象的属性进行循环操作。

    <script>var obj = {name: '公生',age: 16,sex: '男',fn: function() {}}for (var key in obj) {// 输出属性名console.log(key);// 输出属性值console.log(obj[key]);}</script>

• for(变量 in 对象) {} 里面的变量，常写 k 或者 key。

内置对象

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

查阅MDN文档

• Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括HTML、CSS和万维网及HTML5 应用的API。
• MDN网址：https://developer.mozilla.org/zh-CN/

Math对象

• 得到两个数之间的闭区间的随机整数

Date对象

• 创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。
• Date() 是一个构造函数，创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date();

    <script>var arr = new Array(); // 创建数组对象var obj = new Object(); // 创建对象实例// 如果没有参数，则返回系统当前时间var date = new Date();console.log(date); var date1 = new Date('2019, 10, 1');console.log(date1);var date2 = new Date('2019-10-1 8:8:8')console.log(date2);</script>

• 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

获取当前时间必须实例化

      var now = new Date();console.log(now);

Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为 ‘2019-5-1’，可以写成 new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)。

格式化时分秒

    <script>// 要求封装一个函数返回当前的时分秒，格式：08:08:08function getTimer() {var time = new Date();var h = time.getHours();h = h < 10 ? '0' + h : h;var m = time.getMinutes();m = m < 10 ? '0' + m : m;var s = time.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;}console.log(getTimer());</script>

获取日期的总的毫秒形式

    <script>// 方法1var date = new Date();console.log(date.valueOf());console.log(date.getTime());// 方法2var date1 = +new Date();console.log(date1);// 方法3 H5 新增console.log(Date.now());</script>

• 案例：倒计时效果
  核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，结果很容易变成负数。
  用时间戳来做。用户输入时间的时间戳减去现在时间的时间戳，得到的就是剩余的毫秒数。
  把剩余时间的总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）。转换公式如下：
  d = parselnt(总秒数/60/60/24); //计算天数
  h = parselnt(总秒数/60/60%24); //计算小时
  m = parselnt(总秒数/60%60); //计算分数
  s = parselnt(总秒数%60); //计算当前秒数

    <script>function countDown(time) {var nowTime = +new Date();var inputTimes = +new Date(time);var times = (inputTimes - nowTime) / 1000;d = parseInt(times / 60 / 60 / 24); //计算天数d = d < 10 ? '0' + d : d;h = parseInt((times / 60 / 60) % 24); //计算小时h = h < 10 ? '0' + h : h;m = parseInt((times / 60) % 60); //计算分数m = m < 10 ? '0' + m : m;s = parseInt(times % 60); //计算当前秒数s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';}console.log(countDown('2021-1-1 00:00:00'));</script>

数组对象

• 创建数组的两种方式

    <script>var arr = [1, 2, 3];console.log(arr[0]);console.log(arr);var arr1 = new Array();console.log(arr1);var arr2 = new Array(2);console.log(arr2);var arr3 = new Array(2, 3);</script>

• 检测是否为数组

    <script>// 方法1var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// 方法2 H5新增 IE9以上才支持console.log(Array.isArray(arr));console.log(Array.isArray(obj));</script>

• 添加删除数组元素

    <script>// 在数组末尾添加数组元素var arr = [1, 2, 3];arr.push(4);console.log(arr);//返回结果为新数组的长度console.log(arr.push(5)); //在数组开头添加数组元素arr.unshift('pink');console.log(arr);//返回结果为新数组长度console.log(arr.unshift('pink'));//删除数组最后一个元素arr.pop();console.log(arr);//返回值为删除的数组元素console.log(arr.pop());//删除数组开头的元素arr.shift();console.log(arr);// 返回值为删除的元素console.log(arr.shift());</script>

• 翻转数组

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

• 数组排序

      // 数组排序var arr1 = [3, 4, 2, 7];arr1.sort();console.log(arr1);var arr2 = [13, 4, 77, 1, 7];arr2.sort();console.log(arr2);// 数组排序（升序）var arr2 = [13, 4, 77, 1, 7];arr2.sort(function(a, b){return a - b;});console.log(arr2);//数组排序（降序）var arr2 = [13, 4, 77, 1, 7];arr2.sort(function(a,b){return b - a;});console.log(arr2);</script>

• 数组索引

      // indexOf 只返回第一个满足条件的元素索引号// indexOf 从数组第一个元素开始查找// 如果数组中没有所要寻找的元素，则结果返回-1var arr = ['red', 'green', 'blue', 'blue'];console.log(arr.indexOf('blue'));// lastIndexOf 从数组最后一个元素开始查找console.log(arr.lastIndexOf('blue'));

• 案例

    <script>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(['pink', 'blue', 'green', 'pink', 'blue']);console.log(demo);</script>

• 数组转换为字符串

    <script>var arr = ['green', 'blue', 'pink'];console.log(arr.toString());// join(分隔符)console.log(arr.join());console.log(arr.join('丨'));</script>

字符串对象

基本包装类型

• 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。
• 基本包装类型就是把简单数据类型包装称为复杂数据类型，这样基本数据类型就有了属性和方法。

      var str = 'andy';console.log(str.length);

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

      //(1)把简单数据类型包装为复杂数据类型var temp = new String('andy');//(2)把临时变量的值给 strstr = temp;//(3)销毁临时变量temp = null;

字符串的不可变

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

根据字符返回位置

• 字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。
• 上句话的意思指对一个已经赋值的字符串变量重新赋值的话，系统会为该字符串重新开辟一个内存空间，以存储新赋值的字符串变量，而原来的内存空间仍旧存储着原先的字符串。

    <script>// 字符串对象根据字符返回位置// str.indexOf('要查找的字符',[起始的位置])var str = '改革春风吹满地，春天来了！';console.log(str.indexOf('春'));// 从索引号是 3 的位置开始往后查找console.log(str.indexOf('春',3));</script>

• 案例：返回字符位置

    <script>// 查找字符串"abcoefoxyozzopp"中所有 o 出现的位置以及次数var str = 'abcoefoxyozzopp';var index = str.indexOf('o');var num = 0;while(index !== -1) {console.log(index);num++;str.indexOf('o', index + 1);}console.log('o出现的次数是：'+ num);</script>

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

    <script>var str = 'andy';// 返回指定位置的字符console.log(str.charAt(3));// 遍历所有的字符for(var i = 0; i < str.length; i++) {console.log(str.charAt(i));}// 返回指定字符的ASCII码console.log(str.charCodeAt(0));// 返回指定位置处字符 H5新增console.log(str[0]);</script>

• 统计出现次数最多的字符

    <script>// 判断字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数var str = "abcoefoxyozzopp";var o = {};for (var i = 0; i < str.length; i++) {var chars = str.charAt(i);if (o[chars]) {// o[chars] 得到的是属性值o[chars]++;} else {o[chars] = 1;}}console.log(o);//遍历对象var max = 0;var ch = '';for (var key in o) {// key 得到的是属性名// o[key] 得到的是属性值if (o[key] > max) {max = o[key];ch = key;}}console.log(max);console.log('最多的字符是' + ch);</script>

字符串操作方法（重点）

• concat(str1, str2…) 连接多个字符串。拼接字符串，等效于 +，+ 更常用。

    <script>var str = 'andy';console.log(str.concat('red'));</script>

• substr(start, length) 从start 位置开始（索引号），length 取的个数。

    <script>// substr('截取的起始位置', '截取几个字符');var str = '改革春风吹满地';console.log(str.substr(2,2));</script>

• slice(start, end) 从start位置开始，截取到end位置，end取不到。此处start和end为索引号。
• substring(start, end) 从start位置开始，截取到end位置，end取不到。语法基本和slice相同，但是不接受负值。
• **replace(‘被替换的字符’, ‘替换为的字符’);**它只会替换第一个字符。

    <script>// 替换字符 replace('被替换的字符', '替换为的字符');var str = "andyandy";console.log(str.replace("a", "b"));var str1 = 'abcoefoxyozzopp';while (str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);</script>

• split(‘分隔符’); 字符串转换为数组。前面我们学过 join 把数组转换为字符串。分隔符取决于字符串里使用什么隔开的。

    <script>// 字符串转为数组 split('分隔符')// 分隔符取决于字符串里使用什么隔开的// 前面我们学过 join 把数组转换为字符串var str = 'red, pink, blue';console.log(str.split(','));var str1 = 'red&pink&blue';console.log(str1.split('&'));</script>