在第二步中没有对源对象的属性值进行判断，所有的全部使用 ‘=’ 赋值，所以当源对象的属性值为对象属性时，复制的只是引用值，即为浅拷贝的方式，在测试结果中可以看出 test 和 test2 的 b 属性的属性值，使用的是同一个对象，会互相影响。知道了这些之后，如何实现合并时的深拷贝也应该有思路了。
深度拷贝的方式实现对象合并
需要在复制源对象属性值时，判断值的类型，如果是对象数据类型，则递归调用extend函数。则可以实习深拷贝方式的对象合并，实现如下：
function extend() { //extend 深拷贝实现
var name,options,src,copy,
deep = false, //是否深拷贝 默认为false
length = arguments.length,
i = 1,
target = arguments[0] || {};
//如果第一个参数为boolean类型,赋值给deep
if(typeof target == 'boolean'){
deep = arguments[0];
target = arguments[i] || {}; //目标对象顺延
i++;
}
//如果target不是对象数据类型的话 target赋值为 {}
if(['object','function'].indexOf(typeof target) < 0){
target = {};
}
for(;i<length;i++){
options = arguments[i];
if(options != null){
for(name in options){
copy = options[name];
src = target[name];
if(target === copy){ //避免重复循环
continue;
}
if(deep && copy && (typeof copy == 'object')){ // 类型判断
src = Object.prototype.toString.call(copy) == '[object Array]' ? [] : {}; //区分数组和‘对象’
target[name] = extend(deep,src,copy);
}else {
if (copy !== undefined) {
target[name] = copy;
}
}
}
}
}
return target
}
1、参数判断，若第一个参数为布尔类型，则取为控制是否深度拷贝的参数deep , deep 默认为false；同时 目标元素会是第二个参数
2、复制属性值时，要判断deep参数和 属性值的类型 ； 若 deep为true 且 属性值为对象类型 则递归调用 extend函数 ， 否则直接赋值
3、需要区分 数组 和 ‘对象’ ，来给 目标对象的属性赋值不同的初始值。如果都是 {} 的话，数组类型的属性值复制到目标元素上会变为 {'0':xx , '1' : xx ...}
结语
一直都是在直接使用 $.extend()，好用但是不是很清楚其中的实现，自己撸一撸，也许实现上还有不严谨的地方，但是觉得收获还是不错的。
以上就是实现对象合并功能的方法的详细内容，更多请关注php中文网其它相关文章！
中级Javascript - ES6实战视频课程
《Javascript - ES6实战视频课程》讲解了运行环境已支持的 ES6 特性，而忽略掉未支持的特性，随着 Node.js 、babel 和浏览器等 ES6 运行环境的逐步支持，本套视频课程的内容也会补充。这样授课的好处是可以让学员直接在开发中实际的应用 ES6 新特性，也避免学习那些未支持的特性造成的混淆。
的深度那么 从B页面跳转到A页面就应该是 效果2:(翻书翻回到上一页的效果).
一 。首先父页面
home.vue：
scoped.child-view {
position: absolute;
width: 100%;
height: 100%;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}.rightin-enter,
.leftin-leave-active {
opacity: 0;
transform: translate3d(50% 0, 0);
-webkit-transform: translate3d(50%, 0, 0);
-moz-transform: translate3d(50%, 0, 0);
}
.leftin-enter,
.rightin-leave-active {
opacity: 0;
transform: translate3d(-50% 0, 0);
-webkit-transform: translate3d(-50%, 0, 0);
-moz-transform: translate3d(-50%, 0, 0);
}
</style>二 。其次附上我的main.js片段（用来在跳转页面之前动态设置转场动画）
main.js：
//进入路由之前设置拦截器let noLoginList = ["login", "register", "forget", "home", "classify", "goodsDetial"];
router.routeInfo.beforeEach((to, from, next) => {
let user = sessionStorage.getItem('user'); //如果要去登录页面
if (noLoginList.indexOf(to.name) >= 0) { if (!user || user == '') {
//未登录的状态通行
next();
return;
} else {
if (["login", "register", "forget"].indexOf(to.name) >= 0) {
//已登录的状态去首页
next({
name: 'home'
});
return;
} else {
//已登录的状态去首页
next();
return;
}
}
} else { //去登录页面以外的页面(以下是本文关键代码)
if (user && user != '') {
//判断是否为需要缓存组件,如果是添加组件名到数组
if (to.meta.keepAlive) {
const toName = to.name;
let keepLi = store.getters.getKeepAlList;
keepLi.indexOf(toName) < 0 ? keepLi.push(toName) : '';
store.commit('SET_KEEPALLIST', keepLi);
}
//根据路径名深度设置转场动画类型
store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin'));
next();
} else {
let toWhere = router.nameList.indexOf(to.name) >= 0 ? to : {name: 'home'};
next({
name: 'login',
params: {
jumpTo: {
name: toWhere.name,
params: toWhere.params,
query: toWhere.query,
},
}
});
}
}
});
以上就是如何用vue-route实现自动判断左右翻页转场动画 的详细内容，更多请关注php中文网其它相关文章！
相关文章
精彩导读
热门资讯
关注我们
