javascript学习之路2

作用域

JavaScript作用域：就是代码名字在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
js的作用域（es6）之前：全局作用域局部作用域
全局作用域：整个script标签或者是一个单独的js文件
局部作用域（函数作用域）在函数内部就是局部作用域这个代码的名字只是在函数内部起效果和作用

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

全局变量和局部变量

变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量

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

    // 在全局下都可以使用// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量var num = 10;console.log(num);function fn() {console.log(num);}fn();

局部变量：在局部作用域下定义的变量（在函数内部的变量）

    // 注意 函数的形参也可以看做是局部变量function fun() {var num1 = 10; // num1就是局部变量 只能在函数内部使用num2 = 20; // }fun();// console.log(num1);console.log(num2);

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

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

拓展：
js中没有块级作用域现阶段没有
js是在 es6的时候新增的块级作用域
块级作用域有{} 比如 if{} for{}
if() {
int num =10;
}
外面的是不能调用num的

作用域链

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

    // 就近原则var num = 10;function fn() { // 外部函数var num = 20;function fun() { // 内部函数console.log(num);}fun();}fn(); // 20

域解析(面试常考点)

    // 1问//console.log(num);// 2问console.log(num);var num = 12; // undefined 坑1// js域解析相当于以下代码：var num;console.log(num);num = 12;// 3问fn();function fn() {console.log(11);}// 4问fun(); // 报错 坑2var fun = function() {console.log(22);}// 函数表达式 调用必须写在函数表达式的下面// js域解析相当于以下代码：// var fun;// fun();// fun = function() {//     console.log(22);// }// 1. 我们js引擎运行js 分为两步：  预解析  代码执行// (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面// (2). 代码执行  按照代码书写的顺序从上往下执行// 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）// (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作// (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数

域解析案例

案例1

    var num = 10;fun();function fun() {console.log(num);var num = 20;}// undefined// js域解析 相当于以下代码// var num;// function fun() {//     var num;//     console.log(num);//     num = 20;// }// num = 10;// fun();

案例2

    var num = 10;function fn() {console.log(num);var num = 20;console.log(num);}fn();// js域解析 相当于以下代码// var num;// function fn() {//      var num;//      console.log(num); // undefined//      num = 20;//      console.log(num); // 20// }// num = 10;// fn();

案例3

    var a = 18;f1();function f1() {var b = 9;console.log(a);console.log(b);var a = '123';}// 相当于以下代码// var a;// function f1() {//     var b;//     var a;//     b = 9;//     console.log(a); // undefined//     console.log(b); // 9//     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); // 报错

JavaScript对象

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

对象由属性和方法组成：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象的三种方式

利用字面量创建对象

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

    // var obj = {};  // 创建了一个空的对象var obj = {uname: '张三疯',age: 18,sex: '男',sayHi: function() {console.log('hi~');}}// (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 ： 值  属性值 // (2) 多个属性或者方法中间用逗号隔开的// (3) 方法冒号后面跟的是一个匿名函数// 2. 使用对象// (1). 调用对象的属性 我们采用 对象名.属性名console.log(obj.uname);// (2). 调用属性还有一种方法 对象名['属性名']console.log(obj['age']);// (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号obj.sayHi();

利用new Object 创建对象

    var obj = new Object();obj.name = '张三丰';obj.age = 18;obj.sex = '男';obj.sayHi = function() {console.log('hi~');}// (1) 我们利用等号 = 赋值的方法 添加对象的属性和方法// (2) 每个属性和方法之间用 分号结束console.log(obj.name);console.log(obj['sex']);obj.sayHi();//按照要求写对象var Naruto  = new Object();Naruto.name = '鸣人';Naruto.age = 19;Naruto.sex = '男';Naruto.skill = function() {console.log('影分身');};Naruto.skill();

利用构造函数创建对象

为什么我们需要使用构造函数，就是因为我们前面两种创建对象的方式一次只能创建一个对象

    // 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制// 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数// 又因为这个函数不一样，里面封装的不是普通代码，而是对象// 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面// 我们需要创建四大天王的对象 相同的属性： 名字 年龄 性别  相同的方法： 唱歌// function 构造函数名() {//     this.属性 = 值;//     this.方法 = function() {  }// }// new 构造函数名();function Star(uname,age,sex) {this.name = uname;this.age = age;this.sex = sex;this.sing = function(song) {console.log(song);}}var ldh = new Star('刘德华',18,'男'); // 调用函数返回的是一个对象// console.log(typeof ldh); // objectconsole.log(ldh.name);console.log(ldh['sex']);ldh.sing('冰雨');var zxy = new Star('张学友',19,'男');var gfc = new Star('郭富城',20,'男');console.log(zxy.name);zxy.sing('李兰香');console.log(gfc.name);// 1. 构造函数名字首字母要大写// 2. 构造函数不需要return 就可以返回结果// 3. 我们调用构造函数 必须使用 new// 4. 我们只要new Star() 调用函数就创建一个对象 ldh {}// 5. 我们的属性和方法前面必须添加 this

