再読「JavaScriptのデータ構造とアルゴリズムを学ぶ - 第三版は、」 - 第3章配列（B）

詩を考えます

守法朝朝忧闷，强梁夜夜欢歌；
损人利己骑马骡，正值公平挨饿；
修桥补路瞎眼，杀人放火儿多；
我到西天问我佛，佛说：我也没辙！

序文

新機能のES6配列： - 「学習JavaScriptのデータ構造とアルゴリズム」読む第3章アレイの、このセクションでは、小さなあなたのためのパートナーの配列の関連知識を共有していきます。

新機能の、ES6配列

新しいメソッドのES5およびES6配列

方法	説明
@@イテレータ	、キーと値のペアの配列を含むイテレータオブジェクトを返すキー配列要素の同期を呼び出すことによって得ることができます
copyWithin	指定された開始の同じ位置に配列の配列番号をコピーします。
エントリー	@@イテレータはすべてのキーと値のペアの配列を返します。
含ま	trueを返し、配列の要素がある場合は、そうでない場合はfalse
見つけます	検索は、その要素を返した場合、所定の条件に応じてアレイコールバック関数からの要素を見つけます
findIndex	それが配列の要素のインデックスが返された検出された場合、所定の条件に応じてアレイコールバック関数からの要素を見つけます
埋めます	静的な値を持つ配列を埋めます
から	既存のアレイによると、新しい配列を作成します
キー	@@反復子は、すべてのインデックスを含む配列を返します
の	渡されたパラメータに基づいて、新しい配列を作成します。
値	すべての価値@@イテレータの配列を返します

以下のために反復ループを増加させる上記新方式に加え...アレイインスタンスイテレータから得た配列とオブジェクトの

の

反復配列

let roles = ['宋江', '吴用', '卢俊义']
for (let v of roles) {
  console.log(v)
}

@@イテレータ

あなたはSymbol.iteratorがアクセスする必要があります

let iterator = roles[Symbol.iterator]()
// .next()读取一次，依次迭代即可; 当迭代结束时，iterator.next().value返回undefined
console.log(iterator.next().value)

// 迭代
for (let v of iterator) {
    console.log(v)
}

エントリー

戻る@@反復子は、キーと値のペアが含まれています

let rolesEntries = roles.entries()
console.log(rolesEntries.next().value) // [ 0, '宋江' ]

for (v of rolesEntries) {
    console.log(v)
}

キー

@@反復子は、インデックスを含む配列を返します

let rolesKeys = roles.keys()
console.log(rolesKeys)

for (v of rolesKeys) {
    console.log(v)
}

値

これは、値を含む配列を返し@@イテレータ

let rolesValues = roles.values()
console.log(rolesValues)

for (v of rolesValues) {
    console.log(v)
}

Array.from

既存のアレイによると、新しい配列を作成します

let newRoles = Array.from(roles)
console.log(newRoles) // ['宋江', '吴用', '卢俊义']

Array.of

渡されたパラメータの新しい配列を作成します。

let roles = Array.of('宋江', '李顺', '阮小七')
console.log(roles) // [ '宋江', '李顺', '阮小七' ]

Array.fill

充填静的な値を使用します

let numbers = new Array(6)
numbers = Array.fill(1)
console.log(numbers) // [ 1, 1, 1, 1, 1, 1 ]

copyWithin

配列内の要素の一連の開始位置指定された同じアレイにコピーされ

let numbers = [1, 2, 3, 4, 5, 6]
// 将索引3到索引5位置之间的数据，复制到索引1位置
numbers.copyWithin(1, 3, 5)
console.log(numbers) // [ 1, 4, 5, 4, 5, 6 ]

配列のソート

rerverse

リバース配列要素

let numbers = [1, 2, 3]
numbers.reverse()
console.log(numbers) // [ 3, 2, 1 ]

ソート

アルファベット順に配列、パラメータとして指定された関数をサポート着信ソートアルゴリズム

let arr = ['a', 'b', 'd', 'c', 'f', 'e']
arr.sort()
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e', 'f' ]

そこで質問です！次のコードはconsole.log（）出力とは何ですか？

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort()
console.log(numbers) // ??? 思考10秒钟.....

答え：[1、10、11、12、13、2、3]は手動疑い.GIF

分析：ソート時の配列要素の並べ替え（）メソッドので、互いに比較デフォルトの文字列要素。

どのように我々はそれを望む結果を得るために、現実的な問題を解決するには？

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort((a, b) => a - b)
console.log(numbers) // [ 1, 2, 3, 10, 11, 12, 13 ]

