摘要:中雙感嘆號的作用一般用于將后面的表達式強制轉(zhuǎn)化為布爾類型。通過實現(xiàn)類式繼承繼承對象已經(jīng)原型對象屬性父類父類的方法子類調(diào)用父類的構(gòu)造函數(shù)。
js基礎(chǔ)對象屬性方法 Object.keys()
Object.keys()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷改對象時返回的順序一致(兩者的主要區(qū)別是一個for-in 循環(huán)還會枚舉器原型鏈上的屬性)
//examples // simple array var arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // console: ["0", "1", "2"] // array like object var obj = { 0: "a", 1: "b", 2: "c" }; console.log(Object.keys(obj)); // console: ["0", "1", "2"]require.context
你可以用require.context()來創(chuàng)建自己的上下文。這個函數(shù)接受三個參數(shù):
directory:說明需要檢索的目錄
useSubdirectories:是否檢索子目錄
regExp: 匹配文件的正則表達式
該函數(shù)返回一個require函數(shù),包含了3個參數(shù): resolve, keys, id.
resolve 一個返回模塊請求的id的函數(shù)
keys 一個以數(shù)組的形式返回所有模塊請求的函數(shù),可以結(jié)合 map, foreach, 函數(shù)進行批量require();
如果你想引入文件目錄下所有符合匹配模式的文件,那么這個方法是很有用的.
// examples: function importAll (r) { r.keys().forEach(r); } importAll(require.context("../components/", true, /.js$/));for...of
es6新加的特效,可以循環(huán)遍歷數(shù)組元素;
與 for...in 和Array.forEach()的區(qū)別:
1、for...in 是對普通對象的遍歷,不僅會遍歷數(shù)組元素,甚至還會遍歷其自定義屬性或者原型鏈上面的屬性。
2、forEach() 方法,不能使用 break, 中斷循環(huán),也不能用return 語句返回到外層函數(shù)。
for...in 可以完美解決上面兩個方法的問題。
該方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組,其排列與使用for...in 循環(huán)遍歷該對象時返回的順序一致(區(qū)別在于for-in 循環(huán)也枚舉原型鏈中的屬性)
//examples: const obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [ ["foo", "bar"], ["baz", 42] ] // array like object const obj = { 0: "a", 1: "b", 2: "c" }; console.log(Object.entries(obj)); // [ ["0", "a"], ["1", "b"], ["2", "c"] ] // array like object with random key ordering const anObj = { 100: "a", 2: "b", 7: "c" }; console.log(Object.entries(anObj)); // [ ["2", "b"], ["7", "c"], ["100", "a"] ] // getFoo is property which isn"t enumerable const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); myObj.foo = "bar"; console.log(Object.entries(myObj)); // [ ["foo", "bar"] ] // non-object argument will be coerced to an object console.log(Object.entries("foo")); // [ ["0", "f"], ["1", "o"], ["2", "o"] ] // iterate through key-value gracefully const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of Object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }
將Object轉(zhuǎn)換為Map
new Map() 構(gòu)造函數(shù)接受一個可迭代的entries。借助Object.entries方法你可以很容易的將Object轉(zhuǎn)換為Map:
var obj = { foo: "bar", baz: 42 }; var map = new Map(Object.entries(obj)); console.log(map); // Map { foo: "bar", baz: 42 }
Polyfill
你可以使用下面列出的簡易 polyfill。
if (!Object.entries) Object.entries = function( obj ){ var ownProps = Object.keys( obj ), i = ownProps.length, resArray = new Array(i); // preallocate the Array while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]]; return resArray; };
轉(zhuǎn)載:https://segmentfault.com/a/11...
unshift() 方法unshift() 方法可向數(shù)組的開頭添加一個或更多元素,并返回新的長度。location.replace()
replace() 方法可用一個新文檔取代當前文檔。可用于頁面跳轉(zhuǎn)。和location.href的區(qū)別在于,replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時,新的 URL 將覆蓋 History 對象中的當前記錄。 而后者會在瀏覽器的歷史瀏覽記錄添加一條記錄。
location.pathnamepathname 屬性是一個可讀可寫的字符串,可設(shè)置或返回當前 URL 的路徑部分
//examples //假設(shè)當前的 URL 是: http://example.com:1234/test/test.htm#part2: document.write(location.pathname); ///test/test.htmlocation.hash
hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。
//examples //假設(shè)當前的 URL 是: http://example.com:1234/test.htm#part2: document.write(location.hash);//#part2window.top
該屬性返回對一個頂級窗口的只讀引用。如果窗口本身就是一個頂級窗口,top 屬性存放對窗口自身的引用。如果窗口是一個框架,那么 top 屬性引用包含框架的頂層窗口。跳出當前框架
in 運算符如果指定的屬性在指定的對象或其原型鏈中,則in 運算符返回true。
//examples // 數(shù)組 var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); 0 in trees // 返回true 3 in trees // 返回true 6 in trees // 返回false "bay" in trees // 返回false (必須使用索引號,而不是數(shù)組元素的值)charAt() 方法
charAt() 方法可返回指定位置的字符。字符串中第一個字符的下標是 0。如果參數(shù) index 不在 0 與 string.length 之間,該方法將返回一個空字符串。
slice(start,end) 方法slice()方法可從已有的數(shù)組中返回選定的元素
參數(shù):start 規(guī)定從何處開始選,如果是負數(shù),則從數(shù)組尾部開始算位置
end 規(guī)定從何處結(jié)束所取。該參數(shù)是數(shù)組片段結(jié)束處的數(shù)組下標。如果沒有指定該參數(shù),則包含從start開始到數(shù)組結(jié)束的所有元素。
返回值:返回一個新的數(shù)組,包含從 start 到 end (部包括該元素)的原數(shù)組中的元素。
注意:該方法不會修改數(shù)組,而是返回一個子數(shù)組。如果想刪除數(shù)組中的一段元素,應(yīng)該使用Array.splice()
splice() 方法向/從數(shù)組中添加/刪除項目,然后返回被刪除的項目。
語法:
arrayObject.splice(index,howmany,item1,.....,itemX)
參數(shù):
index 必需。整數(shù),規(guī)定添加/刪除項目的位置,使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany 必需。要刪除的項目數(shù)量。如果設(shè)置為 0,則不會刪除項目。
item1, ..., itemX 可選。向數(shù)組添加的新項目。
會返回文檔對象(document)的根元素的只讀屬性(如Html文檔的元素)
與document.body的區(qū)別
document.body 會返回 Html 文檔中的body節(jié)點。即body
注意:在獲取瀏覽器滾動器距離時、窗口大小時,兩者在不同瀏覽器下會有區(qū)別。
兼容解決方案。
!!一般用于將后面的表達式強制轉(zhuǎn)化為布爾類型。js是弱類型語言,所以可以通過雙感嘆號,將其轉(zhuǎn)化為boolean類型。
布爾類型的轉(zhuǎn)化,js約定的規(guī)則為:
1、false、undefined、null、0、""均為false
2、true、1、"string"、[Object] 為true
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。substring() 方法返回的子串包括 start 處的字符,但不包括 stop 處的字符。
重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負的參數(shù)。
substr(start, length)方法可在字符串中抽取從start下標開始的指定數(shù)目的字符。
其中l(wèi)ength必須是數(shù)值,如果省略該參數(shù),那么返回從字符串的開始位置到結(jié)尾的字串。
Math.random() 方法可返回介于 0 ~ 1 之間的一個隨機數(shù)。
js round()Math.round() 方法可把一個數(shù)字舍入為最接近的整數(shù)
對于 0.5,該方法將進行上舍入。
例如,3.5 將舍入為 4,而 -3.5 將舍入為 -3。
Math.floor()返回小于或等于一個給定數(shù)字的最大整數(shù)
Math.floor() === 向下取整
Math.floor( 45.95); // 45 Math.floor( 45.05); // 45 Math.floor( 4 ); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -46js ceil()方法
Math.ceil() 函數(shù)返回大于或等于一個給定數(shù)字的最小整數(shù)。
Math.ceil() === 向上取整
Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7document.createElement(nodename)
參數(shù):元素節(jié)點的名稱
返回:新建的元素節(jié)點
向元素節(jié)點中插入節(jié)點。注意HTML要大寫。
與document.innerText的區(qū)別:
1、innerHTML指的是從對象的起始位置到終止位置的全部內(nèi)容,包括Html標簽
2、innerText 指的是從起始位置到終止位置的內(nèi)容,但它去除html標簽。
同時,innerHTML 是所有瀏覽器都支持的,innerText 是IE瀏覽器和chrome瀏覽器支持的,F(xiàn)irefox瀏覽器不支持。所以盡量多用innerHTML。少用innerText
chrome:webkitTransform => css: -webkit-transform
o:OTransform => css:-o-transform
ms:msTransform => css:-ms-transform
Moz:MozTransform => css:-Moz-transform
document.getElementById、document.getElementsByTagName、document.getElementsByClassName、querySelector()、querySelectorAll()等選擇器的使用和區(qū)別
ES6-對象的擴展-Object.keys(),Object.values(),Object.entries()https://blog.csdn.net/ww43043...
JavaScript indexOf() 方法stringObject.indexOf(searchvalue,fromindex)方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
searchvalue:檢索的字符串;必需
fromindex:可選的整數(shù)參數(shù)。規(guī)定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。
注意:如果要檢索的字符串值沒有出現(xiàn),則該方法返回 -1。
Object.create()創(chuàng)建一個新對象,使用現(xiàn)有的對象來提供新創(chuàng)建對象的__proto__.
const person = { ishuman:false, printIntroduction:function(){ console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me = Object.create(person); me.name = "Mattew"; // "name" 是一個建立在me上的屬性,而不是在person上,說明通過Object.create創(chuàng)建的對象是一個新的對象。 me.isHuman = true; // 繼承來的屬性可以被重寫 me.printIntroduction(); // 繼承的函數(shù)也可以調(diào)用 // expected output: "My name is Matthew. Am I human? true"
在這里,我們可以通過在瀏覽器控制臺打印出me對象??梢缘玫饺缦陆Y(jié)果
.
由此可以理解描述中寫的使用現(xiàn)對象來提供新創(chuàng)建對象的__proto__這一句話的意思。
1、通過Object.create()實現(xiàn)類式繼承(繼承對象已經(jīng)原型對象屬性)
// Shape - 父類(superclass) function Shape() { console.log(this.x, this.y) } // 父類的方法 Shape.prototype.move = function(x, y) { console.log(this) this.x += x; this.y += y; console.info("Shape moved."); }; // Rectangle - 子類(subclass) function Rectangle() { Shape.call(this); // 調(diào)用父類的構(gòu)造函數(shù)。繼承分類的對象屬性 } Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log(rect)
2、使用 Object.create 的 propertyObject參數(shù)
var o; //創(chuàng)建 一個原型為null的空對象 o = Object.create(null); o = {}; //以字面量方式的創(chuàng)建的空對象就相當于: o = Object.create(Object.prototype); o = Object.create(Object.prototype, { // foo會成為所創(chuàng)建對象的數(shù)據(jù)屬性 foo: { writable:true, // 當且僅當該屬性的 writable 為 true 時,該屬性才能被賦值運算符改變。默認為 false。 configure:true, // 當且僅當該屬性的 configurable 為 true 時,該屬性描述符才能夠被改變,也能夠被刪除。默認為 false。 value:"hello" // 該屬性對應(yīng)的值??梢允侨魏斡行У?JavaScript 值(數(shù)值,對象,函數(shù)等)。默認為 undefined。 }, // bar會成為所創(chuàng)建對象的訪問器屬性 bar: { configurable:false, get:function() { return 10 }, set:function(value) { console.log("Setting `o.bar` to", value) } } }) function Constructor(){} o = new Constructor(); //上面一句話就相當于 o = Object.create(Constructor.prototype); // 當然,如果在Contructor函數(shù)中有一些初始化代碼,Object.create 不能執(zhí)行那些代碼 // 創(chuàng)建一個以另一個空對象為原型,且擁有一個屬性p的對象 o = Object.create({}, { p:{ value: 42 }}) // 省略了的屬性特性默認為false, 所以屬性p是不可寫,不可枚舉,不可配置的 o.p = 24 o.p //42 o.q = 12 for(var prop in o){ console.log(prop) } // "q",只有q 可以枚舉 delete o.p // false //創(chuàng)建一個可寫的,可枚舉的,可配置的屬性p o2 = Object.create({}, { p:{ value:42, writable:true, enumerable:true, //可枚舉屬性 configurable:true } })call 轉(zhuǎn)換上下文。
看一個實例
//example function Animal(name) { console.log(this) this.name = name; this.showName = function() { } } function Cat(name) { Animal.call(this, name); } var cat = new Cat("Black Cat"); var amal = new Animal();
控制臺結(jié)果:
由控制臺結(jié)果可以看到,通過call。Animal 方法中的 this(未new 之前,就是 window) 被轉(zhuǎn)換成Cat了。同時Cat還能繼承 Animal的方法和屬性
1.每個函數(shù)都有一個prototype屬性,其所指向的對象帶有constructor屬性,這一屬性指向函數(shù)自身。注意,prototype是函數(shù)本身就帶有的屬性,跟是不是構(gòu)造函數(shù),有沒有實例化沒有任何關(guān)系。那么在構(gòu)造函數(shù)實例化(new)之后到底發(fā)生了什么?
function Test(){} //定義一個構(gòu)造函數(shù) var obj = {}; obj.__proto__ = Test.prototype; //obj的原型指向構(gòu)造函數(shù)的原型 Test.call(obj); // 通過call,讓obj繼承構(gòu)造函數(shù)的屬性
這樣就實現(xiàn)了一個實例化的過程??梢栽诳刂婆_打印出obj。上述代碼等價于var obj = new Test()
2.[[prototype]]是隱藏屬性 一般來說就是 __proto__,但由于是隱藏的原型對象,一般瀏覽器會給每一個對象提供.__proto__這一屬性,實際上就是[[prototype]]屬性。
3.__proto__ 指向?qū)ο蟮脑蛯ο蟆?
4.構(gòu)造函數(shù)的_proto_指向構(gòu)造函數(shù)的prototype屬性。
5.一般來說,object.__proto__ == constructor.prototype;但是對于Object.create()構(gòu)造的對象來說這個不適用,因為object.create()構(gòu)造出來的對象是作為新對象的__proto__。
var person1 = { name: "cyl", sex: "male" }; var person2 = Object.create(person1); console.log(person2) console.log(person1)
由控制臺結(jié)果可以看出通過字面量構(gòu)建對象和通過Object.create()構(gòu)建的對象的區(qū)別。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/108019.html
摘要:面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅(qū)動,事件發(fā)射器加密解密,路徑操作,序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ):Js基礎(chǔ)教程、js內(nèi)置對...
摘要:面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象,,,事件驅(qū)動,事件發(fā)射器加密解密,路徑操作,序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段: HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ):Js基礎(chǔ)教程、js內(nèi)置對...
摘要:常見基礎(chǔ)對象屬性方法二關(guān)于的箭頭函數(shù)的返回對象的問題箭頭函數(shù)具有隱式返回的特性。返回值函數(shù)累計處理的結(jié)果。語句將某個對象添加的作用域鏈的頂部,如果在中又某個未使用命名空間的變量,跟作用域鏈中的某個屬性同名,則這個變量將指向這個屬性值。 js常見基礎(chǔ)對象屬性方法 (二) 關(guān)于es6的箭頭函數(shù)的返回對象的問題 箭頭函數(shù)(=>)具有隱式返回的特性。如果某個函數(shù)體只有單個表達式,你就可以忽略r...
摘要:用和包裹的內(nèi)容,稱為字符串。關(guān)系運算符用于進行比較的運算符。強制依賴于,非強制依賴于。使用場合全局環(huán)境構(gòu)造函數(shù)對象的方法閉包閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。所有全局對象函數(shù)以及變量均自動成為對象的成員。 1 什么是JavaScript JavaScript一種直譯式腳本語言,一種基于對象和事件驅(qū)動并具有安全性的客戶端腳本語言;也是一種廣泛應(yīng)用客戶端web開發(fā)的腳本語言。...
閱讀 3001·2021-09-10 10:50
閱讀 3200·2019-08-30 14:19
閱讀 3530·2019-08-29 17:31
閱讀 3262·2019-08-29 16:43
閱讀 2205·2019-08-29 14:05
閱讀 2099·2019-08-29 13:17
閱讀 2058·2019-08-26 13:25
閱讀 1774·2019-08-26 12:20