SegmentFault 思否社區(qū)本周精彩回答匯總
Q1：TS如何定義對象中key的類型？
報錯說string[]類型不能賦給never[]類型，也就是說ts默認(rèn)給viewerImages對象中的array賦了never[],我現(xiàn)在想給這個array賦string[]類型應(yīng)該就不會報錯了，該如何賦值？
A1：
{
array: [] as string[]
}
或者
{
array: new Array<string>()
}
問答鏈接：
https://segmentfault.com/q/1010000039727787#
Q2：為什么Java中0左移的結(jié)果是1？
System.out.println(1<<0);//1
System.out.println( 0 >> 1);//0```
第一個輸出結(jié)果不解，0左移結(jié)果不應(yīng)該是0嗎
A2：0左移結(jié)果不應(yīng)該是0嗎？，然而你寫的是 1<<0
問答鏈接：
https://segmentfault.com/q/1010000039726226
Q3：js高并發(fā)下如何刪除數(shù)組的某個對象
let userIndex = this.userList.findIndex(q => q.userId == userId);
this.userList.splice(userIndex, 1);
A3：是的，不存在你這種情況。js是單線程順便多說一句。你的刪除效率是 n。刪除n個就是 N N。如果真的是高并發(fā)，可以自己整個數(shù)據(jù)結(jié)構(gòu)。或者說緩存幾個，然后一并刪除。刪除的時候從后往前刪。當(dāng)然還得看你多高的并發(fā)。每秒幾百個？還是每秒幾個？
問答鏈接：
https://segmentfault.com/q/1010000039723392
Q4:jquery 返回上一個頁面而不刷新頁面
一個jquery+laiui寫的后端管理系統(tǒng)，里面鑲嵌一個商城，在商品頁面點(diǎn)擊進(jìn)入詳情頁，瀏覽器上的url是不變的，商品頁面可以無限滾動獲取商品，現(xiàn)在是想要在瀏覽完詳情頁之后返回商品頁面，商品頁面不刷新，還在當(dāng)時瀏覽的位置.
使用了window.history.go(-1);和history.go(-1)回去都還是刷新，想問一下還有什么可以解決的方式呢?
A4：我看你這個不是單頁面應(yīng)用,本質(zhì)上應(yīng)該是無解.但是有些彎彎道道可以考慮模擬解決。比如,用url hash標(biāo)記當(dāng)時進(jìn)去的滾動位置,出來后自動再次滾動條到原來的位置,但是你這個是無限滾動,可能數(shù)據(jù)獲取有點(diǎn)麻煩也帶來性能影響
再比如:用戶單擊商品詳情的時候,不跳轉(zhuǎn)頁面,彈出一個iframe頁面遮住當(dāng)前的視圖,模擬一種跳轉(zhuǎn)頁面的假象,用戶單擊回退時關(guān)閉這個iframe顯示原來的頁面,或者詳情頁直接用大彈窗處理。
問答鏈接：
https://segmentfault.com/q/1010000039701034
Q5：如何動態(tài)改變返回json的映射關(guān)系
比如說權(quán)限控制時，角色role1只能訪問數(shù)據(jù)表table1的部分字段。我的想法是將建立一個role-數(shù)據(jù)表-字段的表table2，然后在查詢table1后會根據(jù)orm返回一個對象，然后再查詢table2, 返回json時只對允許訪問的字段進(jìn)行映射。
但是我只知道怎么建立靜態(tài)的映射以及過濾，不知道如何動態(tài)地進(jìn)行映射？
除了這種方式，還能如何控制字段的訪問權(quán)限？
A5：其實(shí)呢，控制字段權(quán)限有沒有啥好東西可用，之前我沒遇到過類似需求，沒太關(guān)注，但是根據(jù)跟題主的評論來看，其實(shí)就是動態(tài)的序列化。其他不說Jackson我記得就是可以做到動態(tài)序列化的
例如如下，這樣就只有id被序列化出來了
@Data
@AllArgsConstructor
@JsonFilter("user")
public class User {
private Long id;
private String name;
public static void main(String[] args) throws JsonProcessingException {
User user = new User(1l, "haha");
ObjectMapper objectMapper = new ObjectMapper();
SimpleFilterProvider simpleFilterProvider = new SimpleFilterProvider();
simpleFilterProvider.addFilter("user", SimpleBeanPropertyFilter.filterOutAllExcept("id"));
objectMapper.setFilterProvider(simpleFilterProvider);
String s = objectMapper.writeValueAsString(user);
System.out.println(s);
}
}
如果僅僅只是為了達(dá)到這樣的效果，其實(shí)也就夠了叭。僅供參考嗷...
問答鏈接：
https://segmentfault.com/q/1010000039722472
Q6：JavaScript let 塊級作用域?qū)ψ饔糜蜴湹挠绊懀?/span>
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i); //依次輸出3,3,3
}, 1000);
}
for (let j = 0; j < 3; j++) {
setTimeout(function () {
console.log(j); //依次輸出0,1,2
}, 1000);
A6：
每次執(zhí)行到循環(huán)體中的 setTimeout方法，該方法都會將調(diào)用的回調(diào)函數(shù)放入“任務(wù)隊(duì)列中”，等待主線程(執(zhí)行棧中)的事件全部執(zhí)行完畢后，執(zhí)行隊(duì)列頭的事件。第一次循環(huán)后，任務(wù)隊(duì)列中只有一個被 setTimeout方法放入的回調(diào)函數(shù)，其作用域鏈中記錄的是i的初始值0由于let 聲明的變量只存在于塊級作用域內(nèi)，因此每一次循環(huán)體執(zhí)行完畢都會銷毀該變量，然后在for循環(huán)出的新塊中let聲明一個新的變量j，按for循環(huán)原本既定的順序為其賦值，然后執(zhí)行循環(huán)體 因此第二次循環(huán)時，任務(wù)隊(duì)列中的回調(diào)函數(shù)的作用域鏈中，記錄的是新創(chuàng)建的，重新被賦值為 1的變量i正是由于塊級作用域的相互獨(dú)立，互不影響，才不會覆蓋j的值，就此，我有點(diǎn)理解為什么let能防止數(shù)據(jù)污染了(還有es6規(guī)定let不能重復(fù)聲明這一點(diǎn))
問答鏈接：https://segmentfault.com/q/1010000039715476
Q7：JS 字符串 兩側(cè)的引號問題
const body = document.body;
const imgArr = ['../img/login01.jpg','../img/login02.jpg','../img/login03.jpg','../img/login04.jpg'];
body.style.backgroundImage = `url(${imgArr[Math.floor(Math.random()*imgArr.length)]})`; //寫法1
// console.log(`"url('${imgArr[Math.floor(Math.random()*imgArr.length)]}')"`); 寫法2
console.log(body.style.backgroundImage);
A7：你要根據(jù)情況分析不成功的原因：
地址為空（表示賦值不成功） 地址不為空，但路徑不對
根據(jù)情況，你的是2，是你存儲的信息不對，修改匹配
如果是1則要追蹤數(shù)據(jù)產(chǎn)生流程啦。
問答鏈接：
https://segmentfault.com/q/1010000039715216#
Q8：node服務(wù)器
用ssh連接在騰訊云服務(wù)器，開啟node服務(wù)器后，可以通過域名加端口號訪問，可是當(dāng)關(guān)閉終端后就訪問不到了。
網(wǎng)站都使用什么發(fā)布的，是要放在把node打包放apeach文件里嗎，還是可以讓這個端口一直開著，怎么才能永遠(yuǎn)可以訪問。
A8：pm2，用起來還好吧。可以自動重啟，然后還能起別的服務(wù)。用起來也挺簡單 node index.js 改成 pm2 start index.js 就好了。
問答鏈接：
https://segmentfault.com/q/1010000039699330
Q9：padding-bottom: 20px;和padding: 0 0 20px 0;從性能上來說，哪個更好
A9：理論上來說前者會好一些，后者畢竟怎么都得有一次 split 或 parse 的開銷。但對于現(xiàn)代瀏覽器而言，這點(diǎn)差別執(zhí)行百萬次都不一定會有毫秒級的抖動……
問答鏈接：
https://segmentfault.com/q/1010000039713838
Q10：有沒有輕量級的 DOM 操作 js 庫，像 jquery 的 DOM 操作一樣？
我想要一個 DOM 操作的 js 庫，輕量級的，體積越小越好。能像 jquery 進(jìn)行 DOM 操作。jquery 體積太大，里面除了 DOM 操作還有其他的，如 ajax 等。
A10：DOM 7
問答鏈接：
https://segmentfault.com/q/1010000039347421
Q11：jq如何監(jiān)聽文本框的變化
//監(jiān)聽文本框改變事件
$(document).on('change keyup changed', "input,textarea,select", function() {
alert("改變了");
});
//按鈕改變的值無法監(jiān)聽
$(document).on("click", "button", function(e, row) {
$('input').val(111111);
})
A11：修改完成之后手動觸發(fā)一下試試：
$('input').trigger('change');
問答鏈接：
https://segmentfault.com/q/1010000039712623
Q12：CSS如何實(shí)現(xiàn)局部光照效果？
在Win10中，可以看到這樣的效果
當(dāng)鼠標(biāo)處于圖中紅色標(biāo)記位置時，周圍會帶有一個局部光，可以照亮原本是黑色的線框，背景也由原來的純黑變成了一部分受光照影響，請問這種效果用CSS怎么實(shí)現(xiàn)？
A12：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>light effect</title>
<style type="text/css">
.flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
.flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
.flex-row.flex-spacing > .flex-main:not(:first-child), .flex-row.flex-spacing > .flex-side:not(:first-child) {margin-left:0.5em;}
.flex-row.flex-margin {margin-left:0.5em;margin-right:0.5em;}
.flex-row.flex-padding {padding-left:0.5em;padding-right:0.5em;}
.flex-row .flex-warp {flex-wrap:wrap;}
.flex-column {display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;}
.flex-column > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-column > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
.box {position:relative;display:inline-block;color:#FFF;font-size:20px;background-color:#000;
--pt-x : 0;
--pt-y : 0;
}
.box .effect {position:absolute;top:0;bottom:0;left:0;right:0;
background:radial-gradient(circle at calc(var(--pt-x) * 1px) calc(var(--pt-y) * 1px), #FFF, rgba(255,255,255,0) 4em);z-index:0;}
.box .item-list {z-index:2;}
.box .item-list .item {position:relative;margin:1em;padding:1em;line-height:1.5em;border:2px solid rgba(255,255,255,0.5);background-color:rgba(0,0,0,0.7);background-clip:padding-box;box-shadow:0 0 0 1em #000;}
.box .item-list .item .icon {margin-right:1em;width:1.5em;height:1.5em;background-color:rgba(255,255,255,0.5);}
.box .item-list .item .name {}
.box .item-list .item .desc {color:#999;font-size:16px;}
</style>
<script> document.addEventListener('DOMContentLoaded', function(){
let domBox = document.querySelector('.box');
domBox.addEventListener('mousemove', function($evt){
let rect = domBox.getBoundingClientRect();
domBox.style.setProperty('--pt-x', $evt.pageX - rect.left);
domBox.style.setProperty('--pt-y', $evt.pageY - rect.top);
});
});
</script>
</head>
<body>
<div class="box">
<div class="effect"></div>
<div class="item-list">
<div class="flex-row item-list-row">
<div class="flex-side flex-row item">
<div class="flex-side icon"></div>
<div class="flex-main">
<div class="name">系統(tǒng)</div>
<div class="desc">顯示、聲音、通知、電源</div>
</div> </div> <div class="flex-side flex-row item">
<div class="flex-side icon"></div>
<div class="flex-main">
<div class="name">系統(tǒng)</div>
<div class="desc">顯示、聲音、通知、電源</div>
</div> </div> </div> <div class="flex-row item-list-row">
<div class="flex-side flex-row item">
<div class="flex-side icon"></div>
<div class="flex-main">
<div class="name">系統(tǒng)</div>
<div class="desc">顯示、聲音、通知、電源</div>
</div> </div> <div class="flex-side flex-row item">
<div class="flex-side icon"></div>
<div class="flex-main">
<div class="name">系統(tǒng)</div>
<div class="desc">顯示、聲音、通知、電源</div>
</div> </div> </div> </div></div>
</body>
</html>
問答鏈接：
https://segmentfault.com/q/1010000039359551l
點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 瀏覽更多精彩問答。
