发表于: 2020-01-11 23:19:17

1 1211


今天完成的事:

因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

####使用 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址:www.npmjs.com/package/vco…

或者使用 npm 安装:

npm install vconsole 复制代码

使用webpack,然后js代码中

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化 复制代码

或者找到这个模块下面的 dist/vconsole.min.js ,然后复制到自己的项目中

<head>     <script src="dist/vconsole.min.js"></script> </head> <!--建议在 `<head>` 中引入哦~ --> <script>   // 初始化   var vConsole = new VConsole();   console.log('VConsole is cool'); </script> 复制代码

####注意 请注意,VConsole 只是 vConsole 的原型,而非一个已实例化的对象。所以在手动 new 实例化之前,vConsole 不会被插入到网页中。


明天计划的事:

线上调试,改好bug

遇到的问题:

暂无

收获:

浅拷贝数组

首先第一个复制数组我们都想到的是定义一个数组直接相等就可以了:
var arr1 = [1,2,3];
var arr2 = arr1;
arr1[0] = 2;
console.log(arr1[0]); //2
出现这个的原因就是因为,数组是用堆去保存的,所以这个算是浅拷贝,相等的时候只是把存放的地址拷贝过去了,两个指向了同一个地址,所以在改变其中一个的值,其他的也跟着改变了。 所以如何深拷贝一个数组呢?

深拷贝数组

1.使用数组遍历赋值

原理

这个是最原始的办法,就是把每个值取出来到另一个数组中。

代码实现

var arr1 = [1,2,3];
var arr2 = [];
arr1.forEach(function(value,index){
arr2[index] = value;
})
console.log(arr2);
//这个时候改变arr1[0] = 3;那么输出arr2[0]还是等于1
###2. 返回新数组方法 ####2.1 使用slice方法 #####原理 数组的slice方法是截取数组的意思,在之前的数组总结中也有提过。 slice(0)指的是从0开始到末尾截取数组,然后返回一个新的数组,这样就不会影响到原来的数组了。
代码实现
var arr1 = [1,2,3];
var arr2 = arr1.slice(0);
console.log(arr2); //[1,2,3]//这个时候改变arr1[2] = 5,那么输出arr2[2]还是等于3
顺着这种方法是不是得到了思维的开阔,来看看还有哪些是返回新数组的?

2.2使用数组map方法

使用map方法遍历数组然后返回新的数组,里面的值不变
var arr1 = [2,3,4];
var arr2 = arr1.map(function(value){
return value;
})
console.log(arr2); //[2,3,4]

2.3使用concat方法

连接数组,如果连接的是一个空,那么也是返回了新的本身的数组
var arr1 = [3,4,5];
var arr2 = arr1.concat();
console.log(arr2); //[3,4,5]

3.ES6语法实现深拷贝

ES6扩展运算符实现数组的深拷贝,目前是最简单的。
var arr = [1,2,3,4,5];
var [ ... arr2 ] = arr;
console.log(arr); //[1,2,3,4,5]
console.log(arr2); //[1,2,3,4,5]

4.for-in连原型链也一并复制的方法

这种办法,不仅复制的值,还会把属性也进行拷贝。
var arr = [1,2,3,4,5];
arr.prototype = 5;
var arr2 = [];
for(var a in arr){
arr2[a] = arr[a];
}
console.log(arr2); // [1,2,3,4,5]console.log(arr2.prototype); // 5//之前的方法中新数组的prototype都是undefined

5.多维数组的复制

原理

多维数组转化为字符串会成为一维数组。
var arr = [[1,2],3,4,[5,6]];
var arr1 = arr.toString().split(",")
var arr2 = arr.join().split(",")
console.log(arr1) //[1,2,3,4,5,6]
console.log(arr2) //[1,2,3,4,5,6]
但是怎么可以保持那种二维数组的状态呢?需要下面的代码

代码实现

var arr = [[1,2],3,4,[5,6]];
var arr3 = JSON.parse(JSON.stringify(arr));
console.log(arr3) // [[1,2],3,4,[5,6]]



返回列表 返回列表
评论

    分享到