小程式專案中的一些小問題

ﺭ並再打了你一下ﺭ孔維敏發表於2019-03-12

一. 深拷貝與淺拷貝

場景 把陣列arr1用等號賦值給arr2,這時想要對arr1進行操作，arr2也會跟著改變，但是我們並不想arr2跟著改變。如下：

var arr1 = [1,2,3];
var arr2 = arr1;
arr1.push(4);
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3, 4]
複製程式碼

原因 在js裡存在著深拷貝和淺拷貝的問題。淺拷貝就是增加了一個'指標'指向已存在的記憶體（JavaScript並沒有指標的概念，這裡只是用於輔助說明），淺拷貝只是拷貝了記憶體的地址，子類的屬性指向的是父類屬性的記憶體地址，當子類的屬性修改後，父類的屬性也會隨之被修改；深拷貝就是增加一個“指標”，並申請一個新的記憶體，並且讓這個新增加的“指標”指向這個新的記憶體地址，當我們需要複製原物件而又不能修改元物件的時候，深拷貝就是一個很好的的選擇。

解決辦法1 Array.from(要複製的陣列)

var arr1 = [1,2,3];
var arr2 = Array.from(arr1);//ES6方法
arr1.push(4);
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3]
複製程式碼

解決辦法2 ...

var arr1 = [1,2,3];
var arr2 =[...arr1];//ES6方法
arr1.push(4);
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3]
複製程式碼

解決辦法3 通過json轉換

var arr1 = [1,2,3];
var arr2 = JSON.parse(JSON.stringify(arr1));//JSON.stringify(c)轉成json串，JSON.parse將json串轉成json格式
arr1.push(4);
console.log(arr1) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3]
複製程式碼

解決辦法4 通過迴圈

var arr1 = [1, 2, 3];
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
   arr2[i] = arr1[i];
}
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3]
複製程式碼

二. 時間轉時間戳

場景 把時間轉換為時間戳，以下程式碼在安卓端都非常的好使，完全沒有問題。

  var date = new Date('2018-08-30 15:30:00:00');
  var time1 = date.getTime();
  var time2 = date.valueOf();
  var time3 = Date.parse(date);
  console.log(time1);//1535614200000
  console.log(time2);//1535614200000
  console.log(time3);//1535614200000
複製程式碼

但是在iOS端，你會發現全都是NaN。

解決辦法

var date = new Date('2018/08/30 15:30:00:00');
var time = Date.parse(date);//安卓、iOS都好用
console.log(time)//1535614200000
複製程式碼

注意 日期必須是“ / ”不能是別的字串

三. picker-view-column 的寬度

專案中需要用到pick-view來寫 一個自定義的時間選擇器，寫完之後發現picker-view-column 的寬度不管怎麼設定，始終不起作用，後來想到picker-view-column不管設定多少個，他都一樣寬， 可能是用了flex佈局，所以就用flex設定了寬度，發現非常好用。

四. 神奇的textarea

場景 專案需要，在textarea上需要再覆蓋一個view，不管這個view的z-index多高，textarea始終浮在這個view上。

原因 textarea是原生元件，原生元件的層級是最高的，所以頁面中的其他元件無論設定 z-index 為多少，都無法蓋在原生元件上。

解決辦法1 在需要顯示覆蓋在textarea上的view現實的時候，把textarea隱藏起來

解決辦法2 使用cover-view（覆蓋在原生元件之上的文字檢視）來覆蓋它。

相關文章