目錄：
1 深拷貝
2 淺拷貝
3 文字超出兩行顯示省略號
4 height: 100%如何才能生效
5 path不包括 ？和 #
前言
(1) 基本數(shù)據(jù)類型用踩，引用數(shù)據(jù)類型
基本數(shù)據(jù)類型：number, string, boolean, null, undefined, symbol
引用數(shù)據(jù)類型：object, array, function
- 區(qū)別：
基本類型沒有屬性和方法，保存在棧區(qū)。
引用類型有屬性和方法，保存在棧區(qū)和堆區(qū)。
引用類型按引用訪問
引用類型： 棧區(qū)保存變量標識符和指針胁艰，指針指向堆內(nèi)存中該對象，保存在變量中的是對象在堆內(nèi)存中的地址 - 淺拷貝只能用于對象中只包含基本類型的數(shù)據(jù)智蝠，修改其中一個的屬性后腾么，相互不影響，當對象中仍然包含對象類型的數(shù)據(jù)時杈湾，則是引用關系解虱，修改會相互影響，所以這種情況需要用到深拷貝
const arr = [1];
const obj = { a: 1 };
const newArr = arr;
const newObj = obj; ------------------ 變量 newObj 和 obj 保存的都是指向同一對象堆內(nèi)存的指針(引用)漆撞， 是指針
arr[0] = 2;
obj.a = 2;
console.log(arr, newArr, obj, newObj); // [2] [2] {a: 2} {a: 2}
var a = {}; // a保存了一個空對象的實例
var b = a; // a和b都指向了這個空對象
a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'
b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22
console.log(a == b);// true
QQ截圖20190219105922.png
深拷貝方法一
JSON.parse(JSON.string(obj))
- 缺點： 只能拷貝對象和數(shù)組殴泰，無法拷貝函數(shù)于宙，無法拷貝原型鏈上的屬性和方法(Date, RegExp, Error等)
const ojbComplex = {
name: 'wu',
age: 20,
address: {
city: 'chongqing',
district: 'yubei',
town: 'jiazhou',
detail: ['chognqing', 'yubei', 'jiazhou']
},
bwh: [20, 30, 40, {l: 20, w: 30, h: 40}],
fn: function(){},
date: new Date(),
err: new Error(),
reg: new RegExp(),
null: null,
undefined: undefined,
}
const deepClone = JSON.parse(JSON.stringify(ojbComplex));
console.log(ojbComplex, 'ojbComplex')
console.log(deepClone, 'deepClone');
缺點：
不能拷貝fn, date, err, reg
QQ截圖20190219111653.png
深拷貝方法二
for...in 循壞遞歸
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === 'object') {
for(let key in obj) {
if ( obj.hasOwnProperty(key) ) {
if ( obj[key] && typeof obj[key] === 'object') {
objClone[key] = deepClone(obj[key]); --------- 遞歸調(diào)用，deepClone()函數(shù)的返回值是objClone
} else {
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
const params = {
name: 'wang',
address: {
city: ['china', 'choing'],
district: {
town: 'jiazhou'
}
}
};
const b = deepClone(params);
console.log(b)
缺點： 和JSON.parse(JSON.stringify(ojb)) 一樣艰匙， 不能拷貝 fn, date, reg限煞，err
https://zhuanlan.zhihu.com/p/41699218 lodash deepclone 源碼分析
http://www.reibang.com/p/c651aeabf582
http://www.reibang.com/p/b08bc61714c7
https://segmentfault.com/a/1190000015455662
淺拷貝
- slice()
- concat()
- Object.assign(target, ...sources)
- {...obj} 和 [...arr]
- 循壞push
淺拷貝
const a = [1, {name: 'wang'}];
const b = [...a];
a[0] = 2;
a[1].name = 'li';
console.log(b)
b // [1, { name: 'li' } ]
const a = [1,2,3];
const b = a.concat();
const c = a.slice();
a[0] = 111111;
console.log(b);
console.log(c);
b // [1,2,3]
c // [1,2,3]
const a = { name: 'wang' };
const b = Object.assign({}, a);
a.name = 'li';
console.log(b);
b // { name: 'wang'}
文字超出兩行顯示省略號
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
英文單詞時：
word-wrap:break-word; --- word-wrap: 屬性允許長單詞或URL地址換行到下一行, break-word: 單詞內(nèi)換行
word-break:break-all; ------------------ word-break: 規(guī)定自動換行的處理方式，break-all: 允許單詞內(nèi)換行
總結：
word-wrap: break-word员凝； ------------ 整個單詞換行
word-break: break-all; ------------ 單詞內(nèi)換行
white-space: nowrap; ------------ 單詞不換行
文字超出單行不換行署驻，顯示省略號
.word {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; --------------- 單詞不換行
word-wrap: break-word; --------------- 整個單詞換行
word-break: break-all; --------------- 單詞內(nèi)換行 (單行顯示省略號，后面兩個屬性可以不加)
}
https://www.cnblogs.com/ldlx-mars/p/6972734.html
height: 100%如何才能生效健霹？
- 原理：height: 100%是根據(jù)父元素作為參照的旺上，如果父元素的高度是一個缺省值，即height:auto糖埋，則子元素設置height: 100%將不能達到效果宣吱。
- 結論：普通文檔流中的元素，百分比高度值要想起作用瞳别，其父級必須有一個可以生效的高度值征候！
讓div充滿整個屏幕
方法1
解析：當html和body都設置了height: 100%時，子元素的height:100%就會生效
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
width: 100%;
background: red;
padding: 0;
margin: 0;
}
.a {
height: 100%;
width: 100%;
background: black;
}
</style>
</head>
<body>
<div class="a">
<div class="b">居中</div>
</div>
</body>
</html>
方法2
解析：使用絕對定位祟敛，當所有父節(jié)點都沒有設置定位信息時疤坝，是根據(jù)html來定位的
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.a {
height: 100%;
width: 100%;
position: absolute;
background: yellow;
}
</style>
</head>
<body>
<div class="a">
<div class="b">居中</div>
</div>
</body>
</html>
