前端总结系列
- 前端总结·基础篇·CSS（一）布局
- 前端总结·基础篇·CSS（二）视觉
- 前端总结·基础篇·CSS（三）补充
- 前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
- 前端总结·基础篇·JS（四）异步请求及跨域方案
- 前端总结·工具篇·管理（一）常用模块化方案
目录
这是《前端总结·基础篇·JS》系列的第一篇，主要总结一下原型、原型链、构造函数及字符串。
一、原型链
1.1 原型（prototype）
1.2 原型链（__proto__）
1.3 构造函数（constructor）
二、字符串使用
2.1 定义字符串
2.2 使用字符串
三、常用技巧
3.1 字频统计
四、方法列表
4.1 转换
4.2 修改
4.3 匹配
4.4 文本
4.5 其他
一、原型链
更多有关原型链的思考，请见汤姆大叔的博客。
1.1 prototype（原型）
给原型添加属性和方法，需要添加在对象上。这些属性和方法，会被后代继承。实现继承还有其他方法，更多请见幻天芒的博客。
String.prototype.bibi = 'die' // 原型是作用于对象String上的
var str = ''
console.log(str.bibi)
1.2 __proto__（原型链）
原型链中包含了此对象的所有方法。
var str = ''
console.log(str.__proto__)
1.3 constructor（构造函数）
构造函数是一类具有某些相同属性事物的集合。在创建对象的时候，会将传过来的参数赋值到对象自身的属性上。父类的静态属性和方法会被子类继承。
/* 定义汽车构造函数 */
var Car = function(brand){
this.brand = brand
this.type = 'Car'
}
var BMW = new Car('BMW') // 创建BMW车型
console.log(BMW.brand) // 显示品牌名
str.__proto__.constructor // function String() { [native code] }
str.__proto__.__proto__.constructor
二、字符串使用
2.1 定义字符串
字符串使用单引号或者双引号引起来。可以直接定义，也可以创建字符串对象。
var str = 'I See U.' // 直接定义字符串并且复制给变量
var str = new String('I See U.') // 创建字符串对象并赋值
2.2 使用字符串
字符串的下标从0开始，最后一个下标是字符串长度减1。访问字符串可以直接访问，或者对
console.log(str) // 直接访问
console.log(str[0]) // 通过下标访问
三、常用技巧
3.1 字频统计
首先把字符串中的词库提取出来（可以将字符串转成数组，再去重）。在去重的同时可以把次数统计出来。去重的更多方法，请见前端网。call用来改变this的指向，方法请见每天进步一点点！。
统计结果为0次，就是一次。统计函数还有待改善。功能上无问题，细节上还得继续优化。例如，标点符号和空格应该过滤掉。或者强化一下，统计词频。
var wordCount = function(str){
/* 提取字库 */
var strSorted = str.split('').sort() // 字符串转数组并排序
var newArr = [] // 保存去重后的数据
countArr = [] // 保存统计结果，下标为出现的次数
/* 去重 */
var nextCount = 0 // 定义是否抵达下一个新词
var currentCount = 0 // 存储重复词的次数
for(x in strSorted){
if(strSorted[x]!==newArr[newArr.length-1]){
nextCount = 1 // 标记已抵达新词
newArr.push(strSorted[x]) // 去重后的数据保存到newArr
if(Array.isArray(countArr[currentCount]) == false){
countArr[currentCount] = [] // 防止包括，先定义为数组
}
Array.prototype.push.call(countArr[currentCount],strSorted[x-1]) // 把统计结果保存在CountArr
// console.log('if / currentCount:'+currentCount) 调试计数器
currentCount = 0 // 重置上一次的计数
}
else{
if(nextCount === 1){
currentCount+=1 // 补上一个计数
nextCount=0 // 重置抵达下一个的标记
}
currentCount+=1 // 计算器加一
// console.log('else / currentCount:'+currentCount) 调试计数器
}
}
/* 展示数据 */
for(var i = countArr.length-1;i>=0;i--){
if(countArr[i]!==undefined){
console.log('出现'+i+'次：'+countArr[i])
}
}
return countArr
}
/* 使用函数 */
var str = '今天的天气还是不错的，不出去走走走走走？' // 定义测试用字符串
wordCount(str)
四、方法列表
为方便阅读，有如下准则：
- 参数中的[]代表可选参数。如substr(start[,length])中，length为可选参数。
- 本文对常用API做了精准分类，更加便于阅读。
- 需要让某些浏览器支持某些新功能，，可以使用腻子脚本（Polyfill），详见[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
- Reference/Global_Objects/String)。
定义字符串str为'I Love Javascript.'。下面的测试代码将在此基础上进行。
var str = 'I Love Javascript.'
4.1 转换
字符串（通常在其他数据类型转换成字符串的时候用到）
* toString()（一般转换）
str.toString() // "I Love Javascript."
[1,2,3].toString() // "1,2,3" 数组转成字符串
* String(str)（强制转换）
String(str) // "I Love Javascript."
数组
split([separator[,limit]])（第一个参数为分离的规则，第二个参数为分离后的数组个数）
str.split() // [I Love Javascript.]
str.split('') // ["I", " ", "L", "o", "v", "e", " ", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]
str.split(' ') // ["I", "Love", "Javascript."]
str.split(' ',2) // ["I", "Love"]
str.split(/s*/) // ["I", "L", "o", "v", "e", "J", "a", "v", "a", "s", "c", "r", "i", "p", "t", "."]
str.split(/s{1}/) // ["I", "Love", "Javascript."]
str.split(/s{2}/) // ["I Love Javascript."]
链接
ES6
* link(url)（转成链接）
str.link('z.cn') // '<a href="z.cn">I Love Javascript.</a>'
* anchor(name)（转成页内定位链接，又叫锚链接）
str.anchor('top') // '<a name="top">I Love Javascript.</a>'
4.2 修改
切割
* substr(start[,length])（start参数可为负，第二个参数为长度）
str.substr(2,3) // 'Lov'（start为负时，IE需要使用polyfill）
* substring(indexStart[,indexEnd])（参数皆不可为负，取值>=0）
str.substring(2,3) // 'L'
* slice(beginIndex[,endIndex])（参数皆可为负）
str.slice(-8,-2) // 'ascrip'
* trim()（删除文本左右两边空格，文本中的空格不删除）
str.trim() // 'I Love Javascript.'
* trimLeft(删除文本左边空格)
* trimRight(删除文本右边空格)
拼接
concat(string2[,string3,....stringN])（字符串拼接，可有多个参数）
str.concat('Me Too.') // 'I Love Javascript.Me Too.'
ES6
String.raw()（单行字符串，会转义
u000A等转义字符）
let name = 'Bob';String.raw`Hi
${name}!` // 'Hi
Bob!'
String.raw`Hi
${2+3}!`; // 'Hi
5!'
String.raw`Hiu000A!`; // 'Hiu000A!'
String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
4.3 匹配
搜索
* indexOf(searchValue[,fromIndex])（大于length返回-1）
str.indexOf('a') // 8
str.indexOf('a',20) // -1
* lastIndexOf(searchValue[,fromIndex])
str.lastIndexOf('a') // 10 fromIndex小于0时转换为0
str.lastIndexOf('a',20) // 10 fromIndex大于length时搜索整个字符串
str.lastIndexOf('a', 9) // 8 使用了index，搜索完了右边，还要搜索左边
* charAt(index)
str.charAt(5) // e
* charCodeAt(index)
str.charCodeAt(5) // 101
* String.fromCharCode(num1[,...[,numN]])
String.fromCharCode(101) // e 使用的是Unicode编码
ES6
* CodePointAt(index)
* String.fromCodePoint(num1[,...[,numN]])
* includes(searchString[,position])（判断文本是否存在的搜索，位置参数可选）
str.includes('Love') // true（返回值为true/false）
* startWith(searchstring[,position])
str.endsWith('I') // true
str.endsWith('i') // false
* endsWith(searchstring[,position])
str.endsWith('Javascript.') // true
str.endsWith('Javascript') // false
正则
replace使用函数作为第二参数请见MDN
* match(regexp)（匹配到返回结果，没有则返回null）
str.match(/Lo/) // ["Lo"]
str.match(/Los/) // null
* search(regexp)（匹配到返回下标，没有则返回-1）
str.search(/Lo/) // 2
str.match(/Los/) // -1
* repacle(regexp|substr,newSubstr|function)（得到的是返回的新字符串，原字符串不变）
str.replace(/Love/,'like') // 'I like Javascript.'
str.replace(/Love/,'like');str // 'I Love Javascript.'
var newStr = str.replace(/Love/,'like');newStr // 'I like Javascript.'
精确匹配
数字 d 匹配0-9中任意数字，亦可表示成[0-9]
单词 w 匹配数字、大小写字母和下划线，亦可表示成[A-Za-Z0-9_]
字符 s 匹配空白字符（空格、水平或垂直制表符、换行、换页等），亦可表示成[ f
vu00a0u1680u180eu2000-u200au2028u2029u202fu205fu3000ufeff]
取反 DWS 这些表示的是对应小写字母的集合取反，比如D为[^0-9]，也就是只要不是0-9都可以匹配
边界 ^x，x$分别匹配字符首和尾。，B分别匹配单词首和尾。
右值 x(?=y)为当x紧接着的一个字符是y则匹配。x(?!y)表示紧接着的不是y则匹配。
空白 、v、f、
、
、[],分别为水平制表符、垂直制表符、换页、回车、换行和退格。这些都是空白字符。
模糊匹配
0个或以上 *
1个或以上 +
1个或0个 ?
这个或那个 x|y
非换行和回车 .
按组匹配
最起码一组 {1,}
一组到三组 {1,3}
只要一组 {1}
4.4 文本
状态
* toUpperCase()（转成大写）
str.toUpperCase() // I LOVE JAVASCRIPT.
* toLowerCse()（转成小写）
str.toLowerCase() // 'i love javascript.'
* toLocalUpperCase()/toLocalLowerCase()（本地化的大写和小写，一般不使用）
ES6语法
repeat(count)（让文本重复多次，参数为重复的次数，范围为>=0。）
str.repeat(2) // 'I Love Javascript.I Love Javascript.'
修饰
已废弃清单（不推荐使用）（以下皆用来生成HTML标签）
sup() // <sup> 上标
sub() // <sub> 下标
bold() // <b> 粗体
big() // <big> 大号字体
small() // <small> 小号字体
strike() // <strike> 删除线
italics() // <i> 斜体
fixed() // <tt> 打印机字体
blink() // <blink> 闪烁字体
fintsize(number) // <font size=""> 参数取值范围为1-7
fontcolor(color) // <font color="">
4.5 其他
更多的用法和解释请见MDN。
* valueOf() // 转换成字符串，默认自动调用，不可直接使用
* toSource() // 自动调用
* localeCompare()
ES6
* string[Symbol.iterator]
* normalize()
结语
本文部分参考W3School，主要参考MDN。另外，还参考了汤姆大叔、幻天芒、前端网和每天进步一点点！的博客。
汤姆大叔的深入理解JAVASCRIPT系列，貌似不错，留个标记，好好学。
前端网也不错，做个标记，好记得路。