日韩一级,一级片免费视频,伊人91在线

聊聊從Vue.js源碼中我學到了精妙方法

話不多說，趕快試試尤大大教給我們的這幾個精妙方法吧!在工作中肯定會用得到。

立即執行函數

頁面加載完成后只執行一次的設置函數。

(function (a, b) {
console.log(a, b); // 1,2
})(1, 2);

通常，全局變量被作為一個參數傳遞給立即執行參數，這樣它在函數內部不使用window也可以被訪問到。

(function (global) {
console.log(global); // Window對象
})(this);

多層嵌套三目運算符

三目運算符嵌套的寫法，使得代碼可讀性差，簡單業務場景下可以試著使用。

var a = 1;
var b = 0;
a == 1 ? (b == 2 ? (b = 3) : (b = 1)) : "";
console.log(b); // 1

凍結對象

不可對指定對象增刪改。

var emptyObject = Object.freeze({
key: "1",
});
emptyObject.name = "maomin";
delete emptyObject.key;
emptyObject.key = "2";
console.log(emptyObject);

密封對象

只能對指定對象進行更改，不可進行增加刪除操作。

var sealObject = Object.seal({
key: 3,
});
sealObject.name = "maomin";
delete sealObject.key;
sealObject.key = 4;
console.log(sealObject); // 4

檢查是否是原始值

function isPrimitive(value) {
return (
typeof value === "string" ||
typeof value === "number" ||
// $flow-disable-line
typeof value === "symbol" ||
typeof value === "boolean"
);
}

快速檢測是否是對象

當我們知道原始值時，它主要用于將對象與原始值區分開來。

function isObject(obj) {
return obj !== null && typeof obj === "object";
}
console.log(isObject(true)); //false

檢測目標類型

var _toString = Object.prototype.toString;
function toRawType(value) {
return _toString.call(value).slice(8, -1);
}
console.log(toRawType([])); // Array

檢查目標是否是有效的數組索引

function isValidArrayIndex(val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val);
}

檢測是否是Promise對象

function isDef(v) {
return v !== undefined && v !== null;
}
function isPromise(val) {
return (
isDef(val) &&
typeof val.then === "function" &&
typeof val.catch === "function"
);
}
var promiseObj = new Promise(function (resolve, reject) {
// 一段耗時的異步操作
resolve("成功"); // 數據處理完成
// reject('失敗') // 數據處理出錯
}).then(
(res) => {
console.log(res);
}, // 成功
(err) => {
console.log(err);
} // 失敗
);
console.log(isPromise(promiseObj)); // true

目標轉換為字符串

var _toString = Object.prototype.toString;
function isPlainObject(obj) {
return _toString.call(obj) === "[object Object]";
}
function toString(val) {
return val == null
? ""
: Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
? JSON.stringify(val, null, 2)
: String(val);
}
console.log(toString({ name: 1 })); // {"name": 1}

轉化為數字

將輸入值轉換為數字以便持久化。如果轉換失敗，則返回原始字符串。

function toNumber(val) {
var n = parseFloat(val);
return isNaN(n) ? val : n;
}

檢測key是否在創建的Map對象內

function makeMap(str, expectsLowerCase) {
var map = Object.create(null);
var list = str.split(",");
for (var i = 0; i < list.length; i++) {
map[list[i]] = true;
}
return expectsLowerCase
? function (val) {
return map[val.toLowerCase()];
}
: function (val) {
return map[val];
};
}
var isBuiltInTag = makeMap("slot,component", true);
console.log(isBuiltInTag("component")); // true

刪除簡單數組中某一項

function remove(arr, item) {
if (arr.length) {
var index = arr.indexOf(item);
if (index > -1) {
return arr.splice(index, 1);
}
}
}
console.log(remove([1, 2], 1)); // [1]

檢測對象中是否有指定key

var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return hasOwnProperty.call(obj, key);
}
console.log(hasOwn({ name: 1 }, "name")); //true

將類數組對象轉化為真實數組

function toArray(list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
while (i--) {
ret[i] = list[i + start];
}
return ret;
}
console.log(toArray({ 0: 42, 1: 52, 2: 63, length: 3 })); // [42, 52, 63]

將屬性混合到目標對象中

