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

作用域

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

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;
}

猜你喜欢

转载自www.cnblogs.com/article-record/p/12571775.html