JS基础学习06（作用域，对象）

一、作用域

1、作用域
作用：提高程序的可靠性，减少命名冲突
有全局作用域和局部作用域（函数作用域）

2、变量的作用域
全局变量：
注意：如果在函数内部没有声明，直接赋值的变量也属于全局变量
局部变量：
函数的形参也是局部变量

区别：全局变量只有程序运行完才会销毁，比较占内存资源
局部变量是程序执行完毕就会销毁，节约内存资源

3、块级作用域
if { }；for { }；
目前在es6中没有块级作用域，因此在if { }；for { }；
等里面声明的变量，我们都可以使用、

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

函数内部都是根据就近原则来输出结果的

内部函数根据就近原则来访问变量

二、预解析

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

预解析：JS引擎会把JS里面所有的 var 还有 function 提升到当前作用域的最前面

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）
（1）变量预解析：把所有的变量声明（含有var的)提升到当前的作用域最前面，不提升赋值操作

总结：函数表达式变量声明一定要写在函数引用的前面
eg: var function fn=( ) {
函数体
}
fn ( ); // 注意这里的函数调用一定要在函数声明下面要不然会出现错误

（2）函数提升就是把所有的函数声明提升到当前作用域的最前面
在函数的内部也要先进行变量的提升

三、对象

1、对象
对象：在JS中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，如：字符串，数值，数组，函数。
属性：外在特性，用名词表示
方法：可以做什么，用动词表示

2、创建对象的三种方式
（1）使用字面量创建对象（最常用）
var obj = { } // 创建了一个空对象
obj：是对象名
创建了一个非空对象
var obj = {
username: ‘张三丰’,
age: 18,
sex: ‘男’,
saiHi: function() {
console.log(‘Hi’);
}
}
里面的属性或方法用键值对的形式： 属性名：属性值
多个属性之间用逗号隔开；
方法冒号后面跟的是一个匿名函数；

（2）利用new Object创建对象
var obj = new Object ( ); // 创建了一个空对象
obj . name=‘张三’;
obj . age = 19;
obj.speak = function ( ) {
// 函数体
}
利用等号赋值的方法来添加对象的属性和方法；
每个属性之间用分号结束；

（3）用构造函数创建对象(可以一次创建多个对象）
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数是泛指某一大类，对象是特指某一个
利用构造函数创建对象的过程我们也成为对象的实例化
function 构造函数名 () {
this.属性=值; // this表示当前的
this.方法=function ( ) { }
}
调用： new 构造函数名 ()；// 调用函数返回的是一个对象
注意：
构造函数名的首字母要大写；
构造函数里面不需要return就可以返回结果；
调用构造函数必须使用new
属性和方法里面一定要有this

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

2.1、使用对象
对象名.属性名
或者 对象名[ ’ 属性名’ ]

2.2、调用方法
对象名. 方法名 ( )
eg：obj . saiHi( );

3、变量，属性，函数，方法的区别
（1）变量和属性是相同的，都是用来存储数据的
var num=10；
var obj={
age : 10
}
变量单独声明并赋值，使用的时候直接写变量名
属性在对象里面不需要声明，使用的时候必须是
对象 . 属性

（2）函数和方法都是做某件事
函数是单独声明并且调用的， 函数名( ）单独存在
方法是在对象里面调用的,调用的格式：对象 .方法( )

4、遍历对象属性

for （变量 in 对象） {
//
}
for (var k in obj) {
console.log(k); // K变量输出得到的是属性名 name,age,sex这些
console.log(obj[k]); // obj[k] 得到的是属性值
}

注意：我们使用for in 里面的变量一般用的是k 或者key；
但是我们不用它去遍历方法

四、内置对象

1、Math对象
直接使用里面的属性和方法就可以了
Math.PI：圆周率
Math.abs：绝对值
eg:
console.log(Math.abs(’-1’))；// 这个属性会隐式转换，会把字符型 -1转换为数字型
console.log(Math.abs(‘pink’))； // NAN

Math.floor（）：向下取整，往最小取值
Math.ceil（）：向上取整，往最大的取
Math.round（）：四舍五入，就近取整
eg：console.log(Math.round(-1.5)); // 结果是 -1
.5在Math.round（）函数里面都是往大了取，不管是正数还是负数，都是往大了取

（2） 随机数方法 random（）
返回一个随机小数，范围从0到小于1，范围是 [0，1）；
方法里面不跟参数；

（2.1）得到一个两数之间的随机整数，包括两个数在内（重点！！！）
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}

2、Date 对象
Date( ) 日期对象是一个构造函数，必须使用new 来创建我们的日期对象；
（1）使用Date
var date = new Date( );

如果没有提供参数，那么新创建的Date对象会返回系统的当前日期和时间。

（2）参数常用写法
数字型：2020，03，25
字符串型：‘2020-03-25 22：45：45’ （最常用！！！）

（3）日期格式化
getFullYear() 方法根据本地时间返回指定日期的年份。
eg ：
var date = new Date(); // 先new一下，实例化它才能使用
console.log(date.getFullYear());
console.log(date.getMonth()); // 返回的月份要一个月（0~11），因此要加上1
console.log(date.getDay()); // 周一返回的是1，周六返回的是6，周日返回的是0，因此用数组来写

getFullYear()：年
getMonth()：月 返回的月份小1个月，记得月份＋1
getDate()：日
getDay()：星期几
getHours()：时；
getMinutes()：钟
getSeconds()：秒

注意：Date对象和Math对象不一样，他是一个构造函数，我们必须实例化以后才能使用那些方法

（4）获得Date总的毫秒数（时间戳）
这个毫秒数是指距离1970年1月1日过了多少毫秒数
1、通过valueOf （ ）和getTime（ ）来获得

2、通过 var date1 = +new Date(); 来获得，(最常用！！！）
+new Date() 返回的就是总的毫秒数

3、H5新增的一种方法
console.log(Date.now()); // 这一句话就可以直接得到毫秒数了
注意：毫秒数都是不相同的，因为时间一去不复返
1秒 = 1000毫秒
（5）把毫秒数转换为天，时，分，秒的公式：
d = parseInt（总秒数/60/60/24);
h = parseInt（总秒数/60/60%24);
m = parseInt（总秒数/60%60);
s = parseInt（总秒数%60);

