JavaScript の未知の配列メソッドの紹介-jsチュートリアル-php.cn

この記事では主に JavaScript について知らないいくつかの配列メソッドを紹介しますので、必要な方は参考にしてください

concat

var a = [1,2,3];
a.concat([4,5,6],7,8);//[1,2,3,4,5,6,7,8]

ログイン後にコピー

a 配列は変更されていませんが、新しい配列が追加されていることに注意してください。戻ってきた。

copyWithin

これは 3 つのパラメータを受け入れます。

target (必須): この位置からデータの置換を開始します。
start (オプション): この位置からデータの読み取りを開始します。デフォルトは 0 です。負の値の場合は逆数を表します。
end (オプション): この位置に到達する前にデータの読み取りを停止します。デフォルトは配列の長さと同じです。負の値の場合は逆数を表します。

これら 3 つのパラメータはすべて数値である必要があります。そうでない場合は、自動的に数値に変換されます

// 将 3 号位复制到 0 号位 
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) 
// [4, 2, 3, 4, 5] 
// -2 相当于 3 号位， -1 相当于 4 号位 
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) 
// [4, 2, 3, 4, 5] 
// 将 3 号位复制到 0 号位 
[].copyWithin.call({length: 5, 3: 1}, 0, 3) 
// {0: 1, 3: 1, length: 5} 
// 将 2 号位到数组结束，复制到 0 号位 
var i32a = new Int32Array([1, 2, 3, 4, 5]); 
i32a.copyWithin(0, 2); 
// Int32Array [3, 4, 5, 4, 5] 
// 对于没有部署 TypedArray 的 copyWithin 方法的平台 
// 需要采用下面的写法 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); 
// Int32Array [4, 2, 3, 4, 5]

ログイン後にコピー

entries

var a = [1,2,3];
var en = a.entries();
en.next().value;//[0.1];

ログイン後にコピー

反復可能なオブジェクトを返します

すべてのアイテムが渡されます

