BinaryDevelop
  1. ホーム
  2. js

配列のフィルタリング、ソート、マップなど、ES5ループの各種機能

2022-03-18 12:43:27

ちなみに、以下はES5のメソッドで、ほとんど使われていないものもありますが、ES6で新しくなったわけではありません。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loop</title>
</head>
<script>
	let arr = ['apple', 'orange', 'banana'];

        /**
         * i++ for loop
        */
	console.log('for loop')
	for(var i=0; i<arr.length; i++){
		console.log(arr[i])
	}
	console.log('')



        /**
         * forEach
        */
	console.log('forEach loop')
	arr.forEach(function(val, index, arr){
		console.log(this, val, index, arr)
	}, 123)
	console.log('')



        /**
         * map does data interaction "mapping", under normal circumstances, you need to cooperate with return, the return value is a new array, if there is no return, equivalent to forEach
         * Note: Usually you need to return whenever you use map, otherwise you can just use forEach.
        */
	console.log('map loop')
	let arr2 = [
		{title: 'aaa', read: 100, hot: true},
		{title: 'aaa', read: 100, hot: true},
		{title: 'aaa', read: 100, hot: false}, {title: 'aaa', read: 100, hot: true},
		{title: 'aaa', read: 100, hot: true}, {title: 'aaa', read: 100, hot: true},
	]
	arr2.map(function (item, index, arr) {	
		console.log(item, index, arr)
	})
	console.log('')
	// Can be used to: reorganize the data structure
	let newArr2 = arr2.map((item, index, arr) => {
		let json = {};
		json.t = `${item.title}`;
		json.r = item.read+100;
		json.h = item.hot == true && 'yes';
		return json;
	})
	console.log(newArr2)
	console.log('')



        /**
         * filter filter, filter some unqualified data, if it returns true, it stays
        */
	console.log('filter traversal')
	let newArr3 = arr2.filter((item, index, arr)=>{
		return item.hot == true
	})
	console.log(newArr3)
	console.log('')



        /**
         * some is similar to a lookup, if an element in the array matches the condition, it returns true
        */
	console.log('some traversal')
	let newArr4 = arr.some((val, index, arr)=>{
		return val == 'apple'
	})
	console.log(newArr4)
	// What it does: determine if there is a value in the array
	function findInArray(arr, item){
		return arr.some((val, index, arr)=>{
			return val == item;
		})
	}
	console.log(findInArray(arr, 'apple'))
	console.log('')



        /**
         * every array must match all elements to return true 
        */
	console.log('every traversal')
	let arr5 = [1,3,5,7];
	var newArr5 = arr5.every((val, index, arr)=>{
		return val%2 == 1;
	})
	console.log(newArr5)
	console.log('')



        /**
         * reduce Function: Sum or product of arrays
        */
	console.log('reduce traversal')
	let arr6 = [2,2,3];
	let result6 = arr6.reduce((prev, cur, index, arr)=>{
		// return prev+cur;
		// return Math.pow(prev,cur); // subdivision
		return prev**cur; // subdivision
	})
	console.log(result6)
	console.log('')



	// reduceRight does the same thing as reduce, but from right to left.


</script>
<body>
	
</body>
</html>

1. フィルタ：条件による絞り込み



    1.1. 条件に合致するすべての値を取得する







    1.2. アレイデデュープ







    注意事項



        filter() メソッドは、指定した配列の中で条件に合うすべての要素をチェックし、新しい配列を作成します。



        filter() は、空の配列はチェックしません。



        filter() は元の配列を変更しません。

2.ソートする。



    構文：arrayObject.sort(sortby)



    注意：sortbyはソート順を指定する関数でなければならない。オプションの引数



    戻り値：配列への参照。配列は元の配列でソートされ、コピーは生成されないことに注意してください。



    2.1. 数字の並べ替え







    2.2. 文字のソート（ユニコードでソートされます）



3.地図



    元の配列を変更せずに新しい配列を作成する



    コールバック関数のパラメータ，item（配列要素），index（配列），arr（配列自体）．



最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します