JS-一一网

import和export的作用

在前端开发的学习中，组件化和模块化思维是很重要的。在es6标准发布之前，js是没有模块化的概念的，也就是说原生js是无法将一个大型程序拆分成若干相互依赖的小模块的。

而es6针对这个问题提出了Module的概念，设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

Module模块功能主要由两个命令构成：export 和 import。

export

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口，可以使用as对要输出的变量进行重命名。

import

import用于在一个模块中加载另一个含有export接口的模块，可以使用as对引入的变量进行重命名。

import命令具有提升效果，会提升到整个模块的头部，首先执行。如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

也就是说，在使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

export 和 export default

1、二者均用于导出常量、函数、文件、模块等。在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用。

2、在一个文件或模块中，export、import可以有多个，export default仅有一个；

3、通过export方式导出，在导入时要加{ }，export default则不需要。

4、在用import引入时，如果是用export方法定义的导出，必须要知道指定的变量名。而如果使用export default定义的时候，import可以起任意的名字。

import和export的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。

export { foo, bar } from 'my_module';  // 结合了export和import形式
 
//可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
复制代码

模块的接口改名和整体输出，具名接口改为默认接口，默认接口也可以改名为具名接口也可以采用这种写法。

// 接口改名
export { foo as myFoo } from 'my_module';
复制代码

定时器的用法和清除

在前端开发的过程中，有些时候需要某段程序等待一段时间后再开始执行，在JavaScript中主要通过定时器实现这一类需求。

JS的两种定时器

window.setTimeout([function],[interval])

设置一个定时器，并且设定了一个等待的时间，当到达时间后，执行对应的方法，当方法执行完成定时器停止。

window.setInterval([function],[interval])

设置一个定时器，并且设定了一个等待的时间，当到达时间后，执行对应的方法。
当方法执行完成，定时器并没有停止，以后每隔这么长的时间都会重新的执行对应的方法，直到我们手动清除定时器为止。

注意：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

定时器返回值

JS中的定时器是有返回值的，返回值是一个数字，代表当前是第几个定时器。

var timer1=window.setTimeout(function(){},1000);  //timer1->1 当前是第一个定时器
var timer2=window.setTimeout(function(){},1000);  //timer2->2` 当前是第二个定时器

window.clearTimeout(timer1); //->把第一个定时器清除掉
//这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)

var timer3=window.setTimeout(function(){},1000);   
//timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;
复制代码

清除定时器

window.clearInterval(timer1)/window.clearTimeout(time1)
两种清除方式可以分别清除通过setTimeout和setInterval设置的定时器。

两种方式在设置定时器的时候有区别，清除定时器的时候没有区别，并且参数不仅可以是timer，还可以是其返回值。

需要注意的是，定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排。

业务场景

setTimeout用于延迟执行某方法或功能；setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步。

删除对象中的某个属性

方法1

删除对象的属性唯一真正的方法，但它的工作比其“替代”object[key] = undefined设置慢100倍。

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;
复制代码

方法2

这个选择不是这个问题的正确答案！但是，如果小心使用它，可以大大加快一些算法。

var obj = {
    field: 1     
};
obj.field = undefined;
复制代码

数组中使用delete

在数组中，与普通的旧对象不同，使用delete在表单中留下垃圾，null在数组中创建一个“洞”, 而且length不变

var array = [1, 2, 3, 4];
delete array[2];
/* Expected result --> [1, 2, 4]
 * Actual result   --> [1, 2, null, 4]
 */
复制代码

数组的拼接

使用for循环

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

for(var i=0; i<arr2.length; i++){
     arr.push(arr2[i])
}
console.log(arr);
// ['tom', 'jerry', 1, 2]
复制代码

使用concat()，注意concat()方法生成了一个新的数组，并不改变原来的数组。

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

var newArr = arr.concat(arr2);

console.log(newArr);
// ["tom", "jerry", 1, 2]
复制代码

使用apply劫持数组的push方法（推荐）

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

arr.push.apply(arr, arr2);
console.log(arr)
// ["tom", "jerry", 1, 2]
复制代码

使用es6中的 ‘点语法’ 扩展运算符（推荐）

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];

arr.push(...arr2);
console.log(arr)
// ["tom", "jerry", 1, 2]
复制代码

箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

x => x * x
复制代码

相当于：

function (x) {
    return x * x;
}
复制代码

箭头函数在只包含一个表达式的情况下，连{ … }和return都可以省略掉。但如果包含多条语句，这时候就不能省略{ … }和return。而如果参数不是一个，就需要用括号()括起来。

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}
复制代码

如果要返回一个对象，就要注意单表达式因为和函数体的{ … }有语法冲突，所出现的特殊情况。

x => { foo: x }// SyntaxError:
x => ({ foo: x })// ok:
复制代码

