企业官网建设流程全解析

贵州网站制作品牌公司,网站哪家做的比较好,做网站的步骤 优帮云,软件开发和网站开发区别本文大纲今天来看一道前端面试的代码输出题。 面试官提供了一段 Javascript 代码#xff0c;要求给出这段代码运行后的输出结果。 const obj {a: 0, };obj[1] 0; obj[obj.a] obj.a; const values Object.values(obj); obj[values[1]] obj.a; console.log(obj);先分析这道…本文大纲今天来看一道前端面试的代码输出题。面试官提供了一段Javascript代码要求给出这段代码运行后的输出结果。constobj{a:0,};obj[1]0;obj[obj.a]obj.a;constvaluesObject.values(obj);obj[values[1]]obj.a;console.log(obj);先分析这道题前先补充两个个前置知识点。知识点一对象的常规属性 (properties) 和排序属性 (elements)先来看下面一段代码constobj{};obj[b]bobj[100]100;obj[1]1;obj[a]a;obj[50]50;obj[c]c;for(constkeyinobj){console.log(key:${key}value:${obj[key]})}/** * 打印结果如下 key: 1 value: 1 key: 50 value: 50 key: 100 value: 100 key: b value: b key: a value: a key: c value: c */观察下打印的数据很明显属性的设置顺序并不是打印的顺序比如b属性是第一个设置的打印结果却排在100后面仔细分析他们的打印规律可以得到如下特点数字类的属性不管设置的顺序先后都会被优先打印而且是按照从小到大的升序进行打印的。字符类属性会按照设置的顺序进行打印上面我们是按照b、a、c的顺序进行设置的打印顺序也是如此。为什么会出现这样的结果呢这是因为 ECMAScript 规范中定义了数字属性应该按照索引值大小升序排列字符串属性根据创建时的顺序升序排列。在V8中数字属性被称为elements字符串属性被称为properties。之所以这样设置主要是为了提升访问性能。elements对象中会按照顺序存放数字属性类似于数组的存储这样查询的效率当然就很高了。知识点二JavaScript 运算符的执行顺序JavaScript中最常见运算符如下运算顺序从高到低排列对象属性访问比如obj.aobj[a]。递增/递减比如a(后置递增) 或a前置递增。算术比如a 1。比较包括(小于)、(大于)、(小于等于)、(大于等于)比如a 3。相等包括粗略相等严格相等!粗略不等!严格不等比如a 1。逻辑也就是与或非(与)、|(或)、!(非)比如a b。三元比如flag ? 1 : 0。赋值比如a 1。对于单个赋值语句LHS RHS的求值根据ECMAScript规范ECMA-262, AssignmentExpression evaluation对于LeftHandSideExpression AssignmentExpression其计算顺序如下第一步先得到一个引用Reference即“要写入的位置”也就是Evaluate LeftHandSideExpression。第二步再计算右侧的值Evaluate AssignmentExpression。最后将第二步得到的值写入第一步的引用当中。也就是说对于LHS RHS这样的赋值表达式其计算顺序是左侧先求值为了知道写到哪右侧后求值为了知道写什么最后将右侧的值写入左侧。 注意这里说的“左侧求值”不是求它的值而是求它的“位置”比如属性名、变量名等。例如对于obj[obj.a]要确定属性名就必须先执行obj.a。写个简单例子constobj{geta(){console.log(获取 a 的值);return1;},getb(){console.log(获取 b 的值);return2;}}obj[obj.a]obj.b;console.log(obj: ,obj);我们前面说过运算符顺序是对象属性访问 递增/递减 赋值对于赋值运算符LHS RHS会先求出左侧LHS的引用Reference再计算右侧RHS的值最后将右侧的值赋值给左侧的引用。所以用这个逻辑来分析下这段代码的执行顺序第一步先取obj.a的值 取到的值为1 然后执行前置递增obj.a结果为2然后程序就知道要往obj的2属性上赋值了。第二步然后再取obj.b的值执行后置递增obj.b右侧计算的值为2。最后把右侧计算的结果值2赋值给obj[2]属性。逐行分析代码执行过程了解了这两个知识点后让我们来逐行解析下这段代码。constobj{a:0,};obj[1]0;obj[obj.a]obj.a;constvaluesObject.values(obj);obj[values[1]]obj.a;console.log(obj);首先我们定义了一个对象obj它有一个属性a值为0。constobj{a:0,};接下来我们给obj添加了一个属性1值为0此时对象中有两个属性a和1。obj[1]0;由于数字属性会排在前面此时obj的值为{1:0,a:0,}然后会执行obj[obj.a] obj.a前面我们分析过运算符的优先级先执行左侧obj.a得到1然后执行右侧obj.a, 由于是后置递增所以右侧的值为1执行赋值后obj的值为{1:1,a:2,}经过Object.values(obj)后values的值为[1, 2]。执行obj[values[1]] obj.a转换后就是obj[2] 2。obj的值变为{1:1,2:2,a:2,}这就是最终的输出结果了。小结该题主要考察两个知识点在JavaScript对象中属性的设置顺序并不一定是循环打印顺序在V8中数字类的属性在被称为elements按从小到大排列存储字符类属性被称为properties按添加顺序存储。JavaScript运算符的运算顺序是对象属性访问 递增/递减 赋值对于赋值运算符LHS RHS会先求出左侧LHS的引用Reference再计算右侧RHS的值最后将右侧的值赋值给左侧的引用。