- null: giá trị null
- undefined: chưa được khai báo
- boolean: kiểu logic
- number: kiểu số, bao gồm số nguyên và số thực
- string: kiểu chuỗi
- length trả về số độ dài của chuỗi. Bao gồm cả dấu 'cách'.
- indexOf() trả về vị trí đầu tiên của một chuỗi trong một chuỗi lớn. Nếu không tìm thấy trả về
-1
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate"); //7
- lastIndexOf() trả về vị trí cuối cùng của một chuỗi trong một chuỗi lớn. Nếu không tìm thấy trả về
-1
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate"); //21
- slice() cắt chuỗi theo vị trí. Nếu không có vị trí cuối, nó sẽ cắt từ vị trí đầu đến hết. Ví dụ
var str = "Apple, Banana, Kiwi";
var res = str.slice(7, 13); //Banana
- substr() giống như slide() nhưng thay vì cắt từ đến đến vị trí thứ 2 thì nó sẽ cắt từ đầu và số độ dài cần cắt.
- replace() thay thế một chuỗi bằng một chuỗi. str.replace('Chuỗi cần thay thế', 'Thay thế bằng');
- split() chuyển chuỗi thành mảng với kí tự tùy chọn. Ví dụ
var str = "Hel";
var arr = str.split(""); // ['H','e','l']
- toUpperCase() và toLowerCase(): chuyển chuỗi thành chữ hoa và chữ thường.
- join() convert array thành chuỗi, ngăn cách bởi ký tự tùy chọn. Ví dụ:
var fruits = ["Banana", "Orange"];
fruits.join(" * "); // Banana * Orange
- pop(): xóa phần tử cuối cùng của mảng. Trả về phần tử đó.
- shift(): giống với pop() nhưng là phần tử đầu tiên;
- unshift() thêm một phần tử vào đầu mảng.
- concat() gộp hai mảng thành một mảng mới. Ví dụ
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); ["Emil", "Tobias", "Linus", "Cecilie", "Lone"]
- push(): thêm phần tử vào cuối mảng. Trả về length
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5
- splice(vị trí đầu, số phần tử): xóa phần tử trong mảng
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits
- slice(vị trí bắt đầu, vị trí cuối): cắt một mảng trả về mảng mới mà không làm mảng cũ thay đổi.
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); //return "Orange", "Lemon"
- filter(); Lọc những phần tử với điều kiện. Ví dụ
var array = [1,2,3,4,5,6];
var filter = array.filter(function(elm, index){
return elm > 3; // [4,5,6]
});
- map() Thao tác với các dữ liệu trong mảng, trả về 1 array mới.
var array = [
{
'name': 'Tiến'
},
{
'name': 'Nguyễn'
},
{
'name': 'Văn'
}];
var names = array.map(function(elm, index){
return elm.name; //["Tiến", "Nguyễn", "Văn"]
});
Ví dụ khác:
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]- Khai báo một object Có 3 cách khai báo:
Dùng hàm khởi tạo
var Person = function(name, age){
this.name = name;
this.age = age;
this.hello = function(){
return 'Hello '+ this.name + this.age;
}
}
var xxx = new Person('Tieesn', 18);
document.getElementById('test').innerHTML = xxx.hello();Dùng new Object()
var Person = new Object();
Person.name = 'Tiến';
Person.age = 18;
Person.hello = function(){
return 'Hello '+ Person.name + ' tuổi: ' + Person.age;
};
document.getElementById('test').innerHTML = Person.hello();Dùng {}
var Person = {
name: '',
age: '',
hello: function(){
return 'Hello '+ this.name + this.age;
}
}
Person.name = 'Tiến';
Person.age = 18;
document.getElementById('test').innerHTML = Person.hello();- Prototype là gì
- Để khai báo thêm một thuộc tính hoặc một function cho một constructor function ta phải dùng prototype. Nếu không có sẽ báo underfined
var Person = function(name, age){
this.name = name;
this.age = age;
this.hello = function(){
return 'Hello '+ this.name + this.age;
}
}
Person.prototype.fb = 'XX';
var xxx = new Person('Tieesn', 18);
document.getElementById('test').innerHTML = xxx.fb;- Để thừa kế một Object ta phải dùng prototype
var Person = function(name, age){
this.name = name;
this.age = age;
this.hello = function(){
return 'Hello '+ this.name + this.age;
}
}
var Deverloper = function(){
}
Deverloper.prototype = new Person('Tiến', 18);
xxx = new Deverloper();
document.getElementById('test').innerHTML = xxx.hello();-
Hàm xử lý Object
Object.assign()có hai tác dụng- Clone một Object khác
var Person = { name = 'Tiến' }; var clone = Object.assign({}, Person);- Gộp 2 object, giá trị trùng tên sẽ bị Object sau ghi đè
var Person = { name : 'Tiến', age: 16 } var Super = { age: 18 } var clone = Object.assign(Person, Super); // return { name: 'Tiến', age: 18 }- Object.create(): tạo ra một Object mới.
const person = { say: function () { console.log('Hello'); } }; const me = Object.create(person); me.say(); is a property set on "me", but not on "person"Ví dụ thông thường mọi kiểu dữ liệu đều là Object. Vì vậy
let obj = {} Object.prototype.sayHello = () => {console.log("Hello")}; obj.sayHello() // return "Hello"Khi dùng Object.create(null);
let obj2 = Object.create(null) Object.prototype.sayILoveYou = () => {console.log("I love you")} obj2.sayILoveYou() // Uncaught TypeError: obj2.sayILoveYou is not a function- hasOwnProperty(): trả về true nếu object chứa thuộc tính đó và false nếu ngược lại
var obj = { name: 'Tiến' } obj.hasOwnProperty('name'); // true obj.hasOwnProperty('age'); // false -
Vòng lặp / Rẽ nhánh
- Rẽ nhánh:
switch (expression) {
case n1:
//.. thi hành nếu điều kiện bằng n1
break;
case n2:
//.. thi hành nếu điều kiện bằng n2
break;
- Vòng lặp:
for(){}
Vòng lặp while sẽ check điều kiện trước. Nên code bên dưới sẽ ko chạy.
var x = false;
while(x){
console.log('x');
}
Vòng lặp do while sẽ chạy rồi mới check điều kiện. Nên sẽ chạy ít nhất 1 lần.
do{}
while();
- Closure Closure là một hàm được tạo ra từ bên trong một hàm khác (hàm cha), nó có thể sử dụng các biến toàn cục, biến cục bộ của hàm cha và biến cục bộ của chính nó.
Ví dụ cơ bản:
function Student(name){
return {
setName: function(newName){
name = newName;
},
getName: function(){
return name;
}
}
}
var Tien = Student('Tien');
Tien.setName('Nguyễn');
Tien.getName() // 'Nguyễn'
- Promise
Promise sinh ra để xử lý kết quả của một hành động cụ thể, kết quả của mỗi hành động sẽ là thành công hoặc thất bại và Promise sẽ giúp chúng ta giải quyết câu hỏi "Nếu thành công thì làm gì? Nếu thất bại thì làm gì?". Cả hai câu hỏi này ta gọi là một hành động gọi lại (callback action).
// Tạo một promise, trong đó resolve sẽ xử lý khi thành công và reject sẽ là hàm xử lý khi thất bại.
var promise = new Promise(function(resolve, reject){
var http = new XMLHttpRequest();
http.open("GET", "http://api.icndb.com/jokes/random");
http.onload = function(){
if (http.status == 200) {
// Nếu status là 200 thì gán dữ liệu lấy về được vào hàm resolve();
resolve(http.response);
} else {
// Nếu status khác 200 thì gán lỗi vào hàm reject();
reject('Lỗi khi lấy dữ liệu!!!');
}
}
http.send();
});
promise.then(function(e){
var content = document.getElementById('content');
var data = JSON.parse(e);
content.innerHTML = data.value.joke;
}).catch(function(error){
console.log(error);
});
ES (ECMAScript) là một ngôn ngữ được chuẩn hóa bởi tổ chức ECMA và được giám sát bởi hội đồng TC39. Và Javascript là cài đặt cụ thể của chuẩn ECMAScript này và trở thành một ngôn ngữ thông dụng trong lập trình web hiện này. ES trải qua rất nhiều phiên bản khác nhau và nó dần được cải tiến để mạnh mẽ và phù hợp hơn. Javascript là cài đặt cụ thể của ES, tuy nhiên nó không gắn liền với một phiên bản ES cụ thể mà có thể bao gồm các phiên bản ES từ cũ đến phiên bản hiện tại. ES5 là phiên bản thứ năm cửa ECMAScript, nó được giới thiệu vào năm 2009. Nó được chúng ta sử dụng nhiều nhất trong nhiều năm để làm chuẩn cài đặt ra Javascript được hỗ trợ hầu hết bởi tất cả các trình duyệt hiện tại. ES5 sử dụng lập trình hàm (Functional Programming) để là tiểu chuẩn cho Javascript, do đó hầu hết hiện này chúng ta vẫn sử dụng Javascript theo cách lập trình hàm là chủ yếu.
ES6 là phiên bản thứ sáu của ECMAScript, nó được ra mặt vào 2015. ES2015 được xem là một bước nhảy lớn của ES5 khi nó được thêm các khái niệm mới, chức năng mới vào cho Javascript. Các tính năng mới giải quyết các vấn đề còn tồn tại và là thách thức của ES5. Các tính năng này là tùy chọn vì vậy chúng ta vẫn có thể sử dụng ES5 để lập trình trong ES2015. Dưới đây là là danh sách cụ thể các tính năng của ES6:
- Thêm let: **let tạo ra một biến chỉ có thể truy cập được trong block bao quanh nó, khác với var - tạo ra một biến có phạm vi truy cập xuyên suốt function chứa nó. **
Ví dụ:
Sử dụng var:
function foo() {
var x = 10;
if (true) {
var x = 20; // x ở đây cũng là x ở trên
console.log(x); // in ra 20
}
console.log(x); // vẫn là 20
}
Sử dụng let:
function foo() {
let x = 10;
if (true) {
let x = 20; // x này là x khác rồi đấy
console.log(x); // in ra 20
}
console.log(x); // in ra 10
}
- Khai báo giá trị mặc định cho biến trong function
var link = function(height = 50, color = 'red', url = 'http://azat.co') {
...
}
- Nối dữ liệu vào chuỗi: ES5:
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id
May mắn, trong ES6 chúng ta có thể sử dụng cú pháp mới ${NAME} bên trong chuỗi sử dụng cặp nháy ``:
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`
- Chuỗi nhiều dòng
var string = `Tôi tên là
Tiến
`;
- Xử lý bất đồng bộ bằng Promise
- Kế thừ class dễ dàng như các ngôn ngữ khác
class Model {
constructor(name, age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
}
class Pee extends Model{}
var pee = new Pee('Tiến', 18);
pee.getName(); // "Tiến"
TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules. Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từ ECMAScript. Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên.
- Ưu điểm
-
Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0.
-
Hô trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6).
-
Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ.
-
TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript. Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn.
CoffeeScript được xây dựng dựa trên JavaScript và nó biên dịch thành JavaScript để bạn có thể chạy trên một trình duyệt web hoặc sử dụng với các công nghệ như: Node.js cho các ứng dụng máy chủ.
CoffeeScript giải quyết những điểm yếu chính của JavaScript:
- Cung cấp một cú pháp đơn giản hơn, làm giảm sự rập khuôn, chẳng hạn như các dấu ngoặc () or {} và các dấu , or ;.
- Sử dụng khoảng trắng như là một cách để tổ chức các đoạn mã.
- Cung cấp cú pháp đơn giản để thể hiện các hàm.
- Cung cấp sự thừa kế dựa trên lớp (đó là tùy chọn, nhưng có thể rất có ích khi tiến hành phát triển ứng dụng).