Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Playground for ECMAScript 2015 (ES6)

NotificationsYou must be signed in to change notification settings

ferreiratiago/es6

Repository files navigation

Destructuring Assignment

Destructuring assignment allow us to assign properties of arrays or objects to variables.

Examples

Objects

varobj={foo:'Mr.Foo',bar:'Mr.Bar'}var{ foo}=obj// var foo = obj.foovar{foo:bar}=obj// var bar = obj.foovar{ foo='default'}={}// var foo = ({}).foo || 'default'var{ foo, bar}=obj// var foo = obj.foo; var bar = obj.barvar{ foo}={}// var foo = undefinedvar{foo:{bar:deep}}={foo:{bar:'bar'}}// deep = 'bar'var{foo:{ bar}}={}// ERROR - {}.foo.bar does not exits

Arrays

var[a,b]=[6,3]// var a = [6,3][0]; var b = [6,3][1]var[a,,c]=[6,9,3]// var a = [6,9,3][0]; var c = [6,9,3][2]var[a,b]=[b,a]// var a = [b,a][0]; var b = [b,a][1]

Functions

// Parameter with default value.varfoo=function(bar=2){console.log(bar)}foo()// 2foo(3)// 3// Parameter with default value object.varfoo=function(bar={a:1,b:2}){console.log(bar)}foo()// {a: 1, b: 2}foo({a:3})// {a: 3}// Parameter object with default values.varfoo=function({a=1, b=2}){console.log(a)console.log(b)}foo()// ERROR - No default when object is not provided.foo({})// 1, 2foo({a:3})// 3, 2// Parameter object (with default values) and default value.varfoo=function({a=1, b=2}={}){console.log(a)console.log(b)}foo()// 1, 2foo({})// 1, 2foo({a:3})// 3, 2

Further Reading

Arrow Functions

Arrow function is a shorter syntax for the commonfunction expression.The cool thing about it is that it doesn't bind its ownthis,arguments,super ornew.target.

Examples

varincrement=(value)=>{returnvalue+1}increment(3)// 4

Block Scope

varincrement=(value)=>value+1// Remove the {} from the function body.increment(3)// 4varincrement=value=>value+1// Removed the () from the value parameter.increment(3)// 4

Object Returning

// The return statement needs to be wrapped on '()'.varfoo=()=>({value:3})foo()// { value : 3 }

this

// "this" is bound to the scope.this.bar=3// ES5functionfoo(){returnbar}foo()// Error - bar undefined// ES6varfoo=()=>this.barfoo()// 3

Further Reading

Block Scope

Blocks are the way to create the commonImmediately Invoked Function Expression (IIFE).

Examples

// ES5// In order to have a block scope, we would use// IIFEs (Immediately Invoked Function Expression).(functionIIFE(){// Begin block scopevarfoo='Mr.Foo'// End block scope})()foo// Reference Error// ES6// Use {} + let or const for block scope{// Begin block scopevarzed='Mr.Zed'letfoo='Mr.Foo'constbar='Mr.Bar'// End block scope}zed// Mr.Zedfoo// Reference Errorbar// Reference Error

Further Reading

Let && Const

Let andConst are alternative ways tovar.Although bothlet andconst are block-scoped (instead of function scoped) a variable declared withlet can be reassigned as forconst is not possible to reassign.

Examples

Let

letfoo='Mr.Foo'// Let variables://  - are block-scoping (i.e. they live in their defined block.)//  - can be reassigned.functionfunc(flag){if(flag){// new block scopeletfoo='NewFoo'returnfoo// end block scope}returnfoo}func(true)// NewFoofunc(false)// Mr.Foo

Const

constfoo='Mr.Foo'// Const variables://  - are block-scoping.//  - can't be reassigned (assignment is immutable.)foo='NewFoo'// ERROR - No new assignment allowed.// An interesting exampleconstbar={a :3}bar={b :7}// error - No new assignment allowed.bar.a=7// OK - We are updating a property, not the assignment.

