javascript Array 配列の共通メソッド_JavaScript スキル

(1) 基本的な配列メソッド

1.join()

Array.join() メソッドは、配列内のすべての要素を文字列に変換し、それらを連結して、最終的に生成された文字列を返します。区切り記号は自分で指定できます。指定しない場合は、デフォルトでカンマ

が使用されます。

var arr = [1,2,3];
console.log(arr.join());//"1,2,3"
console.log(arr.join("-"));//"1-2-3"

var a = new Array(10); //长度为10的空数组 组成下边字符串
console.log(a.join("-"));//"---------"

2.reverse()
Array.reverse() メソッドは、配列内の要素の順序を逆にし、逆の順序で配列を返します (返される配列はそれ自体であり、元の配列は変更されています)

var arr = [1,2,3];
arr.reverse();
console.log(arr.join());//"3,2,1"

文字列を逆にしたい場合は、次のようにすることができます

var str = "abcdefg";

console.log(str.split("").reverse().join(""));//"gfedcba" 返回的是新的值
console.log(str); //"abcdefg" 当然了，原始的是不会变的.

3.sort()
Array.sort() メソッドは、配列内の要素を並べ替えて、並べ替えられた配列を返します。

パラメータがない場合、デフォルトの並べ替えは小さいものから大きいものへの順序になります。もちろん、比較関数を直接追加して並べ替えることもできます

var arr = [1,4,7];
arr.sort();
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return a-b; //从小到大
});
console.log(arr); //[1,4,7]

arr.sort(function(a,b){
 return b-a; //从大到小
});
console.log(arr); //[7,4,1]


var num = new Array('one','three','Six','Five');
num.sort(); //区分大小写排序
console.log(num); // ["Five", "Six", "one", "three"]
num.sort(function(s,t){
 var a = s.toLowerCase();
 var b = t.toLowerCase();
 if(a<b) return -1;
 if(a>b) return 1;
 return 0;
});
console.log(num); // ["Five", "one", "Six", "three"]

4.concat()
Array.concat() メソッドは、concat() の呼び出し元の元の配列の要素と concat() の各パラメーターを含む要素を持つ新しい配列を作成して返します。

これらのパラメータのいずれかがそれ自体配列である場合、配列自体ではなく、配列の要素が連結されます。

ただし、concat() は配列の配列を再帰的にフラット化しないことに注意してください。 concat() も呼び出し元の配列を変更しません。

var arr = [1,2,3];
console.log(arr.concat(4,5)); // [1, 2, 3, 4, 5]
console.log(arr);       // [1, 2, 3]
console.log(arr.concat([4,5])); // [1, 2, 3, 4, 5]
console.log(arr.concat([4,5],[6,7])); // [1, 2, 3, 4, 5,6,7]
console.log(arr.concat([4,[5,[6,7]]])); // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.concat(4,[5,[6,7]])); // [1, 2, 3, 4, 5,[6,7]]

5.slice()
Array.slice() メソッドは、指定された配列のスライスまたはサブ配列を返します。その 2 つのパラメータは、それぞれセグメント (a,b) の開始位置と終了位置を指定します。返されるのは、b を除いた a から b までの配列要素です。
パラメータ (a) が 1 つだけの場合、a から配列の最後までの要素を表します。
パラメータに負の数 (-a) が含まれる場合、それは配列内の最後の要素に対する相対的な の位置を示します。たとえば、(-3) は最後から 3 番目の要素を表します。負の数値が表示された場合は、まず変換してから、範囲ルールに従って求めます
また、新しい配列を返しますが、元の配列は変更されません

var arr = [1,2,3,4,5];
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.slice(3));//[4, 5]
console.log(arr.slice(-3));// [3, 4, 5]
console.log(arr.slice(-3,-1));// [3, 4]
console.log(arr.slice(2,-1));// [3, 4]

6. スプライス()
Array.splice() メソッドは、配列内の要素を挿入または削除するための一般的なメソッドです。元の配列の値を変更し、新しい配列シーケンス

を返します。

splice() の最初のパラメータは挿入または削除の開始位置を指定し、2 番目のパラメータは配列から削除する要素の数を指定します。第 2 パラメータを省略した場合は、デフォルトで最後まで削除されます。

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.splice(4)); //[5, 6, 7, 8]
console.log(arr); // [1, 2, 3, 4]
console.log(arr.splice(1,2));// [2, 3]
console.log(arr); // [1, 4]

splice() の最初の 2 つのパラメータは、削除する配列要素を指定します。続く任意の数の引数は、最初の引数で表される位置から開始して、配列に挿入される要素を指定します。

上記の concat() とは異なり、splice() は次の [1,2] のような配列を直接挿入します

var arr = [1,2,3,4,5];
console.log(arr.splice(2,0,'a','b')); // []
console.log(arr); // [1, 2, "a", "b", 3, 4, 5]
console.log(arr.splice(2,1,[1,2],3));// ["a"]
console.log(arr); // [1, 2, [1, 2], 3, "b", 3, 4, 5]

