文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号

扫码关注官方订阅号

登录
编程词典 博客 APP下载
首页 > web前端 > js教程 > 正文

关于js设计模式的超详细介绍

零到壹度
发布: 2018-04-13 17:42:06
原创
1368人浏览过


本篇文章给大家分享的内容是关于js设计模式的超详细介绍,有着一定的参考价值,有需要的朋友可以参考一下

js设计模式

Jan 14, 2017 | 学习笔记 | 3387 Hits


目录

  • 前言

  • 单体模式

  • 工厂模式

  • 迭代器模式

  • 装饰者模式

  • 策略模式

  • 外观模式

  • 代理模式

  • 中介者模式

  • 观察者模式

前言

本文参考于《javascript模式》,因此会大量内容会和书中相同,手上有这本书的朋友可以直接看书。因为我的记忆习惯是抄书,所以我会先抄写下来再发到博客上。

单体模式

单体模式思想在于保证一个特定类仅有一个实例,意味着当你第二次使用同一个类创建信对象时,应得到和第一次创建对象完全相同。

方法一

@@######@@ @@######@@


缺点

instance 属性暴露。

方法二

使用闭包

@@######@@ @@######@@


缺点

因为重写了构造函数,constructor 还是指向了老的构造函数,且实例化后在添加原型属性也是不一样的。如下

@@######@@ @@######@@


方法三

解决方法二问题。

@@######@@


@@######@@


方法四

自运行函数。

@@######@@ @@######@@


工厂模式

工厂模式是为了创建对象。

例子

  • 公共构造函数 CarMaker

  • 名为factory的CarMaker静态方法来创建car对象

@@######@@ @@######@@


实现

@@######@@


@@######@@@@######@@


内置工厂对象

Object() 构造函数即为内置工厂对象。

迭代器模式

有一个包含某种数据集合的对象,该数据可能存储在一个复杂数据结构内部,而要提供一个简单方法讷讷感访问到数据结构中没一个元素。

  • next() 下一个

  • hasNext() 是否有下一个

  • reWind() 重置指针

  • current() 返回当前

@@######@@


@@######@@


装饰者模式

可以在运行时候添加附加功能到对象中,他的一个方便特征在于其预期行为的可定制和可配置特性。

例子 假设在开发一个销售商品的Web应用,每一笔信销售都是一个人新的 sale 对象。该对象“知道”有关项目的价格,并可以通过 getPrice() 方法返回加个。
根据不同情况,可以用额外的功能装饰此对象。
假设客户在魁北克省,买房需要支付联邦税和魁北克省税,则此时需要调用联邦税装饰者和魁北克省税装饰者。

@@######@@ @@######@@


并且装饰是可选的,例如不再魁北克省有可能没有省税。

方法一

@@######@@ @@######@@


方法二

此方法使用列表实现,而且相对来说比较好理解一点。本质就是把装饰者名称保存到一个列表中并且一次调用此列表中的方法。

@@######@@


@@######@@


策略模式

策略模式支持在运行时候选择算法。例如用在表单验证问题上,可以创建一个具有 validate() 方法的验证器对象,无论表单具体类型是什么,该方法都会被调用,
并且返回结果或者错误信息。

@@######@@


@@######@@


策略模式定义及例子实现参考与《javascript模式》及 汤姆大叔的博客

外观模式

外观模式即让多个方法一起被调用

例如。 stopPropagation() 和 preventDefault() 兼容性一起调用。

@@######@@


@@######@@


代理模式

在代理模式中,一个对象充当另外一个对象的接口,和外观模式区别是:外观模式是合并调用多个方法。
代理模式是介于对象的客户端和对象本身之间,并且对该对象的访问进行保护。

包裹例子

现在有个包裹,卖家要把这个包裹寄给gary,则需要通过快递公司寄过来,此时快递公司就是一个 proxy

@@######@@


@@######@@


论坛权限管理例子

本例子参考与 大熊君

  • 权限列表

    • 发帖 1

    • 帖子审核 2

    • 删帖 3

    • 留言、回复 4