Further Reading

Template Literals

Template literals allows us to easily build string values with expressions on it.

Examples

`ES6 Template String`// String wrapped into ""`Double "quote"`// Double "quote"// String wrapped into ''`Single 'quote'`// Single 'quote'// Multiple line`MultipleLine`

Interpolation

`${1+2}`// 3constfoo='MrFoo'`Hello${foo}`// Hello MrFooconstbar=()=>'MrBar'`Hello${bar()}`// Hello MrBar

Build Template

constmr=(template, ...expressions)=>{// template is an Array broke at the interpolations// e.g. for `foo {$a} bar {$b}`// template = ['Dear ', ' and ', '']returntemplate.reduce((result,current,index)=>{return`${result}Mr.${expressions[index-1]}${current}`})}constfoo='Foo'constbar='Bar'mr`Dear${foo} and${bar}`// Dear Mr.Foo and Mr.Bar

Further Reading

Object Literals

Object literals are a simple lists of key properties with a pair value (i.e. key:value).

Examples

// Property value shorthandconstfoo='Mr.Foo'{// Because the property 'foo' has the// same name as the const 'foo'// no need to write { foo: foo }foo}// Computed properties{// [ value to compute to property ] : value[1+3] :'Number 4'}// Method definition{bar(){// Code for function bar}}

Further Reading

Spread Operator

Thespread operator allow us to expanded an expression into multiple variables (i.e. destructuring assignment) or multiples variables (i.e. array literals) or multiple arguments (i.e. function calls.)

Examples

Destructuring Assignment

[foo,, ...rest]=[1,2,3,4,5]console.log(foo)// 1console.log(rest)// [3,4,5]functionfoo(...parameters){// parameters is an Array// with all parameters.console.log(parameters)}foo(1,2,3)// [1,2,3]foo([1,2,3],4)// [[1,2,3],4]// We can name some parametersfunctionfoo(bar, ...parameters){// bar is the first parameter.// parameters is an Array containing// the remaining parameters.console.log(bar,parameters)}foo()// undefined, []foo(1)// 1, []foo(1,2,3)// 1, [2,3]

Array Literals

[1, ...[2,3],4]// [1,2,3,4]

Function Call

functionfoo(a,b,c){console.log(a,b,c)}foo(...[1,2,3])// 1, 2, 3

Further Reading

Classes

Javascript is a functional programming language.However, the concept ofClasses in ES6 is just syntax sugar on top of prototypal inheritance.The goal is to make the language more obvious to programmers coming from other paradigms (e.g. OO).

Examples

classCounter{constructor(){this.count=0}increment(){this.count++}decrement(){this.count--}staticisNil(counter){returncounter.count===0}}letcounter=newCounter()counter.increment()// 1counter.increment()// 2counter.decrement()// 1Counter.isNil(counter)// false

Extends

// We now can use the keyword "extends" to easily "inherit" from other "classes".// Not forgetting that this is only syntax sugar to ES5 prototype terminology.classTemperatureextendsCounter{constructor(){// The super keyword identifies our base class "Counter".super()}decrement(){if(this.count>0){super.decrement()}}}lettermo=newTemperature()termo.decrement()// 0 // no decrement because "count" was already 0termo.increment()// 1termo.decrement()// 0

Further Reading

Iterators

Iteration is the new mechanism offer by ES6 to traversing data.

Aniterable is a data structure responsable to enable data access to the public, and it does that by implementing a method whose key isSymbol.iterator (which is a factory for iterators.)

Examples

constiterable={[Symbol.iterator](){}}// An iterator is a pointer for traversing the elements of a data structure.// Under the wood JS has a method called @@iterator,// By using the well-known Symbol.iterator we can assign an iterator to this method.// @@iterator is called once, whenever an object needs to be iterated (e.g. for..of loop)// @@iterator will be asked for an iterator.// The returned iterator is then used to obtain the values of the object.// The iterator protocol has to define how to get values out of an object.// We need to define an @@iterator that satisfies that.// The iterator protocol indicates that we must have an object with a 'next' method.// The 'next' method has no arguments and returns an object with two properties:// * done - true if the sequence has end, false otherwise.// * value - the current item in the sequenceconstiterable={[Symbol.iterator](){constitems=['f','o','o']constiterator={next(){return{done:items.length===0,value:items.shift()}}}returniterator}}for(letitemofiterable){console.log(item)// f// o// o}

Further Reading

Generators

Generators are created by declaring a generator function, which returns a generator object (e.g. g) that can then be iterated usingArray.from(g),[...g], orfor value of g.

Examples

// We use the symbol * to mark a function as a generator and 'yield' to emit an element sequence.function*generator(){yield'f'yield'o'yield'o'}[...generator()]// ['f', 'o', 'o']// Generator object follow both iterable and iterator protocol.varg=generator()// It is an iterable because if has na @@iterator.typeofg[Symbol.iterator]==='function'// true// It is an iterator because if has the .next method.typeofg.next==='function'// true// The iterator for a generator is the generator itself.g[Symbol.iterator]()===g// true[...g]// ['f','o','o']Array.from(g)// ['f', 'o', 'o']for(letitemofg){console.log(item)// 'f'// 'o'// 'o'}// Whenever the 'yield' expression is reached, the value is emitted// by the iterator and the function execution is suspended.function*generator(){yield'foo'console.log('and')yield'bar'}varfoo=generator()foo.next()// emits { value: 'f', done: false } and suspendsfoo.next()// logs 'and', emits { value: 'bar', done: false }, and suspendsfoo.next()// emits {value: undefined, done: true } and finishes// Whenever .next() is called on a generator, there's four events that can suspend the execution:// * yield - emits the next value in the sequence// * return - returns the last value in the sequence// * throw - stops the execution in the generator entirely// Use 'yield*' to delegate to other generator function.function*generator(){yield*'foo'}console.log([...generator()])// ['f','o','o']

Further Reading

Symbols

Symbols are just a new primitive type in Javascript.

typeofSymbol()// 'symbol'

Examples

// They are simple tokens that can be used as unique IDs.// We can create a new symbol by using the function Symbol().constID=Symbol()// Every symbol returned by Symbol() is unique.Symbol()===Symbol()// false

Description

// Symbol() has an optional string-value parameters,// which represents the symbol description.// This description is used to convert the symbol to a String.constsymbol=Symbol('aSymbol')String(symbol)// 'Symbol(aSymbol)'

As Object Property

constKEY=Symbol()constobj={[KEY]:'Value'}console.log(obj[KEY])// 'Value'

As Concept

constCAR_BMW=Symbol('BMW')constCAR_AUDI=Symbol('Audi')constCAR_MERCEDES=Symbol('Mercedes')

.for() and .keyFor()

// We can add symbols at run-time with Symbol.for(key) and Symbol.keyFor(symbol)// We can lookup key in runtime-wide on symbol registry.// If a symbol with that key exists then it would be returned.// If no symbol exists, then on would be created.// Therefore, Symbol.for(key) is idempotent.Symbol.for('foo')===Symbol.for('foo')// true// Symbol.keyFor(symbol) returns the key to which the symbol was associated with.constBAR=Symbol.for('bar')console.log(Symbol.keyFor(BAR))// 'bar'

Further Reading

Promises

Apromise is defined as "a proxy for a value that will eventually become available".Although they can be use to both synchronous and asynchronous code flows, they are though for async flows.

Examples

.then()

We can chain a Promise with the method.then(), which has two parameters:

  • onFulfilled - Callback to be executed on promise success
  • onRejected - Callback to be executed on promise fail
fetch('foo').then(functiononFulfilled(response){// Handle success response.console.log(response)},functiononRejected(){// Handle error.console.log('error')})

new Promise()

We can create promises from scratch by usingnew Promise(resolver), whereresolver parameter is the method used to resolve the promise.

Theresolver parameter has two arguments:

  • resolve - Callback to when the promise is fulfilled
  • rejected - Callback to when the promise is rejected
newPromise(resolve=>resolve())// promise is fulfillednewPromise((resolve,reject)=>reject())// promise is rejected// Resolving a promise with a value.newPromise(resolve=>resolve('foo')).then(result=>console.log(result))// foo// Resolving a promise with an exception.newPromise((resolve,reject)=>reject(newError('Connection Timeout'))).then(null,reason=>console.log(reason))// Error: Connection Timeout

Promise.all

It allow us to wait for a set of promise to resolve.

Promise.all([newPromise(resolve=>resolve('foo')),newPromise(resolve=>resolve('bar'))]).then(response=>console.log(response))// ['foo', 'bar']// If a single promise is rejected, the Promise.all is entirely rejected.Promise.all([Promise.reject(),newPromise(resolve=>resolve('foo'))]).then(()=>console.log('All Resolved'),()=>console.log('All Rejected'))// 'All Rejected'

Further Reading

Maps

AMap object is a new data structure is JavaScript with a simple key/value map. Any value (i.e. primite or objects) can be used as both key and value.

Examples

new Map

varmap=newMap()// We can use any object that follows the iterable protocol.// e.g. ['key', 'value']varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])console.log(map)// Map { 'foo' => 'Mr.Foo', 'bar' => 'Mr.Bar' }// We can use the spread operator to have the opposite effect.console.log([...map])// [ [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] ]

.set()

varmap=newMap()// Use primitive as values.map.set('foo','Mr.Foo')// Map { 'foo' => 'Mr.Foo' }map.set(3,'Mr.3')// Map { 'foo' => 'Mr.Foo', 3 => 'Mr.3'  }// Because `keys` are unique, when setting a key that is already defined,// it will override the existing one.map.set('foo','Mr.Bar')// Map { 'foo' => 'Mr.Bar', 3 => 'Mr.3'  }// Use objects as values.map.set(()=>'key','Value')// Map { [Function] => 'Value' }map.set({},'Value')// Map { {} => 'Value'}map.set(newDate,'Value')// Map { 2017-03-16T16:37:15.488Z => 'Value' }map.set(Symbol,'Value')// Map { Symbol => 'Value' }

.has()

varmap=newMap([['foo','Mr.Foo']])console.log(map.has('foo'))// trueconsole.log(map.has('bar'))// false

Deletingkey/value

varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])// Using .delete()map.delete('bar')console.log(map)// Map { 'foo' => 'Mr.Foo' }// Using .clear(), which deletes everythingmap.clear()console.log(map)// Map { }

Iterating

varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])// Use .entries() to iterate over the map.console.log(map.entries())// MapIterator { [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] }// Use .keys() to iterate over the map keys.console.log(map.keys())// MapIterator { 'foo', 'bar' }// Use .values() to iterate over the map values.console.log(map.values())// MapIterator { 'Mr.Foo', 'Mr.Bar' }

