配列操作は JS でよく使用されます

元の配列を変更する方法:

1. push: 配列の末尾に要素を追加し、新しい長さを返します

2. pop: 最後の要素を削除し、削除された要素を返します

3. unshift: 追加配列の先頭に要素を追加し、新しい長さを返します

4. shift: 最初の要素を削除し、削除された要素を返します、空は未定義です

5. reverse: 配列の順序を逆にします

6. sort : 配列

7. をソートします

   splice: 配列要素の削除、追加、置換、削除された配列を返します、削除しない場合は戻りません

は元の配列の操作メソッドを変更しません:

1. concat: connect複数の配列の場合は、新しい配列を返します

2. join: パラメータを区切り文字として配列内のすべての要素を 1 つの文字にまとめます

3. slice: 選択された要素を返します

4. map(es6):配列は新しい配列にマッピングされます

5. filter(es6): 配列のフィルタリング、メソッド判定を通過した後に生成されたすべての新しい配列を返します (true と判定された場合)

6. forEach: 配列トラバーサル、いいえ戻り値

7. every(es6): 配列内の各項目に対して指定された関数を実行し、各項目が true の場合は true を返し、それ以外の場合は false を返します

8. some(es6): 指定された関数を実行します配列内の要素に対して、たとえば where 1 つの項目が true の場合に true を返します。この時点で、すべてが false の場合は false を返します

9. find(es6): Findテストメソッド (関数) の条件を満たす配列内の最初の要素 要素を返し、その要素を返します

10. reduce(es6): メソッドは関数をアキュムレータとして受け取り、配列内の各値を受け取ります(左から右へ) 減少し始め、最終的に値として計算されます。

11. indexOf: メソッドは、配列内で指定された要素が見つかる最初の index を返します。要素が存在しない場合は -1 を返します。

12. includes(es7): このメソッドは、状況に応じて、配列に指定された値が含まれているかどうかを判断するために使用され、含まれている場合は true を返し、そうでない場合は false を返します。

---

使用

// 连接数组
//concat方法
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1.concat(array2); // ["a", "b", "c", "d", "e", "f"]
// 展开运算符方法
[...array1, ...array2] // ["a", "b", "c", "d", "e", "f"]



//循环
var arr = ['a', 'b', 'c'];
arr.forEach(function(element, index) {
  console.log(element + ',' + index);
});
// a , 0
// b , 1
// c , 2

// 箭头函数写法
arr.forEach((element,index) => console.log(element,index));



//循环映射(map)
var numbers = [1, 5, 10, 15];
let doubles = numbers.map((item, index) => item * 2);
// [2, 10, 20, 30]

// 数组是否元素包含(includes)
let a = [1, 2, 3];
a.includes(2);
// true
a.includes(4);
// false



//查找元素(find)
//查找数组中大于等于15的元素，并且返回第一个元素
var ret = [12, 5, 8, 130, 44].find(function(element) {
    return element >= 15; // 方法需要有返回值，判断得出true或者false，返回为true的元素
  }
);
// 130



// 过滤数组(filter)
// 过滤数组中大于等于10的元素并且返回新数组
var filtered = [12, 5, 8, 130, 44].filter(function(value) {
    return value >= 10; // 方法需要有返回值，判断得出true或者false，返回为true的元素
  }
);
// [12, 130, 44]



// 循环判断(every) 为每个元素都执行
var passed = [12, 5, 8, 130, 44].every(function (element, index, array) {
  return (element >= 10);
});
// false


// 循环判断(some) 遇到返回值为true的就停止执行
var passed = [12, 5, 8, 130, 44].some(function (element, index, array) {
  return (element >= 10);
});
// true



// 数组截取(slice) 不改变原数组
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2)  // ["camel", "duck", "elephant"]  返回数组从下标2开始直到结尾的一个新数组
animals.slice(2, 4)  //["camel", "duck"]  返回数组从下标2到4之间到一个新数组



// 数组减接(splice)  改变原数组
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // ["angel", "clown", "drum", "mandarin", "sturgeon"]    0为删减个数，在索引为2的位置不删减并且插入'drum'
myFish.splice(2, 1); //  ["angel", "clown", "mandarin", "sturgeon"]       从索引为2的位置删除1项（也就是'drum'这一项）



// 使用 lastIndexOf
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // index === 3
var index = array.lastIndexOf(8); // index === -1



// 数组转字符串(join)
let a = ['Wind', 'Rain', 'Fire'];
a.join() //默认为逗号分隔
// 'Wind,Rain,Fire'
a.join("-") // 用 - 分隔
// 'Wind-Rain-Fire'



// es6 数组去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let newarr = Array.from(set);
// newarr === [1, 2, 3, 4, 5]

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドで Cookie を設定する方法

フロントエンドでイベントの伝播を防ぐ方法

以上が配列操作は JS でよく使用されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。