赋值运算符和属性访问运算符
原文链接:https://mp.weixin.qq.com/s/QtBfwR4yjmiiduQw_ebeiA
原文评论:这样写可以减少构建产物大小,算是一种优化。像 jquery 这样的工具库,比起维护性更关注性能,所以会用这种小技巧。我们平时写业务可不要乱用
MDN : 赋值表达式本身的值为要赋值的值
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment
// let a, b
// a = b = 2 // the same as a = ( b = 2)
// // console.log(a) // 2
// // console.log(b) // 2
// // console.log((a=2))
// var initialValue = {};
// var elemData = initialValue // 1
// // ...
// elemData.events = elemData = function(){}; // 2
// // ...
// elemData.events = {}; // 3
var initialValue = {};
var elemData = initialValue // 第一步
console.log(elemData) // {}
console.log(initialValue.events) // undefined
// ...
elemData.events = elemData = function(){}; // 第二步
console.log(elemData) // f (){}
console.log(elemData.events) // undefined
console.log(initialValue.events) // f (){}
// ...
elemData.events = {}; // 第三步
console.log(elemData.events) // {}
console.log(initialValue.events) // f (){}
// 第二步
// 访问属性运算符 优先级 比 赋值运算符 更高
// 先访问 elemData.events 使其在表达式 (elemData = function(){}) 进行赋值之前, 先取表达式的值
// MDN : 赋值表达式本身的值为要赋值的值
// 此时也让 initialValue.events 指向上面的表达式的值
// 接着, 再让进行 (elemData = function(){}) 的赋值操作
// 此时 elemData 也就是 function(){} 对象并没有 events 属性
let obj = {a: 1, b: 2, c: 3}
let obj2 = {d: 1, e: 2, f: 3}
// 先读取属性, 再进行赋值
for(const prop in obj ) {
console.log(prop) // a, b, c
obj = obj2
console.log(obj) // { d: 1, e: 2, f: 3 }
}
console.log(obj) // { d: 1, e: 2, f: 3 }
let i = 0, root = { index: i }, node = root
// console.log((node = {}) === node) // true
// 赋值表达式会返回 = 右边的元素
while (i < 10) {
// 属性访问运算符 优先级 较 赋值运算符 更高
// 故 node.next 的指针会在进行赋值运算之前 先指向 (node = {}) 中 {}
// 接着, 再进行 (node = {}) 的赋值运算
node.next = node = {} // `node` in `node.next` is the old `node`
node.index = ++i // `node` in `node.index` is the new `node`
}
node = root
do {
console.log(node.index) // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
} while ((node = node.next))