TalonZhang的博客

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

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

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

数组中已经存在有两个可以直接使用的排序方法：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 操作符用来检测基本数据类型非常方便，但是用来检测引用类型时就比较鸡肋了。有时候我们并不是想知道...

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

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

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

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]本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组...

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

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

开始之前先说一下 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 中数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。创建数组...

坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。客户区坐标位置鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中，分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。所有的浏览器都支持这两个属性。用法：var div = document.getElementById('myDiv');EventUtil.ad...

鼠标事件是 Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了 9 个鼠标事件。鼠标事件：click： 用户单击主鼠标按钮（一般为左键）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序即可以通过键盘也可以通过鼠标执行。dblclick： 在用户双击主鼠标按钮时触发。mousedown： 用户按下任意鼠标按钮时触发。...

前言事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以 on 开头，因此 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有很多种。HTML 事件处理程序某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML ...

前言JavaScript 与 HTML 之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流当我们在页面上单击按钮时，也单击了按钮的容器元素，甚至也单击了整个页面。事件流描述的就是从页面中接收事件的顺序。下面介绍一些主要的事件流：事件冒泡IE的事件流叫做事件冒泡，即时间开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较...

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。生命周期关于 Vue 生命周期，先放一张官方文档的图在这个图中我们可以清楚地看到 Vue 的整个生命周期和它所提供的钩子函数。钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatebeforeDestroydestroye...

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。DOM 中的事件对象兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用的是何种方式（DOM0 级或 DOM2 级），都会传入 event 对象（当事件处理程序执行完毕，event 对象会...

前言：本来打算学习一下主流的前端框架，但是在学习的过程中，深深地感受到了自己基础的薄弱，对很多js的基础知识一知半解，尤其是一些比较冷门或者涉及到底层知识的问题。因此决定先把根基打牢，准备研读一下《JavaScript高级程序设计》，俗话说磨刀不误砍柴工嘛。 大一时候刚接触前端，心血来潮买了这本书，结果看了没几页就扔到一边去了。一方面是页数实在太多，更主要的是因为当时对于JS完全零基础，阅...

ECMAScript 中有五种简单数据类型（基本数据类型）：Undefined、Null、Boolean、Number 和 String。还有一种复杂数据模型：Object。数据类型1 typeof 操作符typeof 用来检测给定变量的数据类型。对一个值使用 typeof 操作符可能返回下列某个字符串：“undefined”——如果这个值未定义；“boolean”——如果这个值是布尔...

未填

虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响所要采取的操作。修改键这些修改键就是：Shift、Ctrl、Alt、Meta（Window 键或 Cmd 键）。DOM 为此规定了 4 个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 metaKey这些属性都是布尔值，如果相应的键被按下，则值为 true，否则为 false。...

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。语法过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --&gt...

在发生鼠标事件 mouseover 和 mouseout 事件时，还会涉及到一些其他鼠标事件不涉及的元素。对于 mouseover 而言，事件的主要目标是获得光标的元素，而相关元素就是那个失去光标的元素；类似的对于 mouseout 而言则恰恰相反。相关元素DOM 通过 event 对象的 relatedTarget 属性提供相关元素的信息。这个属性只对于 mouseover 和 mous...

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