js常見基礎對象屬性方法(一)

時間 2019-11-08

原文原文鏈接

js常見基礎對象屬性方法

Object.keys()

Object.keys()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷改對象時返回的順序一致(二者的主要區別是一個for-in 循環還會枚舉器原型鏈上的屬性)css

//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()來建立本身的上下文。這個函數接受三個參數：html

directory：說明須要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達式
該函數返回一個require函數，包含了3個參數： resolve, keys, id.
resolve 一個返回模塊請求的id的函數
keys 一個以數組的形式返回全部模塊請求的函數，能夠結合 map, foreach, 函數進行批量require();

若是你想引入文件目錄下全部符合匹配模式的文件，那麼這個方法是頗有用的.node

// examples: 
function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

for...of

es6新加的特效，能夠循環遍歷數組元素;
與 for...in 和Array.forEach()的區別：
一、for...in 是對普通對象的遍歷，不只會遍歷數組元素，甚至還會遍歷其自定義屬性或者原型鏈上面的屬性。
二、forEach() 方法，不能使用 break, 中斷循環，也不能用return 語句返回到外層函數。
for...in 能夠完美解決上面兩個方法的問題。es6

Object.entries()

該方法返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用for...in 循環遍歷該對象時返回的順序一致(區別在於for-in 循環也枚舉原型鏈中的屬性)web

//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轉換爲Map
new Map() 構造函數接受一個可迭代的entries。藉助Object.entries方法你能夠很容易的將Object轉換爲Map:正則表達式

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

Polyfill

你可使用下面列出的簡易 polyfill。chrome

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;
  };

轉載：https://segmentfault.com/a/11...segmentfault

unshift() 方法

unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。

location.replace()

replace() 方法可用一個新文檔取代當前文檔。可用於頁面跳轉。和location.href的區別在於，replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前記錄。然後者會在瀏覽器的歷史瀏覽記錄添加一條記錄。數組

location.pathname

pathname 屬性是一個可讀可寫的字符串，可設置或返回當前 URL 的路徑部分瀏覽器

//examples
//假設當前的 URL 是: http://example.com:1234/test/test.htm#part2：
document.write(location.pathname);  ///test/test.htm

location.hash

hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。

//examples
//假設當前的 URL 是: http://example.com:1234/test.htm#part2：
document.write(location.hash);//#part2

window.top

該屬性返回對一個頂級窗口的只讀引用。若是窗口自己就是一個頂級窗口，top 屬性存放對窗口自身的引用。若是窗口是一個框架，那麼 top 屬性引用包含框架的頂層窗口。跳出當前框架

in 運算符

若是指定的屬性在指定的對象或其原型鏈中，則in 運算符返回true。

//examples
// 數組
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 (必須使用索引號,而不是數組元素的值)

charAt() 方法

charAt() 方法可返回指定位置的字符。字符串中第一個字符的下標是 0。若是參數 index 不在 0 與 string.length 之間，該方法將返回一個空字符串。

slice(start,end) 方法

slice()方法可從已有的數組中返回選定的元素
參數：start 規定從何處開始選，若是是負數，則從數組尾部開始算位置
end 規定從何處結束所取。該參數是數組片斷結束處的數組下標。若是沒有指定該參數，則包含從start開始到數組結束的全部元素。
返回值:返回一個新的數組，包含從 start 到 end (部包括該元素)的原數組中的元素。
注意：該方法不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用Array.splice()

Document.documentElement

會返回文檔對象（document）的根元素的只讀屬性(如Html文檔的<html>元素)
與document.body的區別
document.body 會返回 Html 文檔中的body節點。即body
注意：在獲取瀏覽器滾動器距離時、窗口大小時，二者在不一樣瀏覽器下會有區別。
兼容解決方案。

Js 中雙感嘆號的做用

!!通常用於將後面的表達式強制轉化爲布爾類型。js是弱類型語言，因此能夠經過雙感嘆號，將其轉化爲boolean類型。
布爾類型的轉化，js約定的規則爲：
一、false、undefined、null、0、""均爲false
二、true、一、"string"、[Object] 爲true

js substring(start, end)的用法

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。substring() 方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。
重要事項：與 slice() 和 substr() 方法不一樣的是，substring() 不接受負的參數。

js substr()的用法

substr(start, length)方法可在字符串中抽取從start下標開始的指定數目的字符。
其中length必須是數值，若是省略該參數，那麼返回從字符串的開始位置到結尾的字串。

js random() 方法

Math.random() 方法可返回介於 0 ~ 1 之間的一個隨機數。

document.createElement(nodename)

參數：元素節點的名稱
返回：新建的元素節點

document.innerHTML = Node

