作用域，预解析，对象，内置方法 Math Date Array

Posted 2021-03-03 article-record

作用域

一段程序代码中所用到的名字并不总是有效可用的，而限定这个名字（变量）的可用性的代码范围，就是这个名字的作用域，作用域提高了逻辑程序的局部性，增强了可靠性，减少了名字冲突；

javascript作用域（es6）之前：全局作用域，局部作用域

全局作用域：整个script标签或者是一个单独的JS文件

局部作用域（函数作用域）：在函数内部就是作用域；

变量作用域

全局变量：在全局作用域下声明的变量；如果在函数内部没有声明（var）直接赋值的变量也是全局变量 num = 2;

局部变量：在函数内部声明的变量；

全局变量 和 局部变量

• 全局变量任何地方都可以使用；只有浏览器关闭的时候才会销毁，比较占用内存资源；
• 局部变量只有在函数内可以使用；当程序执行完毕就会销毁，比较节约内存资源；

作用域链

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

var num = 10;
function fu() {
    var num = 20;
    function fun() {
        var num = 30;
        // 在fun内部往外部查找
        // 1. 如果 fun 没有声明 num 就去找到 fu 内部 num 变量；
        // 2. 如果 fun 和 fn 内部都没有 num 就去全局找；
        // 3. 如果 都没有 报错 num is not defined；
        console.logg(num);
    }
    fun();
}
fu(); 

预解析

JS 解析器运行 JS 分为两步：预解析，代码执行

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

代码执行：从上往下依次执行；

变量预解析（变量提升）

就是把所有的变量声明提升到当前作用域最前面，不提升赋值操作；

console.log(num);  // num is not defined;
var num = 10;
// 等价于
var num;
console.log(num);
num = 10;

fun(); // fun is not a function 
var fun = function () {...}
// 等价于
var fun;
fun();
fun = function () {...};

函数预解析（函数提示）

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

fun() 
function fun() {...}
// 等价于
function fun() {...}
fun();

案例：

fn();
console.log(a);
console.log(b);
console.log(c);
function fn() {
    var a = b = c = 9;
    // var a = 9, b = 9, c = 9; 这种声明方式 b 和 c 是全局变量
    console.log(a);
	console.log(b);
	console.log(c);
}

对象

在 javascript 中，对象是一组无序的相关属性和方法的集合，所有事物都是对象，String Number Array function ...

创建对象的三种方式

对象字面量

// 创建一个名称为 obj 的对象；并且包含多个属性和一个方法；
var obj = {
	uname: ‘zs‘,
    uage: ‘23‘,
    usex: ‘0‘,
    sayHi: function () {
        console.log(‘Hi~‘);
    }
};
// 1. 调用对象属性；
console.log(obj.uname);
console.log(obj[‘uage‘]);
// 2. 调用对象方法
obj.sayHi();

new Object

var obj = new Object(); // 声明一个空对象；
obj.name = ‘zs‘;
obj.sayHi = function () {
    return ‘Hi‘;
}
console.log(obj.name);
console.log(obj.sayHi());

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员赋初始化值，可以把对象中一些公用的属性和方法抽取出来，封装到这个函数里；

// 构造函数中是不需要return的
// 抽象了对象的公共部分，封装到了函数里面，泛指一大类(class)
function Person(name) {
    this.name = name;
    this.sayHi = function (say) {
        console.log(say);
    }
}
// 特指某一个，通过 new 关键字创建对象的过程也称对象实例化
var zs = new Person(‘zs‘);
console.log(zs.name);
zs.sayHi(‘Hi~‘);
// new 执行过程
// 1, 在内存中创建一个空对象
// 2, 让 this 指向这个新对象
// 3, 执行构造函数里面的代码，给这个新对象添加属性和方法
// 4, 返回这个对象

遍历对象

var obj = {
    uname: ‘red‘,
    say: function () {
        console.log(‘Hi‘);
    }
}
// 遍历对象
for (var k in obj) {
    console.log(k); // 输出键；uname, say
    console.log(obj[k]); // 输出值；red, function
}

JavaScript 内置对象

Math

Math.PI; // 返回圆周率
Math.max(1, 2); // 返回最大值，非数字返回NaN, 空返回 -infinity
Math.min(1, 2); // 返回最小值，非数字返回NaN, 空返回 infinity
Math.abs(1); // 绝对值 字符串型数字会隐式转换，非数字返回 NaN
Math.floor(1.9); // 向下取整;
Math.ceil(1.1); // 向上取整；
Math.round(1.5); // 四舍五入；
Math.random(); // 随机数 0~1 不包含1
// 案例 任意两个数之间的随机值，包含最大值
function getRandom(max, min) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

Date

// date 是构造函数 要通过new来创建实例
var date = new Date(); // 默认输出当前系统时间 2020-03-25T14:45:05.347Z
var date = new Date(‘2019-10-1 8:8:8‘) // 可以设置时间注意格式 2019-10-01T00:08:08.000Z

方法	说明
getFullYear();	获取当前年
getMonth();	获取当前月（0 - 11）
getDate();	获取当前日
getDay();	获取当前 星期（星期天 0）
getHours();	获取当前小时
getMinutes();	获取当前分钟
getSeconds();	获取当前秒

获取时间戳

var date = new Date();
date.valueOf();
date.getTime();
// 简单写法
var date1 = +new Date();
// H5 新增方法
Date.now();

Array

检测是否为数组

var arr = [];
console.log(arr instanceof Array);  // true false
console.log(Array.isArray(arr)); // true false  H5 新增 IE9+

添加删除数组元素

方法名	说明	返回值
arr.push(1, 2);	末尾添加一个或多个元素，修改原数组	返回新的长度
arr.pop();	末尾删除一个元素，修改原数组	返回被删除的元素
arr.unshift(1, 2);	开头添加一个或多个元素，修改原数组	返回新的长度
arr.shift();	开头删除一个元素，修改原数组	返回第一个被删除的元素

数组排序方法

方法	说明	返回值
reverse();	翻转数组	已经翻转完成的数组
sort();	数组排序，但是如果碰到2位数以上的元素需要特殊处理	已经排序完成的数组

// **以上两个方法会修改原数组**
var arr = [13, 44, 2, 1, 0];
arr.sort(function (a, b) {
	// return a - b; // 升序排列
    return b - a; // 降序排列
});

数组索引方法

方法名	说明	返回值
indexOf();	数组中查找给定元素的第一个索引	如果存在返回索引号，不存在返回 -1
lastIndexOf();	在数组中的最后一个索引	如果存在返回索引号，不存在返回 -1

var arr = [‘pink‘, ‘red‘, ‘bule‘, ‘red‘];
console.log(indexOf(‘red‘)); // 1 从前面开始找只找一个
console.log(lastIndexOf(‘red‘)); // 3
// 数组去重
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;
}