【捣鼓】赋值运算符和属性访问运算符

赋值运算符和属性访问运算符

原文链接：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))