用户 代码 权限
注册用户 001 1 4
论坛管理员 002 2 3 4
系统管理员 003 1 2 3 4
游客 000 null

用户类

@@######@@


@@######@@


论坛类

@@######@@


@@######@@


运行

@@######@@


@@######@@


中介者模式

中介者模式可以让多个对象之间松耦合,并降低维护成本

例如:游戏程序,两名玩家分别给与半分钟时间来竞争决出胜负(谁按键的次数多胜出,这里玩家1按1,玩家2按0)

  • 计分板(scoreboard)

  • 中介者 (mediator)

中介者知道所有其他对象的信息。他与输入设备(此时是键盘)进行通信并处理键盘上的按键时间,之后还将消息通知玩家。玩家玩游戏同时(每一分都更新自己分数)还要
通知中介者他所做的事情。中介者将更新后的分数传达给计分板。

除了中介者莫有对象知道其他对象。

图示

图示

@@######@@


@@######@@


观察者模式

观察者模式在 javascript 中使用非常广泛。所有的浏览器时间就是该模式的实现,node.js中的events也是此模式实现。
此模式另一个名称是 订阅/发布模式 。
设计这种模式原因是促进形成松散耦合,在这种模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的
特定活动并在状态改编后获得通知。订阅者因此也成为观察者,而被观察的对象成为发布者或者主题。当发生了一个重要事件时候
发布者会通知(调用)所有订阅者并且可能经常已事件对象的形式传递消息。

小结

1.单体模式

针对一个类仅创建一个对象。

2.工厂模式

根据字符串制定类型在运行时创建对象的方法。

3.迭代器模式

提供一个API来遍历或者操作复杂的自定义数据结构。

4.装饰者模式

通过从预定义装饰者对象中添加功能,从而在运行时侯调整对象

5.策略模式

在悬在最佳策略以处理特定任务的时候仍然保持相同的接口。

6.外观模式

通过把常用方法包装到一个新方法中,从来提供一个更为便利的API。

7.代理模式

通过包装一个对象从而控制对它的访问,其中主要方法是将方位聚集为租或者
仅当真正必要时侯才执行访问,从未避免高昂的操作开销。

8.终结者模式

通过是你的对象之间相互不直接“通话”,而是通过一个中介者对子昂进行通信,
从而形成松散耦合。

9.观察者模式

通过创建“可观察”的对象,当发生一个感兴趣的事件时可将改时间通告给所有观察者
从而形成松散耦合。

