Giter VIP home page Giter VIP logo

js's Introduction

Some Note

ES6

/* ==================== VAR ==================== */

var score = 100;
if (score > 50) {
  var msg = "WIN";
  console.log(msg);
}
console.log(score);
console.log(msg);

/* ==================== LET ==================== */

let score = 100;
let msg = "";
if (score > 50) {
  msg = "WIN";
  console.log(msg);
}
console.log(score);
console.log(msg);

/* ==================== CASE 04 ==================== */

let todoObj = {
  id: 169,
  name: "Play football",
  status: false
};
for (let index in todoObj) {
  console.log(index + ": " + todoObj[index]);
}

/* ==================== 01 Error ==================== */

let student = {
  name: "John",
  courses: ["Android", "PHP", "Java"],
  showInfo: function(){
    this.courses.forEach(function(course){
      console.log(`${this.name} study ${course}`);
    })
  }
}
*/

/* ==================== 02 _this ==================== */

let student = {
  name: "Peter",
  courses: ["Android", "PHP", "Java"],
  showInfo: function(){
    var _this = this;
    this.courses.forEach(function(course){
      console.log(`${_this.name} study ${course}`);
    })
  }
}
*/

/* ==================== 03 bind ==================== */

let student = {
  name: "Ronaldo",
  courses: ["Android", "PHP", "Java"],
  showInfo: function(){
    this.courses.forEach(function(course){
      console.log(`${this.name} study ${course}`);
    }.bind(this))
  }
}
*/

/* ==================== 04 Arrow Function ==================== */

let student = {
  name: "josh",
  courses: ["Android", "PHP", "Java"],
  showInfo: function(){
    this.courses.forEach(course => console.log(`${this.name} study ${course}`))
  }
}

// John study Android
// John study PHP
// John study Java

student.showInfo();


/* ==================== Class ==================== */

class Student {
  constructor(code, name, age){
    this.code = code;
    this.name = name;
    this.age  = age;
  }

  showInfo(){
    return this.code + " - " + this.name + " - " + this.getAge();
  }

  getAge(){
    let today = new Date();
    let year  = today.getFullYear();
    return year - this.age;
  }
}

let studentObj = new Student("SV001", "john", 1992);
console.log(studentObj);
console.log(studentObj.showInfo());


/* ==================== Inheritance ==================== */

class Person {
	constructor(name, code, age) {
		this.name 	= name;
		this.age 	= age;
		this.code 	= code;
	}

	showInfo(){
		console.log(this.name + " - " + this.code + " - " + this.getAge());
	}

	getAge(){
		let today 	= new Date();
		let year 	= today.getFullYear();
		return year - this.age;
	}
}

class Student extends Person {
	constructor(name, code, age, score){
		super(name, code, age);
		this.score 	= score;
	}

	showInfo(){
		super.showInfo();
		console.log(" - " + this.score);
	}
}

let personObj = new Person("john", "132213", 2000);
personObj.showInfo();

let studentObj = new Student("peter", "123", 1998, 80);
studentObj.showInfo();


/* ==================== includes function of array ==================== */
// Comparing with indexOf, includes can check NaN in array
var arr = [1,2,NaN];
arr.includes(NaN) // true
arr.indexOf(NaN) // -1 wrong search


/* ==================== exponentiation operator ==================== */
// instead use Math.pow(7, 2) = 7^2 we can reduce by this line
7**2



/* ==================== ES8 transform Object to Map with Object.entries ==================== */
const cars = {'BMW': 3, 'Tesla': 2};
// instead use ES6
const map1 = new Map();
Object.keys(cars).forEach(key => map1.set(key, cars[keys]));
console.log(map1);

// ES8
const map = new Map(Object.entries(cars));
console.log(map); // {'BMW'=>3, 'Tesla'=>2};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.