function extend(to, _from) {
for (var key in _from) {
to[key] = _from[key];
}
return to;
}
console.log(extend({ name: 1 }, { name1: 2 })); // {name:1,name1:2}

將對象數組合并為單個對象

function extend(to, _from) {
for (var key in _from) {
to[key] = _from[key];
}
return to;
}
function toObject(arr) {
var res = {};
for (var i = 0; i < arr.length; i++) {
if (arr[i]) {
extend(res, arr[i]);
}
}
return res;
}
console.log(toObject([{ name: 1 }, { name: 1 }, { name: 2 }, { name1: 3 }])); // {name: 2, name1: 3}

檢測指定項在數組(簡單數組、數組對象)中的索引

function isObject(obj) {
return obj !== null && typeof obj === "object";
}
function looseEqual(a, b) {
if (a === b) {
return true;
}
var isObjectA = isObject(a);
var isObjectB = isObject(b);
if (isObjectA && isObjectB) {
try {
var isArrayA = Array.isArray(a);
var isArrayB = Array.isArray(b);
if (isArrayA && isArrayB) {
return (
a.length === b.length &&
a.every(function (e, i) {
return looseEqual(e, b[i]);
})
);
} else if (a instanceof Date && b instanceof Date) {
return a.getTime() === b.getTime();
} else if (!isArrayA && !isArrayB) {
var keysA = Object.keys(a);
var keysB = Object.keys(b);
return (
keysA.length === keysB.length &&
keysA.every(function (key) {
return looseEqual(a[key], b[key]);
})
);
} else {
/* istanbul ignore next */
return false;
}
} catch (e) {
/* istanbul ignore next */
return false;
}
} else if (!isObjectA && !isObjectB) {
return String(a) === String(b);
} else {
return false;
}
}
function looseIndexOf(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (looseEqual(arr[i], val)) {
return i;
}
}
return -1;
}
console.log(looseIndexOf([{ name: 1 }, { name: 2 }], 4)); // -1
console.log(looseIndexOf([{ name: 1 }, { name: 2 }], { name: 1 })); // 0

確保函數只調用一次

function once(fn) {
var called = false;
return function () {
if (!called) {
called = true;
fn.apply(this, arguments);
}
};
}
var callOnce = once(function () {
console.log("javascript");
});
callOnce(); // javascript
callOnce();

定義對象屬性

如果你想禁止一個對象添加新屬性并且保留已有屬性，就可以使用Object.preventExtensions(obj)。

function def(obj, key, val, enumerable) {
Object.defineProperty(obj, key, {
value: val, // 對象定義屬性
enumerable: !!enumerable, // 描述屬性是否會出現在for in 或者 Object.keys()的遍歷中
writable: true, // 是否可寫
configurable: true, // 是否重新定義或者刪除
});
}
var obj = {
name: 1,
};
def(obj, "name1", 2, true);
obj.name1 = 3;
console.log(obj); // {name: 1, name1: 3}

瀏覽器環境嗅探

var inBrowser = typeof window !== "undefined";
var inWeex = typeof WXEnvironment !== "undefined" && !!WXEnvironment.platform;
var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
var isIE = UA && /msie|trident/.test(UA);
var isIE9 = UA && UA.indexOf("msie 9.0") > 0;
var isEdge = UA && UA.indexOf("edge/") > 0;
var isAndroid = (UA && UA.indexOf("android") > 0) || weexPlatform === "android";
var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios";
var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
var isPhantomJS = UA && /phantomjs/.test(UA);
var isFF = UA && UA.match(/firefox\/(\d+)/);

JS構造函數內的方法與構造函數prototype屬性上方法的對比

定義在構造函數內部的方法，會在它的每一個實例上都克隆這個方法;定義在構造函數的 prototype 屬性上的方法會讓它的所有示例都共享這個方法，但是不會在每個實例的內部重新定義這個方法。如果我們的應用需要創建很多新的對象，并且這些對象還有許多的方法，為了節省內存，我們建議把這些方法都定義在構造函數的 prototype 屬性上。當然，在某些情況下，我們需要將某些方法定義在構造函數中，這種情況一般是因為我們需要訪問構造函數內部的私有變量。