思考アップグレード：文字列の比較-敏感比較

let users = ['Ana', 'ana', 'John', 'john']
users.sort()
console.log(users) // ???

答え：[ 'アナ'、 'ジョン'、 'ANA'、 'ジョン']マニュアル疑い.GIF

分析：JS比較する文字列がに対応する文字のASCII値に基づいて比較します。、Jは、Jは、ASCIIと同等です：65,74,97,106

この問題を解決します

let users = ['Ana', 'ana', 'John', 'john']
users.sort((a, b) => {
  if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
    return 1
  }
  if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
    return -1
  }
  return 0
})
console.log(users) // [ 'Ana', 'ana', 'John', 'john' ]

あなたは小文字が最初にソート達成したい場合は、この方法はlocalCompareの使用できる
users.sortを（（a、b）は= > a.localeCompare（b）参照）

実際のビジネス・シナリオ：データの並べ替えのシリーズ：など、年齢、レベル、など

let users = [
  {
    name: '王二狗',
      age: 20
  },
  {
    name: '张三炮',
    age: 30
  },
  {
    name: '李四',
    age: 15
  }
]
users.sort((a, b) => a.age > b.age)
console.log(users) // [ { name: '李四', age: 15 }, { name: '王二狗', age: 20 }, { name: '张三炮', age: 30 } ]

配列検索

ES5は、提供のindexOf（）とのlastIndexOf（）メソッドは、私たちのための要素を見つけ、そのような無能の要素にクエリ配列オブジェクトのような2つの方法のみクエリ文字列データを、。

ビジネスシナリオ：カートは、製品の動作を追加します。

私たちは、ショッピングカートに製品を追加すると、項目がすでにショッピングカートに存在するかどうかを検討します。

そうでない場合は、新しいカートの操作、すでに、購入数量+ 1が存在します。

オリジナルのアプローチ：反復カートアレイmyCart、およびID idがはい、現在の要素のインデックスを取得する場合は、操作を実行し、カートtmpGoodsを比較した既存の商品を決定するために追加されます

新しい変更がそれをES6抱擁！ - findIndex

// 已有购物车商品信息
let myCart = [
  {
    id: 1001,
    name: 'xxx-范冰冰版',
    num: 1
  },
  {
    id: 1002,
    name: 'xxx-志玲姐姐版',
    num: 2
  },
  {
    id: 1003,
    name: 'xxx-小岳岳版',
    num: 1
  }
]

// 待加入购物车的商品
let tmpGoods = {
  id: 1003,
  name: 'xxx-小岳岳版',
  num: 1
}

// 检测该商品是否已经存在于购物车 
let index = myCart.findIndex(item => item.id === tmpGoods.id)
console.log(index)
if (index !== -1) {
  myCart[index].num += tmpGoods.num
} else {
  myCart.push(tmpGoods)
}
console.log(myCart)

最初に一致した要素のインデックス位置を返していない、または-1何がある場合、指定された条件の関数として受信フィルタをサポートfindIndex

条件として指定された着信機能をサポートして見つけ、それは最初に一致した要素の値を返します

ES7 - 含み

この方法は、trueを返すがある場合、クエリ条件のアレイが存在するか否かに基づいて整合素子を含み、そうでない場合はfalse

let roles = ['诸葛亮', '荆轲', '虞姬', '亚瑟']
console.log(roles.includes('荆轲')) // true
console.log(roles.includes('哪吒')) // false

文字列の出力配列

toString（）とjoin（）メソッド

文字列として配列出力のすべての要素

let numbers = [1, 2, 3, 4]
console.log(numbers.toString()) // 1,2,3,4

加わります

指定された文字スプライシングされたデフォルトを使用して配列の要素、

let numbers = [1, 2, 3, 4]
console.log(numbers.join('-')) // 1-2-3-4

追伸

そして、胡兄弟、今日は小さなパートナーが覚えているように、コンテンツを共有すること收藏、および转发右下のボタンをクリックして在看、それをお勧めするよりジュニアパートナーヨ、メッセージ交換の多くに歓迎...

胡弟の何かが、スキル、胡弟の気持ちを言うために！Jingdongはオープンプラットフォームのチーフフロントエンド包囲ライオン。あなたと話ビッグフロントエンド、フロントエンド共有システムアーキテクチャフレームワークの実装原則、最新かつ最も効率的な技術の練習！

押しスキャンコード懸念し、よりハンサム、より美しくヨ！いいえ世間の注目胡兄弟何かが胡兄ヨとの深い交流を続けることができ、言わないように！

胡兄弟何かを言うために