前端总结·基础篇·JS(一)原型、原型链、构造函数和字符串(String)
2017-03-06 13:09
387 查看
前端总结系列
前端总结·基础篇·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()(单行字符串,会转义\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规范
相关文章推荐
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
- 前端总结·基础篇·JS(四)异步请求及跨域方案
- 前端总结·基础篇·CSS(一)布局
- 前端总结·基础篇·CSS(二)视觉
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组(Array)
- js前端页面,对string字符串的处理函数和方法
- 前端总结·基础篇·JS(二)数组深拷贝、去重以及字符串反序和数组
- javascript入门·js核心语言--字符串(string)
- js---在前端开发中,如何通过正则表达式去除字符串string首尾的空格,JavaScript正则去除首尾空格
- [置顶] js中数组Array和字符串String的属性方法归纳总结
- 编写类String的构造函数、析构函数和赋值函数,已知类String的原型
- JS字符串用法总结
- 前端开发必须知道的JS之原型和继承
- C# 格式化字符串几种方式总结 String.Format
- js:字符串(string)转json
- js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf
- String和StringBuffer——字符串性能优化总结
- 前端开发必须知道的JS(一) 原型和继承(转)
- C# 格式化字符串几种方式总结 String.Format
- js javascript 判断字符串是否包含某字符串,String对象中查找子字符,indexOf