Further Reading

Weak Maps

We can think ofWeakMaps as a sub set of Maps.WeakMaps are not iterable, i.e. they don't follow the iterable protocol.

Examples

varmap=newWeakMap()// Every key must be an object.map.set('foo','Mr.Foo')// TypeError: Invalid value used as weak map key// This enables the map keys to be garage collected//  when they're only being referenced as WeakMap keys.// This is useful when we want to store data that will//  eventually be lost, e.g. DOM nodes.// We can pass an iterable to populate the WeakMap.varfoo=newDate()varbar=()=>{}varmap=newWeakMap([[foo,'Mr.foo'],[bar,'Mr.bar']]);// .has()console.log(map.has(foo))// true// .get()console.log(map.get(bar))// 'Mr.Bar'// .delete()map.delete(foo);console.log(map.has(foo))// false

Further Reading

Sets

Sets are another data structure introduced by ECMAScript 6. It works for arbitrary values.

Examples

varset=newSet()set.add('foo')// Set { 'foo' }set.add('bar')// Set { 'foo', 'bar' }// .sizeset.size// 2// .keys()varkeysIterator=set.keys()// SetIterator { 'foo', 'bar' }keysIterator.next().value// 'foo'keysIterator.next().value// 'bar'// .values()varvaluesIterator=set.values()valuesIterator.next().value// 'foo'valuesIterator.next().value// 'bar'// .entries()// Returns a new Iterator object containing an array of [value, value]// for each element in the Set, in insertion order.varentriesIterator=set.entries()console.log(entriesIterator.next().value)// ['foo', 'foo']console.log(entriesIterator.next().value)// ['bar', 'bar']// .add()set.add('zed')// Set { 'foo', 'bar', 'zed' }// .has()set.has('zed')// true// .delete()set.delete('zed')// Set { 'foo', 'bar' }

