Skip to content

JavaScript 经典实例

Chap. 1 使用javascript字符串

字符串对象：

var a = 'haha'; //litrals称为直接量
typeof a // => string
var b = new String('haha')
typeof b // => object

  • 条件比较字符串: ===’严格相等运算符 需要比较数据类型，所以上例的字符串直接量和String对象就不会一样

  • 在字符串中查找子字符串: str.indexOf('haha') indexOf方法接受两个参数 子字符串和开始搜索的位置

  • 从一个字符串提取子字符串:

var start = str.indexOf('x');
var end = str.indexOf('xx', start+1);
    • str.splice(插入/删除的起始位置；删除个数；插入的元素) 删除并插入元素，会改变原元素
  • str.slice(start,end(能为负))
  • str.substring(start, end(不能为负));

  • //ps 关于两者的不同可以参考这里

  • str.split(','); => 分割的数组

  • str.substr(字符串开始的索引位置, 字符串的长度) => 依然不改变原字符串 默认截取从当前位置到字符串最后的长度。
var a = 'good job';
a.substr(2) => od job
a.substr(2,2) => oo

所以.substr很适合切一句话的第一个字 str.substr(1);

----附注----

而很适合切一个数组的最后几个值的是array.splice(1)

  • 检查一个存在的非空的字符串: if (( typeof str != 'undefined' && typeof str.valueOf() == 'string' ) && str.length > 0 )
  • 处理textarea的单个行: str.split( '\n' ) //用来即时预览评论的常见技术
  • 去除字符串尾部空白: str.trim() 是js内置方法!~

Chap. 234 关于时间、定时器、数字

  • 创建一个特定的日期(date对象): var dt = new Date(2016-1-2) or new Date(2016, 1, 2, 可以再加小时、分钟…)

  • 获取时间戳: new Date().getTime()/1000;

  • 使用带有定时器的函数闭包:

javascript var intervalId=null; function stopStartElement(){ if (intervalId == null) { intervalId = setInterval(function(){...},1000) } else { clearInterval(intervalId); intervalId=null; } }

  • NaN: 当想要使用一个数字操作中无法解析为数字的一个值的时候，表示not a number

  • 把十进制转换为十六进制: num.toString(16);

  • 随机产生颜色：

javascript function random(val){ return Math.floor(Math.random()*(val+1)); } function randomColor(){ return "rgb(" + randomVal(255) + "," + randomVal(255) + "," randomVal(255) + ")"; }

Chap. 5 数组

  • 排序数组
  • 多维数组扁平化 xx.concat(xx数组,xx数组,xx数组)
  • findIndex(callback) 与 indexOf(value)

Chap. 6 函数

  • 声明式函数 vs 函数直接量

  • 函数只能有一个返回值，若要多个返回值 放在对象里

  • 实现递归算法（斐波那契数列 ）

javascript var fibonacci = function() { return n<2 ? n:fibonacci(n-1) + fibonacci(n-2); }

  • 闭包的用法: 创建能够记住其状态的函数

javascript function greeting(when) { function addWho(who) { return 'good' + when + 'to' + who; } return addWho; } var morning = greeting('morning'); //赋值给变量的已经是内部函数了 morning('Jack'); var night = greeting('night'); night('Jack'); //分别创建了两个作用域链

Chap. 7 事件

  • addEventListener基本上各大浏览器都可以用了
  • .keydown事件（传出的第一个参数key 有key.key key.Code 以及最常用的数字key.which）
  • 还有h5拖放事件！已整理至vikkiModule啦！
  • e.target vs e.currentTarget 前者触发后者监听
  • e.isTrusted可以用来分辨是用户触发事件行为（true）还是js触发事件（false）

Chap. 8 浏览器

  • window.navigator(重要属性有userAgent)

  • window.location系列(当然可以直接简写成location 因为最顶级的元素是window)

javascript 比如https://nqdeng.github.io/7-days-nodejs#2.1 location.protocol = 'https:' location.hostname = 'nqdeng.github.io' location.pathname = '/7-days-nodejs' location.hash = '#2.1' ∴ location.href = protocol + '//' + hostname + pathname + hash

  • 动态生成breadcumbTrail（面包屑路径）

  • 单页面 不同锚点 记住状态，以防用户意外刷新

要点：①获取hash：页面打开时检测hash，利用switch，根据hash不同跳转不同阶段 location.hash.split('#')[1]; ②设置hash：跳下一阶段时，location.hash也要相应改变成下一阶段的。 这样相当于“重新看不见地运行至当前状态”

Chap. 11,12 DOM 操作

  • 一段p, 里面有a，如何将a移除且保留a的内容（a的文本节点，还有em或span之类）？亦即：将所有的子节点移除链接

javascript var children = links[i].childNodes; for(var j = 0; j < children.length; j++){ parent.insertBefore(children[j], links[i]); //先将a内的子节点一个个插入到现在的a前 //如果希望保留a里的数据，则写成children[j].cloneNode(true); } parent.removeChild(children[i]); //再删除a

## Chap. 13 确定 Web 页面区域

  • 13.1 web页面的宽高

window.innerWidth/ window.innerHeight

IE9以前: document.body.clientWidth

  • 13.2 度量元素

el.getBoundingClientRect(); 返回一个ClientRect对象，包括top, bottom, right, left还有width和height