function isBigEnough(element, index, array) {
 return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

ログイン後にコピー

テスト関数は true を返し、それ以外の場合は false を返します

fill

[1, 2, 3].fill(4)   // [4, 4, 4]
[1, 2, 3].fill(4, 1)   // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)  // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)  // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN) // [1, 2, 3]
Array(3).fill(4);   // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

ログイン後にコピー

変更されるのは配列自体です

filter

function isBigEnough(value) {
 return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

ログイン後にコピー

新しい配列を返します

find

方法提供されたテスト関数の最初の要素の値を満たす配列を返します。それ以外の場合は undefind

function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130

ログイン後にコピー

findIndex

を返します findIndex() メソッドは、提供されたテスト関数を満たす配列内の最初の要素のインデックスを返します。それ以外の場合は、-1 が返されます。

function isBigEnough(element) {
 return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

ログイン後にコピー

forEach

let a = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
a.forEach(function(element) {
 console.log(element);
});
// a
// b
// c
//语法
array.forEach(callback(currentValue, index, array){
 //do something
}, this)
array.forEach(callback[, thisArg])

ログイン後にコピー

callback

为数组中每个元素执行的函数，该函数接收三个参数：
currentValue(当前值)
数组中正在处理的当前元素。
index(索引)
数组中正在处理的当前元素的索引。
array
forEach()方法正在操作的数组。
thisArg可选
可选参数。当执行回调 函数时用作this的值(参考对象)

ログイン後にコピー

注: 例外をスローする以外に、forEach ループを中止したり、ループから抜け出す方法はありません。これが必要な場合、forEach() メソッドを使用するのは間違いであり、代わりに単純なループを使用できます。配列内の要素が特定の条件を満たしているかどうかをテストし、ブール値を返す必要がある場合は、Array.every,Array.some を使用します。利用可能な場合は、新しいメソッド find() または findIndex() を真理テストの早期終了に使用することもできます。

include

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

ログイン後にコピー

パラメータ

searchElement

検索する要素の値。

fromIndex

オプション

このインデックスからsearchElement

の検索を開始します。負の場合、検索は array.length + fromIndex のインデックスから昇順に開始されます。デフォルトは 0 です。

戻り値

ブール値。

[1, 2, 3].includes(2);  // true
[1, 2, 3].includes(4);  // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

ログイン後にコピー

indexOf

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

ログイン後にコピー

Parameters

searchElement

検索する要素

fromIndex

検索を開始する位置。インデックス値が配列の長さ以上の場合、配列内で検索が実行されず、-1 が返されることを意味します。パラメーターで指定されたインデックス値が負の値である場合、配列の末尾からのオフセットとして扱われます。つまり、-1 は最後の要素から開始することを意味し、-2 は最後から 2 番目の要素から開始することを意味します。。注: パラメータで指定されたインデックス値が負の値の場合でも、配列は前から後ろにクエリされます。オフセットインデックス値がまだ 0 未満である場合は、配列全体がクエリされます。デフォルト値は 0 です。

戻り値

配列内で最初に見つかった要素のインデックス位置。見つからない場合は、-1 を返します

let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0 
a.indexOf(6); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1
if (a.indexOf(3) === -1) {
 // element doesn&#39;t exist in array
}

ログイン後にコピー

join

str = arr.join()
// 默认为 ","
str = arr.join("")
// 分隔符 === 空字符串 ""
str = arr.join(separator)
// 分隔符

ログイン後にコピー

keys

Keys() メソッドは、配列内の各インデックスのキーを含む新しい Array イテレータを返します

let arr = ["a", "b", "c"];
let iterator = arr.keys();
// undefined
console.log(iterator);
// Array Iterator {}
console.log(iterator.next()); 
// Object {value: 0, done: false}
console.log(iterator.next()); 
// Object {value: 1, done: false}
console.log(iterator.next()); 
// Object {value: 2, done: false}
console.log(iterator.next()); 
// Object {value: undefined, done: true}

ログイン後にコピー

map

map() メソッドは、結果が配列内の各要素である新しい配列を作成します提供された関数を呼び出します。

let array = arr.map(function callback(currentValue, index, array) { 
 // Return element for new_array 
}[, thisArg])
let numbers = [1, 5, 10, 15];
let doubles = numbers.map((x) => {
 return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

ログイン後にコピー

callback

3 つのパラメーターを使用して、新しい配列要素を生成する関数:

currentValue

コールバックの最初のパラメーター、配列内で処理されている現在の要素。

index

コールバックの 2 番目のパラメータ、配列内で処理されている現在の要素のインデックス。

array

コールバックの 3 番目のパラメータ、map メソッドが呼び出される配列。

thisArg

オプション。コールバック関数の実行時に使用される this の値。

戻り値

新しい配列。各要素はコールバック関数の結果です。

popとpush

pop()メソッドは、配列から最後の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します。

push() メソッドは、1 つ以上の要素を配列の末尾に追加し、配列の新しい長さを返します。

arr.push(element1, ..., elementN)

2 つの配列を結合する

この例では、apply() を使用して 2 番目の配列のすべての要素を追加します。

2 番目の配列 (例の moreVegs など) が大きすぎる場合は、このメソッドを使用して配列を結合しないことに注意してください。実際には、関数が受け入れることができるパラメーターの数には制限があるためです。詳細については、apply()を参照してください。

var vegetables = [&#39;parsnip&#39;, &#39;potato&#39;];
var moreVegs = [&#39;celery&#39;, &#39;beetroot&#39;];
// 将第二个数组融合进第一个数组
// 相当于 vegetables.push(&#39;celery&#39;, &#39;beetroot&#39;);
Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables); 
// [&#39;parsnip&#39;, &#39;potato&#39;, &#39;celery&#39;, &#39;beetroot&#39;]

ログイン後にコピー

reduceとreduceRight

reduce()メソッドは、アキュムレータと配列内の各要素(左から右)に関数を適用し、単一の値に削減します。。

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
var total = [0, 1, 2, 3].reduce(function(sum, value) {
 return sum + value;
}, 0);
// total is 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

ログイン後にコピー

callback

执行数组中每个值的函数，包含四个参数

accumulator

上一次调用回调返回的值，或者是提供的初始值（initialValue）

currentValue

数组中正在处理的元素

currentIndex

数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始

array

调用 reduce 的数组

initialValue

可选项，其值用于第一次调用 callback 的第一个参数。如果没有设置初始值，则将数组中的第一个元素作为初始值。空数组调用reduce时没有设置初始值将会报错。

PS: 与 reduceRight()和reduce() 的执行方向相反

reverse

reverse 方法颠倒数组中元素的位置，并返回该数组的引用。

shift与unshift

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

slice

slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

arr.slice();
//[0,end];
arr.slice(start);
//[start,end];
arr.slice(start,end);
//[start,end];

ログイン後にコピー

slice不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝：

如果该元素是个对象引用（不是实际的对象），slice会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

对于字符串、数字及布尔值来说不是String、Number或者Boolean，slice会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响

some

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

const isBiggerThan10 = (element, index, array) => {
 return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); 
// false
[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

ログイン後にコピー

toLocaleString与toString

toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1,337,2017/8/13 下午8:32:24,foo"
// 假定运行在中文（zh-CN）环境，北京时区
var a=1234
a.toString()
//"1234"
a.toLocaleString()
//"1,234"
//当数字是四位及以上时，toLocaleString()会让数字三位三位一分隔，像我们有时候数字也会三位一个分号
var sd=new Date()
sd
//Wed Feb 15 2017 11:21:31 GMT+0800 (CST)
sd.toLocaleString()
//"2017/2/15 上午11:21:31"
sd.toString()
//"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

ログイン後にコピー

splice

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)

ログイン後にコピー

start

指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从1计数）。

deleteCount 可选

整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

如果deleteCount被省略，则其相当于(arr.length - start)。

item1, item2, ... 可选

要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

以上がJavaScript の未知の配列メソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。