溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
ES6出來已經有好幾年了，同時很多新特性可以被巧妙地運用在項目中。我想要列下其中一些，希望它們對你有用。
如果你還知道其他一些小技巧，歡迎留言~ 很高興把它們補充進來。
es6有用的7個技巧
數組去重
var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3, 4]
數組和布爾
有時我們需要過濾數組中值為 false 的值. 例如(0, undefined, null, false), 你可能不知道這樣的技巧
var myArray = [1, 0 , undefined, null, false]; myArray.filter(Boolean); > > [1] //是不是很簡單, 只需要傳入一個 Boolean 函數即可.
創建一個空對象
有時我們需要創建一個純凈的對象, 不包含什么原型鏈等等. 一般創建空對象最直接方式通過字面量 {}, 但這個對象中依然存在 proto 屬性來指向 Object.prototype 等等.
let dict = Object.create(null); dict.__proto__ === "undefined"
合并對象
在JavaScript中合并多個對象的需求一直存在, 比如在傳參時需要把表單參數和分頁參數進行合并后在傳遞給后端
const page = {
current: 1,
pageSize: 10
}
const form = {
name: "",
sex: ""
}
const params = {...form, ...page};
/*
{
name: "",
sex: "",
current: 1,
pageSize: 10
}
*
利用ES6提供的擴展運算符讓對象合并變得很簡單.
函數參數必須
ES6中可以給參數指定默認值,確實帶來很多便利. 如果需要檢測某些參數是必傳時,可以這么做
const isRequired = () => { throw new Error('param is required'); };
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
// 這里將拋出一個錯誤,因為名字時必須
hello();
// 這也將拋出一個錯誤
hello(undefined);
// 正常
hello(null);
hello('David');
解構賦值時使用別名
解構賦值是一個非常受歡迎的JavaScript功能，但有時我們更喜歡用其他名稱引用這些屬性，所以我們可以利用別名來完成:
const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;
// Grabs obj.x as { otherName }
const { x: otherName } = obj;
獲取查詢參數
多年來，我們編寫粗糙的正則表達式來獲取查詢字符串值，但那些日子已經一去不復返了; 現在我們可以通過 URLSearchParams API 來獲取查詢參數
在不使用 URLSearchParams 我們通過正則的方式來完成獲取查詢參數的, 如下:
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
return r ? r[2] : null;
}
使用 URLSearchParams 之后:
// 假設地址欄中查詢參數是這樣 "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
相比之前使用起來更加容易了
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