Further Reading

Weak Sets

AWeakSet is set that it allows its elements being garbage-collected.

Examples

varset=newSet()// .add()set.add('foo')// Set { 'foo' }// .has()set.has('foo')// true// .delete()set.delete('foo')// Set { }

Further Reading

Proxies

Proxies allows us to intercept and customize behaviour on operations performed on objects (e.g. getting of setting properties). They are a metaprogramming feature.

Examples

// Proxies allows us to defined behaviour whenever// the properties of a target object are accessed.vartarget={}// The handler object is used to configure traps for our Proxy.varhandler={}varproxy=newProxy(target,handler)// Proxy works as a simple pass-through to the target.proxy.foo='Mr.Foo'console.log(target.foo)// 'Mr.Foo'console.log(target.bar)// undefined

Traps

Traps allow us to intercept interactions on target, as long as those interactions happen through the Proxy.

// Let's define a Trap on the handler.get().varhandler={// The handler.get() method is a trap for getting a property value.get:function(target,property,receiver){// We run our Trap code, i.e. console.log.console.log(`Got property${property}`)// Then return the value as .get() will usually do.returntarget[property]}}vartarget={foo:'Mr.Foo'}varproxy=newProxy(target,handler)console.log(proxy.foo)// 'Got property foo'// 'Mr.Foo'

