ES6 với những ưu điểm tuyệt vời thay thế thư viện Underscore.js
Bài đăng này đã không được cập nhật trong 9 năm
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