向元素節點中插入節點。注意HTML要大寫。
與document.innerText的區別：
一、innerHTML指的是從對象的起始位置到終止位置的所有內容，包括Html標籤
二、innerText 指的是從起始位置到終止位置的內容，但它去除html標籤。
同時，innerHTML 是全部瀏覽器都支持的，innerText 是IE瀏覽器和chrome瀏覽器支持的，Firefox瀏覽器不支持。因此儘可能多用innerHTML。少用innerText

transform 不一樣瀏覽器廠商前綴，js駝峯寫法

chrome:webkitTransform => css: -webkit-transform
o:OTransform => css:-o-transform
ms:msTransform => css:-ms-transform
Moz:MozTransform => css:-Moz-transform

常見獲取dom對象的方法總結和區別(document.getElementById...)

document.getElementById、document.getElementsByTagName、document.getElementsByClassName、querySelector()、querySelectorAll()等選擇器的使用和區別

ES6-對象的擴展-Object.keys()，Object.values()，Object.entries()

https://blog.csdn.net/ww43043...

JavaScript indexOf() 方法

stringObject.indexOf(searchvalue,fromindex)方法可返回某個指定的字符串值在字符串中首次出現的位置。
searchvalue:檢索的字符串;必需
fromindex：可選的整數參數。規定在字符串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。
注意：若是要檢索的字符串值沒有出現，則該方法返回 -1。

Object.create()(來自MDN)

Object.create()建立一個新對象，使用現有的對象來提供新建立對象的__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建立的對象是一個新的對象。
me.isHuman = true; // 繼承來的屬性能夠被重寫
me.printIntroduction(); // 繼承的函數也能夠調用
// expected output: "My name is Matthew. Am I human? true"

在這裏，咱們能夠經過在瀏覽器控制檯打印出me對象。能夠獲得以下結果
.
由此能夠理解描述中寫的使用現對象來提供新建立對象的__proto__這一句話的意思。
一、經過Object.create()實現類式繼承(繼承對象已經原型對象屬性)

// 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); // 調用父類的構造函數。繼承分類的對象屬性
}
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log(rect)

二、使用 Object.create 的 propertyObject參數

var o;

//建立 一個原型爲null的空對象
o = Object.create(null);

o = {};

//以字面量方式的建立的空對象就至關於:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo會成爲所建立對象的數據屬性
  foo: {
    writable:true,  // 當且僅當該屬性的 writable 爲 true 時，該屬性才能被賦值運算符改變。默認爲 false。
    configure:true, // 當且僅當該屬性的 configurable 爲 true 時，該屬性描述符纔可以被改變，也可以被刪除。默認爲 false。
    value:"hello"   // 該屬性對應的值。能夠是任何有效的 JavaScript 值（數值，對象，函數等）。默認爲 undefined。
  },
  // bar會成爲所建立對象的訪問器屬性
  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函數中有一些初始化代碼，Object.create 不能執行那些代碼

// 建立一個以另外一個空對象爲原型，且擁有一個屬性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

//建立一個可寫的，可枚舉的，可配置的屬性p
o2 = Object.create({}, {
  p:{
    value:42,
    writable:true,
    enumerable:true,      //可枚舉屬性
    configurable:true
  }
})

call 轉換上下文。

看一個實例

//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();

控制檯結果：

由控制檯結果能夠看到，經過call。Animal 方法中的 this(未new 以前，就是 window) 被轉換成Cat了。同時Cat還能繼承 Animal的方法和屬性

prototype、[[prototype]]、prototype的區別與聯繫

1.每一個函數都有一個prototype屬性,其所指向的對象帶有constructor屬性，這一屬性指向函數自身。注意，prototype是函數自己就帶有的屬性，跟是否是構造函數，有沒有實例化沒有任何關係。那麼在構造函數實例化(new)以後到底發生了什麼？

function Test(){}     //定義一個構造函數
var obj = {};
obj.__proto__ = Test.prototype;     //obj的原型指向構造函數的原型
Test.call(obj);                     // 經過call，讓obj繼承構造函數的屬性

這樣就實現了一個實例化的過程。能夠在控制檯打印出obj。上述代碼等價於var obj = new Test()
2.[[prototype]]是隱藏屬性通常來講就是 __proto__，但因爲是隱藏的原型對象，通常瀏覽器會給每個對象提供.__proto__這一屬性，實際上就是[[prototype]]屬性。
3.__proto__ 指向對象的原型對象。
4.構造函數的_proto_指向構造函數的prototype屬性。
5.通常來講，object.__proto__ == constructor.prototype;可是對於Object.create()構造的對象來講這個不適用，由於object.create()構造出來的對象是做爲新對象的__proto__。

var person1 = {
    name: 'cyl',
    sex: 'male'
};
var person2 = Object.create(person1);
console.log(person2)
console.log(person1)

由控制檯結果能夠看出經過字面量構建對象和經過Object.create()構建的對象的區別。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。