Revoke

Revocable proxies are the same as Proxies, with the difference that they can be revoke.

vartarget={}varhandler={}var{ proxy, revoke}=Proxy.revocable(target,handler)proxy.foo='Mr.Foo'console.log(proxy)// { foo: 'Mr.Foo' }// By revoking a Proxy we disable any operations on the Proxy.// After revoking, any operations on the Proxy will throw an error.revoke()proxy.foo// TypeError: Cannot perform 'get' on a proxy that has been revoked

Further Reading

Number

Number is the same Javascript object that words as a wrapper of a numeric value. However, with ECMAScript 6 there's a couple of new things.

Examples

// Binary Literals.// 0b prefix for binary literals.console.log(0b001)// 1console.log(0b010)// 2// Octal Literals.// 0o prefix for octal literals.console.log(0o001)// 1console.log(0o010)// 8// .isNaN()// Determines if the provided value is NaN and its type is Number.Number.isNaN(NaN)// trueNumber.isNaN(0/0)// trueNumber.isNaN('a'*'b')// trueNumber.isNaN(1)// falseNumber.isNaN('foo')// falseNumber.isNaN(undefined)// false// .isFinite()// Determines if the provided value is a finite number.Number.isFinite(Infinity)// falseNumber.isFinite(-Infinity)// falseNumber.isFinite(NaN)// falseNumber.isFinite(0)// trueNumber.isFinite(0b001)// trueNumber.isFinite(0o001)// trueNumber.isFinite('0')// false, would be true with global isFinite('0')Number.isFinite(null)// false, would be true with global isFinite(null)// .parseInt()// Parses a String to an integer in the specified radix.// Has exactly the same functionality as the global parseInt().Number.parseInt('10',2)// 2Number.parseInt('10',8)// 8Number.parseInt('10',10)// 10// .parseFloat()// As for parseInt, Number.parseFloat() has exactly the same// functionality as the global parseFloat().// .isInteger()// Determines if the provided value is a finite number// without a decimal part.Number.isInteger(Infinity)// falseNumber.isInteger(-Infinity)// falseNumber.isInteger(NaN)// falseNumber.isInteger(undefined)// falseNumber.isInteger(null)// falseNumber.isInteger(0)// trueNumber.isInteger(2.75)// falseNumber.isInteger(-5)// trueNumber.EPSILON// Which represents the smallest positive value.// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILONNumber.MAX_SAFE_INTEGER// Which represents the largest integer that// can be safely and precisely represented in JavaScript.Number.MIN_SAFE_INTEGER// Which represents the smallest integer that// can be safely and precisely represented in JavaScript.Number.isSafeInteger// Returns true for any integer between// [MIN_SAFE_INTEGER, MAX_SAFE_INTEGER].