<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Universe(){
if(typeof Universe.instance==="object"){
return Universe.instance; //防止被篡改
}
this.xx="xx";
Universe.instance=this;
return this;
}
var uni=new Universe();
var uni2=new Universe();
uni===uni2; //true
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Universe(){
var instance=this; //缓存this
this.xx="xx";
Universe=function(){ //重写此构造函数
return instance;
}
}
var uni=new Universe();
var uni2=new Universe();
uni===uni2; //true
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var uni = new Universe();
Universe.prototype.a = 1
var uni2 = new Universe();
console.log(uni === uni2) //true
console.log(uni.a) //undefinded
console.log(uni2.a) //undefinded
console.log(uni.constructor === Universe); //false
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Universe(){
var instance;
Universe=function Universe(){
return instance ;
}
Universe.prototype=this; //保存原型属性
instance=new Universe();
instance.constructor=Universe;
instance.xx="xx";
}
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var Universe;
(function(){
var instance;
Universe=function Universe(){
if(instance){
return instance;
}
instance=this;
this.xx="xx";
}
})();
var uni = new Universe();
Universe.prototype.a = 1
var uni2 = new Universe();
console.log(uni === uni2) //true
console.log(uni.a)   //1
console.log(uni2.a)  //1
console.log(uni.constructor === Universe);  //true
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var corolla=CarMaker.factory('compact');
var solstice=CarMaker.factory('convertible');
var cherokee=CarMaker.factory('suv');
corolla.drive() //I have 4 doors
solstice.drive() //I have 2 doors
cherokee.drive() //I have 6 doors
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function CarMaker() {}
CarMaker.prototype.drive = function() {
return "I have " + this.doors + " doors";
}
CarMaker.compact = function() {
this.doors = 4;
}
CarMaker.convertible = function() {
this.doors = 2
}
CarMaker.suv = function() {
this.doors = 6;
}
CarMaker.factory = function(type) {
if (typeof CarMaker[type] !== "function") {
throw "Error"
}
if (typeof CarMaker[type].prototype.drive !== "function") {
CarMaker[type].prototype = new CarMaker();
}
var newCar = new CarMaker[type]();
return newCar;
}
var corolla = CarMaker.factory('compact');
console.log(corolla.drive()); //I have 4 doors
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var agg = (function() {
var index = 0;
var data = [1, 2, 3, 4, 5, 6];
var length = data.length;
return {
next: function() { //这里是从第一个数据开始输出 本例中为 1
if (!this.hasNext()) {
return null;
}
var element = data[index];
index++;
return element;
},
hasNext: function() {
return index < length;
},
reWind: function() {
index = 0;
},
current: function() {
return data[index];
}
}
})();
while (agg.hasNext()) {
console.log(agg.next()); //1,2,3,4,5,6
}
agg.reWind();  //此时重置指针到0
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var sale=new Sale(100);
sale=sale.decorate("fedtax"); //联邦税
sale=sale.decorate("quebec"); //魁北克省税
sale=sale.decorate("miney"); //转为美元格式
sale.getPrice(); //返回价格
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Sale(price) {
this.price = price;
}
Sale.prototype.getPrice = function() {
return this.price;
};
Sale.decorators = {}; //储存装饰者的对象
//装饰者
Sale.decorators.fedtax = {
getPrice: function() {
var price = this.uber.getPrice();
return price * 0.8; //对price进行处理
},
}
Sale.decorators.quebec = {
getPrice: function() {
var price = this.uber.getPrice();
return price * 0.7; //对price进行处理
},
}
Sale.decorators.money = {
getPrice: function() {
var price = this.uber.getPrice();
return "$" + price * 0.9; //对price进行处理
},
}
/*decorate() 方法
调用装饰者方法 sale.=sale.decorate("fedtax");
fedtax字符串对应 Sale.decorators中的对象属性。新装饰对象 newobj 将继承目前我们所拥有的对象,这就是ixiangthis
为了完成继承部分代码,此时需要一个临时构造函数,先设置 newobj 的 uber 属性,以便于自对象可以访问到父对象。之后从装饰者中
将所有的额外属性复制到新装饰的对象 newobj 中,最后返回 newobj。
*/
Sale.prototype.decorate = function(decorate) {
var F = function() {};
var overrides = this.constructor.decorators[decorate]; //获取装饰者对象
F.prototype = this;
var newobj = new F();
newobj.uber = F.prototype;
for (var key in overrides) {
if (overrides.hasOwnProperty) { //判断对象是不是自身的
newobj[key] = overrides[key];
}
}
return newobj;
};
var sale = new Sale(100);
sale = sale.decorate("fedtax"); //联邦税
sale = sale.decorate("quebec"); //魁北克省税
sale = sale.decorate("money"); //转为美元格式
console.log(sale.getPrice()); //$50.4
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Sale(price) {
this.price = price;
this.decorateList = [];
}
Sale.decorators = {};
Sale.decorators.fedtax = {
getPrice: function(price) {
var price = this.uber.getPrice();
return price * 0.8; //对price进行处理
},
}
Sale.decorators.quebec = {
getPrice: function(price) {
var price = this.uber.getPrice();
return price * 0.7; //对price进行处理
},
}
Sale.decorators.money = {
getPrice: function(price) {
var price = this.uber.getPrice();
return "$" + price * 0.9; //对price进行处理
},
}
Sale.prototype.decorate = function(decorator) {
this.decorateList.push(decorator);
};
Sale.prototype.getPrice = function() {
var price = this.price;
this.decorateList.forEach(function(name) {
price = Sale.decorators[name].getPrice(price);
});
return price;
};
var sale = new Sale(100);
sale = sale.decorate("fedtax"); //联邦税
sale = sale.decorate("quebec"); //魁北克省税
sale = sale.decorate("money"); //转为美元格式
console.log(sale.getPrice()); //$50.4
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var validator = {
// 所有可以的验证规则处理类存放的地方,后面会单独定义
types: {},
// 验证类型所对应的错误消息
messages: [],
// 当然需要使用的验证类型
config: {},
// 暴露的公开验证方法
// 传入的参数是 key => value对
validate: function (data) {
var i, msg, type, checker, result_ok;
// 清空所有的错误信息
this.messages = [];
for (i in data) {
if (data.hasOwnProperty(i)) {
type = this.config[i];  // 根据key查询是否有存在的验证规则
checker = this.types[type]; // 获取验证规则的验证类
if (!type) {
continue; // 如果验证规则不存在,则不处理
}
if (!checker) { // 如果验证规则类不存在,抛出异常
throw {
name: "ValidationError",
message: "No handler to validate type " + type
};
}
result_ok = checker.validate(data[i]); // 使用查到到的单个验证类进行验证
if (!result_ok) {
msg = "Invalid value for *" + i + "*, " + checker.instructions;
this.messages.push(msg);
}
}
}
return this.hasErrors();
},
// helper
hasErrors: function () {
return this.messages.length !== 0;
}
};
//然后剩下的工作,就是定义types里存放的各种验证类了
// 验证给定的值是否不为空
validator.types.isNonEmpty = {
validate: function (value) {
return value !== "";
},
instructions: "传入的值不能为空"
};
// 验证给定的值是否是数字
validator.types.isNumber = {
validate: function (value) {
return !isNaN(value);
},
instructions: "传入的值只能是合法的数字,例如:1, 3.14 or 2010"
};
// 验证给定的值是否只是字母或数字
validator.types.isAlphaNum = {
validate: function (value) {
return !/[^a-z0-9]/i.test(value);
},
instructions: "传入的值只能保护字母和数字,不能包含特殊字符"
};
//使用的时候,我们首先要定义需要验证的数据集合,然后还需要定义每种数据需要验证的规则类型,代码如下:
var data = {
first_name: "Tom",
last_name: "Xu",
age: "unknown",
username: "TomXu"
};
validator.config = {
first_name: 'isNonEmpty',
age: 'isNumber',
username: 'isAlphaNum'
};
//最后获取验证结果 
validator.validate(data);
if (validator.hasErrors()) {
console.log(validator.messages.join("\n"));
}
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var myEvent = {
stop: function(e) {
if (typeof e.preventDefault() === "function") {
e.preventDefault();
}
if (typeof e.stopPropagation() === "function") {
e.stopPropagation();
}
//for IE
if (typeof e.returnValue === "boolean") {
e.returnValue = false;
}
if (typeof e.cancelBubble === "boolean") {
e.cancelBubble = true;
}
}
}
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
var package = function(receiver) {
this.receiver = receiver;
}
var seller = function(package) {
this.package = package;
this.send = function(gift) {
return package.receiver + "你的包裹:" + gift;
}
}
var express = function(package) {
this.package = package;
this.send = function(packageName) {
return new seller(package).send(packageName);
}
}
//调用
var ems = new express(new package("gary"));
console.log(ems.send("键盘")); //gary你的包裹:键盘
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function User(name, code) {
this.name = name;
this.code = code;
}
User.prototype.getName = function() {
return this.name;
};
User.prototype.getCode = function() {
return this.code;
};
User.prototype.post = function() {
//发帖功能
};
User.prototype.remove = function() {
// 删帖功能
};
User.prototype.check = function() {
//审核
};
User.prototype.comment = function() {
//留言回复
};
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Forum(user) {
this.user=user;
}
Forum.prototype.getUser = function () {
return this.user;
};
Forum.prototype.post = function () {
var code=this.user.getCode();
if(code=="001"||code=="003"){
return this.user.post();
}else{
return false;
}
};
Forum.prototype.remove = function () {
var code=this.user.getCode();
if(code=="002"||code=="003"){
return this.user.remove();
}else{
return false;
}
};
Forum.prototype.check = function () {
var code=this.user.getCode();
if(code=="002"||code=="003"){
return this.user.check();
}else{
return false;
}
};
Forum.prototype.comment = function () {
var code=this.user.getCode();
if(code=="001"||code=="002"||code=="003"){
return this.user.comment();
}else{
return false;
}
};
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
new Forum(new User("administartor","003"));
登录后复制
<br/>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
function Player(name) {
this.points = 0;
this.name = name;
}
Player.prototype.play = function() {
this.points += 1;
mediator.played();
};
var scoreboard = {
element: "这里是获取的element用于展示分数",
update: function(score) { //更新分数
var msg;
for (var key in score) {
if (score.hasOwnProperty(key)) {
msg += score[key];
}
}
this.element.innerText = msg;
},
}
var mediator = {
players: {}, //玩家对象
setup: function() {
var players = this.players;
players.home = new Player("home");
players.guest = new Player('guest');
},
played: function() {
var players = this.players;
var score = {
home: players.home.points,
guest: players.guest.points
}
},
keypress: function(e) {
e = e || window.event;
if (e.which === 49) { //or keycode   对应按键 1
mediator.players.home.play();
return;
}
if (e.which === 48) { // 对应按键 0
mediator.player.guest.play();
return;
}
},
}
//运行
mediator.setup();
window.onkeypress = mediator.keypress;
setTimeout(function() { //设置30秒游戏时间
window.onkeypress = null;
alert("game end");
}, 30000);
登录后复制

