06 js 作用域 对象
# 1.作用域 #
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这 个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
js（es6前）中的作用域有两种:
- 全局作用域
- 局部作用域（函数作用域）
## 1.1 全局作用域 ##
作用域整个代码执行的环境，或者一个独立的js文件
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用var 声明的变量也是全局变量（不建议使用）
## 1.2 局部作用域 ##
作用于函数内的代码环境，就是局部作用域
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量
# 2.预解析 #
## 2.1 机制 ##
1 js引擎运行js 分两步 预解析跟代码执行
（1）js引擎会把js里面所有的var 还有function 放在作用域的前面
（2）代码执行，按照代码书写的顺序从上往下执行
2 预解析分为 变量预解析(变量提升) 跟 函数预解析（函数提升）
（1）变量提升就把所有变量提升到当前的作用域 不提升赋值操作
（2）函数提升就把所有函数提升到当前的作用域 不调用函数
# 2.对象 #
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、 函数等。
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
水井的名字、水井的身高 这些即是水井的属性
水井在打电话，发短信 这些即是方法
## 2.1 创造对象 ##
1、利用字面量创建对象
<script> // 对象字面量：就是花括号{}里面包含了变大这个具体事物（对象）的属性和方法 // 键 相当于属性名 // 值 属性值 var star = { name: "水井", age: 18, sex: function() { alert('男') } } // 对象里的函数称为方法,调用方法必须 对象.方法() star.sex() // 调用属性值 对象['属性'] 或 对象.属性 console.log(); </script>
2、利用new Object创建
Object() 第一个字母大写
需要使用new关键字
使用格式:对象.属性 = 值
var shuijing = new Object();
shuijing.name = "shuijing"
shuijing.age = 18
shuijing.sex = function (){
alert('男')
}
3、利用构造函数创建对象
构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new 运算符一起 使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
- 构造函数用于创建某一类对象，其首字母要大写
- 构造函数要和new 一起使用才有意义
构造函数约定首字母大写
函数内的属性和方法前面需要添加this,表示当前的对象属性和方法
不需要return返回结果
必须用new 来调用构造函数
function sj(name, age) {
this.name = name
this.age = age
this.sayhi = function() {
alert('我的名字是:' + this.name)
}
}
var shui = new sj('水井', 18)
console.log(shui.name);
shui.sayhi();
## 2.2 new关键字 ##
new 在执行时会做四件事情：
1. 在内存中创建一个新的空对象。
2. 让 this 指向这个新的对象。
3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
4. 返回这个新对象（所以构造函数里面不需要return）。
# 3. 遍历对象属性 #
<script> // for ... in 语句用于对数组或者对象的属性进行循环操作 /* for(变量 in 对象名字){ //执行代码 } */ var shuijing = new Object(); shuijing.name = "shuijing" shuijing.age = 18 shuijing.sex = function() { alert('男') } for (var k in shuijing) { console.log(k) // k 是属性名 console.log(shuijing[k]); //shuijing[k]这是属性值 } </script>
# 4. 内置对象 #
js 中的对象分为3种 1、自定义对象 2、内置对象 3、浏览器对象
前面两种对象是js基础内容，属于ECMAScript;第三个浏览器对象我们js独有的，我们js API讲解
内置对象指js语言自带的一些对象，这些对象供开发者使用，并提供常有的基本的必要功能
内置对象帮助我们快速开发 如Math、Date、
Array、String
## 4.1 查文档 ##
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C 来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/
## 4.2 Math对象 ##
Math对象不是构造函数，具有数学常数和函数的属性和方法。跟数学相关运算（绝对值、取整、最大值）
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.random() //随机
// 1.Math.max()数组最大值
var array1 = [1, 3, 2];
console.log(Math.max(...array1));
// 2.random() 返回一个随机的小数
// 方法不跟参数
console.log(Math.random());
// 两数之间的随机整数
// Math.floor() === 向下取整,
//Math.ceil() 函数返回大于或等于一个给定数字的最小整数。
function getRandomInt(min, max) {
min = Math.ceil(min)
max = Math.ceil(max)
return Math.floor(Math.random() * (max - min)) + min
}
console.log(getRandomInt(1, 3));
var arr = [1, 2, 3, 4, 5, 6]
console.log(arr[getRandomInt(0, arr.length - 1)]);
## 4.3 Date对象 ##
Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间
日期格式化
方法名 说明 代码
getFullYear() 获取当年 dObj.getFullYear()
getMonth() 获取当月(0-11) d0bj.getMonth()
getDate() 获取当天日期 d0bj.getDate()
getDay() 获取星期几(周日0 到周六6) d0bj.getDay()
getHours() 获取当前小时 d0bj.getHours()
getMinutes() 获取当前分钟 d0bj.getMinutes()
getSeconds() 获取当前秒钟 d0bj.getSeconds()
日期时间戳
<script> // 获取Date 总的毫秒数距离1970年1月1日 过了多少毫秒数 // 1.通过valueof() gateTime() var date = new Date() console.log(date.valueOf()); console.log(date.getTime()); // 2.简单的写法(最常用的写法) var date1 = +new Date() console.log(date1); // 3.H5 新增的 获取总的毫秒数 console.log(Date.now()); </script>
# 5.数组对象 #
## 5.1 检测是否为数组 ##
instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
<script> var arr = [1, 22] var obj = {}; console.log(arr instanceof Array); // 是返回True console.log(obj instanceof Array); // 不是返回false console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // true </script>
# 6. 字符串对象 #
## 6.1 基本包装类型 ##
基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
<script> var str = 'andy'; console.log(str.length); // 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。 // 1)把简单数据类型包装为复杂数据类型 var temp = new String('andy') // 2)把临时变量的值 给 str str = temp // 3)销毁这个临时变量 temp = null </script>
## 6.2 根据字符串返回位置 ##
字符串的所有方法都不修改本身，都是返回空值
<script> // 字符串对象，根据字符返回位置 // str.index('要查找的字符',起始的位置) var str = '改革春风吹满地' console.log(str.indexOf('春')); console.log(str.indexOf('春',3)); // 从索引号是 3的位置 </script>
## 6.3 根据位置返回字符 ##
charAt(index) 返回指定位置的字符（index 字符串的索引号）
charCodeAt(index) 获取指定位置处字符的ASCII码
str[index] 获取指定位置处字符 【HTMl5 IE8+支持】
返回最多的字符
<script> var str = 'abcoefoxyozzopp'; var o = {} for (var i = 0; i < str.length; i++) { var chars = str.charAt(i) if (o[chars]) { // 是否存在这个属性值 o[chars]++ } else { o[chars] = 1 } } var max = 0 var ch = '' for (var k in o) { // k 得到是属性名 o[k] > max ? (max = o[k]) && (ch = k) : '' } alert(ch) </script>
## 6.4 截取字符串 ##
替换字符 replace('被替换的字符','替换的字符')
字符转换 spilt('分隔符')
<script> // 1. 替换字符 replace('被替换的字符','替换的字符') 只替换第一个字符 var str = 'andy11111111111' //替换所有字符 while (str.indexOf(1) !== -1) { str = str.replace(1, 2) } console.log(str); // 2. 字符转换 spilt('分隔符') var str2 = 'red,blue,yellow' console.log(str2.split(',')); </script>
