前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）

前端总结系列

• 前端总结·基础篇·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)

四、方法列表

为方便阅读，有如下准则：

1. 参数中的[]代表可选参数。如substr(start[,length])中，length为可选参数。
2. 本文对常用API做了精准分类，更加便于阅读。
3. 需要让某些浏览器支持某些新功能，，可以使用腻子脚本（Polyfill），详见[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/
4. 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()（单行字符串，会转义\n\u000A等转义字符）
	let name = 'Bob';String.raw`Hi\n${name}!`  // 'Hi\nBob!'
	String.raw`Hi\n${2+3}!`;  // 'Hi\n5!'
	String.raw`Hi\u000A!`;  // 'Hi\u000A!'
	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\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]
	取反 \D\W\S 这些表示的是对应小写字母的集合取反，比如\D为[^0-9]，也就是只要不是0-9都可以匹配
	边界 ^x，x$分别匹配字符首和尾。\b，\B分别匹配单词首和尾。
	右值 x(?=y)为当x紧接着的一个字符是y则匹配。x(?!y)表示紧接着的不是y则匹配。
	空白 \t、\v、\f、\r、\n、[\b],分别为水平制表符、垂直制表符、换页、回车、换行和退格。这些都是空白字符。
模糊匹配
	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系列，貌似不错，留个标记，好好学。

前端网也不错，做个标记，好记得路。

附：ES6规范 | ES3规范 | ES5规范