要約すると、プレイ現代のJavaScript配列を。
配列は、本明細書の知識に基づいているために呼ばれes5+、あなたが直接、この記事の例を実行、またはコーディング後バベルを実行するためにクロムや他の近代的なブラウザを使用することができます。
以下のように要約JS配列関連知識は次のコンストラクタ、オペレータ拡張、3つの静的メソッド、プロパティおよびパイルアレイインスタンスメソッド。誇大広告は、JSの配列は非常に滑りを再生することができ、上記の知識ポイントを把握することができません。length
コンストラクタ
ArrayJSオブジェクトはネイティブです、彼は3つの静的メソッドが含まれている、次のセクションでは言及されます。Arrayコンストラクタは、アレイをJS。Array以下の方法を使用してアレイとしてコンストラクタ：
let list = new Array(6,6,6);
コンストラクタので、私たちは、何をすることができます知っているArray形の異なるパラメータが配列で、より信頼性の高い初期化するための異なる形式の配列、奇妙な行動、一般的に、またはリテラルの使用を生成します。
let list = [6,6,6];
我々はまた、使用することができ
Array.of()、アレイを作成するには、この静的メソッドはコンストラクタよりも使いやすいように、以下のものが挙げられるだろう。
拡張演算子
拡張オペレータは精通している必要があり、フロントエンドをプレイし、ES6 +新しいもののです。三点のように見えた新しいオペレータは...、すべてのデータがイテレータ構造で使用することができ、人気の点はJS配列やオブジェクトは、拡張演算子を使用することができるであることを特徴とします。拡張オペレータアレイに拡張することができ、それは一般的に他の式と一緒に使用されます。拡張されたオペレータの配列が実際にアヒルのようであると、配列の運用の柔軟性も、新たな高みに上昇しました。
- シャローコピーと拡張オペレータの実装：
let arr1 = [1,5,6];
let arr2 = [...arr2]; //arr2独立存在
注：これは、浅いコピーである配列要素及びデータオブジェクトの他のタイプがある場合、唯一のエレメント・ポインタは、過去にコピーされ、又は実際には同じオブジェクト。
- より迅速に関数パラメータを渡します。
// 示例1
let params = ['小明',18,'大学生'];
printInfo(...params); // 等于 printInfo('小明',18,'大学生')
// 示例2
let params2 = [98,35,21,54,78,3,26];
Math.max(...params2); // 等于 Math.max(98,35,21,54,78,3,26)
- 配列のマージ：
let params = [55,78,69,88];
let params2 = [98,35,21,54,78,3,26];
let params3 = [...params,...params2]; // [55,78,69,88,98,35,21,54,78,3,26]
- 解体の割り当て：
let [leader,...apprentices] = ['王重阳','马钰','丘处机','谭处端','王处一','郝大通','刘处玄','孙不二'];
console.log(leader); // '王重阳'
console.log(apprentices); // ['马钰','丘处机','谭处端','王处一','郝大通','刘处玄','孙不二']
## 3つの静的メソッド
Arrayネイティブjsオブジェクトとして3つの静的メソッドが含まれています。これらのメソッドは静的な周波数が高くありませんが、使いやすさといくつかのシーンで使用します。
Array.isArray()
Array.isArray()変数は言うまでもない配列、シンプルで直感的な、であるかどうかを決定するために使用されます。
変数は、それが配列型であるか、元裁判官を覚えていますか？あなたは確かにそれを以下の文言を忘れないでしょう。
var arr = ['小明',18,3000];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
ES5このようなアプローチの到着は最も安全ですが、今私たちは書くことができます前に：
var arr = ['小明',18,3000];
console.log(Array.isArray(arr)); // true
Array.from()
Array.from()オブジェクトのクラスの配列は、実数配列に変換することができます。それでは、オブジェクトのクラスの配列と考えられていますか？オブジェクトはlengthプロパティが含まれている場合は一言で言えば、私たちは、クラスオブジェクトの配列としてそれらを表示します。アレイを持つクラスオブジェクトArray.from()変換後、この方法は、配列のインスタンスを使用してもよいです。ここでは、小さなランダムな感触のいくつかの例は以下のとおりです。
// 示例1 将类数组对象转换为数组
let userInfo = {
'0': '小明',
'1': '18',
'2': '3000',
length: 3
};
let userInfoArr = Array.from(userInfo); // ['小明',18,3000]
// 示例2 函数中的预置变量arguments也是个类数组对象
function foo() {
var args = Array.from(arguments);
}
// 示例3 dom节点也是一个类数组对象
Array.from(document.querySelectorAll('div'))
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
Array.from()アレイは、その後、地図操作を生成した後、特に、第2のパラメータのコールバック関数を受け取ります。
Array.from(obj,val=>val);
//等同于
Array.from(obj).map(val=>val);
Array.of()
Array.of()配列、その役割とArrayコンストラクタと同様、同じ行動パターンとリテラル文を生成するために使用することができ、この方法を使用してアレイを構築することをお勧めします。
var arr = Array.of('小明',18,3000);
//等同于
var arr = ['小明',18,3000];
lengthプロパティ
length非常に重要な属性配列のインスタンスである、彼は、配列の長さを表しています。また、ロングとショートのいくつかは削除の原則に従って、このように配列の長さを変え、正の整数の長さを割り当てることができます。
// 示例1
var arr = ['小明',18,3000];
console.log(arr.length); // 3
// 示例2
var arr2 = ['小明',18,3000];
arr2.length = 1;
// 示例3
var arr3 = ['小明',18,3000];
arr3.length = 5;
パイルアレイインスタンスメソッド
方法の例は、配列の配列の操作の本質であり、これらの方法は、変異として分類することができ、そして突然変異の非イテレータ三種類。突然変異クラスのメソッドは、突然変異クラスメソッドは、一般的に、現在の変数には影響を新しい戻り値を生成しませんのではなく、現在の配列変数を変更します。反復子方法は、アレイ動作を反復行われ、反復子の対応する値は、コールバックパラメータで返されます。
突然変異クラスメソッド
1. push()、pop()
push()配列要素の末尾に追加することができるpop()配列の末尾から要素を除去することで、push()この方法は、複数のパラメータに受信されてもよいです。これら2つの方法は、アレイ自体の値を変更し、最後の要素を返すであろう追加/削除します。
// 示例1 push方法
var arr = [1];
console.log(arr.push(2,3)); // 3
console.log(arr); // [1,2,3]
// 示例2 pop方法
var arr2 = [1,2,3];
console.log(arr2.pop()); // 3
console.log(arr2); // [1,2]
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
2. shift()、unshift()
unshift()配列の先頭に要素を追加することができ、shift()アレイは、ヘッドから要素を削除することであり、unshift()この方法は、複数のパラメータに受信されてもよいです。これら2つの方法は、アレイ自体の値を変更し、最後の要素を返すであろう追加/削除します。これらの2つの方法とpush()、pop()一貫性のある行動。
// 示例1 unshift方法
var arr = [1];
console.log(arr.unshift(2,3)); // 3
console.log(arr); // [2,3,1]
// 示例2 shift方法
var arr2 = [1,2,3];
console.log(arr2.shift()); // 1
console.log(arr2); // [2,3]
3。 reverse()
reverse()アレイ自体は変更されている間、アレイを逆転するために使用される方法は、この方法は、逆の配列を返します。
var arr = [1, 2, 3];
console.log(arr.reverse()); // [3,2,1]
console.log(arr); // [3,2,1]
4。 splice()
splice()指定された位置に配列要素を削除または挿入する方法。1から数式を感じ以上に及ぶパラメータ：
arr.splice(以0为起点的初始位置<如果是负数则从尾部开始计数>,需要删除元素的数量<可选,不填写则表示删到数组尾部>,插入元素<可选>,插入元素<可选>...);
splice()この方法は、配列を変更し、削除する要素の配列を返します。
// 示例1 从某位置删除元素
var arr = [1, 2, 3];
console.log(arr.splice(0,1)); // [1]
console.log(arr); // [2,3]
// 示例2 从某位置删到底
var arr2 = [1, 2, 3];
console.log(arr2.splice(1)); // [2,3]
console.log(arr2); // [1]
// 示例3 从倒数某位置删到底
var arr3 = [1, 2, 3];
console.log(arr3.splice(-1)); // [3]
console.log(arr3); // [1,2]
// 示例4 从某位置插入元素
var arr4 = [1, 2, 3];
console.log(arr4.splice(3,0,4,5)); // []
console.log(arr4); // [1,2,3,4,5]
// 示例5 从某位置开始替换并增加元素
var arr5 = [1, 2, 3];
console.log(arr5.splice(2,1,4,5)); // [3]
console.log(arr5); // [1,2,4,5]
上記の例でカバーする
splice()すべての利用を、ブラウザでそれを実行し、結果を確認することをお勧めします。
5。 sort()
sort()この方法は、配列の要素をソートすることができsort()、この種のは、文字列にビット単位の比較のサイズを要素を強制する、デフォルトの照合辞書が発注されます。例えば、このように、図15は、121の前にソートされます。sort()あなたはイテレータの関数として受信されるように。イテレータ関数前と二つの要素の順序を押した後、前者は後者の、またはその逆の背後に、0よりも大きい場合、この関数は値を返します。
// 示例1 普通情况
var arr = [3,2,1];
console.log(arr.sort()); // [1,2,3]
console.log(arr); // [1,2,3]
// 示例2 特殊情况
var arr2 = [10,3,2,1];
console.log(arr2.sort()); // [1,10,2,3]
console.log(arr2); // [1,10,2,3]
// 示例3 迭代器
var arr3 = [10,3,2,1];
console.log(arr3.sort(function (prev, next) {
return prev-next;
})); // [1,2,3,10]
console.log(arr3); // [1,2,3,10]
// 示例4 对象元素排序
var arr4 = [{name:'小赵',age:10},{name:'小钱',age:3},{name:'小孙',age:2},{name:'小李',age:1}];
console.log(arr4.sort(function (prev, next) {
return prev.age-next.age;
})); // [{name:'小李',age:1},{name:'小孙',age:2},{name:'小钱',age:3},{name:'小赵',age:10}]
console.log(arr4); // [{name:'小李',age:1},{name:'小孙',age:2},{name:'小钱',age:3},{name:'小赵',age:10}]
6。 copyWithin()
copyWithin()この方法は、現在の位置の他の内部構成要素に配列を複製することができます。式を使用して見て：
arr.copyWithin(以0为起点的被替换位置,复制元素的起点<可选,默认值为0>,复制元素的终点<可选,默认值为数组长度>);
いくつかの参照コード例：
// 示例1 普通复制
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 4);
console.log(arr); // [5, 2, 3, 4, 5]
// 示例2 倒序复制
var arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(0, -2, -1);
console.log(arr2); // [4, 2, 3, 4, 5]
7。 fill()
fill()この方法は、アレイ全体を埋めるために値を指定することができます。コードの場合：
// 示例1 普通填充
var arr = [1, 2, 3, 4, 5];
arr.fill(6);
console.log(arr); // [6, 6, 6, 6, 6]
// 示例2 指定位置填充
var arr2 = [1, 2, 3, 4, 5];
arr2.fill(6, 2, 3);
console.log(arr2); // [1, 2, 6, 4, 5]
非突然変異クラスメソッド
1。 valueOf()
valueOf()この方法は、配列自体を返し、注意がコピーされていません！以下のコードへの参照：
var arr = [1,2];
var arr2 = arr.valueOf();
arr[0]=5;
console.log(arr2) // [5,2]
この方法は、アレイ、及び無使用です。
2。 toString()
toString()配列の方法は、要素間のカンマで区切られ、平坦化、及び現在の文字列の配列を返すであろう。
var arr = [1, 2, ['a', function foo() { alert(123123) }, 5, 7]];
console.log(arr.toString()); // 1,2,a,function foo() { alert(123123) },5,7
3。 join()
join()この方法は、区切り文字が指定されていない場合、デフォルトは、カンマで区切って、配列に文字列デリミタ特定することができます。
// 示例1 不指定分隔符
var arr = [1, 2, 3, 4, 5];
console.log(arr.join()); // 1,2,3,4,5
// 示例2 指定分隔符
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.join('|')); // 1|2|3|4|5
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
4。 concat()
concat()この方法は主に浅いコピーマージされた配列を、マージするために使用されます。
// 示例1 数组和数组合并
var arr = [1, 2, 3, 4, 5];
console.log(arr.concat([6,7,8,9])); // 1,2,3,4,5,6,7,8,9
// 示例2 数组和其他元素合并
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.concat('a','b',7)); // 1,2,3,4,5,a,b,7
5。 slice()
slice()この方法は、配列、不変配列自体を傍受するために使用することができます。次のようにどちらの式は次のとおりです。
arr.slice(截取的开始位置<默认为0，可以为负数>, 截取的终止位置<可选，默认是数组长度>);
slice()共通コード：
// 示例1 普通截取
var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1,3)); // [2,3]
// 示例2 倒序截取
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.slice(-3,5)); // [3,4,5]
// 示例3 1个入参的普通截取
var arr3 = [1, 2, 3, 4, 5];
console.log(arr3.slice(1)); // [2, 3, 4, 5]
// 示例4 开始位置大于结束位置
var arr4 = [1, 2, 3, 4, 5];
console.log(arr4.slice(2,1)); // []
6. indexOf()、lastIndexOf()
indexOf()リターン要素の最初の発生の位置は、lastIndexOf()指定された要素の最後に現れる位置を返します。何も検索がない場合は、-1が返されます。
// 示例1 普通用法
var arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(5)); // 4
// 示例2 指定开始搜索的位置
var arr2 = [2, 2, 3, 4, 5];
console.log(arr2.indexOf(2,1)); // 1
// 示例3 倒序搜索
var arr3 = [1, 4, 3, 4, 5];
console.log(arr3.lastIndexOf(4)); // 3
// 示例4 NaN永远返回-1
var arr4 = [NaN, NaN, NaN, NaN, NaN];
console.log(arr4.indexOf(NaN)); // -1
7. entries()、keys()、values()
entries()戻り値現在の反復は、配列構造を完成されkeys()、現在の配列のインデックス、返すvalues()現在の配列の戻り値を。
// 示例1 entries()用法
var arr = [1, 2, 3];
var iterator=arr.entries();
console.log(iterator); // Iterator
console.log(iterator.next().value); // [0,1]
console.log(iterator.next().value); // [1,2]
console.log(iterator.next().value); // [2,3]
// 示例2 keys()用法
var arr2 = [1, 2, 3];
var iterator2=arr2.keys();
console.log(iterator2); // Iterator
console.log(iterator2.next().value); // 0
console.log(iterator2.next().value); // 1
console.log(iterator2.next().value); // 2
// 示例3 values()用法
var arr3 = [1, 2, 3];
var iterator3=arr3.values();
console.log(iterator3); // Iterator
console.log(iterator3.next().value); // 1
console.log(iterator3.next().value); // 2
console.log(iterator3.next().value); // 3
8。 includes()
includes()存在する場合、アレイ内の所与の値か否かを検索する方法は、そうでない場合はfalse、trueを返します。あなたは、2番目のパラメータが検索を開始する場所を指定渡すことができます。
// 示例1 常规用法
var arr = [1, 2, 3];
console.log(arr.includes(2)); // true
// 示例2 指定搜索位置
var arr2 = [1, 2, 3];
console.log(arr2.includes(2,2)); // false
// 示例3 可以检索出NaN
var arr3 = [1, NaN, 3];
console.log(arr3.includes(NaN)); // true
9。 flat()
flat()この方法は、平坦化されるアレイの層の数を示すパラメータを受信する扁平配列、デフォルトは1であることができます。
// 示例1 常规用法
var arr = [1, 2, [3, 4]];
console.log(arr.flat()); // [1,2,3,4]
// 示例2 拉平2层
var arr2 = [1, 2, [3, 4, [5, 6,[7,8]]]];
console.log(arr2.flat(2)); // [1,2,3,4,5,6,[7,8]]
// 示例3 无论多少层都拉平
var arr3 = [1, 2, [3, 4, [5, 6,[7,8]]]];
console.log(arr3.flat(Infinity)); // [1,2,3,4,5,6,7,8]
iteratorメソッド
1。 map()
map()あなたは、配列の各要素を操作し、そして最終的に新しい配列を返すことができます。
let arr = [1, 2, 3, 4];
console.log(arr.map(item=>item*2)); // [2,4,6,8]
2。 forEach()
forEach()配列の各要素の動作はしないが、戻り値もよいです。
let tmp = [];
let arr = [1, 2, 3, 4];
arr.forEach(item=>tmp.push(item*2))
console.log(tmp); // [2,4,6,8]
3。 filter()
filter()各操作は、アレイ素子であってもよいし、各演算結果が、最終的なリターンに挿入された配列要素の事実です。
let arr = [1, 2, 3, 4];
console.log(arr.filter(item=>item >2)); // [3,4]
4。 some()
some()条件に適合要素の現在のアレイは、一致するものがないかどうかを決定するために用い、次いでそれ以外の場合はtrue、falseを返します。
// 示例1 没有匹配
let arr = [1, 2, 3, 4];
console.log(arr.some(item=>item >5)); // false
// 示例2 匹配
let arr2 = [1, 2, 3, 4];
console.log(arr2.some(item=>item===4)); // true
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
5。 every()
every()すべての要素を含む現在の配列が判定条件に沿ったものであるかどうかを判断するために使用し、すべての要素は、そうでない場合はfalseをtrueを返します一致しています。
// 示例1 全匹配
let arr = [1, 2, 3, 4];
console.log(arr.every(item=>item < 5)); // true
// 示例2 匹配
let arr2 = [1, 2, 3, 4];
console.log(arr2.every(item=>item < 2)); // false
6. reduce()、reduceRight()
reduce()方法は、現在のアレイ上に左から右の機能動作に順次行われ、操作の累積値を返しています。reduceRight()それは、右から左に実行されます。
var arr = [1,2,3,4,5];
console.log(arr.reduce(function(prev,cur){
return prev+cur;
})) // 15
7。 find()
find()この方法は、未定義値なし整合条件は、返されない場合、最初に一致した要素、要素の戻り値を見つけるために使用されます。
let arr = [1,2,3,4,5];
console.log(arr.find(item=>item>3)); // 4
8。 findIndex()
findIndex()いかなる値整合条件は、それが返されない場合は最初に一致する要素を検索するために使用される方法は、要素は、シリアル番号を-1を返します。
let arr = [1,2,3,4,5];
console.log(arr.findIndex(item=>item>3)); // 3
9。 flatMap()
flatMap()最初の配列行う原方法map()動作は、次いで、アレイをを行ったflat()レベリング動作、唯一のフレア。
let arr = [1,2,3,4,5];
console.log(arr.flatMap(item=>[item,item*2])); // [1,2,2,4,3,6,4,8,5,10]
概要
これらは、最も近代的な知識習得のJSの配列を使用し、アレイ、フロントエンドのビジネスレベルすることができ、確かに次のレベルです。：上では問題がここに残って、配列内の重複する値を抽出するために、知識の上の配列を、そして新しい配列を形成します。