3、数组对象

1、检测是否为数组
（1）instanceof 运算符可以检测是否为数组
eg : var arr = [];
console.log(arr instanceof Array);
(2) Array . isArray (参数 ）IE9以上的版本才支持

2、添 加删除元素
push ( ) 在数组的末尾添加一个或者多个数组元素
push给数组追加新的元素；
push完毕之后返回的结果是新数组的长度；
原数组也会发生变化；

unshift ( ) 在数组的开头添加一个或者多个数组元素
unshift ( ) 完毕之后返回的结果是新数组的长度；
原数组也会发生变化；

pop ( ) 删除数组的最后一个元素
括号里面不写参数，同时pop ( ) 的返回值是删除的那个元素

shift ( ) 删除数组的第一个元素
括号里面不写参数，同时shift ( ) 的返回值是删除的那个元素

3、翻转排序和查找
reverse ( ) 翻转数组
sort ( ) 对数组进行排序
eg :
var arr = [1, 7, 2, 45, 23];
arr.sort(function(a, b) {
return a - b; // a-b是升序的排序序列；b-a是降序，
});
console.log(arr);
sort ( ) 括号里面这个函数是固定的

indexOf ( ) 返回数组中元素的索引号
注意：它只返回第一个满足条件的索引号；
如果在数组中找不到该元素就会返回-1；
利用这一点可以查找元素在该数组中有没有存在

lastIndexOf ( )它是从最后一个元素开始查找元素，但是索引号的顺序还是从第一个开始算，如果找不到也是返回-1；

3、将数组转换为字符串
toString ( ） 返回一个字符串，默认以逗号为分隔符
join (’ 分隔符’ ) 括号里面可以添加自己想要的分隔符

concat ( ) 连接两个或多个数组，不影响原数组
语法：str.concat(string2, string3[, …, stringN])

slice ( ) 数组截取 slice ( begin,end )，返回被截取项目的新数组
splice ( ) 数组删除 splice (从第几个开始，要删除的个数），返回被删除了元素后的数组，会影响原数组

4、字符串对象

（1）字符串的不可变性：里面的值不会改变，只是又给你新申请了一个内存，然后指向那个新的值，因此不要大量拼接字符串，
（2）字符串的所有方法都不会修改字符串本身（因为字符串是不可变的），因此操作完成会返回一个新的字符串

（3）根据字符返回位置
str . indexOf ( ‘要查找的字符’ , [起始的位置] )
如果不指定索引号，则就是从头开始查找，找到要查找的那个字就结束

（4）根据位置返回字符（重点！！！）
charAt ( index ) 根据位置返回字符，可以用于遍历字符

charCodeAt ( index ) 返回相应索引号的字符ASCII值
目的：可以判断用户按下了哪个键

str [ index ] 根据位置返回字符，HTM5新增的

（5）字符串操作方法
concat ( str1,str2… ) 拼接字符串，相当于+

substr (start,length) 从start位置开始，截取length个字符，括号里面都是填写的数字
replace ( ’ 被替换的字符串’，‘替换为的字符串’)

split( ‘分隔符’ ) 字符转换为数组

toUpperCase ( )：转换为大写

toLowerCase ( )：转换为小写

五、简单数据类型和 复杂数据类型

1、null
如果以后有个变量我们打算存储为对象，暂时没想好放啥，这个时候就给null
2、简单数据类型存放到栈里面，复杂数据类型放到堆里面
（1）简单数据类型在栈里面存放的是值，
（2）复杂数据类型在栈里面存放的是十六进制的地址，然后这个地址指向堆里面的数据
（3）复杂数据类型中，函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间保存的堆地址复制给了形参，形参和实参一样其实保存的是同一个地址，所以操作的是同一个对象，因此当形参改变赋值的时候，实参指向的值也被改变了

六、练习题：

1、获取当前时间

function getTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var days = date.getDate();
        var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
        var week = date.getDay();
        var hours = date.getHours();
        hours = hours < 10 ? '0' + hours : hours;
        var minutes = date.getMinutes();
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var seconds = date.getSeconds();
        seconds = seconds < 10 ? '0' + seconds : seconds;
        return '今天是：' + year + '年' + month + '月' + days + '天' + arr[week] + hours + '时' + minutes + '分' + seconds + '秒';
    }
    var result = getTime();
    console.log(result);

2、数组去重

 function unique(arr) {
         var arr1 = [];
         for (var i = 0; i < arr.length; i++) {
             if (arr1.indexOf(arr[i]) === -1) {  // 查找旧元素的元素在新数组中是否存在，不存在就添加到新数组中去
                 arr1.push(arr[i]);
             }
         }
         return arr1;
     }
     var result = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
     console.log(result);

3、返回某一个字符位置

function look(str) {
         var sum = 0;
         for (var i = 0; i < str.length; i++) {
             if (str[i] == 'o') {
                 sum += 1;
                 console.log(i);
             }
         }
         return sum;
     }
     var result = look('abcoefoxyozzopp');
     console.log(result); 

4、寻找次数出现最多的那个字符并打印出出现的次数

 var str = 'abcdobdoebsodescd';
     var obj = {}; // 新申明一个对象
     for (var i = 0; i < str.length; i++) {
         var chars = str.charAt(i); // chars是遍历字符串中的每一个字符
         if (obj[chars]) { // obj[chars]是对象里面有没有这个字符，如果对象里面有这个字符就加1，obj[chars]是对象的使用方式，obj[chars]=obj['a']
             obj[chars]++;
         } else {
             obj[chars] = 1;
         }
     }
     console.log(obj);
     var max = 0;
     var ch = '';
     for (var k in obj) {
         if (obj[k] > max) {
             max = obj[k];
             ch = k; // k得到的就是属性名，属性名就是字符
         }
     }
     console.log(max);
     console.log(ch);

5、写倒计时

 function countDown(time) {
        var nowtime = +new Date(); // 返回当前时间总的毫秒数
        var inputTime = +new Date(time); // 返回用户输入的时间的毫秒数
        var time = (inputTime - nowtime) / 1000;
        var d = parseInt(time / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d; //补0这个很重要，基本都要写
        var h = parseInt(time / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        var m = parseInt(time / 60 % 60);
        m = m < 10 ? '0' + m : m;
        var s = parseInt(time % 60);
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '小时' + m + '分' + s + '秒';

    }
    var result = countDown('2020-3-27 18:00:0');
    console.log(result);