JS面試題(一)

1.document load 和 document ready 的區(qū)別

頁(yè)面加載完成有兩種事件

1.load是當(dāng)頁(yè)面所有資源全部加載完成后(包括DOM文檔樹(shù)暮屡,css文件,js文件,圖片資源等)足绅,執(zhí)行一個(gè)函數(shù)
問(wèn)題:如果圖片資源較多,加載時(shí)間較長(zhǎng),onload后等待執(zhí)行的函數(shù)需要等待較長(zhǎng)時(shí)間壳贪,所以一些效果可能受到影響

2.$(document).ready()是當(dāng)DOM文檔樹(shù)加載完成后執(zhí)行一個(gè)函數(shù) (不包含圖片,css等)所以會(huì)比load較快執(zhí)行
在原生的jS中不包括ready()這個(gè)方法寝杖,只有l(wèi)oad方法就是onload事件

2. JavaScript 中如何檢測(cè)一個(gè)變量是一個(gè) String 類(lèi)型违施?

三種方法(typeof、constructor瑟幕、Object.prototype.toString.call())解析:①typeof

typeof('123') === "string" // true

typeof '123' === "string" // true

②constructor

'123'.constructor === String // true

③Object.prototype.toString.call()

Object.prototype.toString.call('123') === '[object String]' // true

3.請(qǐng)用 js 去除字符串空格磕蒲?

replace 正則匹配方法、str.trim()方法只盹、JQ 方法:.trim(str)方法解析:方法一:replace 正則匹配方法去除字符串內(nèi)所有的空格:str = str.replace(/\s*/g,"");去除字符串內(nèi)兩頭的空格:str = str.replace(/^\s*|\s*/g,"");去除字符串內(nèi)左側(cè)的空格:str = str.replace(/^\s/,"");去除字符串內(nèi)右側(cè)的空格:str = str.replace(/(\s$)/g,"");示例:var str = " 6 6 ";
var str_1 = str.replace(/\s*/g, "");
console.log(str_1); //66

var str = " 6 6 ";
var str_1 = str.replace(/^\s|\s$/g, "");
console.log(str_1); //6 6//輸出左右側(cè)均無(wú)空格

var str = " 6 6 ";
var str_1 = str.replace(/^\s*/, "");
console.log(str_1); //6 6 //輸出右側(cè)有空格左側(cè)無(wú)空格

var str = " 6 6 ";
var str_1 = str.replace(/(\s*)/g, ""); console.log(str_1); // 6 6//輸出左側(cè)有空格右側(cè)無(wú)空格方法二:str.trim()方法trim()方法是用來(lái)刪除字符串兩端的空白字符并返回辣往,trim 方法并不影響原來(lái)的字符串本身,它返回的是一個(gè)新的字符串鹿霸。缺陷:只能去除字符串兩端的空格排吴,不能去除中間的空格示例:var str = " 6 6 "; var str_1 = str.trim(); console.log(str_1); //6 6//輸出左右側(cè)均無(wú)空格方法三:JQ 方法:.trim(str)方法.trim() 函數(shù)用于去除字符串兩端的空白字符。注意:.trim()函數(shù)會(huì)移除字符串開(kāi)始和末尾處的所有換行符懦鼠,空格(包括連續(xù)的空格)和制表符钻哩。如果這些空白字符在字符串中間時(shí),它們將被保留肛冶,不會(huì)被移除街氢。示例:var str = " 6 6 ";
var str_1 = $.trim(str);
console.log(str_1); //6 6//輸出左右側(cè)均無(wú)空格

4.js 是一門(mén)怎樣的語(yǔ)言,它有什么特點(diǎn)

1.腳本語(yǔ)言睦袖。JavaScript 是一種解釋型的腳本語(yǔ)言,C珊肃、C++等語(yǔ)言先編譯后執(zhí)行,而 JavaScript 是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋。2.基于對(duì)象馅笙。JavaScript 是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象伦乔。3.簡(jiǎn)單。JavaScript 語(yǔ)言中采用的是弱類(lèi)型的變量類(lèi)型,對(duì)使用的數(shù)據(jù)類(lèi)型未做出嚴(yán)格的要求,是基于 Java 基本語(yǔ)句和控制的腳本語(yǔ)言,其設(shè)計(jì)簡(jiǎn)單緊湊董习。4.動(dòng)態(tài)性烈和。JavaScript 是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò) Web 服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。5.跨平臺(tái)性皿淋。JavaScript 腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持招刹。

