+4

ES6 với những ưu điểm tuyệt vời thay thế thư viện Underscore.js

Khi lập trình ứng dụng với Javascrip các nhà phát triển thường phải xem xét lựa chọn cho mình một thư viện *.js chuẩn.

Ra đời từ khá sớm cùng với nhiều tiện ích Underscore.js đã được nhiều lập trình viên yêu thích và tín dùng.

Tuy nhiên, khi dự án ở vào thời điểm cần bảo trì hoặc cấu trúc lại các mã code rườm rà thì Underscore sẽ gây ra cho bạn không ít những khó khăn.

ES2015 (ES6) được phát triển và đóng gói một loạt các tính năng mới, khiến các đoạn mã trừu tượng, rườm rà trở lên dễ ngắn gọn và dễ hiểu với Babel. Những tính năng này làm cho một số chức năng trước kia cần cho thư viện tiện ích trở lên lỗi thời.

Phiên bản ES6 được hỗ trợ bởi tất cả các trình duyệt hiện nay và Node.js. ES6 có thể được biên dịch tới ES5 với Babel. Babel có thể dễ dàng thêm vào hầu như tất cả các môi trường phát triển JavaScript hiện nay hoặc để sử dụng với móc yêu cầu trên Node.js

Những ví dụ minh họa một số điều ES5.1, ES2015 và ES2016 đã được thực hiện dễ dàng mà bạn có thể không cần một thư viện tiện ích nữa.

Arrays

  • Iterate

  • Underscore

	_.each(array, iteratee)

	- ES5.1 :
	- ```JavaScript
	 array.forEach(iteratee)

- **Map**

 - Underscore
```JavaScript

	_.map(array, iteratee)

	- ES5.1 :
	- ```JavaScript
	 array.map(iteratee)

- **Kiểm tra tất cả các phần tử trong mảng thông qua một giá trị**

 - Underscore

```JavaScript
	_.every(array, predicate)

	- ES5.1 :
	- ```JavaScript
	 array.every(predicate)

- **Kiểm tra một vài phần tử trong mảng thông qua một giá trị**

 - Underscore
```JavaScript

	_.some(array, predicate)

	- ES5.1 :
	- ```JavaScript
	 array.some(predicate)

- **Tìm một giá trị trong mảng**

 - Underscore

```JavaScript
	_.find(array, predicate)

	- ES2015 :
	- ```JavaScript
	 array.find(predicate)

- ** Lấy một phần từ mỗi phần tử trong mảng**

 - Underscore
```JavaScript

	_.pluck(array, propertyName)

	- ES2015 :
	- ```JavaScript
	 array.map(value => value[propertyName])
- ** Kiểm tra nếu mảng chỉ có một phần tử**

 - Underscore

```JavaScript
	_.includes(array, element)

	- ES2016 :
	- ```JavaScript
	 array.includes(element)
- ** Chuyển một đối tượng thành mảng**

 - Underscore
```JavaScript

	_.toArray(arguments)

	- ES2016 :
	- ```JavaScript
	 [...arguments]

- **Tạo một bản sao của mảng với một giá trị đã bị xoá**

 - Underscore

```JavaScript
	_.compact(array)

	- ES2016 :
	- ```JavaScript
	array.filter(x => !!x)
- **Tìm chỉ số của một giá trị trong mảng**

 - Underscore
```JavaScript

	_.indexOf(array, value)

	- ES5.1 :
	- ```JavaScript
	array.indexOf(value)
- **Tìm chỉ số của một giá trị trong mảng với một giá trị**

 - Underscore

```JavaScript
	_.findIndex([4, 6, 7, 12], isPrime);

	- ES2015 :
	- ```JavaScript
	[4, 6, 7, 12].findIndex(isPrime);
- **Tạo một mảng n phần tử bắt đầu từ x**

 - Underscore
```JavaScript

	_.range(x, x + n)

	- ES2015 :
	- ```JavaScript
	Array.from(Array(n), (v, k) => k + x)

### Objects

- **Sử dụng tên của các thuộc tính như một mảng**

 - Underscore

```JavaScript
	_.keys(object)

	- ES2015 :
	- ```JavaScript
	Object.keys(object)
- **Kiểm tra số các thuộc tính trong một object**

 - Underscore
```JavaScript

	_.size(object)

	- ES2015 :
	- ```JavaScript
	Object.keys(object).length
- **Sử dụng tên của các thuộc tính(đếm được) trong một object như một mảng**

 - Underscore

```JavaScript
	_.allKeys(object)

	- ES2015 :
	- ```JavaScript
	[...Reflect.enumerate(object)]

- **Giá trị**

 - Underscore
```JavaScript

	_.values(object)

	- ES2015 :
	- ```JavaScript
	Object.keys(object).map(key => object[key])

- **Tạo một object với các thuộc tính cho trước**

 - Underscore

```JavaScript
	_.assign({}, source, { a: false })

	- ES2016 :
	- ```JavaScript
	Object.assign(Object.create(proto), properties)

- **Kiểm tra nếu một object là một mảng **

 - Underscore
```JavaScript

	_.isArray(object)

	- ES2016 :
	- ```JavaScript
	Array.isArray(object)

- **Kiểm tra nếu một object là một số hữu hạn **

 - Underscore

```JavaScript
	_.isNumber(object) && _.isFinite(object)

	- ES2016 :
	- ```JavaScript
	Number.isFinite(object)

 ###Functions
- **Liên kết một hàm với một object **

 - Underscore
```JavaScript

	foo(_.bind(function () {
  this.bar();
}, this));
foo(_.bind(object.fun, object));

	- ES2016 :
	- ```JavaScript
	foo(() => {
  this.bar();
});
foo(::object.fun);

### Utility

- **Hàm định danh **

 - Underscore

```JavaScript
	_.identity

	- ES2016 :
	- ```JavaScript
	value => value
- **Trả về giá trị của một hàm **

 - Underscore
```JavaScript

	_.constant(value)

	- ES2015 :
	- ```JavaScript
	() => value

- **Kiểm tra hàm rỗng **

 - Underscore

```JavaScript
	_.noop

	- ES2015 :
	- ```JavaScript
	() => {}

- ** Hàm lấy thời gian hiện tại **

 - Underscore
```JavaScript

	_.now()

	- ES2015 :
	- ```JavaScript
	Date.now()

- ** Template **

 - Underscore

```JavaScript
	var greeting = _.template("hello <%= name %>");
greeting({ name: 'moe' });

	- ES2015 :
	- ```JavaScript
	const greeting = ({ name }) => `hello ${name}`;
greeting({ name: 'moe' });

 ###Tài liệu tham khảo :
 https://babeljs.io/docs/learn-es2015/

 https://www.reindex.io/blog/you-might-not-need-underscore

All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí