手寫(xiě)數(shù)組去重炎滞,多種方法
1:es6set去重
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
不考慮兼容性,這種去重的方法代碼最少诬乞。這種方法還無(wú)法去掉“{}”空對(duì)象册赛,后面的高階方法會(huì)添加去掉重復(fù)“{}”的方法钠导。
2:indexof
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//當(dāng)前元素,在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值击奶,否則返回當(dāng)前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
: 思路:定義一個(gè)新數(shù)組辈双,并存放原數(shù)組的第一個(gè)元素,然后將元素組一一和新數(shù)組的元素對(duì)比柜砾,若不同則存放在新數(shù)組中
function unique(arr) {
let newArr = [arr[0]];
for (let i = 1; i < arr.length; i++) {
let repeat = false;
for (let j = 0; j < newArr.length; j++) {
if (arr[i] === newArr[j]) {
repeat = true;
break;
}else{
}
}
if (!repeat) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
實(shí)現(xiàn)一個(gè)clone函數(shù)
可以對(duì)JavaScript中的5種主要數(shù)據(jù)類型(Number湃望、String、Object痰驱、Boolean证芭、Function、Array)進(jìn)行值復(fù)制
function clone(data){
let obj;
switch (typeof data){
case "undefined":
break;
case "string":
obj = data+'';
break;
case "number":
obj = data-0;
break;
case "boolean":
obj = data;
break;
case "object":
break;
瀏覽器是如何渲染頁(yè)面的
(1)瀏覽器解析html源碼担映,然后創(chuàng)建一個(gè) DOM樹(shù)废士。
在DOM樹(shù)中,每一個(gè)HTML標(biāo)簽都有一個(gè)對(duì)應(yīng)的節(jié)點(diǎn)蝇完,并且每一個(gè)文本也都會(huì)有一個(gè)對(duì)應(yīng)的文本節(jié)點(diǎn)官硝。DOM樹(shù)的根節(jié)點(diǎn)就是 documentElement,對(duì)應(yīng)的是html標(biāo)簽短蜕。
(2)瀏覽器解析CSS代碼氢架,計(jì)算出最終的樣式數(shù)據(jù)。構(gòu)建CSSOM樹(shù)朋魔。
對(duì)CSS代碼中非法的語(yǔ)法它會(huì)直接忽略掉岖研。解析CSS的時(shí)候會(huì)按照如下順序來(lái)定義優(yōu)先級(jí):瀏覽器默認(rèn)設(shè)置 < 用戶設(shè)置 < 外鏈樣式 < 內(nèi)聯(lián)樣式 < html中的style。
(3)DOM Tree + CSSOM --> 渲染樹(shù)(rendering tree)
渲染樹(shù)和DOM樹(shù)有點(diǎn)像警检,但是是有區(qū)別的孙援。DOM樹(shù)完全和html標(biāo)簽一一對(duì)應(yīng),但是渲染樹(shù)會(huì)忽略掉不需要渲染的元素扇雕,比如head拓售、display:none的元素等。而且一大段文本中的每一個(gè)行在渲染樹(shù)中都是獨(dú)立的一個(gè)節(jié)點(diǎn)镶奉。渲染樹(shù)中的每一個(gè)節(jié)點(diǎn)都存儲(chǔ)有對(duì)應(yīng)的css屬性础淤。
(4)一旦渲染樹(shù)創(chuàng)建好了,瀏覽器就可以根據(jù)渲染樹(shù)直接把頁(yè)面繪制到屏幕上
call腮鞍,apply,bind方法得作用分別是什么
作用: 改變調(diào)用他們的函數(shù)體內(nèi)部this的指向
1: 傳的參數(shù)
call方法傳參:xw.say.call(xh);
apply方法傳參:xw.say.apply(xh);
bind方法傳參:xw.say.bind.(xh)();