构造函数和对象

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

new关键字执行过程：

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

遍历对象

    var obj = {name: 'joy',age: 18,sex: '男',fn: function() {console.log('hi~'); }}// console.log(obj.name);// console.log(obj.age);// console.log(obj.sex);// for (变量 in 对象) {//}for (var k in obj) {console.log(k); // k 变量 输出 得到的是 属性名console.log(obj[k]); // obj[k] 得到的是 属性值}// 我们使用 for in 里面的变量 我们喜欢写 k 或者 key

变量、属性、函数、方法总结

变量：单独声明赋值
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过 ‘函数名()’ 的方式来调用
方法：对象里面的函数称为方法，方法不需要声明，使用 ‘对象.方法名()’ 的方式就可以调用，方法用来描述对象的行为和功能

内置对象

JavaScript的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于我们JS独有的，我们JS API 讲解
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本而必要的功能(属性和方法)
JavaScript 提供了多个内置对象：Math、Date、Array、String等

学会查阅文档：

Mozilla 开发者网络(MDN)提供了有关开放网络技术（Open Web）的信息，包括HTML、CSS、和万维网及HTML5应用的API。

    // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值var myMath = {PI: 3.1415926535,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);console.log( myMath.max(1,6,88));console.log( myMath.min(23,67,4));

    // 1. 绝对值方法console.log(Math.abs(1)); // 1console.log(Math.abs('-1')); // 1 隐式转换 会把字符串型转换为数字型// 2. 三个取整方法// (1) Math.floor() 向下取整 往最小了取值console.log(Math.floor(1.1)); // 1console.log(Math.floor(1.9)); // 1// (2) Math.ceil() 向上取整 往最大了取值console.log(Math.ceil(1.1)); // 2console.log(Math.ceil(1.9)); // 2// (3) Math.round() 四舍五入  其它数字都是四舍五入，但是 .5 特殊 它往大了取console.log(Math.round(1.4)); // 1console.log(Math.round(1.5)); // 2console.log(Math.round(1.9)); // 2console.log(Math.round(-1.1)); // -1console.log(Math.round(-1.5)); // 这个结果是 -1

猜数字游戏

    // 猜数字游戏  用户只有10次猜的机会function getRandom(min,max) {return Math.floor(Math.random() * (max - min + 1)) + min;}var res = getRandom(1,10);while(true) {for(var i = 0; i < 10; i++){var num = parseFloat(prompt('请输入一个1~10之间的数：'));if (num > res) {alert('猜大了');} else if (num < res) {alert('猜小了');} else {alert('恭喜您猜对了！');break; // 退出整个循环}}   break;  }alert('很遗憾您的机会已经全部用完');

Date() 方法的使用

    // Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象var arr = new Array(); // 创建一个数组对象var obj = new Object(); // 创建了一个对象实例// 1. 使用Date  如果没有参数 返回当前系统的当前时间var date = new Date();console.log(date);// 2. 参数常用的写法  数字型  2019, 10, 01  或者是 字符串型 '2019-10-1 8:8:8'var date1 = new Date(2019, 10, 1);console.log(date1); // 返回的是 11月 不是 10月 var date2 = new Date('2019-10-1 8:8:8');console.log(date2);// 格式化日期 年月日 var date = new Date();console.log(date.getFullYear()); // 返回当前日期的年  2019console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦console.log(date.getDate()); // 返回的是 几号console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0// 我们写一个 2019年 5月 1日 星期三var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);// 要求封装一个函数返回当前的时分秒 格式 08：08：08function getTime() {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(getTime());// 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数// 1. 通过 valueOf() getTime()var date = new Date();console.log(date.valueOf()); // 就是我们现在的时间 距离1970.1.1 总的毫秒数console.log(date.getTime());// 2. 简单的写法（最常用的写法）var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数console.log(date1);// 3. H5新增的 获得总的毫秒数console.log(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('2021-11-11 00:00:00'));var date = new Date();console.log(date);```创建数组的两种方式```js// 1. 利用数组字面量var arr = [1,2,3];console.log(arr[0]);// 2. 利用new Array()// var arr1 = new Array();var arr1 = new Array(2); // 这个2 表示数组的长度为2 里面有两个空的数组元素var arr2 = new Array(2,3); // 等价于[2,3] 这样写表示 里面有2个数组元素 2和3console.log(arr1);console.log(arr2);

