├── JS inheritance ├── Abstract.js ├── Adding and Moving.js ├── Calling super Constructor.js ├── CommonJS.js ├── Create your Protypical.js ├── ES6 Inheritance.js ├── Enunberating property.js ├── Getter and Setter.js ├── Getters and Setters.js ├── Hositing.js ├── Iterating Instance.js ├── Method Overwriting.js ├── Method overriding.js ├── Mix.js ├── Model.html ├── Module.js ├── Ploymorphism.js ├── Private Symbol.js ├── Property Descriptor.js ├── Prototype and Instance.js ├── Static.js ├── Stopwatch.js ├── The key this.js ├── Weakmap.js ├── call方法将全局函数传入其他函数体重.jpg ├── class.js ├── exercise.js ├── exercise3.js ├── exercise4.js ├── exercise5.js ├── factory and Constructor.js ├── index.js ├── indexjs.js ├── indexrequire.js ├── this.txt └── 此处的this指向全局对象.jpg ├── JSexercise ├── Array exercise │ ├── Array from Range.js │ ├── Count Occurence.js │ ├── Except.js │ ├── Get Max.js │ ├── Includes.js │ ├── Movie.js │ └── Moving Element.js ├── Array from Range.js ├── Except.js ├── Flow control │ ├── Count truthy.js │ ├── Demerit Points.js │ ├── Even and Odd.js │ ├── Fizz Buzz.js │ ├── Grade.js │ ├── Landspace and portrait.js │ ├── Max of Two numbers.js │ ├── Prime Numbers.js │ ├── Star.js │ ├── String property.js │ └── Sum of Mutiple.js ├── Get Max.js ├── Includes.js ├── Landspace and portrait.js ├── Moving Element.js ├── Object exercise │ ├── Address Oject.js │ ├── Blog Object.js │ ├── Constructor Functions.js │ ├── Factory and Constructor.js │ ├── Object equality.js │ └── Price range Object.js └── thi.exercise │ ├── async.js │ ├── this execrise2.js │ ├── this exercise1.js │ └── this.execrise3.js ├── JSreview ├── Adding Element .js ├── Arguments.js ├── Change this.js ├── Combining Slicing.js ├── Date.js ├── Default Parameter.js ├── Emptying Element.js ├── Every and Some.js ├── Filtering.js ├── Finding Element.js ├── Fingd Array.js ├── Function.js ├── Gatter and Setter.js ├── Hosting.js ├── Iterating forEach.js ├── Joining Array.js ├── Local VS Gobal.js ├── Maping.js ├── Reducing.js ├── Removing Element.js ├── Sort Reverse.js ├── String method.js ├── Template String.js ├── The Spread Operator.js ├── The rest Operator.js ├── The this keyword.js ├── Try and Catch.js ├── adding&moving.js ├── cloning Object.js ├── constructor.js ├── factory&constructor.js ├── function is Object.js ├── search attribute.js └── value&reference.js └── README.md /JS inheritance/Abstract.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | this.radius=radius; 3 | this.defaultLocation={x:0,y:0}; 4 | this.computeOptimumLocation=function(factor){ 5 | //.... 6 | } 7 | this.draw=function(){ 8 | this.computeOptimumLocation(); 9 | console.log('draw') 10 | }; 11 | } 12 | const circle=new Circle(10); 13 | circle.computeOptimumLocation(0.1); 14 | circle.draw(); 15 | //--------------------------above can confuse the structure 16 | function Circle(radius){ 17 | this.radius=radius; 18 | let defaultLocation={x:0,y:0}; 19 | let computeOptimumLocation=function(factor){ 20 | //.... 21 | } 22 | this.draw=function(){ 23 | computeOptimumLocation(0.1); 24 | console.log('draw') 25 | }; 26 | } 27 | const circle=new Circle(10); 28 | circle.computeOptimumLocation(0.1); 29 | circle.draw(); -------------------------------------------------------------------------------- /JS inheritance/Adding and Moving.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | this.radius=radius; 3 | this.draw=function(){ 4 | console.log('draw') 5 | } 6 | } 7 | 8 | const circle=new Circle(10); 9 | circle.location={x:1};// add 10 | const propertyName='center location'; 11 | circle[propertyName]={x:1}; 12 | delete circle.location;// delete 13 | -------------------------------------------------------------------------------- /JS inheritance/Calling super Constructor.js: -------------------------------------------------------------------------------- 1 | function Shape(color){ 2 | this.color=color; 3 | } 4 | Shape.prototype.duplicate=function(){ 5 | console.log('duplicate'); 6 | } 7 | function Circle(radius){ 8 | // Shape(color) 9 | Shape.call(this,color) 10 | Shape.apply(this,color) 11 | this.radius=radius; 12 | } 13 | Circle.prototype=Object.create(Shape.prototype); 14 | Circle.prototype.constructor=Circle; 15 | 16 | Circle.prototype.draw=function(){ 17 | console.log('draw') 18 | } 19 | const s=new Shape(); 20 | const c=new Circle(1); 21 | c//no color 22 | c// red radius 23 | -------------------------------------------------------------------------------- /JS inheritance/CommonJS.js: -------------------------------------------------------------------------------- 1 | //Implementaion Detail 2 | const _radius=new WeakMap(); 3 | //Public Interface 4 | class Circle{ 5 | constructor(radius){ 6 | _radius.set(this,radius); 7 | } 8 | draw(){ 9 | console.log('Circle with radius'+_radius.get(this)); 10 | } 11 | } 12 | module.exports=Circle; -------------------------------------------------------------------------------- /JS inheritance/Create your Protypical.js: -------------------------------------------------------------------------------- 1 | function extend(Child,Parent){ 2 | Child.prototype=Object.create(Parent.prototype); 3 | Child.prototype.constructor=Child; 4 | } 5 | function Shape(){ 6 | 7 | } 8 | Shape.prototype.duplicate=function(){ 9 | console.log(duplicate) 10 | } 11 | 12 | function Circle(radius){ 13 | this.radius=radius; 14 | } 15 | Circle.prototype.draw=function(){ 16 | console.log('draw') 17 | } 18 | function Square(){ 19 | 20 | } 21 | extend(Square,Shape) 22 | const s=new Shape(); 23 | const c=new Circle(1); -------------------------------------------------------------------------------- /JS inheritance/ES6 Inheritance.js: -------------------------------------------------------------------------------- 1 | class Shape{ 2 | move(){ 3 | console.log('move') 4 | } 5 | } 6 | 7 | class Circle extends Shape{ 8 | draw(){ 9 | console.log('draw') 10 | } 11 | } 12 | const c=new Circle(); 13 | //------------------------------ 14 | class Shape{ 15 | constructor(color){ 16 | this.color=color; 17 | } 18 | 19 | move(){ 20 | console.log('move') 21 | } 22 | } 23 | 24 | class Circle extends Shape{ 25 | constructor(color,radius){ 26 | super(color); 27 | this.radius=radius; 28 | } 29 | //if you want to add the child constructor, 30 | //should take a parent constructor first 31 | draw(){ 32 | console.log('red',1) 33 | } 34 | } 35 | const c=new Circle('red'); 36 | c 37 | //Circle{color:'red'} -------------------------------------------------------------------------------- /JS inheritance/Enunberating property.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | this.radius=radius; 3 | this.draw=function(){ 4 | console.log('draw') 5 | } 6 | } 7 | 8 | const circle= new Circle(10); 9 | for(let key in circle){ 10 | if(typeof circle[key]!=='function') 11 | console.log(key,circle[key]);//radius 12 | } 13 | const keys=Object.keys(circle); 14 | console.log(keys) 15 | //radius draw 16 | if('radius' in circle) 17 | console.log('Circle has a radius') -------------------------------------------------------------------------------- /JS inheritance/Getter and Setter.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | this.radius=radius; 3 | this.draw=function(){ 4 | console.log('draw') 5 | }; 6 | Object.defineProperty(this,'defaultLocation',{ 7 | get:function(){ 8 | return defaultLocation; 9 | }, 10 | set:function(value){ 11 | if(!value.x||!value.y) 12 | throw new Error('Invalid location.'); 13 | 14 | defaultLocation=value; 15 | } 16 | }); 17 | } 18 | const circle=new Circle(10); 19 | circle.computeOptimumLocation(0.1); 20 | circle.draw(); -------------------------------------------------------------------------------- /JS inheritance/Getters and Setters.js: -------------------------------------------------------------------------------- 1 | const _radius=new WeakMap(); 2 | class Circle{ 3 | constructor(radius) 4 | { 5 | _radius.set(this,radius); 6 | //es5 7 | // Object.defineProperty(this,'radius',{ 8 | // get:function(){ 9 | 10 | // } 11 | // }) 12 | } 13 | getRadius(){ 14 | return _radius.get(this) 15 | } 16 | } 17 | const c=new Circle(1); 18 | c.getRadius()//1 19 | //--------------------------------- 20 | const _radius=new WeakMap(); 21 | class Circle{ 22 | constructor(radius){ 23 | _radius.set(this,radius); 24 | } 25 | get radius(){ 26 | return _radius.get(this); 27 | } 28 | set radius(value){ 29 | if(value<=0) throw new Erro('invalid radius') 30 | _radius.set(this,value); 31 | } 32 | } 33 | const c=new Circle(1); 34 | -------------------------------------------------------------------------------- /JS inheritance/Hositing.js: -------------------------------------------------------------------------------- 1 | sayHello(); 2 | //Function Declaration 3 | function sayHello(){ 4 | 5 | } 6 | //Fucntion Expression 7 | const sayGoodbye=function(){ 8 | 9 | } 10 | //Class Declaration 11 | const c=new Circle()//X FALSE 12 | class Circle{ 13 | 14 | } 15 | //Class Expression 16 | const Square=class{ 17 | 18 | } -------------------------------------------------------------------------------- /JS inheritance/Iterating Instance.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | //Instance members 3 | this.radius=radius; 4 | this.move=function(){ 5 | console.log('move') 6 | } 7 | } 8 | const c1=new Circle(1); 9 | //Prototype members 10 | Circle.prototype.draw=function(){ 11 | console.log('draw'); 12 | } 13 | //Returns Instance members 14 | console.log(Object.keys(c1)); 15 | //Returns all members(instance+prototype) 16 | for(let key in c1) 17 | console.log(key); 18 | c1.hasOwnProperty('radius') //true 19 | -------------------------------------------------------------------------------- /JS inheritance/Method Overwriting.js: -------------------------------------------------------------------------------- 1 | function extend(Child,Parent){ 2 | Child.prototype=Object.create(Parent,prototype) 3 | Child.prototype.constructor=Child; 4 | } 5 | function Shape(){ 6 | 7 | } 8 | Shape.prototype.duplicate=function(){ 9 | console.log('duplicate') 10 | } 11 | function Circle(){ 12 | 13 | } 14 | extend(Circle,Shape); 15 | Circle.prototype.duplicate=function(){ 16 | Shape.prototype.duplicate.call(this) 17 | console.log('duplicate circle'); 18 | } 19 | const c=new Circle(); 20 | c.duplicate(); 21 | // duplicate circle 22 | c.duplicate() 23 | // duplicate 24 | //duplicate circle -------------------------------------------------------------------------------- /JS inheritance/Method overriding.js: -------------------------------------------------------------------------------- 1 | class Shape{ 2 | move(){ 3 | console.log('move') 4 | } 5 | } 6 | 7 | class Circle extends Shape{ 8 | move(){ 9 | super.move(); 10 | console.log('circle move') 11 | } 12 | } 13 | const c=new Circle() 14 | c.move() 15 | //circle move 16 | c.move() 17 | //move 18 | //circle move -------------------------------------------------------------------------------- /JS inheritance/Mix.js: -------------------------------------------------------------------------------- 1 | function mixin(target,...source){ 2 | Object.assign(target,...source) 3 | } 4 | 5 | const canEat={ 6 | eat:function(){ 7 | this.hunger--; 8 | console.log('eating') 9 | } 10 | } 11 | const canWalk={ 12 | walk:function(){ 13 | console.log('walking') 14 | } 15 | }; 16 | const canSwim={ 17 | swim:function(){ 18 | console.log('swim') 19 | } 20 | } 21 | function Person(){ 22 | 23 | } 24 | mixin(Person.prototype,canEat,canWalk); 25 | const person=new Person(); 26 | 27 | function Goldfish(){ 28 | 29 | } 30 | mixin(Goldfish.prototype,canEat,canSwim); 31 | const goldfish=new Goldfish(); 32 | console.log(goldfish) -------------------------------------------------------------------------------- /JS inheritance/Model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS inheritance/Module.js: -------------------------------------------------------------------------------- 1 | import{Circle} from './indexjs.js' 2 | const circle=new Circle(10); -------------------------------------------------------------------------------- /JS inheritance/Ploymorphism.js: -------------------------------------------------------------------------------- 1 | function extend(Child,Parent){ 2 | Child.prototype=Object.create(Parent); 3 | Child.prototype.constructor=Child; 4 | } 5 | function Shape(){ 6 | 7 | } 8 | Shape.prototype.duplicate=function(){ 9 | console.log('duplicate') 10 | } 11 | function Circle(){ 12 | 13 | } 14 | extend(Circle,Shape); 15 | Circle.prototype.duplicate=function(){ 16 | console.log('duplicate circle') 17 | } 18 | function Square(){ 19 | 20 | } 21 | extend(Square,Shape); 22 | Square.prototype.duplicate=function(){ 23 | console.log('duplicate square') 24 | } 25 | // const c=new Circle(); 26 | // const s=new Square(); 27 | const shapes=[ 28 | new Circle(), 29 | new Square() 30 | ] 31 | for(let shape of shapes){ 32 | // if(shape.type==='circle') 33 | // duplicate(); 34 | //else if.....*N 35 | shape.duplicate();// ploymorphism!! 36 | } 37 | -------------------------------------------------------------------------------- /JS inheritance/Private Symbol.js: -------------------------------------------------------------------------------- 1 | const _radius=Symbol()// just a function not constructor function don't use a new 2 | //Symbol===Symbol false 3 | const _draw=Symbol() 4 | class Circle{ 5 | constructor(radius){ 6 | this[_radius]=radius; 7 | } 8 | [_draw](){ 9 | } 10 | } 11 | const c=new Circle(1); 12 | console.log(Object.getOwnPropertyNames(c))//[] 13 | console.log(Object.getOwnPropertySymbols(c))//[Symbol()] 14 | const key=Object.getOwnPropertySymbols(c)[0]; 15 | console.log(c[key])//1 16 | -------------------------------------------------------------------------------- /JS inheritance/Property Descriptor.js: -------------------------------------------------------------------------------- 1 | let person={name:'Mosh'}; 2 | let objectBase=Object.getPrototypeOf(person); 3 | let descriptor=Object.getOwnPropertyDescriptor(objectBase,'toString'); 4 | console.log(descriptor); 5 | //---------------------- 6 | Object.defineProperty(person,'name',{ 7 | writable:false, 8 | enumerable:false, 9 | configurable:false 10 | }); 11 | delete person.name;//nothing happend 12 | person.name='John';//Mosh 13 | console.log(Object.keys(person))//[] -------------------------------------------------------------------------------- /JS inheritance/Prototype and Instance.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | //Instance members 3 | this.radius=radius; 4 | this.move=function(){ 5 | this.draw() 6 | console.log('move') 7 | } 8 | } 9 | //Protype members 10 | Circle.prototype.draw=function(){ 11 | console.log('draw') 12 | } 13 | const c1=new Circle(1); 14 | const c2=new Circle(1); 15 | 16 | Circle.prototype.toString=function(){ 17 | return 'Circle with radius'+this.radius; 18 | } 19 | c1.move() 20 | // draw move 21 | -------------------------------------------------------------------------------- /JS inheritance/Static.js: -------------------------------------------------------------------------------- 1 | class Circle{ 2 | constructor(radius){ 3 | this.radius=radius; 4 | } 5 | //Instance Method 6 | draw(){ 7 | 8 | } 9 | //Static Method 10 | static parse(str){ 11 | const radius=JSON.parse(str).radius; 12 | return new Circle(radius); 13 | }//use to build inside method 14 | } 15 | const circle=new Circle(1); 16 | const circle=Circle.parse('{"radius":1}') 17 | console.log(circle); 18 | // radius draw 19 | // parse not here 20 | //------------------------------------------ 21 | class Math2{ 22 | static abs(value){ 23 | //some magic.... 24 | } 25 | } 26 | Math2.abs() -------------------------------------------------------------------------------- /JS inheritance/Stopwatch.js: -------------------------------------------------------------------------------- 1 | function Stopwatch(){ 2 | let startTime,enTime,running,duration=0; 3 | this.start=function(){ 4 | if(running) 5 | throw new Error('Stopwacth has already started.'); 6 | 7 | running=true; 8 | startTime=new Date(); 9 | }; 10 | this.stop=function(){ 11 | if(!running) 12 | throw new Error('Stopwatch is not started.'); 13 | 14 | running=false; 15 | 16 | endTime=new Date(); 17 | 18 | const seconds=(endTime.getTime()-startTime.getTime())/1000; 19 | duration+=seconds; 20 | }; 21 | this.reset=function(){ 22 | startTime=null; 23 | endTime=null; 24 | running=false; 25 | duration=0; 26 | }; 27 | Object.defineProperty(this,'duration',{ 28 | get:function(){ return duration;} 29 | }) 30 | 31 | 32 | 33 | } -------------------------------------------------------------------------------- /JS inheritance/The key this.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const Circle=function(){ 3 | this.draw=function(){console.log(this);} 4 | } 5 | const c=new Circle(); 6 | //Method Call 7 | c.draw(); 8 | const draw=c.draw; 9 | //Function Call 10 | draw();//this is a window 11 | //'undefined' in use strict model 12 | //-----------ES6 13 | class Circle{ 14 | draw(){ 15 | console.log(this) 16 | } 17 | } 18 | const c=new Circle(); 19 | const draw=c.draw; 20 | draw() 21 | //undefined 22 | //---------------------- -------------------------------------------------------------------------------- /JS inheritance/Weakmap.js: -------------------------------------------------------------------------------- 1 | const _radius=new WeakMap(); 2 | const _move=new WeakMap(); 3 | const privateProps=new WeakMap(); 4 | class Circle{ 5 | constructor(radius){ 6 | _radius.set(this.radius); 7 | _move.set(this,function(){ 8 | console.log('move',this);//window but es6 is undefined 9 | }); 10 | _move.set(this,()=>console.log('move',this)) 11 | } 12 | draw() { 13 | // console.log(_radius.get(this)); 14 | _move.get(this)(); 15 | console.log('draw') 16 | } 17 | }; 18 | const c=new Circle(1); 19 | c// not have radius props 20 | c.draw() 21 | //move undefined 22 | //draw 23 | c.draw() 24 | //move Circle{...} 25 | //draw 26 | //------------------------------- 27 | const _radius=new WeakMap(); 28 | const _move=new WeakMap(); 29 | const privateProps=new WeakMap(); 30 | class Circle{ 31 | constructor(radius){ 32 | privateProps.set(this,{ 33 | radius:radius, 34 | move:()=>{ 35 | 36 | } 37 | }) 38 | } 39 | } 40 | privateProps.get(this).radius -------------------------------------------------------------------------------- /JS inheritance/call方法将全局函数传入其他函数体重.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unlimitedcodeG/Mosh-note/b5c842de47775727d6ab5269bc59f6700e9e772f/JS inheritance/call方法将全局函数传入其他函数体重.jpg -------------------------------------------------------------------------------- /JS inheritance/class.js: -------------------------------------------------------------------------------- 1 | // function Circle(radius){ 2 | // this is a constructor function @1 3 | // } 4 | 5 | 6 | class Circle{ 7 | constructor(radius){ 8 | //just like @11 9 | this.radius=radius; 10 | } 11 | draw(){ 12 | console.log('draw') 13 | } 14 | } 15 | const c=new Circle(1); 16 | //typeof Circle 17 | //function 18 | //forget new=>error -------------------------------------------------------------------------------- /JS inheritance/exercise.js: -------------------------------------------------------------------------------- 1 | function Stopwatch(){ 2 | let startTime,enTime,running,duration=0; 3 | Object.defineProperty(this,'duration',{ 4 | get:function(){ return duration;}, 5 | set:function(value){duration=value} 6 | }) 7 | Object.defineProperty(this,'startTime',{ 8 | get:function(){ return startTime;} 9 | }) 10 | Object.defineProperty(this,'endTime',{ 11 | get:function(){ return endTime;} 12 | }) 13 | Object.defineProperty(this,'running',{ 14 | get:function(){ return running;} 15 | }) 16 | } 17 | Stopwatch.prototype.start=function(){ 18 | if(this.running) 19 | throw new Error('Stopwacth has already started.'); 20 | 21 | this.running=true; 22 | this.startTime=new Date(); 23 | }; 24 | Stopwatch.prototype.stop=function(){ 25 | if(!this.running) 26 | throw new Error('Stopwatch is not started.'); 27 | 28 | this.running=false; 29 | 30 | this.endTime=new Date(); 31 | 32 | const seconds=(endTime.getTime()-startTime.getTime())/1000; 33 | duration+=seconds; 34 | }; 35 | Stopwatch.prototype.reset=function(){ 36 | this.startTime=null; 37 | this.endTime=null; 38 | this.running=false; 39 | this.duration=0; 40 | }; 41 | const sw=new Stopwatch(); 42 | sw.duration=10; -------------------------------------------------------------------------------- /JS inheritance/exercise3.js: -------------------------------------------------------------------------------- 1 | function HtmlElement(){ 2 | this.click=function(){ 3 | console.log('clicked') 4 | } 5 | } 6 | HtmlElement.prototype.focus=function(){ 7 | console.log('focued') 8 | } 9 | function HtmlSelectElement(items=[]){ 10 | this.items=items; 11 | this.addItems.push(item); 12 | } 13 | this.removeItem=function(item){ 14 | this.items.splice(this.items.indexOf(item),1) 15 | } 16 | HtmlSelectElement.prototype=new HtmlElement(); 17 | HtmlSelectElement.prototype.constructor=HtmlSelectElement; 18 | new HtmlSelectElement.prototype.constructor(); 19 | new HtmlSelectElement() 20 | HtmlSelectElement.prototype=Object.create(HtmlElemnt.prototype) -------------------------------------------------------------------------------- /JS inheritance/exercise4.js: -------------------------------------------------------------------------------- 1 | function HtmlImageElement(src){ 2 | this.src=src; 3 | 4 | this.render=function(){ 5 | return`` 6 | } 7 | this.render2=function(){ 8 | return ` 9 | ` 12 | } 13 | } 14 | 15 | const renderItem=item=>``; -------------------------------------------------------------------------------- /JS inheritance/exercise5.js: -------------------------------------------------------------------------------- 1 | const _items= new WeakMap(); 2 | 3 | class Stack{ 4 | constructor(){ 5 | _items.set(this,[]) 6 | } 7 | push(obj){ 8 | items.get(this).push(obj); 9 | } 10 | pop(){ 11 | const items=_items.get(this); 12 | if(_items.get(this).length===0) 13 | throw new Error('Stack is empty.'); 14 | 15 | return items.pop() 16 | } 17 | peak(){ 18 | const items=_items.get(this); 19 | if(items.length===0) 20 | throw new Error('Stack is empty.'); 21 | 22 | return items[items.length-1]; 23 | } 24 | get count(){ 25 | return _items.get(this).length 26 | } 27 | } -------------------------------------------------------------------------------- /JS inheritance/factory and Constructor.js: -------------------------------------------------------------------------------- 1 | //Factory Function 2 | function createCircle(radius){ 3 | return{ 4 | radius, 5 | draw:function(){ 6 | console.log('draw') 7 | } 8 | } 9 | }; 10 | const circle=createCircle(1); 11 | circle.draw(); 12 | //Constructor 13 | function Circle(radius){ 14 | this.radius=radius; 15 | this.draw=function(){ 16 | 17 | } 18 | } 19 | const c=new Circle(1); -------------------------------------------------------------------------------- /JS inheritance/index.js: -------------------------------------------------------------------------------- 1 | function Shape(){ 2 | } 3 | Shape.prototype.duplicate=function(){ 4 | console.log('duplicate'); 5 | } 6 | function Circle(radius){ 7 | this.radius=radius; 8 | } 9 | // Circle.prototype=Object.create(Obeject.prototype) 10 | Circle.prototype=Object.create(Shape.prototype); 11 | Circle.prototype.draw=function(){ 12 | console.log('draw'); 13 | } 14 | const s=new Shape(); 15 | const c=new Circle(1); -------------------------------------------------------------------------------- /JS inheritance/indexjs.js: -------------------------------------------------------------------------------- 1 | const _radius=new Weakmap(); 2 | 3 | export class Circle{ 4 | constructor(radius){ 5 | _radius.set(this,radius) 6 | } 7 | draw(){ 8 | console.log('Circle with radius'+_radius.get(this).radius) 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /JS inheritance/indexrequire.js: -------------------------------------------------------------------------------- 1 | const Circle=require('./CommonJS'); 2 | 3 | const c=new Circle(10); 4 | c.draw(); 5 | // node indexrequire.js 6 | //Circle with radius 10 7 | -------------------------------------------------------------------------------- /JS inheritance/this.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unlimitedcodeG/Mosh-note/b5c842de47775727d6ab5269bc59f6700e9e772f/JS inheritance/this.txt -------------------------------------------------------------------------------- /JS inheritance/此处的this指向全局对象.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unlimitedcodeG/Mosh-note/b5c842de47775727d6ab5269bc59f6700e9e772f/JS inheritance/此处的this指向全局对象.jpg -------------------------------------------------------------------------------- /JSexercise/Array exercise/Array from Range.js: -------------------------------------------------------------------------------- 1 | const numbers=arrayFromRange(1,4); 2 | console.log(numbers); 3 | function arrayFromRange(min,max){ 4 | const output=[]; 5 | for(let i=min;i<=max;i++) 6 | output.push(i); 7 | return output; 8 | } -------------------------------------------------------------------------------- /JSexercise/Array exercise/Count Occurence.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | const count=countOccurence(numbers,1); 3 | console.log(count) 4 | function countOccurence(array,searchElement){ 5 | // let count=0; 6 | // for(let element of array) 7 | // if(element===searchElement) 8 | // count++; 9 | // return count; 10 | return array.reduce((accumulator,current)=>{ 11 | const occurence=(current===searchElement)?1:0; 12 | console.log(accumulator,current,searchElement) 13 | return accumulator+occurence; 14 | },0) 15 | } -------------------------------------------------------------------------------- /JSexercise/Array exercise/Except.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4,1,1]; 2 | const output=except(numbers,[1,2,3,4]); 3 | 4 | console.log(output); 5 | function except(array,excluded){ 6 | const output=[]; 7 | for(let element of array) 8 | if(!excluded.includes(element)) 9 | output.push(element); 10 | return output; 11 | } -------------------------------------------------------------------------------- /JSexercise/Array exercise/Get Max.js: -------------------------------------------------------------------------------- 1 | function getMaX(array){ 2 | if(array.length===0) return undefined; 3 | // let max=array[0]; 4 | // for(let i=1;imax) 6 | // max=array[i] 7 | 8 | // return max; 9 | return array.reduce((a,b)=>(a>b)?a:b) 10 | } -------------------------------------------------------------------------------- /JSexercise/Array exercise/Includes.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | console.log(includes(number,1)); 3 | 4 | function includes(array,searchElement){ 5 | for(let element of array) 6 | if(element===searchElement) 7 | return true; 8 | return false; 9 | } -------------------------------------------------------------------------------- /JSexercise/Array exercise/Movie.js: -------------------------------------------------------------------------------- 1 | const movies=[ 2 | {title:'a',year:2018,rating:4.5}, 3 | {title:'b',year:2018,rating:4.7}, 4 | {title:'c',year:2018,rating:3}, 5 | {title:'d',year:2017,rating:4.5}, 6 | ]; 7 | //All the movies in 2018 with rating>4; 8 | //Sort them by their rating 9 | //Descending order 10 | //Pick their title 11 | const titles=movies 12 | .filter(m=>m.year===2018&&m.rating>=4) 13 | .sort((a,b)=>a.rating-b.rating) 14 | .reverse() 15 | .map(m=>m.title) 16 | console.log(titles); -------------------------------------------------------------------------------- /JSexercise/Array exercise/Moving Element.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | const output=move(numbers,0,0);//object,loaction,offset:positive right negative left 3 | console.log(output); 4 | console.error('Invaild offset') 5 | function move(array,index,offset){ 6 | const output=[...array]; 7 | const element=output.splice(index,1)[0]; 8 | output.splice(index+offset,0,element); 9 | return output; 10 | } -------------------------------------------------------------------------------- /JSexercise/Array from Range.js: -------------------------------------------------------------------------------- 1 | const numbers=arrayFromRange(1,4); 2 | console.log(numbers); 3 | function arrayFromRange(min,max){ 4 | const output=[]; 5 | for(let i=min;i<=max;i++) 6 | output.push(i); 7 | return output; 8 | } -------------------------------------------------------------------------------- /JSexercise/Except.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | const output=except(numbers,[1]); 3 | console.log(output); 4 | function except(array,excluded){ 5 | const output=[]; 6 | for(let element of array) 7 | if(!excluded.includes(element)) 8 | output.push(element); 9 | return output; 10 | 11 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Count truthy.js: -------------------------------------------------------------------------------- 1 | const isActive=true; 2 | const name='Mosh';//Truthy (true) 3 | const name=''//falsy(false) 4 | if(name) 5 | console.log('Hello'); 6 | //Hello 7 | 8 | function countTruthy(array){ 9 | 10 | } 11 | //------------------------------------- 12 | const array=[0,null,undefined,'',2,3]; 13 | console.log(countTruthy(array)) 14 | function countTruthy(array){ 15 | let count=0; 16 | for(let value of array) 17 | if(value)//if(value!==false||value!==undefined) 18 | count++; 19 | return count 20 | 21 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Demerit Points.js: -------------------------------------------------------------------------------- 1 | //Speed Limit =70; 2 | //5 ->1 point 3 | //Math.floor(1.3) 4 | //12 points ->suspended 5 | checkSpeed(50);//Ok 6 | checkSpeed(70)//Ok 7 | checkSpeed(71) 8 | function checkSpeed(speed){ 9 | const speedLimit=70; 10 | const kmPerPoint=5; 11 | if(speed=12) 17 | console.log('License suspanded'); 18 | else 19 | console.log('Point',points) 20 | //shift tab 21 | -------------------------------------------------------------------------------- /JSexercise/Flow control/Even and Odd.js: -------------------------------------------------------------------------------- 1 | showNumbers(10); 2 | function showNumbers(limit){ 3 | for(let i=0;i<=limit;i++){ 4 | if(i%2===0) 5 | console.log(i,'EVEN'); 6 | else 7 | console.log(i,'Odd'); 8 | //const message=(i%2===0)? 'EVEN':'ODD'; 9 | //console.log(i,message); 10 | } 11 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Fizz Buzz.js: -------------------------------------------------------------------------------- 1 | //Divisible by 3 =>Fizz; 2 | //Divisible by 5 =>Buzz; 3 | //Divisible by both 3 and 5 =>FizzBuzz; 4 | //Not divisible by 3 or 5 =>input; 5 | //Not a number =>'Not a number' 6 | 7 | const output=fizzBuzz(false); 8 | console.log(output); 9 | function fizzBuzz(input){ 10 | if(typeof input!=='number') 11 | return 'Not a number';//NaN 12 | if((input%3===0)&&(input%5===0)) 13 | return 'FizzBuzz'; 14 | if(input%3===0) 15 | return 'Fizz'; 16 | if(input%5===0) 17 | return 'Buzz'; 18 | 19 | return input; 20 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Grade.js: -------------------------------------------------------------------------------- 1 | const marks=[80,80,50]; 2 | //1-59:F 3 | //60-69:D 4 | //70-79:C 5 | //80-89:B 6 | //90-100:A 7 | console.log(calculateGrade(marks)); 8 | function calculateGrade(marks){ 9 | const averge=calculateAverage(marks); 10 | if(average<60) return 'F'; 11 | if(averge<70) return 'D'; 12 | if(average<80) return 'C'; 13 | if(average<90) return 'B'; 14 | // if(average<100) return 'A' 15 | return 'A' 16 | } 17 | function calculateAverage(array){ 18 | let sum=0; 19 | for(let value of array) 20 | sum+=value; 21 | return sum/array.length; 22 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Landspace and portrait.js: -------------------------------------------------------------------------------- 1 | console.log(isLandscape(800,600)); 2 | function isLandscape(width,height){ 3 | //if(width>height) return true; 4 | // return false; 5 | // (width>height)?true:false all above is ugly 6 | return (width>height) 7 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Max of Two numbers.js: -------------------------------------------------------------------------------- 1 | let number=max(5,10); 2 | console.log(number); 3 | function max(a,b){ 4 | return(a>b)?a:b; 5 | //if(a>b) return a; 6 | //else return b; 7 | } -------------------------------------------------------------------------------- /JSexercise/Flow control/Prime Numbers.js: -------------------------------------------------------------------------------- 1 | showPrime(10); 2 | //Prime(whose factor are only 1 and itself) 3 | //Composite 4 | 5 | function showPrimes(limit){ 6 | for(let number=2;number<=limit;number++){ 7 | if(isPrime) console.log(number); 8 | } 9 | } 10 | function isPrime(number){ 11 | for(let factor=2;factormax) 9 | max=array[i]; 10 | 11 | return max; 12 | //------------------------------------- 13 | return arry.reduce((a,b)=>(a>b)?a:b); 14 | } -------------------------------------------------------------------------------- /JSexercise/Includes.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | console.log(includes(numbers,-1)); 3 | function includes(array,searchElement){ 4 | for(let element of array) 5 | if(element===searchElement) 6 | return true; 7 | return false; 8 | } 9 | -------------------------------------------------------------------------------- /JSexercise/Landspace and portrait.js: -------------------------------------------------------------------------------- 1 | console.log(isLandscape(800,600)); 2 | function isLandscape(width,height){ 3 | //if(width>height) return true; 4 | // return false; 5 | // (width>height)?true:false all above is ugly 6 | return (width>height) 7 | } -------------------------------------------------------------------------------- /JSexercise/Moving Element.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | const output=move(numbers,0,0);//object,loaction,offset:positive right negative left 3 | console.log(output); 4 | console.error('Invaild offset') 5 | function move(array,index,offset){ 6 | const position=index+offset; 7 | if(position>=array.length||position<0){ 8 | console.error('Invaild offset'); 9 | return; 10 | } 11 | const output=[...array]; 12 | const element=output.splice(index,1)[0]; 13 | output.splice(index+offset,0,element);//(startlocation,detele numbers,add numbers) 14 | //return array 15 | return output; 16 | } -------------------------------------------------------------------------------- /JSexercise/Object exercise/Address Oject.js: -------------------------------------------------------------------------------- 1 | //street city zipCode showAddress(address) 2 | let address={ 3 | street:'a', 4 | city:'b', 5 | zipCode:'c' 6 | }; 7 | function showAddress(address){ 8 | for(let key in address) 9 | console.log(key,address[key]) 10 | } 11 | showAddress(address) -------------------------------------------------------------------------------- /JSexercise/Object exercise/Blog Object.js: -------------------------------------------------------------------------------- 1 | //tittle 2 | //body 3 | //anthor 4 | //views 5 | //comments 6 | // (author,body) 7 | // isLive 8 | let post={ 9 | tittle:'a', 10 | body:'c', 11 | anthor:'c', 12 | view:10, 13 | comments:[ 14 | {author:'a',body:'b'}, 15 | {author:'c',body:'d'} 16 | 17 | ], 18 | isLive:true 19 | }; 20 | console.log(post); -------------------------------------------------------------------------------- /JSexercise/Object exercise/Constructor Functions.js: -------------------------------------------------------------------------------- 1 | let post={ 2 | title:'a', 3 | body:'b', 4 | anthor:'c', 5 | views:10, 6 | comments:[ 7 | {anthor:'a',body:"b"}, 8 | {anthor:'c',body:'d'} 9 | ], 10 | isLive:true 11 | }; 12 | //----------------------------------------- 13 | let post=new Post('a','b','c') 14 | console.log(post); 15 | function Post(title,body,author,){ 16 | this.title=title; 17 | this.body=body; 18 | this.anthor=anthor; 19 | this.views=0; 20 | this.comments=[]; 21 | this.isLive=false; 22 | } -------------------------------------------------------------------------------- /JSexercise/Object exercise/Factory and Constructor.js: -------------------------------------------------------------------------------- 1 | let address={ 2 | street:'a', 3 | city:'b', 4 | zipCode:'c' 5 | } 6 | //factory 7 | let address=createAddress('a','b','c'); 8 | console.log(address); 9 | function createAddress(street,city,zipCode){ 10 | return { 11 | street, 12 | city, 13 | zipCode 14 | } 15 | } 16 | createAddress(address); 17 | //constructor 18 | let address=new Address('a','b','c'); 19 | console.log(address) 20 | function Address(street,city,zipCode){ 21 | this.street=street, 22 | this.city=city, 23 | this.zipCode=zipCode 24 | } 25 | -------------------------------------------------------------------------------- /JSexercise/Object exercise/Object equality.js: -------------------------------------------------------------------------------- 1 | let address1=new Address('a','b','c'); 2 | let address2=new Address('a','b','c');//the address is not as a same address 3 | let address3=address1;//this is a same 4 | console.log(areEqual(address1,address2))//true 5 | console.log(areSame(address1,address2))//false 6 | console.log(areSame(address1,address3))//true 7 | //Constructor Function 8 | function Address(street,city,zipCode){ 9 | this.street=street; 10 | this.city=city; 11 | this.zipCode=zipCode; 12 | } 13 | function areEqual(address1,address2){ 14 | return address1.street===address2.street&& 15 | address1.city===address2.city&& 16 | address1.zipCode===address2.zipCode 17 | 18 | } 19 | function areSame(address1,address2){ 20 | return address1===address2;//compare the address 21 | 22 | } -------------------------------------------------------------------------------- /JSexercise/Object exercise/Price range Object.js: -------------------------------------------------------------------------------- 1 | let priceRange=[ 2 | {label:'$',tooltip:'Inexpensive',minPerPerson:0,maxPerPerson:10}, 3 | {label:'$$',tooltip:'Moderate',minPerPerson:11,maxPerPerson:20}, 4 | {label:'$$$',tooltip:'Expensive',minPerPerson:21,maxPerPerson:50}, 5 | ]; 6 | let restaurants=[ 7 | {averagePerPerson:5} 8 | ] -------------------------------------------------------------------------------- /JSexercise/thi.exercise/async.js: -------------------------------------------------------------------------------- 1 | var items=[1,2,3,4,5,6]; 2 | var result=[]; 3 | var running=0; 4 | var limit=2; 5 | function async(arg,callback){ 6 | console.log('参数为'+arg+',1秒后返回结果'); 7 | setTimeout(function(){callback(arg*2);},1000); 8 | } 9 | function final(value){ 10 | console.log('完成',value); 11 | } 12 | function launcher(){ 13 | while(running0){ 14 | var item=items.shift(); 15 | async(item,function(result){ 16 | results.push(result); 17 | running--; 18 | if(items.length>0){ 19 | lancher(); 20 | }else if(running==0){ 21 | final(results) 22 | } 23 | }) 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /JSexercise/thi.exercise/this execrise2.js: -------------------------------------------------------------------------------- 1 | //circle.radius=2; 2 | //console.log(circle.area); 3 | const circle={ 4 | radius:1, 5 | get area(){ 6 | return Math.PI*this.radius*this.radius 7 | 8 | } 9 | } 10 | console.log(circle.area);//12.266...... 11 | // circle.area=20=>20 12 | // circle.are//12/5666.... 13 | -------------------------------------------------------------------------------- /JSexercise/thi.exercise/this exercise1.js: -------------------------------------------------------------------------------- 1 | // sum([1,2,3,4])=>10; 2 | Array.isArray() 3 | // function sum(...items){ 4 | // if(items.isArray) 5 | // for(let i;ia+b) 13 | } 14 | //----------------- 15 | console.log(sum([1,2,3,4])); 16 | function sum(...items){ 17 | //console.log(items) ...exchange the all args to Array,as a another Array; 18 | if(items.length===1&&Array.isArray(items[0])) 19 | items=[...items[0]]//get a int Array 20 | return items.reduce((a,b)=>a+b) 21 | } -------------------------------------------------------------------------------- /JSexercise/thi.exercise/this.execrise3.js: -------------------------------------------------------------------------------- 1 | try{ 2 | const numbers=[1,2,3,4]; 3 | const count=countOccurrences(numbers,1); 4 | console.log(count); 5 | } 6 | catch(e){ 7 | console.log(e.message); 8 | } 9 | function countOccurrences(array,searchElement){ 10 | if(!Array.isArray(array)) 11 | throw new Error('Invalid array') 12 | return array.reduce((accumulator,current)=>{ 13 | const occurence=(current===searchElement)?1:0; 14 | return accumulator+occurence; 15 | },0) 16 | } -------------------------------------------------------------------------------- /JSreview/Adding Element .js: -------------------------------------------------------------------------------- 1 | const number=[3,4]; 2 | 3 | // End 4 | numbers.push(5,6); 5 | // Begining 6 | numbers.unshift(1,2); 7 | // Middle 8 | numbers.splice(2,0,'a','b'); 9 | console.log(numbers) -------------------------------------------------------------------------------- /JSreview/Arguments.js: -------------------------------------------------------------------------------- 1 | function sum(a,b){ 2 | return a+b; 3 | } 4 | console.log(sum(1,2)); 5 | //console.log(sum(1))//NaN 6 | //console.log(sum())//NaN 7 | function sum(a,b){ 8 | console.log(arguments); 9 | return a+b; 10 | } 11 | console.log(sum(1,2,3,4,5)); 12 | // 13 | function sum(){ 14 | let total=0; 15 | for(let value of arguments) 16 | total+=value; 17 | console.log(arguments) 18 | } 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /JSreview/Change this.js: -------------------------------------------------------------------------------- 1 | const videro={ 2 | title:'a', 3 | tags:['a','b','c'], 4 | showTags(){ 5 | this.tags.forEach(function(){ 6 | console.log(this.title,tag) 7 | },this) 8 | } 9 | } 10 | video.showTags(); 11 | //---------------------------------------------------------- 12 | const videro={ 13 | title:'a', 14 | tags:['a','b','c'], 15 | showTags(){ 16 | const self=this; 17 | this.tags.forEach(function(){ 18 | console.log(self.title,tag) 19 | },this) 20 | } 21 | } 22 | //------------------------------------------------------------ 23 | function playVieo(){ 24 | console.log(this); 25 | } 26 | playVieo.call({name:'Mosh'},1,2);//{name:'Mosh'} 27 | playVieo.apply({name:'Mosh'},[1,2]);//{name:'Mosh'} 28 | const fn=playVideo.bind({name:'Mosh'}); 29 | fn(); 30 | //===playVideo.bind({name:'Mosh'})() 31 | playVieo()//windows 32 | //---------------------------------------------------------- 33 | const videro={ 34 | title:'a', 35 | tags:['a','b','c'], 36 | showTags(){ 37 | 38 | this.tags.forEach(function(){ 39 | console.log(this.title,tag) 40 | }.bind(this)) 41 | } 42 | } 43 | // the arrow function inherit this 44 | const videro={ 45 | title:'a', 46 | tags:['a','b','c'], 47 | showTags(){ 48 | 49 | this.tags.forEach(tag=>{ 50 | console.log(this.title,tag) 51 | }) 52 | } 53 | } -------------------------------------------------------------------------------- /JSreview/Combining Slicing.js: -------------------------------------------------------------------------------- 1 | const first=[1,2,3,4]; 2 | const first2=[{id:1}] 3 | const second=[4,5,6]; 4 | const combined=first.concat(second);//[1,2,3,4,5,6] 5 | const combined2=first.concat(second);//copy reference 6 | first[0].id=10;//[{id:10},4,5,6] 7 | const slice=combined.slice(2,4)//[3,4] 8 | const slice=combined.slice(2)//[3,4,5,6] 9 | const slice=combined.slice()//[1,2,3,4,5,6] 10 | console.log(combined); 11 | -------------------------------------------------------------------------------- /JSreview/Date.js: -------------------------------------------------------------------------------- 1 | const now= new Date(); 2 | const date1=new Date('May 11 2018 09:00'); 3 | const date2=new Date(2018,4,11,9); 4 | now.setFullYear(2017); 5 | now.toDateString() 6 | now.toTimeString(); 7 | now.toISOString()// applicate on Web server method return the time -------------------------------------------------------------------------------- /JSreview/Default Parameter.js: -------------------------------------------------------------------------------- 1 | function interest(principal,rate,years){ 2 | rate=rate||3.5; 3 | years=years||5; 4 | return principal*rate/100*years; 5 | } 6 | console.log(interest(10000,3.5,5)) 7 | // in ES6 8 | function interest(principal,rate=3.5,years=5){ 9 | return principal*rate/100*years; 10 | } 11 | console.log(interest(10000,3.5,5)) 12 | // if we not defined a years 13 | function interest(principal,rate=3.5,years){ 14 | return principal*rate/100*years; 15 | } 16 | console.log(interest(10000))//NaN years=undefined 17 | -------------------------------------------------------------------------------- /JSreview/Emptying Element.js: -------------------------------------------------------------------------------- 1 | let numbers=[1,2,3,4]; 2 | let another=numbers; 3 | //Solution1 4 | //numbers=[]; 5 | console.log(numbers);//[] 6 | console.log(another);//[1,2,3,4] 7 | //Solution2 8 | numbers.length=0; 9 | console.log(numbers);//[] 10 | console.log(another);//[] 11 | //Solution3 12 | numbers.splice(0,numbers.length); 13 | console.log(numbers);//[] 14 | console.log(another);//[] 15 | //Solution4 16 | while(numbers.length>0) 17 | numbers.pop(); 18 | console.log(numbers);//[] 19 | console.log(another);//[] 20 | -------------------------------------------------------------------------------- /JSreview/Every and Some.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,-1,2,3]; 2 | const allPositive=number.every(function(value){ 3 | return value===2; 4 | }); 5 | console.log(allPositive) 6 | const atOnePositive=number.some(function(value){ 7 | return value=>0; 8 | }); 9 | console.log(atOnePositive); -------------------------------------------------------------------------------- /JSreview/Filtering.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,-1,2,3]; 2 | const Positive=numbers.filter(function(value){ 3 | return value=>0; 4 | 5 | }) 6 | const Filter=numbers.filter(n=>n>=0); 7 | console.log(Positive) 8 | console.log(Filter) -------------------------------------------------------------------------------- /JSreview/Finding Element.js: -------------------------------------------------------------------------------- 1 | const number=[1,2,3,1,4,5]; 2 | console.log(number.indexOf('1'))//-1 3 | console.log(number.lastIndexOf(1))//3 4 | console.log(number.indexOf(1)!==-1)//true 5 | console.log(number.includes(1));//true 6 | console.log(number.indexOf(1,2))//3 -------------------------------------------------------------------------------- /JSreview/Fingd Array.js: -------------------------------------------------------------------------------- 1 | const courses=[ 2 | {id :1,name:'a'}, 3 | {id :2,name:'b'} 4 | ]; 5 | //console.log(course.includes({id:1,name:'a'})); false 6 | console.log(courses.find(function(course){ 7 | return course.name==='a'; 8 | }))// return {id:1,name:'a'} 9 | const course=courses.find(function(course){ 10 | return course.name==='a'}) 11 | console.log(course)//{id:1,name:'a'} 12 | const course=courses.find(function(course){ 13 | return course.name==='xyz'}) 14 | console.log(course)//undefined 15 | //arrow function 16 | const course=courses.find(course=>course.name==='a'); 17 | console.log(course) -------------------------------------------------------------------------------- /JSreview/Function.js: -------------------------------------------------------------------------------- 1 | //Function Declaration 2 | function work(){ 3 | console.log('work') 4 | } 5 | //Function Expression 6 | let run=function(){ 7 | console.log('run') 8 | }; 9 | let move=run; 10 | run(); 11 | move() //the same for above 12 | // let x=1; -------------------------------------------------------------------------------- /JSreview/Gatter and Setter.js: -------------------------------------------------------------------------------- 1 | const person={ 2 | firstName:'Mosh', 3 | lastName:'Hamedani', 4 | //fullName:function(){} ES5 5 | get fullName(){ 6 | return `${firstName}+${lastName}` 7 | },//ES6 8 | set fullName(value){ 9 | const parts=value.split(' '); 10 | this.firstName=parts[0]; 11 | this.lastName=parts[1]; 12 | } 13 | }; 14 | // person.fullName='John Smith'; 15 | //getter=>access properies 16 | //setter=>change (mutate) them 17 | console.log(person.fullName()) 18 | //console.log(person.fullName) 19 | -------------------------------------------------------------------------------- /JSreview/Hosting.js: -------------------------------------------------------------------------------- 1 | work(); 2 | //Function Declaration 3 | function work(){ 4 | console.log('work') 5 | } 6 | //Function Expression 7 | run()// run is not defined 8 | const run=function(){ 9 | console.log('run') 10 | }; 11 | 12 | -------------------------------------------------------------------------------- /JSreview/Iterating forEach.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3]; 2 | for(let numbers of numbers) 3 | console.log(number); 4 | numbers.forEach((number,index)=>console.log(index,number)) -------------------------------------------------------------------------------- /JSreview/Joining Array.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3]; 2 | const joined=numbers.join(','); 3 | console.log(joined); 4 | const message='This is my first message'; 5 | const parts=message.split(' ') 6 | console.log(parts)//["This"]...and son； 7 | const combined=parts.join('-') 8 | console.log(combined); 9 | //skills:use to create automatically URL slug address by page keywords; -------------------------------------------------------------------------------- /JSreview/Local VS Gobal.js: -------------------------------------------------------------------------------- 1 | function star(){ 2 | const message='h1'; 3 | if(true){ 4 | const another='bye'; 5 | } 6 | console.log(another) 7 | } 8 | console.log(message); 9 | //we can't access this const 10 | star()//Error 11 | function start(){ 12 | const message='h1'; 13 | if(true){ 14 | const another='bye'; 15 | } 16 | for(let i=0;i<5;i++){ 17 | console.log(i) 18 | } 19 | //console.log(i) Error 20 | } 21 | start() -------------------------------------------------------------------------------- /JSreview/Maping.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,-1,2,3]; 2 | const filtered=numbers.filter(n=>n>=n); 3 | const item=filtered.map(n=>'
  • '+n+'
  • '); 4 | const html='
      '+item.join('')+'
    ';//'' delete , 5 | console.log(filtered); 6 | console.log(html) 7 | const obj=filtered.map(n=>({value:n}));//put {} Object to () 8 | //The last formotion chaining 9 | const numbers=[1,-1,2,3]; 10 | const items=numbers 11 | .filter(n=>n>=0) 12 | .map(n=>({value:n})) 13 | .filter(obj=>obj.value>1); 14 | console.log(item) -------------------------------------------------------------------------------- /JSreview/Reducing.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,-1,2,3]; 2 | let sum=0; 3 | // for(let n of numbers) 4 | // sum+=n; 5 | const sum=numbers.reduce( 6 | (accumulator,currentValue)=> 7 | accumulator +currentValue) 8 | console.log(sum)//5 -------------------------------------------------------------------------------- /JSreview/Removing Element.js: -------------------------------------------------------------------------------- 1 | const numbers=[1,2,3,4]; 2 | 3 | //End 4 | numbers.push(); 5 | const last=numbers.pop(); 6 | //Begining 7 | const first=numbers.shift(); 8 | console.log(first); 9 | numbers.unshift(); 10 | numbers.shift(); 11 | //Middle 12 | numbers.splice(2,0,'a')// add 'a' 13 | numbers.splice(2,1) // delete one -------------------------------------------------------------------------------- /JSreview/Sort Reverse.js: -------------------------------------------------------------------------------- 1 | const course=[ 2 | {id:1,name:'Node.js'}, 3 | {id:2,name:'JavaScript'} 4 | ]; 5 | course.sort(function(a,b){ 6 | //a-1 7 | //a>b=>1 8 | //a=b=>0 9 | const nameA=a.name.toLowerCase() 10 | const nameB=b.name.toLowerCase() 11 | if(nameAnameB) return 1; 13 | return 0 14 | }); 15 | console.log(course); 16 | -------------------------------------------------------------------------------- /JSreview/String method.js: -------------------------------------------------------------------------------- 1 | //String Primitive; 2 | const message='h1'; 3 | //String object 4 | const message='This is my first message' 5 | message.includes('my')// true; 6 | message.endsWith('my'); 7 | message.startsWith('my'); 8 | message.indexOf('my') //8 9 | message.replace('first','second'); 10 | message.toUpperCase(); 11 | message.toLowerCase(); 12 | message.trim()//delete start and end space; 13 | message.trimLeft(); 14 | message.trimRight(); 15 | message.split(' ')// ["This"]... and so on 16 | const message='This is \n my \'first message\'' 17 | const another=new String('h1') -------------------------------------------------------------------------------- /JSreview/Template String.js: -------------------------------------------------------------------------------- 1 | const message='This is my\n first message'; 2 | const message=`This my 3 | 'first' message`; 4 | const name='John' 5 | const another= 6 | `Hi ${name} ${2+3}, 7 | Thak you for joining my mailing list, 8 | 9 | 10 | Regards, 11 | Mosh` -------------------------------------------------------------------------------- /JSreview/The Spread Operator.js: -------------------------------------------------------------------------------- 1 | const first=[1,2,3]; 2 | const second=[4,5,6]; 3 | const combined=[...first,'a',...second,'b']; 4 | const copy=[...combined] -------------------------------------------------------------------------------- /JSreview/The rest Operator.js: -------------------------------------------------------------------------------- 1 | function sum(...args){ 2 | let total=0; 3 | return args.reduce((a,b)=>a+b) 4 | } 5 | console.log(sum(1,2,3,4));//10 6 | //The simple 7 | function sum(discount,...price){ 8 | const total=prices.reduce((a,b)=>a+b); 9 | return total*(1-discount); 10 | } 11 | console.log(sum(0.1,20,30)); -------------------------------------------------------------------------------- /JSreview/The this keyword.js: -------------------------------------------------------------------------------- 1 | const video={ 2 | title:'a', 3 | play(){ 4 | console.log(this); 5 | } 6 | }; 7 | video()// {title:'a',play(){ console.log(this);} 8 | function playVideo(){ 9 | console.log(this); 10 | } 11 | playVideo(); 12 | // windows or global regular function 13 | // if we use the constructor funtion 14 | function Video(title){ 15 | this.title=title; 16 | console.log(this); 17 | } 18 | const v= new Video('b');//Video{title:'b'} create a empity Object 19 | //we create the consturctor function,is equal to create a empity 20 | //Object,then,this point to Object 21 | //----------------------------- 22 | const video={ 23 | title:'a', 24 | tags:['a','b','c'], 25 | showTags(){ 26 | this.tags.forEach(function(tag){ 27 | console.log(this,tag); 28 | });// this function is regular function,not callbackfunction point to window 29 | //is not in method in this Object video 30 | // only method is showTags,global Object exerting this function 31 | } 32 | }; 33 | video.showTags(); 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | const video={ 43 | title:'a', 44 | tags:['a','b','c'], 45 | showTags(){ 46 | this.tags.forEach(function(tag){ 47 | console.log(this.title,tag); 48 | },this);//give forEach method second arg a 'this' 49 | } 50 | }; 51 | video.showTags(); -------------------------------------------------------------------------------- /JSreview/Try and Catch.js: -------------------------------------------------------------------------------- 1 | const person={ 2 | firstName:'Mosh', 3 | lastName:'Hamedani', 4 | set fullName(value){ 5 | if(typeof value!=='string')return; 6 | const parts=value.split(' '); 7 | this.firstName=parts[0]; 8 | this.lastName=parts[1]; 9 | } 10 | }; 11 | person.fullName=null; // not take effect 12 | console.log(person); 13 | //---------------------------------------- 14 | const person={ 15 | firstName:'Mosh', 16 | lastName:'Hamedani', 17 | set fullName(value){ 18 | if(typeof value!=='string') 19 | //const e=new Erro(); 20 | //throw e;another way to write; easily to understand 21 | throw new Error('Value is not a string'); 22 | const parts=value.split(' '); 23 | if(parts.length!==2); 24 | throw new Error('Enter a first and last name') 25 | this.firstName=parts[0]; 26 | this.lastName=parts[1]; 27 | } 28 | }; 29 | try{ 30 | person.fullName=null; 31 | }catch(e){ 32 | alert(e) 33 | } -------------------------------------------------------------------------------- /JSreview/adding&moving.js: -------------------------------------------------------------------------------- 1 | const circle={ 2 | radius:1 3 | }; 4 | circle.color='yellow'; 5 | circle.length='3.14' 6 | circle.draw=function(){}; 7 | delete circle.color; 8 | delete circle.draw; 9 | console.log(circle); -------------------------------------------------------------------------------- /JSreview/cloning Object.js: -------------------------------------------------------------------------------- 1 | const circle={ 2 | radius:1, 3 | draw(){ 4 | console.log('draw'); 5 | } 6 | }; 7 | // const another={}; 8 | // for(let key in circle) 9 | // another[key]=circle[key]; 10 | //const another=Object.assign({},circle); 11 | 12 | // const another=Object.assign({ 13 | // color:'red' 14 | // },circle); 15 | // The most simply ways is next 16 | const another={...circle}; 17 | console.log(another); 18 | -------------------------------------------------------------------------------- /JSreview/constructor.js: -------------------------------------------------------------------------------- 1 | function createCircle(radius){ 2 | return{ 3 | radius, 4 | draw(){ 5 | console.log('draw') 6 | }, 7 | }; 8 | } 9 | const circle=createCircle(1); 10 | function Circle(radius){ 11 | this.radius=radius, 12 | this.draw=function(){ 13 | console.log('draw') 14 | } 15 | } 16 | const another=new Circle(1); 17 | // String() '' "" `` simple than Stirng() to create Object; 18 | //Boolean() true false 19 | //Number() 1,2,3 -------------------------------------------------------------------------------- /JSreview/factory&constructor.js: -------------------------------------------------------------------------------- 1 | function createCircle(radius){ 2 | return{ 3 | draw(){ 4 | console.log('draw'); 5 | } 6 | }; 7 | } 8 | const myCircle=createCircle(1); 9 | function Circle(radius){ 10 | this.radius=radius, 11 | this.draw=function(){ 12 | console.log('draw') 13 | } 14 | } 15 | const circle=new Circle(1); -------------------------------------------------------------------------------- /JSreview/function is Object.js: -------------------------------------------------------------------------------- 1 | function Circle(radius){ 2 | this.radius=radius, 3 | this.draw=function(){ 4 | console.log('draw'); 5 | } 6 | } 7 | // const Circle1=new Function('radius',` 8 | // this.radius=radius, 9 | // this.draw=function(){ 10 | // console.log('draw'); 11 | // }`) 12 | // const circle=new Circle1(1); 13 | Circle.call({},1); 14 | Circle.apply({},[1,2,3]); 15 | // The same method to next new XX() 16 | const another=new Circle(1); -------------------------------------------------------------------------------- /JSreview/search attribute.js: -------------------------------------------------------------------------------- 1 | const circle={ 2 | radius:1, 3 | draw(){ 4 | console.log('draw'); 5 | } 6 | }; 7 | for(let key in circle) 8 | console.log(key,circle[key]) 9 | //radius:1;draw f draw(){ console.log('draw')}; 10 | for(let key of circle) 11 | console.log(key); 12 | // circle is not iterable only use to Array or Map 13 | // conclusion:Object is not iterable; 14 | for(let key of Object.keys(circle)); 15 | console.log(key); 16 | // radius,circle 17 | for(let key of Object.entry(circle)); 18 | console.log(entry); 19 | // ["radius",1] ["draw",f] 20 | for ('radius' in circle) 21 | console.log('yes') -------------------------------------------------------------------------------- /JSreview/value&reference.js: -------------------------------------------------------------------------------- 1 | let x=10; 2 | let y=x; 3 | x=20; 4 | //x=20;y=10 5 | let x={value:10}; 6 | let y=x; 7 | x.value=20; 8 | // x=20;y=20; 9 | let number=10; 10 | function increase(number){ 11 | number++ 12 | } 13 | console.log(number); 14 | // number 10 15 | let obj={value:10}; 16 | function increase(obj){ 17 | obj.value++ 18 | } 19 | increase(obj) 20 | console.log(obj.value) 21 | // obj 11 we deal with the same address of obj(function point to address) 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mosh-note 2 | from the https://www.bilibili.com/video/av46230772/?p=88&t=277 3 | --------------------------------------------------------------- 4 | practice note answer and record 5 | --------------------------------------------------------------- 6 | provide to review &&practice by oneself 7 | --------------------------------------------------------------- 8 | if you think this record is Ok,just click a star 9 | ------------------------------------------------------- 10 | welcome to issue me,find the problem in note 11 | --------------------------------------------- 12 | made By Ryongyi learning note 13 | ------------------------------------------------------- 14 | see you next time 15 | --------------------------------------------------------------- 16 | --------------------------------------------------------------------------------