JavaScript知识点三

发布时间：2020-10-13 14:07:34 修改时间：2020-10-13 14:12:48 阅读：8601 评论：2 0

模块化开发

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

优点：
1、代码重用时，引入js文件的数目可能少了，避免来代码的累赘。
2、代码复用高，开发效率也会提高。
3、方便后期的维护

缺点：
1.系统分层，调用链会很长
2.模块间通信,模块间发送消息会很耗性能

常见的模块化的写法

1、原始写法（封装函数）

这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

2、对象写法

这样的写法会暴露所有模块成员，内部状态可以被外部改写

3、立即执行函数写法

立即执行函数可以达到不暴露私有成员的目的

---

解构赋值：es6

重点：
1、等号左边为var 的变量，右边为值得数组，两边通过key值一一赋值。
2、如果左边有属性赋值，就赋值右侧的对象属性。
3、只要等号右边的值不是对象或数组，就先将其转为对象 ，所以undefined和null 无法转换，会报错

简单了解解构赋值（数组的对象都有一个length属性）：
以下例子统一变量 ：

const str = '123', 

value = [4, 5, 6],

obj={a:7,b:8,c:9};




以下例子统一打印方法：

console.log('a='+a,'b='+b,'c='+c);


1、字符串： 变量 = 值

let [a,b,c]  = str;  

// 解析过程var [a,b,c][0]=str[0],[a,b,c][1]=key[1],[a,b,c][2]=[a,b,c][2];  

//结果var a=1,b=2,c=3;




2、数组：数组[0] = 数组[0]

let [a,b,c] = value  // 解析过程如上，结果为：var a=4,b=5,c=6;


3、对象：

let {a, b, c}  = obj;//解析过程如上，结果为：var a=7,b=8,c=9;


4、函数：这里涉及到解构赋值以及默认值方式，注意函数的结构赋值跟以上三种赋值方式一样，这里提供一个例子：

function add({x, y,z = 0}){

    return x + y +z;

}

console.log(add({x : 1, y :2}))//3




5、属性赋值（以上讲的都是变量赋值，如果给变量添加属性，那么就是属性赋值）：

let { valueOf: a } = obj;  // ƒ valueOf() { [native code] }


说明：上诉valueOf设置之后解析的就是obj的valueOf属性 如果设置其他属性同理。
这里打印出来a的值为 obj.prototype.valueOf

默认值： 所有定义的左侧变量都可以设置默认值 使用方式 ‘key=value’赋值,作用于右侧没有相关赋值操作后，保留默认值，否则更新值。
例如：

let [a = 44,b,c,d = 77] = value  

 // 解析过程如上，

 //结果为：var a=4,b=5,c=6,d=77;




实际应用：

 const {merge} = require('webpack-merge');  

//新版webpack的功能模块webpack-merge引入等




说明：引入方式可能有的不需要用解构赋值，应为版本原因，不支持es6语法导致。

---

js值和引用

1、概念

引用类型的保存与复制的是指向对象的一个指针（指向内存地址），同时同步改变原来的变量。

例一：

var a = 1;

var b = a;

b = 2;

a===b;//false  因为a=1，b=2





例二：

var a = {x:1};

var b = a;

b.x = 2;

a===b;//true  因为a ={x:2},b={x:2} //因为a和b指向的引用内存地址相同





例三：

var a = {x:1};

var b = {x:1};

a===b;//false  因为a和b指向的引用内存地址不同




基本类型

• 字符串(string)
• 数字(number)
• 布尔值( boolean)
• 空值(null)
• 未定义(undefined)
• 符号(symbol)

引用类型

• 对象( Object、Array、RegExp、Date、Function）

2、符号说明

“=”：普通类型为赋值或拷贝，对象为引用
“===”：普通类型为对比值，引用类型对比的是内存地址，如上例二、例三。

3、注意点

这里注意：如果引用类型重新赋值也会造成内存地址重新定义
如上面例二，咱们改装一下：

var a = {x:1};

var b = a;

b = {x:1}; // 重新赋值，改变了内存地址

a===b;//false   因为a和b指向的引用内存地址不同




4、形参属性的变更示例

var a = {x : 1}; 

function f(o) {

    //o = 100;  // 仍然是1, obj并未被修改为100.

    o.x = 100   // 100,obj已经被修改

} 

f(a); 

console.log(a.x); 




说明:

• 形参也可以对指针对象操作
• 如果重新赋值也会新建内存地址，不影响原数据

如果一个变量绑定到一个非基本数据类型，那么它只记录了一个内存地址，该地址存放了具体的数据。
指向基本数据类型的变量相当于包含了数据，而现在指向非基本数据类型的变量本身是不包含数据的。

知识点更新到此告一段落。
前段时间持续内容和修改点我并没有发出来，但不影响之前的发布，本章所有知识点都是本人通过查阅大量资料总结归纳，以我个人感觉最优的方式呈现出来的，有问题希望帮忙指点提出，在此感谢。
本章知识点只是我感觉应该了解或者掌握的基础，如需深入了解可自行学习。

---