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>
原文地址:https://www.cnblogs.com/xujinglog/p/12893008.html