5.== 和 === 的不同

==是抽象相等運(yùn)算符恬试,而===是嚴(yán)格相等運(yùn)算符。==運(yùn)算符是在進(jìn)行必要的類(lèi)型轉(zhuǎn)換后疯暑,再比較训柴。===運(yùn)算符不會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換,所以如果兩個(gè)值不是相同的類(lèi)型妇拯,會(huì)直接返回false幻馁。使用==時(shí),可能發(fā)生一些特別的事情越锈,例如:1 == "1"; // true
1 == [1]; // true
1 == true; // true
0 == ""; // true
0 == "0"; // true
0 == false; // true如果你對(duì)==和===的概念不是特別了解宣赔,建議大多數(shù)情況下使用===

6.怎樣添加、移除瞪浸、移動(dòng)、復(fù)制吏祸、創(chuàng)建和查找節(jié)點(diǎn)对蒲?

1)創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè) DOM 片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
2)添加、移除贡翘、替換蹈矮、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3)查找
getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)
getElementsByName() //通過(guò)元素的 Name 屬性的值
getElementById() //通過(guò)元素 Id,唯一性

7.事件委托是什么

利用事件冒泡的原理鸣驱,讓自己的所觸發(fā)的事件泛鸟,讓他的父元素代替執(zhí)行!解析:1踊东、那什么樣的事件可以用事件委托北滥,什么樣的事件不可以用呢?
適合用事件委托的事件:click闸翅,mousedown再芋,mouseup,keydown坚冀,keyup济赎,keypress。
值得注意的是记某,mouseover 和 mouseout 雖然也有事件冒泡司训,但是處理它們的時(shí)候需要特別的注意,因?yàn)樾枰?jīng)常計(jì)算它們的位置液南,處理起來(lái)不太容易壳猜。
不適合的就有很多了,舉個(gè)例子贺拣,mousemove蓖谢,每次都要計(jì)算它的位置捂蕴,非常不好把控,在不如說(shuō) focus闪幽,blur 之類(lèi)的啥辨,本身就沒(méi)用冒泡的特性,自然就不用事件委托了盯腌。
2溉知、為什么要用事件委托
1.提高性能
(```)
?ul?
?li?蘋(píng)果?/li?
?li?香蕉?/li?
?li?鳳梨?/li?
?/ul?

// good
document.querySelector('ul').onclick = (event) =? {
let target = event.target
if (target.nodeName === 'LI') {
console.log(target.innerHTML)
}
}

// bad
document.querySelectorAll('li').forEach((e) =? {
e.onclick = function() {
console.log(this.innerHTML)
}
})

2.新添加的元素還會(huì)有之前的事件。
3腕够、事件冒泡與事件委托的對(duì)比
事件冒泡:box 內(nèi)部無(wú)論是什么元素级乍,點(diǎn)擊后都會(huì)觸發(fā) box 的點(diǎn)擊事件
事件委托:可以對(duì) box 內(nèi)部的元素進(jìn)行篩選
4、事件委托怎么取索引帚湘?
?ul id="ul"?
?li?aaaaaaaa?/li?
?li?事件委托了 點(diǎn)擊當(dāng)前玫荣,如何獲取 這個(gè)點(diǎn)擊的下標(biāo)?/li?
?li?cccccccc?/li?
?/ul?
?script? window.onload = function () { var oUl = document.getElementById("ul"); var aLi = oUl.getElementsByTagName("li"); oUl.onclick = function (ev) { var ev = ev || window.event; var target = ev.target || ev.srcElement; if (target.nodeName.toLowerCase() == "li") { var that = target; var index; for (var i = 0; i ? aLi.length; i++) if (aLi[i] === target) index = i; if (index ?= 0) alert('我的下標(biāo)是第' + index + '個(gè)'); target.style.background = "red"; } } } ?/script?

8.require 與 import 的區(qū)別

兩者的加載方式不同、規(guī)范不同第一大诸、兩者的加載方式不同捅厂,require 是在運(yùn)行時(shí)加載,而 import 是在編譯時(shí)加載require('./a')(); // a 模塊是一個(gè)函數(shù)资柔,立即執(zhí)行 a 模塊函數(shù)var data = require('./a').data; // a 模塊導(dǎo)出的是一個(gè)對(duì)象var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個(gè)數(shù)組 ======? 哪都行import $ from 'jquery';import * as _ from '_';import {a,b,c} from './a';import {default as alias, a as a_a, b, c} from './a'; ======?用在開(kāi)頭第二焙贷、規(guī)范不同,require 是 CommonJS/AMD 規(guī)范贿堰,import 是 ESMAScript6+規(guī)范第三辙芍、require 特點(diǎn):社區(qū)方案,提供了服務(wù)器/瀏覽器的模塊加載方案羹与。非語(yǔ)言層面的標(biāo)準(zhǔn)故硅。只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系及輸入/輸出的變量,無(wú)法進(jìn)行靜態(tài)優(yōu)化纵搁。import 特點(diǎn):語(yǔ)言規(guī)格層面支持模塊功能契吉。支持編譯時(shí)靜態(tài)分析,便于 JS 引入宏和類(lèi)型檢驗(yàn)诡渴。動(dòng)態(tài)綁定捐晶。

9.javascript 對(duì)象的幾種創(chuàng)建方式

第一種:Object 構(gòu)造函數(shù)創(chuàng)建var Person = new Object()

Person.name = "Nike";
Person.age = 29;這行代碼創(chuàng)建了 Object 引用類(lèi)型的一個(gè)新實(shí)例,然后把實(shí)例保存在變量 Person 中妄辩。第二種:使用對(duì)象字面量表示法var Person = {}; //相當(dāng)于 var Person = new Object();
var Person = {
name: 'Nike';
age: 29;
}對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫(xiě)形式惑灵,目的在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過(guò)程。也就是說(shuō)眼耀,第一種和第二種方式創(chuàng)建對(duì)象的方法其實(shí)都是一樣的英支,只是寫(xiě)法上的區(qū)別不同在介紹第三種的創(chuàng)建方法之前,我們應(yīng)該要明白為什么還要用別的方法來(lái)創(chuàng)建對(duì)象哮伟,也就是第一種干花,第二種方法的缺點(diǎn)所在:它們都是用了同一個(gè)接口創(chuàng)建很多對(duì)象妄帘,會(huì)產(chǎn)生大量的重復(fù)代碼,就是如果你有 100 個(gè)對(duì)象池凄,那你要輸入 100 次很多相同的代碼抡驼。那我們有什么方法來(lái)避免過(guò)多的重復(fù)代碼呢,就是把創(chuàng)建對(duì)象的過(guò)程封裝在函數(shù)體內(nèi)肿仑,通過(guò)函數(shù)的調(diào)用直接生成對(duì)象致盟。第三種:使用工廠模式創(chuàng)建對(duì)象function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {

this.name);
};
return o;
}
var person1 = createPerson("Nike", 29, "teacher");
var person2 = createPerson("Arvin", 20, "student");在使用工廠模式創(chuàng)建對(duì)象的時(shí)候,我們都可以注意到尤慰,在 createPerson 函數(shù)中馏锡,返回的是一個(gè)對(duì)象。那么我們就無(wú)法判斷返回的對(duì)象究竟是一個(gè)什么樣的類(lèi)型伟端。于是就出現(xiàn)了第四種創(chuàng)建對(duì)象的模式杯道。第四種:使用構(gòu)造函數(shù)創(chuàng)建對(duì)象function Person(name, age, job) {

this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
this.name);
};
}
var person1 = new Person("Nike", 29, "teacher");
var person2 = new Person("Arvin", 20, "student");對(duì)比工廠模式,我們可以發(fā)現(xiàn)以下區(qū)別:1.沒(méi)有顯示地創(chuàng)建對(duì)象2.直接將屬性和方法賦給了 this 對(duì)象3.沒(méi)有 return 語(yǔ)句4.終于可以識(shí)別的對(duì)象的類(lèi)型责蝠。對(duì)于檢測(cè)對(duì)象類(lèi)型蕉饼,我們應(yīng)該使用 instanceof 操作符,我們來(lái)進(jìn)行自主檢測(cè):alert(person1 instanceof Object); //ture

alert(person1 instanceof Person); //ture

alert(person2 instanceof Object); //ture

alert(person2 instanceof Object); //ture同時(shí)我們也應(yīng)該明白玛歌,按照慣例,構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫(xiě)字母開(kāi)頭擎椰,而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫(xiě)字母開(kāi)頭支子。那么構(gòu)造函數(shù)確實(shí)挺好用的,但是它也有它的缺點(diǎn):就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍达舒,方法指的就是我們?cè)趯?duì)象里面定義的函數(shù)值朋。如果方法的數(shù)量很多,就會(huì)占用很多不必要的內(nèi)存巩搏。于是出現(xiàn)了第五種創(chuàng)建對(duì)象的方法第五種:原型創(chuàng)建對(duì)象模式function Person() {

Person.prototype.name = "Nike";
Person.prototype.age = 20;
Person.prototype.jbo = "teacher";
Person.prototype.sayName = function() {

this.name);
};
var person1 = new Person();
person1.sayName();使用原型創(chuàng)建對(duì)象的方式昨登,可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。如果是使用原型創(chuàng)建對(duì)象模式贯底,請(qǐng)看下面代碼:function Person() {}

Person.prototype.name = "Nike";
Person.prototype.age = 20;
Person.prototype.jbo = "teacher";
Person.prototype.sayName = function() {

this.name);
};
var person1 = new Person();
var person2 = new Person();

person1.name = "Greg";

person1.name); //'Greg' --來(lái)自實(shí)例

person2.name); //'Nike' --來(lái)自原型當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí)丰辣,這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式禽捆,構(gòu)造函數(shù)模式用于定義實(shí)例屬性笙什,而原型模式用于定義方法和共享的屬性第六種:組合使用構(gòu)造函數(shù)模式和原型模式function Person(name, age, job) {

this.name = name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor: Person,
sayName: function() {

this.name);
};
}
var person1 = new Person('Nike', 20, 'teacher');

10.JavaScript 繼承的方式和優(yōu)缺點(diǎn)

六種方式

一、原型鏈繼承

缺點(diǎn):
1.引用類(lèi)型的屬性被所有實(shí)例共享
2.在創(chuàng)建 Child 的實(shí)例時(shí)胚想,不能向 Parent 傳參

二琐凭、借用構(gòu)造函數(shù)(經(jīng)典繼承)

優(yōu)點(diǎn):
1.避免了引用類(lèi)型的屬性被所有實(shí)例共享
2.可以在 Child 中向 Parent 傳參

缺點(diǎn):
1.方法都在構(gòu)造函數(shù)中定義,每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法浊服。

三统屈、組合繼承

優(yōu)點(diǎn):
1.融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)胚吁,是 JavaScript 中最常用的繼承模式。

四愁憔、原型式繼承

缺點(diǎn):
1.包含引用類(lèi)型的屬性值始終都會(huì)共享相應(yīng)的值腕扶,這點(diǎn)跟原型鏈繼承一樣。

五惩淳、寄生式繼承

缺點(diǎn):
1.跟借用構(gòu)造函數(shù)模式一樣蕉毯,每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。

六思犁、寄生組合式繼承

優(yōu)點(diǎn):
1.這種方式的高效率體現(xiàn)它只調(diào)用了一次 Parent 構(gòu)造函數(shù)代虾,并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性激蹲。
2.與此同時(shí)棉磨,原型鏈還能保持不變;
3.因此学辱,還能夠正常使用 instanceof 和 isPrototypeOf乘瓤。
開(kāi)發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類(lèi)型最理想的繼承范式

11.復(fù)雜數(shù)據(jù)類(lèi)型如何轉(zhuǎn)變?yōu)樽址?/h5>

首先,會(huì)調(diào)用 valueOf 方法策泣,如果方法的返回值是一個(gè)基本數(shù)據(jù)類(lèi)型衙傀,就返回這個(gè)值,
如果調(diào)用 valueOf 方法之后的返回值仍舊是一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型萨咕,就會(huì)調(diào)用該對(duì)象的 toString 方法统抬,
如果 toString 方法調(diào)用之后的返回值是一個(gè)基本數(shù)據(jù)類(lèi)型,就返回這個(gè)值危队,
如果 toString 方法調(diào)用之后的返回值是一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型聪建,就報(bào)一個(gè)錯(cuò)誤。
解析:1;
var obj = {
valueOf: function() {
return 1;
}
};
console.log(obj + ""); //'1'
2;
var obj = {
valueOf: function() {
return [1, 2];
}
};
console.log(obj + ""); //'[object Object]';
3;
var obj = {
valueOf: function() {
return [1, 2];
},
toString: function() {
return 1;
}
};
console.log(obj + ""); //'1';
4;
var obj = {
valueOf: function() {
return [1, 2];
},
toString: function() {
return [1, 2, 3];
}
};
console.log(obj + ""); // 報(bào)錯(cuò) Uncaught TypeError: Cannot convert object to primitive value拓展:var arr = [new Object(), new Date(), new RegExp(), new String(), new Number(), new Boolean(), new Function(), new Array(), Math] console.log(arr.length) // 9
for (var i = 0; i ? arr.length; i++) {
arr[i].valueOf = function() {
return [1, 2, 3]
}
arr[i].toString = function() {
return 'toString'
}
console.log(arr[i] + '')
}1茫陆、若 return [1,2,3]處為 return "valueof"金麸,得到的返回值是 valueof toString 7valueof
說(shuō)明:其他八種復(fù)雜數(shù)據(jù)類(lèi)型是先調(diào)用 valueOf 方法,時(shí)間對(duì)象是先調(diào)用 toString 方法2簿盅、改成 return [1,2,3]挥下,得到的返回值是 9toString
說(shuō)明:執(zhí)行 valueof 后都來(lái)執(zhí)行 toString

12.javascript 的 typeof 返回哪些數(shù)據(jù)類(lèi)型

7 種分別為 string、boolean桨醋、number见秽、Object、Function讨盒、undefined解取、symbol(ES6)、

13. 在 css/js 代碼上線之后開(kāi)發(fā)人員經(jīng)常會(huì)優(yōu)化性能返顺,從用戶刷新網(wǎng)頁(yè)開(kāi)始禀苦,一次 js 請(qǐng)求一般情況下有哪些地方會(huì)有緩存處理蔓肯?

dns 緩存,cdn 緩存振乏,瀏覽器緩存蔗包,服務(wù)器緩存。

14.你對(duì)閉包的理解慧邮??jī)?yōu)缺點(diǎn)调限?

概念:閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。三大特性:
函數(shù)嵌套函數(shù)误澳。
函數(shù)內(nèi)部可以引用外部的參數(shù)和變量耻矮。
參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收。
優(yōu)點(diǎn):
希望一個(gè)變量長(zhǎng)期存儲(chǔ)在內(nèi)存中忆谓。
避免全局變量的污染裆装。
私有成員的存在。
缺點(diǎn):
常駐內(nèi)存倡缠,增加內(nèi)存使用量哨免。
使用不當(dāng)會(huì)很容易造成內(nèi)存泄露。
示例:function outer() {
var name = "jack";
function inner() {
console.log(name);
}
return inner;
}
outer()(); // jackfunction sayHi(name) {
return () =? {
console.log(Hi! ${name});
};
}
const test = sayHi("xiaoming");
test(); // Hi! xiaoming雖然 sayHi 函數(shù)已經(jīng)執(zhí)行完畢昙沦,但是其活動(dòng)對(duì)象也不會(huì)被銷(xiāo)毀琢唾,因?yàn)?test 函數(shù)仍然引用著 sayHi 函數(shù)中的變量 name,這就是閉包盾饮。
但也因?yàn)殚]包引用著另一個(gè)函數(shù)的變量采桃,導(dǎo)致另一個(gè)函數(shù)已經(jīng)不使用了也無(wú)法銷(xiāo)毀,所以閉包使用過(guò)多丐谋,會(huì)占用較多的內(nèi)存,這也是一個(gè)副作用煌珊。解析:由于在 ECMA2015 中号俐,只有函數(shù)才能分割作用域,函數(shù)內(nèi)部可以訪問(wèn)當(dāng)前作用域的變量定庵,但是外部無(wú)法訪問(wèn)函數(shù)內(nèi)部的變量吏饿,所以閉包可以理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù),外部可以通過(guò)內(nèi)部返回的函數(shù)訪問(wèn)內(nèi)部函數(shù)的變量“蔬浙。在本質(zhì)上猪落,閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的橋梁。

15.如何判斷 NaN

isNaN()方法解析:isNaN(NaN) // true

16.for in 和 for of

1畴博、for in
1.一般用于遍歷對(duì)象的可枚舉屬性笨忌。以及對(duì)象從構(gòu)造函數(shù)原型中繼承的屬性。對(duì)于每個(gè)不同的屬性俱病,語(yǔ)句都會(huì)被執(zhí)行官疲。
2.不建議使用 for in 遍歷數(shù)組袱结,因?yàn)檩敵龅捻樞蚴遣还潭ǖ摹?br> 3.如果迭代的對(duì)象的變量值是 null 或者 undefined, for in 不執(zhí)行循環(huán)體,建議在使用 for in 循環(huán)之前途凫,先檢查該對(duì)象的值是不是 null 或者 undefined
2垢夹、for of
1.for…of 語(yǔ)句在可迭代對(duì)象(包括 Array,Map赁还,Set俺夕,String靡羡,TypedArray,arguments 對(duì)象等等)上創(chuàng)建一個(gè)迭代循環(huán)而晒,調(diào)用自定義迭代鉤子,并為每個(gè)不同屬性的值執(zhí)行語(yǔ)句
解析:var s = {
a: 1,
b: 2,
c: 3
};
var s1 = Object.create(s);
for (var prop in s1) {
console.log(prop); //a b c
console.log(s1[prop]); //1 2 3
}
for (let prop of s1) {
console.log(prop); //報(bào)錯(cuò)如下 Uncaught TypeError: s1 is not iterable
}
for (let prop of Object.keys(s1)) {
console.log(prop); // a b c
console.log(s1[prop]); //1 2 3
}

17. for in且蓬、Object.keys 和 Object.getOwnPropertyNames 對(duì)屬性遍歷有什么區(qū)別欣硼?

for in 會(huì)遍歷自身及原型鏈上的可枚舉屬性
Object.keys 會(huì)將對(duì)象自身的可枚舉屬性的 key 輸出
會(huì)將自身所有的屬性的 key 輸出
解析:ECMAScript 將對(duì)象的屬性分為兩種:數(shù)據(jù)屬性和訪問(wèn)器屬性。var parent = Object.create(Object.prototype, {
a: {
value: 123,
writable: true,
enumerable: true,
configurable: true
}
});
// parent繼承自O(shè)bject.prototype恶阴,有一個(gè)可枚舉的屬性a(enumerable:true)诈胜。

var child = Object.create(parent, {
b: {
value: 2,
writable: true,
enumerable: true,
configurable: true
},
c: {
value: 3,
writable: true,
enumerable: false,
configurable: true
}
});
//child 繼承自 parent ,b可枚舉冯事,c不可枚舉for infor (var key in child) {
console.log(key);
}
// b
// a
// for in 會(huì)遍歷自身及原型鏈上的可枚舉屬性如果只想輸出自身的可枚舉屬性焦匈,可使用 hasOwnProperty 進(jìn)行判斷(數(shù)組與對(duì)象都可以,此處用數(shù)組做例子)let arr = [1, 2, 3];
Array.prototype.xxx = 1231235;
for (let i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(arr[i]);
}
}
// 1
// 2
// 3Object.keysconsole.log(Object.keys(child));
// ["b"]
// Object.keys 會(huì)將對(duì)象自身的可枚舉屬性的key輸出Object.getOwnPropertyNamesconsole.log(Object.getOwnPropertyNames(child));
// ["b","c"]
// 會(huì)將自身所有的屬性的key輸出

18.iframe 跨域通信和不跨域通信

不跨域通信主頁(yè)面?!DOCTYPE html?
?html?
?head?
?meta charset="utf-8" /?
?title??/title?
?/head?
?body?
?iframe
name="myIframe"
id="iframe"
class=""
src="flexible.html"
width="500px"
height="500px"
?
?/iframe?
?/body?
?script type="text/javascript" charset="utf-8"?
function fullscreen() {
alert(1111);
}
?/script?
?/html?子頁(yè)面 flexible.html?!DOCTYPE html?
?html?
?head?
?meta charset="utf-8" /?
?title??/title?
?/head?
?body?
我是子頁(yè)面
?/body?
?script type="text/javascript" charset="utf-8"?
// window.parent.fullScreens()
function showalert() {
alert(222);
}
?/script?
?/html?1昵仅、主頁(yè)面要是想要調(diào)取子頁(yè)面的 showalert 方法myIframe.window.showalert();2缓熟、子頁(yè)面要掉主頁(yè)面的 fullscreen 方法window.parent.fullScreens();3、js 在 iframe 子頁(yè)面獲取父頁(yè)面元素:window.parent.document.getElementById("元素id");4摔笤、js 在父頁(yè)面獲取 iframe 子頁(yè)面元素代碼如下:window.frames["iframe_ID"].document.getElementById("元素id");跨域通信使用postMessage(官方用法)子頁(yè)面window.parent.postMessage("hello", "http://127.0.0.1:8089");父頁(yè)面接收window.addEventListener("message", function(event) {
alert(123);
});

19.H5 與 Native 如何交互

jsBridge

20.如何判斷一個(gè)對(duì)象是否為數(shù)組

第一種方法:使用 instanceof 操作符够滑。第二種方法:使用 ECMAScript 5 新增的 Array.isArray()方法。第三種方法:使用使用 Object.prototype 上的原生 toString()方法判斷吕世。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末彰触,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子命辖,更是在濱河造成了極大的恐慌况毅,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尔艇,死亡現(xiàn)場(chǎng)離奇詭異尔许,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)终娃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)味廊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事毡们⊙富剩” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵衙熔,是天一觀的道長(zhǎng)登颓。 經(jīng)常有香客問(wèn)我,道長(zhǎng)红氯,這世上最難降的妖魔是什么框咙? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮痢甘,結(jié)果婚禮上喇嘱,老公的妹妹穿的比我還像新娘。我一直安慰自己塞栅,他們只是感情好者铜,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著放椰,像睡著了一般作烟。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上砾医,一...
    開(kāi)封第一講書(shū)人閱讀 49,111評(píng)論 1 285
  • 那天拿撩,我揣著相機(jī)與錄音,去河邊找鬼如蚜。 笑死压恒,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的错邦。 我是一名探鬼主播探赫,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼撬呢!你這毒婦竟也來(lái)了伦吠?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤倾芝,失蹤者是張志新(化名)和其女友劉穎讨勤,沒(méi)想到半個(gè)月后箭跳,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體晨另,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年谱姓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了借尿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖路翻,靈堂內(nèi)的尸體忽然破棺而出狈癞,到底是詐尸還是另有隱情,我是刑警寧澤茂契,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布蝶桶,位于F島的核電站,受9級(jí)特大地震影響掉冶,放射性物質(zhì)發(fā)生泄漏真竖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一厌小、第九天 我趴在偏房一處隱蔽的房頂上張望恢共。 院中可真熱鬧,春花似錦璧亚、人聲如沸讨韭。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)透硝。三九已至,卻和暖如春梢薪,著一層夾襖步出監(jiān)牢的瞬間蹬铺,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工秉撇, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甜攀,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓琐馆,卻偏偏與公主長(zhǎng)得像规阀,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瘦麸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容