Object对象遍历的几种方法 本文以下面对象为例： 1 2 3 4 const person = { name: 'andy', age: 12 }; 1. Object.keys forEach原本只是用来遍历数组对象，所以需要先获取对象的所有key，再行遍历。需要注意的是 Object.keys获取参数对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）的key值： 1 2 3 4 5 6 Object.keys(person).forEach((key) => { console.log(key); }) // name // age Continue reading

ES基础 1. 名词解释 * ECMA: Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。原名为欧洲计算机制造商协会ECMA（European Computer Manufacturers Association） * ECMAScript: ECMAScript 是标准化组织 ECMA（Ecma International - European association for standardizing information and communication systems）发布的脚本语言规范。 * **ECMA第39号技术委 Continue reading

1.行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配 以前，这些符号在字符串文字中被视为行终止符，因此使用它们会导致SyntaxError异常。 2.更加友好的 JSON.stringify 如果输入 Unicode 格式但是超出范围的字符，在原先JSON.stringify返回格式错误的Unicode字符串。现在实现了一个改变JSON.stringify的第3阶段提案，因此它为其输出转义序列，使其成为有效Unicode（并以UTF-8表示） 3.新增了Array的flat()方法和flatMap()方法 flat()和flat Continue reading

1. 异步迭代 以串行的方式运行异步操作。 1 2 3 4 5 async function process(array) { for await (let i of array) { doSomething(i); } } 2. Promise.finally() 指定一个Promise的最终操作。 3. Rest/Spread属性 ES6引入了Rest参数和扩展运算符能。三个点仅用于数组。ES9为对象解构提供了和数组一样的展开操作符。 1 2 3 4 5 6 7 const myObject = { a: 1, b: 2, c: 3 Continue reading

1. async/await 1 2 3 4 5 async function process(array) { for await (let i of array) { doSomething(i); } } 2. Object.values Object.values()与Object.keys()方法类似，但返回的是Object对象自身所有的值，不包括继承的值。 1 2 3 4 5 6 const person = { name: 'age', age: 12 } console.log(Object.values(person)); // Continue reading

ES7又称ES2016，它只添加了两个小特性来说明标准化过程： 1. Array.prototype.includes() includes()用来判断一个数组是否包含一个指定值，如果包含则返回true，否则返回false 下面两个表达式是等价的： 1 2 arr.includes(x) arr.indexOf(x) >= 0 2. 指数操作符 在ES7中引入了指数操作符**，该操作符与Math.pow(..)具有等效的计算结果。 1 console.log(2**10); // 1024 Continue reading

ES6 1. let和const var是传统上的函数作用域。ES6推荐使用let声明局部变量，const声明常量，两者都为块级作用域。 1. let用法 1 2 3 4 5 6 7 8 9 var name = 'andy'; { // let声明局部变量 let name = 'qiqi'; console.log(name); // qiqi } console.log(name); / Continue reading

面向对象的程序设计 理解对象 常见创建对象方式 1. 创建一个 Object 实例 1 2 3 4 5 6 7 var person = new Object(); person.name = 'andy'; person.age = 12; person.sayName = function() { console.log(this.name); } 2. 对象字面量 1 2 3 4 5 6 7 8 var person = { name: 'andy', age: 12, sayName: function() { console. Continue reading

定义 ES2019规范里描述的Prototype： > 4.3.5 prototype / > > object that provides shared properties for other objects prototype被定义为：给其他对象提供共享属性的对象。也就是说prototype自己也是对象，只是被用以承担某个职能罢了。 _proto_ > Every object has an implicit reference (called the object’s prototype) 规范中明确描述了所有对象，都有一个隐式引用，它被称之为这个对象的prototyp Continue reading

Math方法 加法 运算规则 1. 加法运算符只能用于原始数据类型, 对于对象类型的值,需要进行数据转换； 2. 在转换后,如果其中一个运算元出现原始数据类型是“字符串”类型值时， 则另一个运算元强制转换为字符串,然后做字符串的连接运算； 3. 在其他情况时，所有运算元都会转换为原始数据类型的“数字”类型值,然后作数字的相加。 Number()转换规则 1. 如果是Boolean值,true和false将分别转换为1和0; 2. 如果是数字值,只是简单的传入和返回; 3. 如果是null值,返回0; 4. 如果是undefined,返回NaN; 5. 如果是字符 Continue reading

JS中的apply,call和bind 如果你对JavaScript对象有研究的话你应该知道，在JavaScript中，函数也是一种对象。那么既然函数也是对象的话，它就存在属于它的方法：call，apply, bind等。这些方法都是为了改变函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。 1. 区别 1. bind 方法 call和apply改变了函数的this,并且执行了该函数。bind只是改变了函数的this，并 Continue reading

移动端click事件300ms延迟 1. 追根溯源 移动端为什么会出现click事件的300ms延迟？ 这应该属于科技进步过程中的不完美。在2007年，苹果公司在发布首款iphone前夕，遇到一个问题：当时的网站大都为大屏幕的设备所设计，于是苹果的工程师在解决小屏幕手机浏览大屏幕网站的问题上做了一些约定，其中一个就是有名的双击缩放。 双击缩放：顾名思义就是连续两次点击屏幕，苹果自带的safari浏览器就会将网页缩放到它的原始比例，那么怎么实现这种双击缩放呢？很简单，就是在第一次点击之后先不触发click事件，而是等待300ms，如果在这300ms之内还有第二次点击，那么就对网页进行缩 Continue reading

1 2 3 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var obj = {}; Object.defineProperty(obj, 'txt', { configurable: true, enumerable: true, get: function () { return obj; }, set: function (newV Continue reading

JavaScript事件冒泡与捕获 1. JavaScript中的事件传播模式 在JavaScript中存在两种不同的事件传播模式，这得益于网景公司与微软公司的浏览器大战，其中网景公司主推捕获模式，而微软公司主推冒泡模式。所以在IE9及其以下的浏览器中，IE只支持冒泡模式，不过IE9+以及现在的主流浏览器都支持两种模式了。 虽然是两种不同的模式，但是他们的作用都是相同的：决定HTML诸多元素中接收事件的顺序，从而按顺序触发不同元素上的事件监听函数。 1.1 捕获模式 当事件发生时，该事件从最外层元素接收到，然后依次向内层元素传播。 1.2 冒泡模式 当事件发生时，该事件最先 Continue reading

滚动加载，懒加载的实现。 1. scroll计算 思路：通过滚动条判断是否到内容底部 => 到底部后向后台请求下一页得数据 => 将请求得新数据拼接在老数据上 三个关键点： * 1：滚动条距离顶部的距离：document.documentElement.scrollTop||document.body.scrollTop * 2：当前窗口内容的可视区域：document.documentElement.clientHeight || document.body.clientHeigh * 3：滚动条内容的总高度：document.documentElement.scrollHe Continue reading

JavaScript各种宽高属性 在JavaScript中存在各种宽高属性，如height, clientHeight, innerHeight,outerHeight等等，那么它们究竟有什么区别呢？ 在了解这些属性的区别之前，我们需要先来了解window和document的区别： 1. window和document * Window对象表示浏览器打开的窗口，调用window对象上的方法可以省略window，如console.log(), alert等； * Document对象是Window对象的一部分，浏览器的HTML文档成为Document对象。 * window对象的 Continue reading

作用域 作用域决定变量的生命周期及其可见性，当我们创建一个函数，就会生成一个新的作用域。值得一提的是在ES6之前，之后全局作用域和函数作用域，但是在ES6之后，出现的let和const可以实现块级作用域。 什么是闭包 闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。 由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存，所以过度使用闭包可能会导致内存占用过多。 闭包几种情况 Timer 变量x将一直存活着，直到定时器的回调执行或者被清除。 1 2 3 4 5 6 (function autorun() Continue reading

Promise是异步编程的一种解决方案，比传统的解决方案————回调函数和事件————更合理和更强大。所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise是一个对象，从它可以获取异步操作的消息。 Promise对象有以下两个特点 * (1). 对象的状态不受外界的影响。Promise有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何操作都无法改变这种状态 * (2). 一旦状态改变，就不会再变，任何时候都可以得到这个 Continue reading

JavaScript执行上下文 1. 执行上下文 对于每个执行上下文，都会有三个重要属性：变量对象、作用域链、this。 1. 什么是执行上下文 执行上下文 是评估和执行JavaScript代码的环境的抽象。可以理解为JavaScript代码是在其对应的执行上下文中执行的。 执行上下文为一个对象，包含 变量对象（VO），作用域链 和 this。 1 2 3 4 5 executionContextObj = { variableObject: {}, ScopeChain: {}, this: {} } 2. 执行上下文的类型 * 全局执行上下文：这是默认 Continue reading

Jsbridge 1. 什么是JSBridge 主要是给JavaScript调用native功能的接口，让H5可以实现调用系统原生功能，如相机，位置，话筒等。但是JSBridge的功能不单单是调用native这么简单，实际上，JSBridge就是JavaScript与native的桥梁，它的核心是构建native与非native之间消息通信的渠道，而且这个渠道是双向的。 H5与native交互如下图： 2. JSBridge实现原理 JavaScript是运行在一个单独的JavaScript Context中，由于这些环境与原生环境天生相隔，我们可以将这种情况与 RPC（Re Continue reading