7.push()pop()unshift()shift()
これらのメソッドをスタック操作と考えてください。最初の 2 つは通常のスタック操作で、後の 2 つは逆スタック操作です
Push() と unshift() は前後の要素を配列に追加し、新しい配列の長さを返します
Pop() と SHIFT() は、配列内の最後の要素と最初の要素を削除し、削除された要素を返します

var arr = [];

console.log(arr.push(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.pop());// 3
console.log(arr);//[1,2]

console.log(arr.push([4,5]));//3
console.log(arr);// [1, 2, [4, 5]]

var arr = [];

console.log(arr.unshift(1,2,3));//3
console.log(arr);//[1, 2, 3]

console.log(arr.shift());// 1
console.log(arr);// [2, 3]

console.log(arr.unshift([4,5]));//3
console.log(arr);//[[4, 5], 2, 3]

(2) ECMAScript5 の配列メソッド

このタイプの配列メソッドのほとんどには、統一された一般的なルールがあります。どれも元の配列を変更しません。
ほとんどのメソッドは最初の引数として関数を受け取り、配列の各要素に対して 1 回関数を呼び出します。

スパース配列の場合、存在しない要素に対して渡された関数は呼び出されません。 ほとんどの場合、呼び出される関数は、配列要素、要素のインデックス、配列自体の 3 つのパラメーターを受け取ります。通常、最後の 2 つのパラメータを入力する必要はありません。
ここの最初のパラメータ (関数) に加えて、2 番目のパラメータがあります (これはオプションです)。2 番目のパラメータが存在する場合、呼び出された関数は 2 番目のパラメータを持つメソッドとして扱われます。
つまり、関数の呼び出し時に渡される 2 番目のパラメーターが、その this キーワードの値として使用されます。


1.forEach()

このメソッドは配列を最初から最後まで走査し、各配列に対して指定された関数を呼び出します。

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){ //只使用了第一个参数（函数），调用的函数也只使用了第一个参数数组元素
 sum += value;
});

console.log(sum);//15
console.log(data);// [1, 2, 3, 4, 5]

var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){ //调用的函数具有了三个参数
  data[item] = value*value; //取平方
});

console.log(data);// [1, 4, 9, 16, 25]

2.map()
このメソッドは、呼び出された配列の各要素を指定された関数に渡し、この関数の戻り値を含む配列を返します。

var data = [1,2,3,4,5];
var data1 = data.map(function(value){
 return ++ value;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [2, 3, 4, 5, 6]

3.filter()
このメソッドによって返される配列要素は、呼び出し元の配列のサブセットです。渡された関数は論理判定に使用され、関数は true または false を返します。

戻り値が true または true に変換できる値の場合、判定関数に渡された要素はこのサブセットのメンバーとなり、戻り値として配列に追加されます。

var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
 return value <= 3;
});

var data2 = data.filter(function(value){
 return value > 3;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// [1,2,3]
console.log(data2);// [4,5]

4.every()和some()
顾名思义，every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true

var data = [1,2,3,4,5];
var data1 = data.every(function(value){
 return value < 4;
});

var data2 = data.some(function(value){
 return value >4;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(data1);// false
console.log(data2);// true

5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合，生成单个值。

reduce()有两个参数。第一个是执行化简操作的函数，就是说用某种方法把两个值化简为一个值，并返回化简后的值。

　　　　　　　　　　第二个参数可选，用来传递给第一个参数函数作为初始值。如果第二个参数没有，则初始值就使用数组的第一个元素值。

var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
 return a+b;
});

var sum1 = data.reduce(function(a,b){
 return a+b;
},5);

var min = data.reduce(function(a,b){
 return (a<b)&#63;a:b;
});

console.log(data); // [1, 2, 3, 4, 5]
console.log(sum);// 15
console.log(sum1);// 20
console.log(min);// 1

sum中没有第二个参数，所以初始值为第一个数组元素，第一步1+2=3，第二步3+3=6... 最后得15
sum1中有第二个参数，所以初始值为5，第一步5+1=6，第二步6+2=8... 最后得20

reduceRight()和reduce()差不多，不同的是它按照数组索引从高到低（从右到左）处理数组，而不是正常的从低到高。

var data = ['a','b','c']; 
var str = data.reduce(function(x,y){ //顺序
 return x+y;
});

var str1 = data.reduceRight(function(x,y){ //逆序
 return x+y;
});

console.log(data);// [1, 2, 3]
console.log(str);//"abc"
console.log(str1);//"cba"

6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素，返回找到的元素的索引（找到了一个就退出了），没有找到则返回-1.

一个从头至尾，一个从尾至头

var data = ['a','b','a','c','a']; 

console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a'));//4

console.log(data.lastIndexOf('a',-2));//2 从倒数第二个开始
console.log(data.lastIndexOf('a',1));//0  从顺序第二个往前

7.数组类型 isArray()
判断一个对象是不是数组

console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false

//模拟上边的
var isArray1 = Function.isArray||function(o){
 return typeof o === "object" &&
  Object.prototype.toString.call(o) === "[object Array]";
};

console.log(isArray1([]));//true
console.log(isArray1({}));//false