1.先端ESの新しい特性について詳しくノートを解く

7836 ワード

本文はネットの大先端の高給料の訓練大隊の第1号の筆記にフックをかけます.
let const var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
ps:mozilaの説明は本当に詳しいです.
varはコードの最前文にアップグレードしますが、letは与えられません.
var会大域変数letはブロックスコープ内にのみなります.
constは定数のletであり、声明の時に値を付けなければならない.
配列解法
配列解はコードを簡略化することができます.
オブジェクトの解凍
オブジェクトの構造を変更することができます:another Name変数名を変更します.
テンプレート文字列
テンプレートの文字列は文字列と変数をつなぎ合わせやすいです.
ラベル付きテンプレート文字列は追加操作が可能ですが、最後のリターンのつなぎ合わせはちょっと面倒です.
文字列拡張方法
文字列の拡張方法はincludes starts With endsWithが使いやすいですが、このいくつかはstring undefinedの状況を処理できます.
パラメータのデフォルト値
パラメータのデフォルト値function(a=1){}が空入力を処理しやすい場合
パラメータを抽出
残りのパラメータ…restは残りのパラメータを簡単に抽出したり、後続のモジュールに簡単に伝達したりします.
展開配列
知識call apply bindの違いを追加します.
func.call apply bind callとappyの最初の転送はcontextで、二つ目は少し違っています.callは順番で、appyはarray bindです.Fnctionをすぐに実行しないようにします.実行する時は最初のパスでcontextを使います.
矢印関数
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
略字関数、x⇒x+1
Before arrow functions,evrynew function defined its own this value based on how the function was caled
An arrow function dost have its own this.The this value of the enclosing lexical scope is used;arrow functions follow the normal variable lookup rules.So while searching for this which is not present in the current scope,an arrow function ends up finding the this from its enclosing scope.
私の理解は()⇒{}相当于(function().bind(this)、矢印関数のthisは定義の時に決定します.普通のfunctionのthisは実行時に決定します.setTimeoutはwindow.setTimeout.bind(window,function(){1000)です.このような場合はwindow window dowです.
二つの種類のscopeとglobalとlocalがあります.localには二つのfunction scopeとblock scopeがあります.
function scopeは名前の通りblock scopeです.これの中のconst letは伝わりません.
例を引く
for (var i=1; i<=5; i++) {
  setTimeout(function(){
    console.log("i: " + i);
  },i*1000);
}
もらったのは6 6 6 6 6です.
解決方法は
IIIF:Immedia tely-invoked Function Expression
変数を隔離して、新しいiを生成することができます.
for (var i=1; i<=5; i++) {
  (function(i){
    setTimeout(function(){
      console.log("i: " + i);
    }, i*1000);
  })(i);
} // 1 2 3 4 5
または
letを使用すると、各サイクルに新しいiがあります.
for (let i=1; i<=5; i++) {
  setTimeout(function(){
    console.log("i: " + i);
  }, i*1000);
}
// 1 2 3 4 5
rest parametersとdefault paramentsをサポートします.
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }
Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
矢印関数はcall applyがthisに入ることを許可しません.無視されます.
argmentsがありません.使いたいなら残りのパラメータを使います.
var f=(...args)=>args[0]+n
対象文字数が増加しました.
いくつかの定義keyの略記
const bar=‘345’
const obj={bar,/方法は省略できます:function method 1(){},[bar]:123]
Object.assign()
const result=Object.assign(targt、source 1、source 2)
オブジェクトの浅いコピーに使用できます.
Object.is()の高級版の==を解決して、いくつか==を解決してすべて判断できない情況.
  // +0 === -0               // => true
  // NaN === NaN             // => false
  // Object.is(+0, -0)       // => false
  // Object.is(NaN, NaN)     // => true
Proxyは対象に監視を追加します.
get ProttotypeOf:Object.get ProttypeOf()
set ProttotypeOf:Object.set ProttoTypeOf()
isExtensioble:Object.isExtensioble()
prevent Extensions:Object.prevent Extens()
getOwn PropertyDescriptor:Object Own PropertyDescriptor()
defineProperty:Object.defineProperty()
has:in operator
get:getting property values
set:setting property values
deleteProperty:delete operator
ownKeys:Object.getOwn PropertyName and Object.getOwn PropertySymbools
アプリ:function call
construct:new operator
Reflect
Reflect.apply/calls a target function with argments as specified by the argments_parameter.
Reflect.co nstruct/The new operator as a function.Equivalent to caling new target(...argments List).
Reflect.defineProperty(target,propertyKey,atributes)//Simiar to Object.defineProperty().Returns a Boolean that is true if the property was success defined.
Reflect.deleteProperty/The delete operator as a function.Equivalent to careling delete target[propertyKey]
Reflect.get(target,propertyKey)//Receiver the value of the property.Works like getting a property from abject.as a function.
Reflect.getOwnPropertyDescriptr//Simillar to Object.get OwnPropertyDescripter().Returns a property descriptor of the given property exists on the jobt.undefined witter.
Reflect.get ProttypeOf/Same as Object.get ProttypeOf()
Reflect.has/Returns a Boolean indicating wher the targhas the property.Either as own or inheited.Works like the in operator asa function.
Reflect.is Extenseble//Same as Object.is Extenseble().Returns a Boolean that is true if the target is extenssible.
extensebleとはcan new properties be added to an objectのことです.
Make object not extenseble
Object.prevent Extensions()、Object.seal()、or Object.freeze()
freezeはまったく修正できません.sealはpropertyを追加と削除できません.
Reflect.ownKeys/Returns an array of the target object's own(not inheited)property keys.
Reflect.prevent Extensions/Simillar to Object.preventExtens().Returns a Boolean that is true if the up date was success ful.
Reflect.set/A function that assigns values to properties.Returns a Boolean that is true if the up date was succeful.
Reflect.set ProttypeOf/A function that sets the prototype of an object.Returns a Boolean that is true if the up date was success ful.
promiseは、従来の非同期プログラムにおけるコールバック関数の入れ子の深すぎる問題を解決します.
セット
add clear delete entries forEach has keys values [@@iterator]()

const mySet = new Set();
const setIter = mySet[Symbol.iterator]()
console.log(setIter.next().value)
Set to Aray
const arr=[]
Aray.from(new Set(arr)
[…new Set(arr)]
Symbol
Symbol二つのSymbolは永遠に等しくありません.Symbol.for(true)===Symbol.for(「true」)またはSymbol.for(「foo」)==Symbol.for(「foo」)
const smbol=Symbol(‘foo’)
データ構造を巡回
for in、Object.keys()、JSON.stingify()は全部smbol keyを取れません.Object.getOwn PropertySymborsだけがもらえます.
forはarrayに使います.for inはobjectに使います.将来はfor ofを使います.
注意したいのは、for ofがMapに使う時、毎回もらうのは「key、value」です.
普通のobjはfor ofを使えません.
//    
// for (const [key, value] of m) {
//   console.log(key, value)
// }
Iterableのデータタイプだけがfor ofです.
Iterableとは、[Symbol.iterator]を実現したデータタイプのことです.
Iteratorはreturn nextのそのfunctionです.
const obj = {
  store: ['foo', 'bar', 'baz'],

  [Symbol.iterator]: function () {
    let index = 0

    return {
      next: ()=>{
        const result = {
          value: this.store[index],
          done: index >= this.store.length
        }
        index++
        return result
      }
    }
  }
}
ローズマリーインターフェースを実現するという意味は、インターフェースを統一することです.外部は内部データ構造を考慮する必要がありません.
ジェネレータGenerator
Generator yieldは惰性が一回引き出すので、returnは直接終わります.
ES 2016新元素
ES 2016が追加されました
  • 配列のincludes
  • arr.includes(‘foo’)
  • 指数演算子
  • 2*10==Math.pow(2,10)
    ES 2017新元素
  • Object.values(obj)
  • Object.entries(obj)は、これで一回回せばfor ofです.
    for (const [key, value] of Object.entries(obj)) {
       console.log(key, value)
     }
    
  • Object.getOwn PropertyDescriptorsは完全な説明情報
  • です.
    // const p1 = {
    //   firstName: 'Lei',
    //   lastName: 'Wang',
    //   get fullName () {
    //     return this.firstName + ' ' + this.lastName
    //   }
    // }
    
    // // console.log(p1.fullName)
    
    // // const p2 = Object.assign({}, p1)
    
    この時p 2里fullName:'Wang Lei'はkey valueで、getter functionではありません.
  • stingのpadStart()とpadEnd()
  • const name=‘123’
    name.padStart(10、「-」)
    name.padEnd(5,0)
  • 関数パラメータの最後にコンマを付けることができます.
    本文はネットの大先端の高給料の訓練大隊の第1号の筆記にフックをかけます.