以上就是关于js设计模式的超详细介绍的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
收藏 点赞
上一篇:JS怎么判断客户端类型 下一篇:一些关于js的实用小算法
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
  • 跟我学PS第八天02:光效素材的抠图方法
    2018-08-28 15:02:42
  • 跟我学PS第八天01:如何抠取文件中的印章
    2018-08-25 10:55:46
  • 跟我学PS第七天02:如何抠出复杂树林
    2018-08-20 16:25:41
  • 跟我学PS第七天01:如何将彩图抠出线稿效果
    2018-08-18 11:26:54
  • 跟我学PS第六天02:模糊工具
    2018-08-14 16:35:58
  • 跟我学PS第六天01:修复画笔工具
    2018-07-28 15:36:43
  • 跟我学PS第五天02:移动工具的使用方法和应用
    2018-07-27 16:59:00
  • 跟我学PS第五天01:使用裁剪工具
    2018-07-27 15:22:47
  • 跟我学PS第四天02:练习Photoshop中的套索工具
    2018-07-23 17:56:00
  • 跟我学PS第四天01:如何给照片加边框效果
    2018-07-23 16:21:38
最新问题
JS中的Object.assign有什么用?怎么用? Object.assign是JavaScript中用于复制对象属性的方法,其核心作用是将一个或多个源对象的可枚举属性复制到目标对象中并返回。1.基本用法是合并对象,语法为Object.assign(target,...sources),若属性名重复,后面的源对象属性会覆盖前面的;2.它执行的是浅拷贝,并不复制嵌套对象的内部结构,仅复制引用地址,因此修改副本会影响原对象;3.常见应用场景包括React状态更新与配置项合并,确保原有对象部分更新而非完全替换;4.展开运算符(...)是其替代方案之一,
2025-06-09 17:51:01
136
JavaScript中的reduce方法怎么用? JavaScript中的reduce方法是一个强大工具,用于将数组元素通过累加器函数处理成单一值。其用法包括:1.求和,如constsum=numbers.reduce((acc,val)=>acc+val,0);2.扁平化数组,如constflattened=nestedArray.reduce((acc,val)=>acc.concat(Array.isArray(val)?val.reduce((a,v)=>a.concat(v),[]):val),[]);使用时需注意提供初始值以避免处理
2025-06-09 17:06:04
528
JavaScript中如何获取表单数据? 在JavaScript中获取表单数据可以通过多种方式实现:1.使用document.getElementById获取表单元素并遍历其值;2.使用document.querySelector选择特定表单字段;3.利用表单的elements属性访问所有字段。这些方法各有优缺点,适用于不同场景。
2025-06-09 16:42:01
923
JS中的fetch怎么用?和ajax有什么区别? fetch基本用法是传入URL发起GET请求,如fetch('https://api.example.com/data')并处理JSON响应;发POST需加配置项,注意默认不带cookie、不会自动报错404、返回Promise。区别上:1.语法不同,fetch用Promise更简洁;2.fetch默认不送cookies;3.fetch兼容性差不支持IE;4.AJAX可中断请求和监听进度更方便。选择时若开发现代应用推荐fetch,若需兼容老旧浏览器或控制细节则选AJAX,也可结合第三方库如axi
2025-06-09 15:24:01
352
JS中的async/await怎么用?有什么作用? async/await是JavaScript中处理异步操作的语法糖,本质是对Promise的封装,使代码更清晰易维护。1.async函数通过自动将返回值包装成Promise来声明异步函数;2.await用于暂停async函数执行,直到Promise被解决,只能在async函数中使用;3.推荐用try/catch捕获错误,并行任务可结合Promise.all使用;4.相比Promise.then()链,async/await结构更清晰、错误处理更直观;5.注意避免滥用await影响性能,调用asy
2025-06-08 23:57:01
780
JS中的setTimeout和setInterval有什么区别? 在JavaScript中,setTimeout和setInterval看起来都是用来控制代码执行时间的,但它们的行为方式其实完全不同。简单来说:setTimeout是“只执行一次”的定时器。setInterval是“重复执行”的定时器。接下来我们从几个常见使用场景出发,讲讲它们的区别和用法。1.执行次数不同这是两者最根本的区别:setTimeout只会在指定时间后执行一次任务。比如你想等3秒后弹出一个提示框,就可以用它:setTimeout(()=>{alert('3秒到了');
2025-06-08 21:48:01
263
JS中的Reflect对象有什么作用? Reflect在JavaScript中主要用于统一对象操作接口并增强Proxy的拦截能力,其作用包括:1.替代部分Object方法如Reflect.get/set/deleteProperty实现更友好的对象属性操作;2.与Proxy配合通过对应方法如get/set/has等简化代理逻辑并保留默认行为;3.提供实用工具如Reflect.apply/construct/isExtensible/ownKeys等实现函数调用、阻止扩展、获取键等功能。
2025-06-08 20:39:01
703
JS中的...运算符有什么作用?怎么用? JavaScript中的...运算符主要有三个用途:1.展开数组或对象元素,用于函数参数传递或合并数组/对象;2.在函数参数中收集剩余参数,形成数组处理任意数量输入;3.在解构赋值中收集剩余部分,便于提取或排除特定数据。例如用[...arr1,...arr2]合并数组,用functionsum(...numbers)处理变参,以及通过[first,...rest]解构获取剩余元素。
2025-06-08 19:51:02
450
JS中的箭头函数和普通函数有什么区别? 箭头函数与普通函数的关键区别在于this绑定、构造函数能力和arguments对象。1.this指向不同:普通函数的this取决于调用方式,而箭头函数继承外层作用域的this,如在对象方法中使用可能无法访问对象属性;2.箭头函数不能作为构造函数,无法通过new创建实例;3.箭头函数无自己的arguments对象,引用外层函数的arguments,建议改用rest参数替代;适合在无需改变this、非构造函数、不依赖arguments的场景使用,反之则应避免。
2025-06-08 16:51:01
608
JS中的call和apply有什么区别? call和apply的核心区别在于参数传递方式不同。1.call的参数依次列出,适用于参数固定、明确的场景,如Math.max.call(null,1,2,3);2.apply的参数为数组或类数组,会自动展开,适合参数为数组的情况,如Math.max.apply(null,[10,20,30]);3.现代可用bind绑定this或扩展运算符替代apply的展开功能,但理解call和apply的本质仍很重要。
2025-06-08 15:30:02
445
相关专题
更多>
  • c++中保留2位小数输出教程
  • golang变量合集
  • python中eval用法教程
  • Java中是什么意思合集
  • PHP主流框架的优缺点汇总
  • 无需下载的视频网站免费观看入口
  • 免费韩漫入口网站大全
  • 无需VIP的日本免费漫画网站入口大全
热门推荐
  • JavaScript中的reduce方法怎么用?
  • JavaScript中如何获取表单数据?
  • JS中的fetch怎么用?和ajax有什么区别?
  • JS中的async/await怎么用?有什么作用?
  • JS中的setTimeout和setInterval有什么区别?
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
  • ThinkPHP5快速开发企业站点[全程实录]
    ThinkPHP5快速开发企业站点[全程实录]
    399334次学习
    收藏
  • PHP Workerman 基础与实战:即时通讯聊天系统(ThinkPHP6)
    PHP Workerman 基础与实战:即时通讯聊天系统(ThinkPHP6)
    50945次学习
    收藏
  • Thinkphp3.2.3个人博客开发
    Thinkphp3.2.3个人博客开发
    212549次学习
    收藏
  • 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
    最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)
    1457007次学习
    收藏
  • phpStudy极速入门视频教程
    phpStudy极速入门视频教程
    526647次学习
    收藏
  • 独孤九贱(4)_PHP视频教程
    独孤九贱(4)_PHP视频教程
    1234342次学习
    收藏
  • PHP实战天龙八部之仿爱奇艺电影网站
    PHP实战天龙八部之仿爱奇艺电影网站
    764029次学习
    收藏
  • 独孤九贱(1)_HTML5视频教程
    独孤九贱(1)_HTML5视频教程
    611016次学习
    收藏
  • 支付宝沙箱支付(个人也能用的支付)
    支付宝沙箱支付(个人也能用的支付)
    2499次学习
    收藏
  • 麻省理工大佬Python课程
    麻省理工大佬Python课程
    28663次学习
    收藏
  • Swoole5 Hyperf3 php8新版本协程框架讲说
    Swoole5 Hyperf3 php8新版本协程框架讲说
    11526次学习
    收藏
  • 【web前端】Node.js快速入门
    【web前端】Node.js快速入门
    14117次学习
    收藏
  • 国外Web开发全栈课程全集
    国外Web开发全栈课程全集
    6751次学习
    收藏
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
  • [表单按钮] jQuery企业留言表单联系代码
  • [播放器特效] HTML5 MP3音乐盒播放特效
  • [菜单导航] HTML5炫酷粒子动画导航菜单特效
  • [表单按钮] jQuery可视化表单拖拽编辑代码
  • [播放器特效] VUE.JS仿酷狗音乐播放器代码
  • [html5特效] 经典html5推箱子小游戏
  • [图片特效] jQuery滚动添加或减少图片特效
  • [相册特效] CSS3个人相册封面悬停放大特效
  • [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5
  • [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus
  • [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5
  • [Bootstrap模板] 简约简历资料网页模板 Bootstrap4
  • [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE
  • [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版
  • [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox
  • [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio
  • [网站素材] 可爱的夏天元素矢量素材(EPS+PNG)
  • [网站素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
  • [网站素材] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
  • [网站素材] 金色的毕业帽矢量素材(EPS+PNG)
  • [网站素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
  • [网站素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
  • [网站素材] 扁平风格的植树节banner矢量素材(AI+EPS)
  • [网站素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)
  • [前端模板] 驾照培训服务机构宣传网站模板
  • [前端模板] HTML5房地产公司宣传网站模板
  • [前端模板] 新鲜有机肉类宣传网站模板
  • [前端模板] 响应式天气预报宣传网站模板
  • [前端模板] 房屋建筑维修公司网站CSS模板
  • [前端模板] 响应式志愿者服务网站模板
  • [前端模板] 创意T恤打印店网站HTML5模板
  • [前端模板] 网页开发岗位简历作品展示网页模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号

微信扫码
关注PHP中文网服务号

技术交流群

QQ扫码
加入技术交流群

app下载

扫描下载App

PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部