Further Reading

Array

With ES6Arrays have now a couple of new methods. We will explore those in the example bellow.

Examples

// .from()// Creates a new Array from an array-like or iterable object.varfoo=['f','o','o']Array.from(foo)// ['f', 'o', 'o']Array.from('foo')// ['f', 'o', 'o']// .of()// Create a new Array from a variable number of arguments.Array.of(3)// [3]// Which differs from:Array(3)// [ , , ]Array.of(3,'foo',{})// [ 3, 'foo', {} ]// Which is equal to:Array(3,'foo',{})// [ 3, 'foo', {} ]// .copyWithin(target, start, end)// Copies part of an array (start-end)// to another location (target) in the same array.Array(1,2,3,4).copyWithin(2)// [ 1, 2, 1, 2 ]Array(1,2,3,4).copyWithin(2,1)// [ 1, 2, 2, 3 ]Array(1,2,3,4).copyWithin(2,0,1)// [ 1, 2, 1, 4 ]// .fill(value, start, end)// Fills all elements in the array (start-end)// with the provided value.Array(3).fill('foo')// [ 'foo', 'foo', 'foo' ]Array(3).fill('foo',1)// [ , 'foo', 'foo' ]Array(3).fill('foo',1,2)// [ , 'foo',  ]// .find(callback)// Returns the first element in the array// that satisfies the condition.functionisEven(value){returnvalue%2===0}Array(1,2,3,4).find(isEven)// 2// .findIndex(callback)// Returns the index of the first element in the array// that satisfies the condition.Array(1,2,3,4).findIndex(isEven)// 1 <- index of element 2

Iterators

// .keys()// Returns a new Array Iterator that contains the keys// for each index in the array.variterator=['foo','bar','zed'].keys()console.log(iterator.next().value)// 0console.log(iterator.next().value)// 1console.log(iterator.next().value)// 2// .values()// Returns a new Array Iterator that contains the values// for each index in the array.variterator=['foo','bar','zed'].values()console.log(iterator.next().value)// 'foo'console.log(iterator.next().value)// 'bar'console.log(iterator.next().value)// 'zed'// .entries()// Returns a new Array Iterator that contains the pairs// [ key, value ] for each index in the array.variterator=['foo','bar','zed'].entries()console.log(iterator.next().value)// [ 0, 'foo' ]console.log(iterator.next().value)// [ 1, 'bar' ]console.log(iterator.next().value)// [ 2, 'zed' ]

Further Reading

Object

There were a couple of changes in JavaScriptObjects, mainly:

  • Object.assign - Copies the values of all enumerable properties from on or more source objects to the target and returns the target's object reference.
  • Object.is - Determines if two objects are the same.
  • Object.getOwnPropertySymbols - Returns an array with all the properties that are symbols.
  • Object.setPrototypeOf - Sets the prototype of the specified object to another prototype.

