TalonZhang的博客

问题：在使用 uni-app 开发的时候，写了一个类似于微博的关注组件，功能就是未关注的文章显示+关注按钮 ，关注后按钮消失。使用 v-show 来写，用一个变量isFollow来监听，isFollow来自于父组件通过 props传递。但是遇到一个问题就是：点击事件中修改isFollow的值之后，view 没有渲染，点击后关注按钮仍然存在，值确实已经发生改变，但 view 并没有重新渲染。&...

数组中已经存在有两个可以直接使用的排序方法：reverse（）和 sort（）这两个方法的返回值都是经过重排序之后的数组reverse ( )reverse( ) 方法的作用很简单，就是反转数组的顺序。var colors = new Array("red", "blue", "green");var count = colors.unshift("black&

ES5 为数组增加了两个归并数组的方法：reduce( ) 和 reduceRight( ) 。这两个方法都会迭代数组的所有项，然后构建一个最终返回值。 其中 reduce 从第一项开始向后遍历，reduceRight( ) 则从最后一项开始向前遍历。这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给这两个方法的函数接收四个参数：前一个值，当前值，项的索引...

函数声明与函数表达式的区别函数声明与函数表达式定义函数看似相同，实际上在解析器向执行环境中加载数据时，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到他所在的代码行，才会真正被解释执行。换句话说，就是通过函数声明定义的函数，可以在任何位置调用（声明前和声明后）；而通过函数表达式定义的函数，只能在表达式之后调用，之前调用会报错（因为还没被...

函数作为值因为 ES 中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，也可以将函数作为另一个函数的结果返回。理解上面的这段话是很有必要的，这两种方式都可以让我们更有效的解决一些特定的问题。1. 函数作为参数// 可以用来调用一个函数并给它传递一个参数，来获得第一个返回值。function callSomeFunction(s...

Function函数是 ES 中非常重要的一部分，函数实际上也是对象。每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会跟某个函数绑定。定义函数函数定义有三种方式：一 函数声明语法function sum(num1, num2) { return num1 + num2;}二 ...

ES5 中为数组定义了 5 个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数接收三个参数：数组项的值、该项在数组中的位置（索引）和数组对象本身。这 5 个方法都不会修改原数组中包含的值。every ( ) 和 some ( )every ( ) 和 some ( ) 是一对功能比较相近的函数，他们用...

RegExpECMAScript 通过 RegExp 类型来支持正则表达式。创建 RegExp创建正则表达式语法：var expression = / pattern / flags ;其中的模式（pattern）部分可以是任何简单或复杂的正则表达式，可以包含字符类、限定符、分组、向前查找及反向引用。每个正则表达式都可以带有一或多个标志（flags），用以标明正则表达式的行为。关于...

typeoftypeof 操作符是比较常用的，用来确定一个变量的数据类型。typeof的规则：undefined： 值未定义boolean： 布尔值string： 字符串number： 数值object： 对象或 nullfunction： 函数instanceoftypeof 操作符用来检测基本数据类型非常方便，但是用来检测引用类型时就比较鸡肋了。有时候我们并不是想知道...

开始之前先说一下 ES 中的两种数据类型的值：基本类型值和引用类型值。基本数据类型：Undefined、Null、Boolean、Number、String。引用数据类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是操作对象的引用而不是实际的对象。 这一部分对下面理解参数传递非常重要。传...

Array 是 ECMAScript 中的数组类型，它提供了一种让数组的行为类似于其他数据结构的方法。栈方法栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最后添加的项最先被移除。栈中项的插入（推入，push）和移除（弹出，pop）只发生在栈顶。ECMAScript 为数组专门提供了 push( ) 和 pop( ) 方法，来实现类似栈的行为。push(...

Array 类型Array 类型是除 Object 外 ECMAScript 中最常用的类型。ECMAScript 中的数组与其他语言中的数组有很大的区别：ECMAScript 中数组的每一项可以保存任何类型的数据。也就是说，数组中可以第一位用来保存字符串，而第二位用来保存数值。ECMAScript 中数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。创建数组...

数组类型有两个位置方法：indexOf和lastIndexOf。这两个方法都接收两个参数，要查找的项和（可选的）表示查找起点位置的索引。 indexOf 方法从数组开头（位置0）开始向后查找，lastIndexOf 方法则是从数组末尾向前查找。这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回 -1。在比较第一个参数与数组中的每一项时，使用全等操作符（===）。例如：var ...

Object 类型使我们使用最多的一种引用类型。创建实例创建 Object 实例的方式有两种：1. new 操作符 + 构造函数例如：var person = new Object();person.name = "Talon";person.age = 20;2. 对象字面量表示法对象字面量表示法是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。例如：v...

事件处理程序过多导致性能下降在 JavaScript 中，添加到页面上的事件处理程序数量会直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中对象越多，性能就越差。其次，必须事先指定所有事件处理程序所造成的 DOM 访问次数，也会延迟整个页面的交互就绪时间。在事件处理程序角度来提升性能主要有两张方式：事件委托、及时移除事件处理程序。事件委...

垃圾收集机制JavaScript 具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。这样我们在编写 JavaScript 代码时就不需在关心内存使用问题了，所需内存分配和已用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实非常简单：找出那些不再使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性的执行这...

变动事件DOM2 级的变动（mutation）事件能在 DOM 中的某一部分发生变化时触发。常见变动事件主要有：DOMSubtreeModified： 在 DOM 结构发生任何变化时触发。这个事件在其他事件触发后都会触发。DOMNodeInserted： 在一个节点作为子节点被插入到另一个节点时触发。DOMNodeRemoved： 在节点从其父节点中被移除时触发。DOMNodeIns...

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus( ) 方法及 document.activeElement 属性配合，可以知晓用户在页面上的行踪。焦点事件：blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持focusin：在元素获得焦点时触发，与 HTML ...

Babel 转码器Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item + 1...

ECMAScript 为操作数组中的项提供了很多方法，其中最常用的有：concat( ) 、slice( ) 和 splice( ) 。concat ( )concat ( ) 方法可以基于当前数组中的项创建一个新的数组。具体来说，这个方法会先创建一个当前数组的副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给它传参的情况下，它仅复制当前的数组并返回副本。如果给它...

let 命令ES6 新增了 let 命令，用来声明变量。用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效。{ let a = 10; var b = 5;}alert(a) // Uncaught ReferenceError: a is not definedalert(b)for 循环for 循环的计数器，很合适使用 let 命...

padding:10px;：上下左右的值都为 10pxpadding:5px 10px;：上下 5px，左右 10pxpadding:5px 10px 15px;：上 5px，左右 10px，下 15pxpadding:5px 10px 15px 20px;：上 右 左 下（从上开始顺时针）...

此属性有两个可取值：content-box(默认) 和 border-boxbox-sizing 属性可以被用来调整这些表现:content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。 也就...

Math 对象Math 对象是 ES 为保存数学公式和信息提供的一个公共位置。与我们在 JS 中直接编写的计算功能相比，Math 对象提供的计算功能执行起来要快得多。Math 对象中还提供了辅助完成这些计算的属性和方法。1. Math 对象的属性Math 对象中的属性大都是数学计算中可能会用到的一些特殊值。属性说明Math.E自然对数的底数，即常量 e 的值M...

单体内置对象单体内置对象的定义：由 ECMAScript 实现提供的、不依赖于宿主环境的对象，这些对象在 ESMAScript 程序执行之前就已经存在了。像我们常见的 Object 、Array 和 String 都是内置对象，另外还有 Global 和 Math 。Global 对象1. URI 编码方法Global 对象的 encodeURI ( ) 和 encodeURIComp...

slice ( )、substr ( ) 和 substring ( )这三个方法都会返回被操作字符串的一个子字符串，而且也都接收两个参数。第一个参数指定子字符串的开始位置，第二个参数表示子字符串在那里结束（没有第二个参数默认到末尾）。他们的区别：slice ( ) 和 substring ( ) 的第二个参数指定的是子字符串最后一个字符后面的位置；而 substr ( ) 的第二个参数指...

String 类型String 类型是字符串的对象包装类型。var stringObject = new String("hello world")String 对象的方法也可以在所有基本的字符串值中访问到。其中，继承的 valueOf ( ) 、toLocalString ( ) 和 toString ( ) 方法，都返回对象所表示的基本字符串值。String 类型的每个实例都有一个 ...

基本包装类型为了便于操作基本类型值，ECMAScript 还提供了 3 个特殊的引用类型：Boolean、Number 和 String。实际上，每当读取一个基本类型值时，后台会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。我们知道，基本类型值不是对象，因而从逻辑上讲，他们不应该有方法（实际上有）。其实，为了让我们实现这种直观的操作，后台自动完成了一系列的处理：...

函数内部属性在函数内部有两个特殊的对象：arguments 和 this 。arguments 的主要用途是用来保存函数参数，但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。this 与 Java 中的 this 大致类似，引用的是函数执行的环境对象。函数属性和方法1. lengthlength 属性表示函数希望接受的命名参...

对象的解构赋值解构不仅可以用于数组（数组解构赋值），还可以用于对象。let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"对象的解构与数组的解构的区别：数组的元素是按次序排列的，变量的取值由他的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。let { bar, foo } ...

1. 数组的解构赋值基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。// ES5let a = 1;let b = 2;let c = 3;// ES6let [a, b, c] = [1, 2, 3]本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组...

在网页中为元素添加样式时，经常会用到多个 class 属性。那他们之间的优先级关系是怎样的呢：当一个元素指定多个 class 时，class 的优先级与指定顺序无关，而是和 class 的定义顺序有关。后声明的优先级高。比如一个按钮，我们写的通用属性是：.bt { border: 1px solid; border-radius: 5px; box-sizing: border-b...

问题我们在用 CSS 进行页面布局时，经常会给元素指定宽高。在没有边框时（border为0）往往父元素的宽高是子元素宽高的和。但是在添加边框宽度后如果不调整元素宽度，会导致布局错乱。例如我们想要下面这样的效果：一个宽度为 600px 的父元素下有三个 200px 的子元素。可以这样实现：<body> <div class="container"> ...

顶层对象的属性顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。window.a = 1;a // 1a = 2;window.a // 2上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来...

基本用法const 声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化，不能留到以后赋值。const的作用域与let命令相同：只在声明所在的块级作用域内有效。const命令声明的常量也是不提升，同样存在暂时性死区（let命令详解中有暂时性死区的解释），只能在声明的位置后面使用。const声明的常量，也与let一样不可重复声明。const PI =...

块级作用域与函数声明ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。// 情况一if (true) { function f() {}}// 情况二try { function f() {}} catch(e) { // ...}上面两种函数声明，根据 ES5 的规定都是非法的。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还...

为什么需要块级作用域ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景：第一种场景，内层变量可能会覆盖外层变量。var tmp = new Date();function f() { console.log(tmp); if (false) { var tmp = 'hello world'; }}f(); // undefined上...

textInput 事件textInput 事件是 DOM3 级事件中新加的事件，当用户在可编辑区域中输入字符时，就会触发这个事件。textInput 和 keypress 区别textInput 事件与 keypress 事件类似，但还是有一些区别：任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。textInput 事件...

CSS盒子模型（Box Model）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外...

前言canvas 是 html5 中的一个新元素，主要用于图形的绘制，通过 JavaScript 来控制。<canvas> 标签定义一个图形容器，也可以叫做画布，通过 js 脚本可以绘制出各种各样的图像。创建canvas创建 canvas 只需要添加 canvas 标签就可以了，在创建时，除 id 外一般还会定制画布尺寸（width height）。定义画布尺寸不建议使用 css...