this

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果。

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
复制代码

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj。

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25
复制代码

如果使用箭头函数，以前的那种hack写法就不再需要了。

var that = this;
复制代码

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略。

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25
复制代码

var、let 和const的区别

虽然在面试资料里，这个知识点多次出现，但是每次看了之后，没过多久就又会忘记了，归根结底还是自己理解得不到位。所以将这部分知识点在这里做个总结，帮助自己理解和记忆。

块级作用域

块作用域由 { } 包括，let和const具有块级作用域，var不存在块级作用域。

if(1){
    var a = 100;
    let b = 10;
    const c = 1;
}

console.log(a); // 100
console.log(b);  // 报错：b is not defined  ===> 找不到b这个变量
console.log(c);  // 报错：c is not defined  ===> 找不到c这个变量
复制代码

块级作用域解决了ES5中的两个问题：

内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量

变量提升

什么是变量提升？

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部，

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
var a = 100;
复制代码

console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
let b = 10;
复制代码

console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
const c = 10;
复制代码

再来看这段代码

function fn() {
   //var a
    if (true) {
        console.log(a + ' now');
    }
    else {
        var a = 1;
        console.log(2);
    }
}

fn(); // a -> undefined
复制代码

我们发现不执行的代码也会影响会执行的代码，因为var a会提升到if语句的前面。

在Java中变量的分为全局变量（成员变量）或者局部变量，在方法体中定义的变量都是局部变量，否则是全局变量（即在方法体外，在类中定义的变量）。

在JavaScript中，在方法体外外用var定义的变量其它方法可以共享，在方法中用var定义的变量只有该方法内生效。

给全局添加属性

浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，同时会将该变量添加为全局对象的属性，但是let和const就不会。

var a = 100;
console.log(a,window.a);    // 100 100
复制代码

let b = 10;
console.log(b,window.b);    // 10 undefined
复制代码

const c = 1;
console.log(c,window.c);    // 1 undefined
复制代码

重复声明

var声明变量时，可以重复声明变量，const和let不能重复声明。

var a = 100;
console.log(a); // 100

var a = 10;
console.log(a); // 10

let b = 100;
let b = 10;
//  控制台报错：Identifier 'b' has already been declared  ===> 标识符a已经被声明了。
复制代码

暂时性死区

如果块级作用域内存在let、const命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。

var a = 100;

if(1){
    a = 10;
    // 在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}
复制代码

当前作用域顶部到该变量声明位置中间的部分，都是该变量的死区，在死区中，禁止访问该变量。“暂时性死区”也意味着typeof不再是一个百分之百安全的操作，因为会使typeof报错。

{
  typeof name; // ReferenceError
  let name;
}
复制代码

初始值设置

在变量声明时，var 和 let 可以不用设置初始值，而const声明变量必须设置初始值，不能使用null占位。

const a; // 控制台报错：SyntaxError: Missing initializer in const declaration
复制代码

指针指向

let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值），但const声明的变量是不允许改变指针的指向(只能进行一次赋值，即声明后不能再修改)。

const a = 1;
a = 2; // 控制台报错：TypeError: Assignment to constant variable.
复制代码

注意

实际上，const保证的并不是变量的值不得改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

但对于引用类型的数据（主要是对象和数组），变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

const obj = {a:100}; // 对象
obj.name = 'apple';
obj.a = 10000;
console.log(obj); // {a:10000,name:'apple'}
复制代码

const list = []; // 数组
list[0] = 10;
console.log(list); // [10]
复制代码

拓展

面试题

for (let i = 0; i < 5; i++) {
    console.log(i)
}
复制代码

上面的代码我们知道打印结果是 0, 1, 2, 3, 4，但是你们有没有想过这个变量i的作用域到底是什么呢？

有人说在这个for循环里呀，但是我这里想说的是这个i作用域是在括号()里。正常的代码是这样的：

首先这个变量_i的作用域是在()里才有效的，循环体里是不能访问到_i的
每次循环的时候创建一个i变量，将括号里的_i赋值到变量i上
最后i++后再将变量i的值赋值回_i上

当然这个过程是很复杂的，可以用下面代码理解，但是JS的实现机制是很复杂的，这里想要说明的let i的作用域有时候并不是我们所理解的那样的。

for (let _i = 0; i < 5; i++) {
    let i = _i
    console.log(i)
    // i++ 先做
    _i = i
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Web 开发者应该避免的 5 个 CSS 的做法

Internet Explorer 内存损坏漏洞

Microsoft IIS w2who.dll 跨站脚本攻击漏洞

K8S集群使用Velero备份及恢复(并行使用BSL&VSL)

Gitee企业版代码托管实践：如何让代码管理变得更加有序可靠

MySQL MaxDB WebAgent无效参数处理拒绝服务漏洞

JS