Example

// .assign(target, ...sources)Object.assign({},{foo:'Mr.Foo'},{bar:'Mr.Bar'})// { foo: 'Mr.Foo', bar: 'Mr.Bar' }Object.assign({foo:'Mr.Foo'},{foo:'Foo'})// { foo: 'Foo' }// .is(value1, value2)Object.is([],[])// falseObject.is({},{})// falseObject.is(0,-0)// falseObject.is('foo','foo')// trueObject.is(null,null)// true// .getOwnPropertySymbols(obj)varobjectSymbols=Object.getOwnPropertySymbols({[Symbol('foo')]:'Mr.Foo',[Symbol('bar')]:'Mr.Bar'})// [ Symbol(foo), Symbol(bar) ]console.log(objectSymbols.length)// 2console.log(objectSymbols[0])// Symbol(foo)// .setPrototypeOf(obj, prototype)varfoo={}Object.setPrototypeOf(foo,null)console.log(Object.getPrototypeOf(foo))// null

Further Reading

Strings

As for Object,Strings have had some updates.

Examples

String Manipulation

// .startsWith(searchString[, position])// Determines if a string beings with the specified characters// at the specific position.'foo & bar'.startsWith('foo')// true'foo & bar'.startsWith('bar')// false'foo & bar'.startsWith('bar',6)// true// .endsWith(searchString[, position])// Determines if a string ends with the specified characters// at the specific position.'foo & bar'.endsWith('bar')// true'foo & bar'.endsWith('foo')// false'foo & bar'.endsWith('foo',3)// true// .includes(searchString[, position])// Determines if a string can be founds within another string.'Mr.foo'.includes('foo')// true'Mr.foo'.includes('bar')// false'Mr.foo'.includes('Mr',2)// false// .repeat(count)// Returns a new string containing the specified// number (count) of copies.'foo'.repeat(2)// 'foofoo'// [Symbol.iterator]// Returns a new Iterator object that iterates over// each code character or its code point representation.variterator='ABC'[Symbol.iterator]()console.log(iterator.next().value);// 'A'console.log(iterator.next().value);// 'B'console.log(iterator.next().value);// 'C'variterator='A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'[Symbol.iterator]()console.log(iterator.next().value);// 'A'console.log(iterator.next().value);// '\uD835\uDC68'console.log(iterator.next().value);// 'B'

Unicode

// .codePointAt(position)// Returns the unicode of the character at the specified position.'Foo'.codePointAt(0)// 70// .fromCodePoint(num1[, ...[, numN]])// Returns the string created by the specified// sequence of code points.String.fromCodePoint(70,111,111)// 'Foo'// .normalize([form])// Returns a Unicode Normalization Form of a give string.// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Further Reading

Modules

Modules is the JavaScript standard module system strongly influenced by CommonJS. With ES6 modules we now have the terminology ofexport andimport which we will explored in the examples bellow.

Examples

Export

// Default exportexportdefault'foo'exportdefaultNaNexportdefault{foo:'Mr.Foo'}exportdefault()=>'Mr.Foo'// Naming exportexportvarfoo='Mr.Foo'varfoo='Mr.Foo'varbar='Mr.Bar'export{foo,bar}varfoo='Mr.Foo'export{fooasmyFoo}// Default export with namingvarapi={foo:'Mr.Foo',bar:'Mr.Bar'}exportdefaultapi

Import

// Default import// export default 'foo'import*from'_moduleName_'// Naming import// export var foo = 'Mr.Foo'import{foo}from'_moduleName_'// export { foo: 'Mr.Foo', bar: 'Mr.Bar' }import{foo,bar}from'_moduleName_'// export { foo as myFoo }import{myFoo}from'_moduleName_'

Further Reading


[8]ページ先頭

©2009-2025 Movatter.jp