javascript よく検索してしまっている関数
Web 8 JavaScript findsortslicespliceincludesgetTime regex This article lists 8 useful JavaScript functions that are often used in web development. These functions include find, sort, slice, splice, includes, getTime, and regex.
by JanitorSep 09, 2023
いつも調べているな、と感じる関数を列挙しています。
いつも調べているな、と感じる関数を列挙しています。
Jump Links
1. Objectの配列から特定のキーの値と一致する要素を取得
2. Objectの配列を特定のキーでソート
3. 配列から、指定する範囲で、配列を取り出す
4. 配列の指定インデックスに挿入
5. 配列の指定インデックスを削除
6. 配列に値が含まれているかをtrueかfalseで返す
7. ミリ秒
8. 正規表現
1. Objectの配列から特定のキーの値と一致する要素を取得
1. Objectの配列から特定のキーの値と一致する要素を取得
見つからない場合はundefined
見つからない場合はundefined
var items = [ { id: 1, value: "one" }, { id: 2, value: "two" }, { id: 3, value: "three" } ];
var searchId = 1;
var found = items.find( ( item ) => item.id == searchId );
var items = [ { id: 1, value: "one" }, { id: 2, value: "two" }, { id: 3, value: "three" } ];
var searchId = 1;
var found = items.find( ( item ) => item.id == searchId );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
2. Objectの配列を特定のキーでソート
2. Objectの配列を特定のキーでソート
var items = [ { id: 1, createdAt: "2023-06-15T07:40:35.298Z" }, { id: 2, createdAt: "2023-08-05T07:43:37.727Z" }, { id: 3, createdAt: "2023-06-29T12:09:30.078Z" } ];
var set = new Set( items );
// 大きい -> 小さい
var sortedArrBtoS = [ ...set ];
sortedArrBtoS.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() < ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
// 小さい -> 大きい
var sortedArrStoB = [ ...set ];
sortedArrStoB.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() > ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
var items = [ { id: 1, createdAt: "2023-06-15T07:40:35.298Z" }, { id: 2, createdAt: "2023-08-05T07:43:37.727Z" }, { id: 3, createdAt: "2023-06-29T12:09:30.078Z" } ];
var set = new Set( items );
// 大きい -> 小さい
var sortedArrBtoS = [ ...set ];
sortedArrBtoS.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() < ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
// 小さい -> 大きい
var sortedArrStoB = [ ...set ];
sortedArrStoB.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() > ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
3. 配列から、指定する範囲で、配列を取り出す
3. 配列から、指定する範囲で、配列を取り出す
var arr = [ "zero", "one", "two", "three", "four" ];
var newArr1 = arr.slice( 0, 2 ); // [ "zero", "one" ]
var newArr2 = arr.slice( 2, 6 ); // [ "two", "three", "four" ]
var arr = [ "zero", "one", "two", "three", "four" ];
var newArr1 = arr.slice( 0, 2 ); // [ "zero", "one" ]
var newArr2 = arr.slice( 2, 6 ); // [ "two", "three", "four" ]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
4. 配列の指定インデックスに挿入
4. 配列の指定インデックスに挿入
var arr = [ "zero", "one", "three", "four" ];
arr.splice( 2, 0, "two") // ["zero", "one", "two", "three", "four"]
var arr = [ "zero", "one", "three", "four" ];
arr.splice( 2, 0, "two") // ["zero", "one", "two", "three", "four"]
5. 配列の指定インデックスを削除
5. 配列の指定インデックスを削除
var arr = [ "zero", "one", "dog", "two", "three", "four" ];
arr.splice( 2, 1 ) // ["zero", "one", "two", "three", "four"]
var arr = [ "zero", "one", "dog", "two", "three", "four" ];
arr.splice( 2, 1 ) // ["zero", "one", "two", "three", "four"]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
6. 配列に値が含まれているかをtrueかfalseで返す
6. 配列に値が含まれているかをtrueかfalseで返す
var arr = [ "zero", "one", "three", "four" ];
arr.includes( "one" ); // true
arr.includes( "two" ); // false
var arr = [ "zero", "one", "three", "four" ];
arr.includes( "one" ); // true
arr.includes( "two" ); // false
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
7. ミリ秒
7. ミリ秒
var s = new Date();
// 何かの処理
console.log( ( new Date() ).getTime() - s.getTime() );
var s = new Date();
// 何かの処理
console.log( ( new Date() ).getTime() - s.getTime() );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
8. 正規表現
8. 正規表現
var str = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index, follow">'
const pattern = /<meta.*?>/g;
matchs = str.match( pattern );
var str = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index, follow">'
const pattern = /<meta.*?>/g;
matchs = str.match( pattern );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match
javascript よく検索してしまっている関数
Web 8 JavaScript findsortslicespliceincludesgetTime regex This article lists 8 useful JavaScript functions that are often used in web development. These functions include find, sort, slice, splice, includes, getTime, and regex.
by JanitorSep 09, 2023
いつも調べているな、と感じる関数を列挙しています。
いつも調べているな、と感じる関数を列挙しています。
Jump Links
1. Objectの配列から特定のキーの値と一致する要素を取得
2. Objectの配列を特定のキーでソート
3. 配列から、指定する範囲で、配列を取り出す
4. 配列の指定インデックスに挿入
5. 配列の指定インデックスを削除
6. 配列に値が含まれているかをtrueかfalseで返す
7. ミリ秒
8. 正規表現
1. Objectの配列から特定のキーの値と一致する要素を取得
1. Objectの配列から特定のキーの値と一致する要素を取得
見つからない場合はundefined
見つからない場合はundefined
var items = [ { id: 1, value: "one" }, { id: 2, value: "two" }, { id: 3, value: "three" } ];
var searchId = 1;
var found = items.find( ( item ) => item.id == searchId );
var items = [ { id: 1, value: "one" }, { id: 2, value: "two" }, { id: 3, value: "three" } ];
var searchId = 1;
var found = items.find( ( item ) => item.id == searchId );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
2. Objectの配列を特定のキーでソート
2. Objectの配列を特定のキーでソート
var items = [ { id: 1, createdAt: "2023-06-15T07:40:35.298Z" }, { id: 2, createdAt: "2023-08-05T07:43:37.727Z" }, { id: 3, createdAt: "2023-06-29T12:09:30.078Z" } ];
var set = new Set( items );
// 大きい -> 小さい
var sortedArrBtoS = [ ...set ];
sortedArrBtoS.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() < ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
// 小さい -> 大きい
var sortedArrStoB = [ ...set ];
sortedArrStoB.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() > ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
var items = [ { id: 1, createdAt: "2023-06-15T07:40:35.298Z" }, { id: 2, createdAt: "2023-08-05T07:43:37.727Z" }, { id: 3, createdAt: "2023-06-29T12:09:30.078Z" } ];
var set = new Set( items );
// 大きい -> 小さい
var sortedArrBtoS = [ ...set ];
sortedArrBtoS.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() < ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
// 小さい -> 大きい
var sortedArrStoB = [ ...set ];
sortedArrStoB.sort( function( a, b ){ return ( ( new Date( a.createdAt ) ).getTime() > ( new Date( b.createdAt ) ).getTime() ? 1 : -1 ); } );
3. 配列から、指定する範囲で、配列を取り出す
3. 配列から、指定する範囲で、配列を取り出す
var arr = [ "zero", "one", "two", "three", "four" ];
var newArr1 = arr.slice( 0, 2 ); // [ "zero", "one" ]
var newArr2 = arr.slice( 2, 6 ); // [ "two", "three", "four" ]
var arr = [ "zero", "one", "two", "three", "four" ];
var newArr1 = arr.slice( 0, 2 ); // [ "zero", "one" ]
var newArr2 = arr.slice( 2, 6 ); // [ "two", "three", "four" ]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
4. 配列の指定インデックスに挿入
4. 配列の指定インデックスに挿入
var arr = [ "zero", "one", "three", "four" ];
arr.splice( 2, 0, "two") // ["zero", "one", "two", "three", "four"]
var arr = [ "zero", "one", "three", "four" ];
arr.splice( 2, 0, "two") // ["zero", "one", "two", "three", "four"]
5. 配列の指定インデックスを削除
5. 配列の指定インデックスを削除
var arr = [ "zero", "one", "dog", "two", "three", "four" ];
arr.splice( 2, 1 ) // ["zero", "one", "two", "three", "four"]
var arr = [ "zero", "one", "dog", "two", "three", "four" ];
arr.splice( 2, 1 ) // ["zero", "one", "two", "three", "four"]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
6. 配列に値が含まれているかをtrueかfalseで返す
6. 配列に値が含まれているかをtrueかfalseで返す
var arr = [ "zero", "one", "three", "four" ];
arr.includes( "one" ); // true
arr.includes( "two" ); // false
var arr = [ "zero", "one", "three", "four" ];
arr.includes( "one" ); // true
arr.includes( "two" ); // false
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
7. ミリ秒
7. ミリ秒
var s = new Date();
// 何かの処理
console.log( ( new Date() ).getTime() - s.getTime() );
var s = new Date();
// 何かの処理
console.log( ( new Date() ).getTime() - s.getTime() );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
8. 正規表現
8. 正規表現
var str = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index, follow">'
const pattern = /<meta.*?>/g;
matchs = str.match( pattern );
var str = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index, follow">'
const pattern = /<meta.*?>/g;
matchs = str.match( pattern );
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match