序文
当初の意図：仕事で一般的に使用されるJavaScriptのヒントを整理して共有し、すべての友人を助け、仕事の開発効率を向上させることを望んでいます。
群衆に適しています：フロントエンドの一次開発、大物は迂回します。
1.関数パラメータのデフォルト値
Es6の前に、パラメーターのデフォルト値を記述したい場合は、関数本体に一連の判断ロジックも記述する必要があります。新しいパラメーターのデフォルト値の構文であるEs6の後で、見てみましょう。
function person(name, age, sex = "male") {
console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)
2.配列の合計はreduceを使用します
以前は、forループを使用してトラバースと合計を行いました。また、reduceメソッドを使用して合計することもでき、コードは簡潔です。
let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)
3.捨てられたif else男
判断を書くときはそれを使いますif elseが、ビジネスがどんどん大きくなっている状態がいくつかあるときは、コードが冗長すぎるので、単純化しましょう。
if(xxx = 1) {
xxx = "启用"
} else if(xxx = 2) {
xxx = "停用"
}
// ...省略
// 废除以上写法
let operation = {
1: "启用",
2: "停用"
3: "注销",
4: "修改"
5: "详情"
}
xxx = operation[status] // 代码简洁清晰
4.変数を交換します
Es6の前は、変数値を相互作用するときに3番目の変数を使用する必要がありました。Es6が割り当てを破壊しているように見えたとき、変数を非常に迅速に交換できました。
let x = 10;
let y = 20;
[x, y] = [y, x];
5.アレイの重複排除
Es6の前は、配列の重複排除のためにループトラバーサルまたはindexOfを使用していましたが、Es6にはSet構造があり、非常に便利です。
セットの構造がわからない場合は、前回の記事「データ構造のセットを理解するのに5分しかかかりません！」を読むことができます。》
let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434
6.URLアドレスバーのパラメータをすばやく取得する
アドレスバーのパラメータを取得したい場合があります。これらはすべて手書きのメソッドです。URLのクエリ文字列を処理するためのApiの実用的なメソッドがあります。
let params = new URLSearchParams(location.search);
params.get("xxx") // 获取地址栏参数
7.ランダムIDを生成します
場合によっては、ランダムで繰り返されない文字列を取得したいので、次の方法を使用できます
Math.random().toString(36).substr(2)
8.オブジェクトのキー値を取得します
オブジェクトのキー値をすばやく取得する
let person = {
name: "蛙人", age: 24};
console.log(Object.keys(person)) // ["name", "age"]
9.オブジェクトの値を取得します
オブジェクトの値をすばやく取得する
let person = {
name: "蛙人", age: 24};
console.log(Object.values(person)) // ["蛙人", 24]
10.テンプレート文字列式
Es6より前は、+記号を使用して文字列連結で変数を連結していたため、連結は問題htmlありません。タグの連結が非常に不快な場合、注意を怠ると間違った記号が報告されます。Es6のように見えるテンプレート文字列は ``を使用し、$ {}で変数をバインドします。これにより、開発が非常に便利になります。
let name = "蛙人"
console.log(`hello ${
name}`)
console.log(`<p>${
name}</p>`)
11.オブジェクトで指定された値を取得します
オブジェクト分解を使用してオブジェクト値を取得することは非常に簡潔であり、従来の方法のように.1つずつ取得するために文法を使用する必要はありません。
const person = {
name: "蛙人", age: 24, sex: "male"};
let {
age, sex } = person
console.log(age, sex) // 24 male
12.文字列を配列にすばやく変換する
文字列splitメソッドは使用されなくなり、spread演算子をすばやく配列に変換できます。
let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]
13.三眼演算を使用して値を判断します
状態が2つしかない場合は、三眼操作を使用し、それ以外の場合は破棄することを強くお勧めします。
let status = 1;
status = status == 1 ? "男" : "女"
14.??オペレーター
??演算子undefinedは前の値に対してのみ実行され、作業で使用される場合があります。見てみましょう。
let status = undefined;
let text = status ?? "暂无"
console.log(text) // 暂无
15.?.オペレーター
?.演算子これは、オブジェクトを処理するときに非常に便利です。次の場合を見て、person.name戻っundefinedてから呼び出すtoStringと、間違いなくエラーが報告されます。現時点では、?.演算子を使用してもエラーは発生しません。?.演算子undefinedはtoStringメソッドを呼び出すだけです。値がないとき。。
let person = {
}
console.log(person.name.toString()) // 报错
console.log(person.name?.toString()) // undefined
16.~~ダブルNOT演算子
~~double NOT演算子を使用して、切り捨てることができます。
console.log(~~4.3) // 4
17.オブジェクトをマージします
Es6の新しいメソッドを使用するObject.assignと、マージされたオブジェクトに重複する値がある場合、背面が前面をカバーし、無制限のパラメーターを受け取ることができます。仕事でもよく使われます。
let person = {
name: "蛙人", age: 24}
let obj = Object.assign({
}, person)
console.log(obj) // {name: "蛙人", age: 24}
18.配列の値は要件を満たしていますか？
現在のメソッドは、要件を満たす値が配列にある限りtrueを返し、そうでない場合はfalseを返します。
let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true
19.配列内のすべての値が要件を満たしていますか？
以前は、現在の配列の値が要件を満たしているかどうかを判断するためにトラバースし、累積する変数を宣言し、everyすべての要件が満たされたときにそれを直接使用してtrue返します。false
let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false
20.配列の順序をランダムにシャッフルします
シーンが配列の順序を乱す必要がある場合があります。
let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)
21.イベントの委任
100個のli要素を作成する前に、onclickイベントをバインドする必要があるため、パフォーマンスはあまり良くありません。イベントの委任によって達成できます。
ul.on("click", "li", e => {
....省略 操作
})
22.値が配列かどうかを確認します
let arr = []
console.log(Array.isArray(arr)) // true
console.log(Object.toString.call(arr) == ["Object Array"]) // true
23.疑似配列を真の配列に変換する
疑似配列は実際の配列オブジェクトのメソッドを呼び出すことができないため、疑似配列を真の配列に変換し、js要素を疑似配列として取得する必要があります。
document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 转换为真数组
Array.from(document.querySelectorAll('div')) // 转换为真数组
24.タイムスタンプをすばやく取得する
console.log(+ new Date())
console.log(Date.now())
25.値の添え字を取得します
Es6の前indexOfは、下付き文字を取得する方法しか知りませんでした。Es6の後には、別の方法があります。値が下付き文字の現在の値を返すことがわかった場合、見つからない場合は-1を返します。
let colors = ["red", "blue", "green"]
function getIndex(val) {
return colors.findIndex(i => i == val)
}
getIndex("blue") // 1
26.配列をオブジェクトに変換する
場合によっては、配列をオブジェクトに変換する必要があります。そうすることができます。
let person = ["蛙人", 24, "male"]
let obj = {}
person.forEach(item => (obj[item] = item))
27.奇数か偶数か
let num = val => val % 2 == 0;
num(10) // ture 偶数
num(1) // false 奇数
28.現在のページが非表示になっているかどうかを検出します
ページを切り替えたときに表示されている場合、現在のページが隠されているかどうかを監視しtrue、それがfalse開いた状態です。一般的に、作業は主にユーザーがページにとどまる時間に使用されます。
document.addEventListener("visibilitychange", function() {
console.log(document.hidden);
});
29.現在の配列のfalse値を削除します
配列内の誤った値を除外します。
let list = ["", false, 1, null, undefined, "蛙人", 24]
let res = item => item.filter(Boolean)
console.log(res(list))
30.これは
時々 、私たちは望んでいないthis。この値は、我々は変更する必要がありますので、thisポイントを、変更this点が多く、箭头函数、、 、、私が使用する方法、ビジネスシーンに応じて選択することができ、小さなパートナーを証明するためにここにいます！bindapplycall
let person = {
name: "蛙人"}
ul.onclick = (function(e) {
console.log(this.name )
}).bind(person)
31.アドレスが有効かどうかを判断します
function IsUrl(val) {
try {
if (new URL(val)) {
return true
}
} catch(e) {
return false
}
}
IsUrl("https://www.baidu.cn") // true
IsUrl("www.baidu.cn") // false
32. Mapを使用して、配列が結果を直接返すようにします
配列を処理するときに、配列を再結合するのではなく、処理された結果を直接返したい場合があります。そうすると、Mapが登場します。
let person = [10, 20, 30]
function fn(item) {
return item + 1
}
let res = person.map(fn)
console.log(res) // [11, 21, 31]
感謝
お忙しい中、この記事を開いていただきありがとうございます。お役に立てば幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。
私はフロッグマンです。大丈夫だと思ったら、親指を立ててください。
興味のある友達が参加できます[フロントエンドエンターテインメントサークル交換グループ]みんなのコミュニケーションと議論を歓迎します
![[フロントエンドエンターテインメントサークル交換グループ]](http://chuantu.xyz/t6/741/1615129069x1700339730.png){kind=link}