V8 của V8: Chuỗi liên kết tùy chọn và kết hợp Nullish trong JavaScript
Tôi nghĩ rằng group V8 tại Google đã chờ đợi khoảnh khắc này trong một thời gian dài. Phiên bản thứ 8 của động cơ V8 (công cụ JavaScript phổ biến nhất) đã ra mắt! Phiên bản mới này đi kèm với một số cải tiến hiệu suất thực sự tuyệt vời và hai tính năng ngôn ngữ JavaScript thú vị mới: chuỗi tùy chọn và liên kết nullish.
Chuỗi tùy chọn
Đây là một tính năng được chờ đợi từ lâu. Giả sử bạn đang làm việc với một nhà cung cấp API tồi. Hãy gọi API này là CrocosAPI. CrocosAPI cung cấp thông tin về tất cả các loài cá sấu trên thế giới (đó là một API không ổn định mà mọi người đều biết 'gator tốt hơn crocs').
Đây là chức năng của ta để có được môi trường sống của cá sấu (một số cá sấu sống ở nước ngọt, nước biển và / hoặc nước mặn)
const getWaterHabitat = async (crocName) => {
// First we call our made up api
const crocResponse = await fetch('http://api.crocosapi.io/croc/' + crocName);
// We get the responses body
const crocInfo = crocResponse.body;
// We access the water property of the habitat property
return crocInfo.habitat.water;
}
// Let's get the water habitat of a crocodile called Barry
const barrysWaterHabitat = getWaterHabitat('Barry');
// this returnsbarrysWaterHabitat == ['freshwater']
Bây giờ, giả sử các nhà phát triển của CrocosAPI đã quyết định thay đổi cấu trúc phản hồi của họ từ:
{
"personalInfo" : {
"firstName" : "Barry"
},
"habitat": {
"water": ["freshwater"],
}
// ... skipping
}
Đến:
{
"personalInfo" : {
"firstName" : "Barry"
// ...
},
// We changed 'habitat' to 'environment'
"environment": {
"water": ["freshwater"]
}
//...
}
Bây giờ nếu ta gọi getWaterHabitat ta sẽ nhận được:
TypeError: Cannot read property 'water' of undefined
Đó là bởi vì crocInfo.habitat không tồn tại nữa. Bây giờ để truy cập crocInfo , ta phải truy cập crocInfo.environment.water . Điều này nghĩa là toàn bộ ứng dụng của ta sẽ gặp sự cố chỉ vì các nhà phát triển của CrocosAPI không biết về cách tạo version . Vậy làm thế nào để tránh lỗi đó? Tất nhiên là tùy chọn chuỗi!
const getWaterHabitat = async (crocName) => {
const crocResponse = await fetch('http://api.crocosapi.io/croc/' + crocName)
const crocInfo = crocResponse.body
// We access the water key with optional chaining
return crocInfo?.habitat?.water
}
const myCrocsName = 'Barry'
const barrysWaterHabitat = getWaterHabitat('Barry')
// barrysWaterHabitat == undefined
Bạn cũng có thể sử dụng lập index tùy chọn với các mảng:
const crocAddress1City = crocInfo?.personalInfo?.addresses?.[0].city
// if crocInfo.personalInfo.addresses = []
// crocAddress1City === undefined
… Và với các chức năng!
// It is hard to make a short example
const getSkinStyle = (option) => {
const scales = {
color: 'green',
texture: 'shiny'
}
if (option == 'naked')
return
else
return scales
}
const crocInfo = {
name: 'Barry',
waterHabitat : 'Freshwaters',
getSkinStyle : getSkinStyle
}
const barrysSkinColor = crocInfo?.getSkinStyle?.('naked')?.color
// barrysSkinColor === undefined
const larrysSkinColor = crocInfo?.getSkinStyle?.('naked')?.color
// larrysSkinColor === 'green'
… Và với quyền truy cập thuộc tính động. Wow, nó thực sự là kỳ nghỉ lễ ⛄🎄🎁 (tại thời điểm viết bài)!
// habitatType can be "water" or "land"
const getHabitatProperty = (habitatType) => {
return crocInfo?.habitat?.[habitatType]
}
getHabitatType('water')
// returns ['freshwater']
getHabitatType('land')
// returns ['forest']
Không còn lỗi loại nữa, chỉ là một giá trị undefined !
Là một PSA nhanh, đừng dựa vào chuỗi tùy chọn như một cái cớ để không xử lý lỗi thích hợp. Điều tốt về TypeError mà ta nhận được khi truy cập thuộc tính của một giá trị không xác định là:
- Dễ dàng nhận thấy hành vi không mong muốn trong các ứng dụng của ta
- Nó buộc ta phải viết các cơ chế dự phòng tốt hơn
Ta vẫn nên có một số loại cơ chế dự phòng hoặc cảnh báo khi cố gắng truy cập vào thuộc tính của một giá trị không xác định.
Nullish liên kết
?? … Không, tôi không bối rối, ?? là nhà điều hành ngắn mạch mới tham gia && và || gia đình. Nếu bạn đã viết một số React, Vue hoặc Angular, bạn có thể đã viết hoặc nhìn thấy thông tin như thế này.
const name = props.name || 'CrocName Error';
const age = props.age || 'Invalid Age';
const isFemale = props.isFemale || true;
// pass name , age and isFemale to a view
Mã này sẽ chỉ định giá trị được lưu trữ trong props.name nếu nó không phải là giả. Nếu giá trị là sai, name giá trị sẽ bằng CrocName Error .
Nhưng giả sử rằng đối với những con cá sấu vẫn chưa được đặt tên, API trả về một chuỗi trống. Trong JavaScript, một chuỗi trống được coi là sai, vì vậy điều này sẽ xảy ra:
// Let's say we have an anonymous new born boy crocodile
const props = {
name: '',
age: 0,
isFemale: false
}
const name = props.name || 'CrocName Error';
// name === 'CrocName Error'
const age = props.age || 'Invalid Age';
// age === 'Invalid Age'
const isFemale = props.isFemale || true;
// isFemale === true
Đây không phải là kết quả ta mong đợi! Ta muốn tách trường hợp props.name có null hoặc undefined với trường hợp props.name là một chuỗi rỗng. Ta muốn age bằng 0 và isFemale là false . Đó là đâu ?? đến để giải cứu.
const name = '' ?? 'CrocName Error'
// name === ''
const age = 0 ?? 'Invalid Age';
// age === 0
const isFemale = false ?? true;
// isFemale === false
// Yay it worked!
|| kiểm tra xem toán tử bên trái có sai hay không. ?? chỉ kiểm tra nếu nó là null hoặc undefined . Đây là một bảng lừa đảo nhỏ dành cho bạn:
// +0, -0, NaN, false, empty strings, null and undefined are all falsy
false ?? true; // equals false
false || true; // equals true
0 ?? 1; // equals 0
0 || 1; // equals 1
'' ?? 'default'; // equals ''
'' || 'default'; // equals 'default'
// null and undefined are falsy so in this case we get the same results
null ?? []; // equals []
null || []; // equals []
undefined ?? []; // equals []
undefined || []; // equals []
Bạn cũng có thể kết hợp các toán tử! Chỉ cần nhớ sử dụng dấu ngoặc đơn. Hãy thử nghĩ xem điều này sẽ làm gì:
const crocName = (props.name ?? 'CrocName Error') || 'Anonymous Croc';
Hãy xem kết quả của một vài giá trị:
-
props.name === 'Barry':crocName === 'Barry' -
props.name === '':crocName ==== 'Anonymous Croc' -
props.name === undefined:crocName ==== 'CrocName Error'
Nullish Coalescing và Tùy chọn Chuỗi hoạt động cùng nhau
Bạn có thể đã nghĩ ra những cách thú vị để sử dụng hai tính năng này cùng nhau!
const getCrocName = async (crocId) => {
// We try to access our unstable API's data
const crocResponse = await fetch('http://api.crocosapi.io/croc/' + crocId)
// If croc response or body is undefined
const crocInfo = crocResponse?.body ?? 'Croc API did not return a valid response'
// if crocResponse equals {} then crocInfo == 'Croc API did not return a valid response'
// checking if crocInfo, personal info or name is undefined/null or if name has a falsy value
return (crocInfo?.personalInfo?.name ?? 'There was a problem loading the croc\'s name') || 'Anonymous Croc'
// if crocInfo?.personalInfo?.name === '' we return 'Anonymous Croc'
// if crocInfo equals {} we return 'There was a problem loading the croc\'s name'
}
Hiệu suất của V8 V8
Ngày nay, ta không thích JavaScript nhanh như thế nào và thậm chí còn hư hỏng hơn bởi các bản cập nhật hiệu suất lặp lại. , các kỹ sư của V8 đã cải thiện hiệu suất và bộ nhớ của động cơ. Nếu bạn muốn tìm hiểu thêm về điều đó, bạn có thể xem bài đăng phát hành của họ . Điều tôi thích ở các bản cập nhật này là nó cải thiện hiệu suất mã của ta , nhưng ta không phải viết bất kỳ điều gì mới!
Tiền thưởng tí hon
Để kiểm tra xem bạn có thể sử dụng V8 v8 trong Node.jd hay không, bạn có thể chạy node -p process.versions.v8 và xem liệu version đã hơn 8. Hiện tại, bạn nên sử dụng polyfills như core-js trên web và / hoặc một bộ chuyển tiếp . Nếu bạn đang sử dụng Babel, bạn có thể sử dụng @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining , @babel/plugin-proposal-nullish-coalescing-operator .
Chúc bạn có những ngày nghỉ vui vẻ và hạnh phúc! 🎄🎉
Các tin liên quan
Phân tích cú pháp, xác thực, thao tác và hiển thị ngày và giờ trong JavaScript với Day.js2019-12-28
Cách bắt đầu với API hiệu suất JavaScript
2019-12-25
Xem xét tất cả 13 bẫy proxy JavaScript
2019-12-19
Khám phá phương thức indexOf cho chuỗi và mảng trong JavaScript
2019-12-17
Thao tác DOM trong JavaScript với innerText và innerHTML
2019-12-14
Cách gói một gói JavaScript Vanilla để sử dụng trong React
2019-12-12
Cách phát triển một trình tải lên tệp tương tác với JavaScript và Canvas
2019-12-12
Cách sử dụng map (), filter () và Reduce () trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Ứng dụng một phần và làm xoăn
2019-12-12
Giới thiệu về Closures và Currying trong JavaScript
2019-12-12
