关闭

13-javascript map/reduce

如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clusters”,你就能大概明白map/reduce的概念。map举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaSc...
阅读(109) 评论(0)

12-高阶函数

JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。一个最简单的高阶函数:function add(x, y, f) { return f(x) + f(y); }当我们调用 add(-5, 6, Math.abs)时,参数 x,y和f 分别接收-5,6和函数Math.abs,根据函数...
阅读(95) 评论(0)

11-javascript 方法

在一个对象中绑定函数,称为这个对象的方法。在JavaScript中,对象的定义是这样的:var xiaoming = { name: '小明', birth: 1990 };但是,如果我们给xiaoming绑定一个函数,就可以做更多的事情。比如,写个age()方法,返回xiaoming的年龄:var xiaoming = { name: '小明', birth: 19...
阅读(89) 评论(0)

11-变量作用域

在JavaScript中,用 var 申明的变量实际上是有作用域的。 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量:'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 无法在函数体外引用变量x如果两个不同的函数各自申明了同一个...
阅读(72) 评论(0)

09-javascript 函数定义和调用

我们知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积。假设我们需要计算3个不同大小的圆的面积:var r1 = 12.34; var r2 = 9.08; var r3 = 73.1; var s1 = 3.14 * r1 * r1; var s2 = 3.14 * r2 * r2; var s3 = 3.14 * r3 * r3;当代码出现有规律的重复...
阅读(98) 评论(0)

08-javascript itertable

遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。 具有iterable类型的集合可以通过新的for … of循环来遍历。 for … of循环是ES6引入的新的语法,请测试你的浏览器是否支持:'use strict'; var a = [1, 2,...
阅读(51) 评论(0)

07-javascript map&set

JavaScript的默认对象表示方式 { } 可以视为其他语言中的 Map或Dictionary 的数据结构,即一组键值对。 但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范,请执行以下代码,如果浏览器报 ReferenceErro...
阅读(102) 评论(0)

06-javascript 循环

要计算1+2+3,我们可以直接写表达式:1 + 2 + 3; // 6要计算1+2+3+…+10,勉强也能写出来。 但是,要计算1+2+3+…+10000,直接写表达式就不可能了。为了让计算机能计算成千上万次的重复运算,我们就需要循环语句。JavaScript的循环有两种,一种是for循环,通过初始条件、结束条件和递增条件来循环执行语句块:var x = 0; for (var=1; i<=100...
阅读(68) 评论(0)

05-javascript 条件判断

JavaScript使用if () { … } else { … }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如下:var age = 20; if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult'); } else { // 否则执行else语句块 alert('teenager'); }其中els...
阅读(64) 评论(0)

04-javascript object

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:var xiaoming = { name: '小明', birth: 1990, school: 'No.1 Middle School', height: 1.70,...
阅读(49) 评论(0)

03-javascript 数组

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。要取得Array的长度,直接访问length属性:...
阅读(45) 评论(0)

02-jvascript 字符串

JavaScript的字符串就是用 ” 或 “” 括起来的字符表示。 如果 ’ 本身也是一个字符,那就可以用 “” 括起来,比如 “I’m OK” 包含的字符是 I,’,m,空格,O,K 这6个字符。 如果字符串内部既包含 ’ 又包含 ” 怎么办?可以用转义字符 \ 来标识,比如:'I\'m \"OK\"!';表示的字符串内容是:I’m “OK”! 转义字符\可以转义很多字符,比如\n表示换行...
阅读(49) 评论(0)

01-javaScript基本语法、数据类型、变量

语法JavaScript每个语句以 ; 结束,语句块用 {…}。 但是,JavaScript并不强制要求在每个语句的结尾加 ;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上 ;。注意:让 JavaScript 引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致。因此尽量按标准书写代码例如,下面的一行代码就是一个完整的赋值语句:var x = 1; 下面...
阅读(44) 评论(0)

03-页面重绘和回流以及优化

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把 html 结合 css 等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 浏览器把获取到的 HTML 代码解析成1个 DOM树,HTML 中的每个 tag 都是 DOM树中的1个节点,根节点就是我们常用的 document 对象。DOM 树里包含了所有 HTM...
阅读(87) 评论(0)

05-浏览器加载、解析、渲染这个过程

了解浏览器如何进行加载,可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以最快的速度将文件加载完毕。 了解浏览器如何进行解析,可以在构建DOM结构,组织css选择器时,选择最优的写法,提高浏览器的解析速率。 了解浏览器如何进行渲染,明白渲染的过程,在设置元素属性,编写js文件时,可以减少”reflow“”repaint“的消耗。 1.浏览器的主要功能  浏览器的主要功能是将用户选...
阅读(99) 评论(0)

07-定位 z-index

z-index属性目前只有在使用定位 position:relative、position:absolute 、position:fixed 参与的情况下才有作用,表示层级,类似 photoshop 中层级的概念。z-index层级越高,内容越应该在最上面显示。position属性中的“后来居上”这个显示规则是没有兼容性问题的,所以,要想一个元素上面显示,直接放后面就可以了,无需z-index。ab...
阅读(75) 评论(0)

06-定位position relative

relative 属性相对自身所在位置改变位置 relative 移动位置后其自身所在位置仍被占据 relative 移动后和 visibility:hidden很像,不过前者是移动后者是隐身 如果 relative 和 absolute 同时作用于两个兄弟元素上,z-index 决定了谁的层级靠上,或者就是后来者居上 一般给父元素设置 relative 给元素设置 absolut 相对定位的最小...
阅读(57) 评论(0)

05-定位 position absolute

1. position 和 float 相似 + 两者有两大共性:包裹性,破坏性包裹性 示例:.div { padding:20px; margin-bottom:10px; background-color:yellowgreen; } .abs { position:absolute; } <img sr...
阅读(154) 评论(0)

04-CSS float 浮动

float 的本意是什么 + 浮动出现的意义其实只是用来让文字环绕图片而已 浮动的本质是什么 + 浮动的本质: 包裹 破坏1. 浮动的“包裹性” div style="border:4px solid blue;"> <...
阅读(84) 评论(0)

04-BFC 和 Margin Collapse

1. BFCBFC(Block Formatting Context)直译为“块级格式化范围”。 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。 比...
阅读(57) 评论(0)
62条 共4页1 2 3 4 下一页 尾页
    个人资料
    • 访问:10745次
    • 积分:591
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档