检测是否为数组两种方法：

    // 翻转数组function reverse(arr) {// if (arr instanceof Array) {if (Array.isArray(arr)) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;} else {return 'error 这个参数要求必须是数组格式 [1,2,3]'}}console.log(reverse([1, 2, 3]));console.log(reverse(1, 2, 3));// 检测是否为数组// (1) instanceof  运算符 它可以用来检测是否为数组var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持console.log(Array.isArray(arr));console.log(Array.isArray(obj));

添加删除数组的方法

    // 1. push() 在数组末尾添加元素var arr = [1,2,3];// arr.push(4,'joy');console.log(arr.push(4,'joy'));// (1) push 是可以给数组追加新的元素// (2) push() 参数直接写 数组元素就可以了// (3) push完毕之后，返回的结果是 新数组的长度 // (4) 原数组也会发生变化// 2. unshift() 在数组的开头添加元素console.log(unshift('red','purple'));// (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) 原数组也会发生变化

    // 一组数中去除大于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);

数组排序

    // 1. 翻转数组var arr = ['pink','red','blue'];arr.reverse();console.log(arr);// 2. 数组排序（冒泡排序）// var arr1 = [3,4,7,1,8];var arr1 = [12,4,77,1,7]// 这里如果换成[12,4,77,1,7] 就会出现问题// arr1.sort(); // 解决方法是以下代码arr1.sort(function(a,b) {// return a - b; // 升序的顺序排列return b - a; // 降序的顺序排列});console.log(arr1);

数组去重（经典题）

    // 数组去重 ['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[newArr.length] = arr[i];newArr.push(arr[i]);}}return newArr;}var re =  unique(['c','a','z','a','x','a','x','c','b']);console.log(re);

数组转换为字符串

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

建议查询以下函数：
concat() 连接两个或多个数组不影响原数组
splice() 数组删除splice（第几个开始，要删除个数）会影响原数组

基本包装类型

    // 基本包装类型 就是把简单数据类型 包装成为了 复杂数据类型var str = 'andy';console.log(str.length);// 对象才有属性和方法 复杂数据类型才有属性和方法// 简单数据类型为什么会有length属性呢// (1) 把简单数据类型包装为复杂数据类型var temp = new String('andy');// (2) 把临时变量的值 给 strstr = temp;// (3) 销毁这个临时变量temp = null;

JavaScript还提供了三个特殊的引用类型：String、Number和Boolean。

字符串的不可变性：(看上去修改后是改变了，其实是在内存中开辟了新的内存空间)

    var str = 'andy';console.log(str);str = 'red';console.log(str);// 因为我们字符串的不可变所以不要大量的拼接字符串var str = '';for (var i = 1; i <= 1000000000; i++) {str += i;}console.log(str);

求某个字符出现的位置(含经典面试题例)

    // 字符串对象  根据字符返回位置  str.indexOf('要查找的字符',[起始的位置])var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春')); // 2console.log(str.indexOf('春',3)); // 8// 查找字符串'abcoefoxyozzopp'中所有o出现的位置以及次数var str = 'abcoefoxyozzopp';var alp = 'p';var index = str.indexOf(alp);var count = 0;// console.log(index);while(index !== -1) {console.log(index);count++;index = str.indexOf(alp,index + 1);}console.log(alp + '出现的次数是：' + count);

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

    // 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

统计出现最多的字符和个数

    // 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','字符串'....)var str = 'andy';console.log(str.concat('red')); //andyred// 2. subst('截取的起始位置','截取几个字符');var str1 = '改革春风吹满地'; console.log(str1.substr(2,2)); // 春风 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

其它操作方法

    // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符var str = 'andyandy';console.log(str.replace('a', 'b')); // bndybndy// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *var str1 = 'abcoefoxyozzopp';while (str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);// 2. 字符转换为数组 split('分隔符')    前面学过 join 把数组转换为字符串var str2 = 'red, pink, blue';console.log(str2.split(','));var str3 = 'red&pink&blue';console.log(str3.split('&'));

数据类型内存分配：

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

简单数据类型传参：

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

复杂数据类型传参：

    function Person(name) {this.name = name;}function f1(x) { // x = pconsole.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. 这个输出什么 ?   张学友