美文网首页
JavaScript 程序设计——基础篇 7-13

JavaScript 程序设计——基础篇 7-13

作者: hyt222 | 来源:发表于2017-08-12 11:22 被阅读0次

    7.字符串

    对 JS 来说,网页中的文本都是字符串。在 JS 中在双引号(单引号)中的都是字符串。

    “该号码可注册”   “13916316316”    “ ”    “http://www.163.com”    'http://www.163.com'

    单引号双引号完全等价,都可以用来描述字符串。

    str.length: 判断字符的长度 “micromajor”.length // 10

    length 典型应用场景

    str.charAt(index):index 为索引值,从 0 开始,最后一个索引值为 str.length-1 。通过索引找出对应字符是什么。"micromajor".charAt(0) // "m"

    str.indexOf(searchValue[,fromIndex]):第二个参数为从哪个索引位置开始找,一般省略。返回要查找的字符串的索引位置,只匹配一次,从左向右匹配,找不到输出 -1,经常会利用 -1 判断字符在字符串中是否存在。“micro-major”.indexOf("-") // 5

    str.search(regexp):括号内为正则表达式。返回索引位置,找不到返回 -1。 “micromajor163”.search(/[0-9]/) // 10   查找 0-9 数字的集合

    str.match(regexp):匹配到什么返回什么,结果为数组,未匹配返回 null。 “micromajor163”.match(/[0-9]/) // ["1"] 

    "micromajor163".match(/[0-9]/g) // ["1","6","3"] 希望匹配到所有的数字,加入全局的参数 g。

    str.replace(regexp | substr , newSubstr | function ):替换字符,regexp为正则表达式,substr为字符串,newSubstr为替换字符串,function为生成替换文本的函数。返回替换后的字符串。 

    “micromajor163”.replace(/[0-9]/,"#") // "micromajor#63"                          

    “micromajor163”.replace(/[0-9]/g,"#") // "micromajor###" 是否做全局替换取决于正则表达式中有无全局参数 g 。

    “micromajor163”.replace(/[0-9]/g,"") // "micromajor"

    str.substring(indexA[,indexB]):通过索引方式截取字符串的一部分,不包含较大索引值对应的字符。可传入复数索引值但无意义,处理为 0。

    "micromajor".substring(5,7) // "ma"    "micromajor".substring(5) // "major" 索引及之后的全部截取

    str.slice(beginSlice[,endSlice]):截取字符串,索引有大小顺序,可输入负数表示倒数第几个字符。

    “micromajor”.slice(1,-1) // "icromajo"              “micromajor”.slice(-3) // "jor"

    str.substr(start[,length]):从某个位置开始,取多少长度的字符串,位置可为负值。

    “micromajor”.substr(5,2) // "ma"                “micromajor”.substr(5) // "major"

    str.split([separator][,limit]):separator为分隔符,以分隔符分隔的关键词的分割,limit为要得到多少关键词,返回关键词数组。若分隔符为空按字符分割。

    “micro major”.split(" ") // ["micro","major"]          “micro major”.split(" ",1) // ["micro"]

    “micro2major”.split(/[0-9]/) // ["micro","major"]

    str.toLowerCase() str.toUpperCase():字符串变小写 大写

    字符串连接 + :“0571”+“-”+“88888888” // "0571-88888888"

    String() 把一个东西转成字符串 : String(null) // "null"

    转义:通过加反斜杠把一些字符转义为字符。

    “micro\"major” // “micro"major”      “micro\tmajor” // “micro    major” Tab 键表单效果 \n 表示换行


    8.对象

    对象:拥有属性的方法的个体

    创建对象:var car = new Object();     var car = {};

    属性和方法:通过键值对(key-value)形式表示属性,属性可以为函数。属性之间用逗号分隔。通过 . [ ] 访问属性和方法。

    创建与访问属性

    增加属性和方法:直接赋值。

    增加新属性

    修改属性和方法:直接赋值。

    修改属性和方法

    删除属性和方法:delete

    删除属性和方法

    obj.constructor:找到对象由哪个方法构建出来。也可理解为获取某个对象的构造函数。

    obj.toString():把一个对象转成字符串

    obj.valueOf():获取对象的值

    obj.hasOwnProperty():判断这个对象自己拥有的属性,拥有返回 true,否则返回 false。还可以验证对象中的属性是不是通过继承得来的,通过继承得到的属性可以访问到但不属于自己。


    9.数组

    数组创建:数组中可以有不同类型的元素,元素间用逗号分隔。

    arr.length:求数组长度,元素个数。

    获取,修改数组元素:用 [ ] 和 索引值访问数组元素。

    arr.indexOf(searchElement[,fromIndex = 0]):找出元素在数组中对应的索引。第二个参数表示开始查找的索引,默认从头开始找,找不到返回 -1,可用 -1 判断元素是否存在数组中。

    arr.forEach(callback[,thisArg]):把数组所有元素遍历。callback 为传入的回调函数,每遍历一个元素,把数据传给函数执行一次。如果回调函数中有 this 关键字,thisArg 可替代 this,让 this 指向 thisArg。

    在 arr.forEach() 中,callback 函数的参数必须为三个参数,item,index,array。第一个参数 item 是遍历的数组元素,第二个参数 index 是对应的数组索引,第三个参数 array 是数组本身。

    arr.reverse():把数组元素顺序颠倒

    arr.sort([compareFunction]):排序,compareFunction 函数用于做比较。

    如果函数 byScore 的返回值小于零,a 排在 b 的前面。成绩由高到低排列。当不传入比较函数时,按照 Unicode 编码顺序排序。

    arr.push(element1,...,elementN):往数组后面添加元素

    arr.unshift(element1,...,elementN):在数组前添加元素

    arr.shift():从数组中获取并删除第一个元素

    arr.pop():从数组中获取并删除最后一个元素

    arr.splice(index,howMany[,ele1[,...[,eleN]]]):在任意位置删除并插入元素。index 为开始删除的位置,howMany 为删除元素的个数。在索引元素前插入元素。

    不写加入的元素相当于删除的效果

    删除元素个数为 0 时仅插入元素

    reverse,sort,push,unshift,shift,pop,splice 原数组均被修改。


    arr.slice(begin[,end]):索引从 begin 到 end(不包含)复制数组元素

    全部拷贝

    arr.concat(value1,...,valueN):可连接多个值

    arr.join([separator]):传入分隔符将数组拼成字符串。不写分隔符默认为逗号,输入空字符相当于无分隔符连接。

    保留原成绩单,新建一份修改过的成绩单

    arr.map(callback[,thisArg]):帮你把 callback 的返回值加入到新数组中

    arr.reduce(callback,[initialValue]):累加,每一次传入上一次的结果。


    10.函数

    函数定义:函数声明;函数表达式

    函数声明 函数表达式

    function 函数名([ 形参列表 ]){执行代码}

    函数调用:函数调用结果为返回值。函数名([ 实参列表 ])

    函数参数

    参数为原始类型:值传递

    不改变值,相当于做一份拷贝给函数

    参数为对象类型:引用传递

    函数中修改对象会影响对象

    无形参时,参数通过 arguments 取得

    参数数量不定的求和

    作用域:变量起作用的范围,函数中定义的变量作用域在函数以内。

    函数作为对象属性使用

    this 表示调用这个函数的对象,更加灵活。

    构造函数+原型

    原型属性为公共对象用的属性。构造出来的对象有隐藏属性指向构造函数的原型属性,找到 move 属性并使用。


    11.Date

    创建日期

    当前时间:new Date()        2014 年 12 月 5 日:new Date(2014,11,5) JS月份从 0 开始

    new Date()  new Date(value)  new Date(year,month[,day[,hours[,minutes[,seconds[,milliseconds]]]]])

    date.getXXX() : 得到 year,month,day ....

    格式化

    padding 补零

    date.setXXX() 设定日期,时间

    当设置的日期超出范围时,浏览器进行智能推导,自动转换。

    求天数(获取每个月天数):

    下一个月的第 0 天即为上一个月的最后一天

    Date 和 Number 间的转换

    date.getTime() //  得到距离 1970-1-1 00:00:00 的毫秒数

    new Date(毫秒数) //  将上面得到的毫秒数传入得到日期

    date.setTime(毫秒数) // 将上面得到的毫秒数传入得到日期


    12.RegExp

    正则表达式:描述字符串规则的表达式。/规则/属性   new RegExp(规则.属性)

    regexpObj.test(str):测试正则表达式与指定字符串是否匹配。只需要包含正则表达式所描述的格式即为真。

    锚点:用于匹配一个位置。^匹配起始位置(/^http:/);$匹配结尾位置(/\.jpg/);\b匹配单词边界(\bis\b)。

    字符类:匹配一类字符中的一个。[abc]:a或b或c;[0-9]:一个数字;[^0-9]:非数字的一个字符;[a-z]:一个字母;.:任意字符(换行除外)

    元字符:具有特殊意义的字符。

    ^ ,$, \b ,\d([0-9]) ,\D([^\d]),\s(空白符),\S([^\s]),\w([A-Za-z0-9_]),\W([^\w])

    量词:表示出现的次数

    {m,n}:m到n次    *:{0,}0到任意次   ?:{0,1}   +:{1,}

    转义符:需要匹配的字符是元字符,前面加上反斜杠。

    \ /\ /:转义 //      \?:转义?    \ .:转义 .

    多选分支:或 | ,字符类是特殊的多选分支,每个分支为一个字符。

    /thi (c|n) k/ === /thi [cn] k/

    捕获():保存匹配到的字符,日后再用。保存在 $1,$2…中,作为函数接口或返回值。(?:)不捕获。

    str.match(regexp):获取匹配的字符串。

    正则表达式写法不唯一

    str.replace(regexp/substr,repalcement):替换一个子串。

    $1为捕获到的字符,将5替换为5.00

    replacement 可以是函数,可处理更复杂的一些替换,函数返回值为替换的内容。

    regexp.exec(str):更强大的检索,更详尽的结果(每一个匹配的时候告诉你位置),过程的状态(告诉你下一次匹配从哪里开始)。

    可以改变下一次匹配的位置


    13.JSON

    JavaScript Object Notation JS的对象表示,用JS的对象表示方法描述数据。JSON属性名用双引号括起来。

    JSON.parse(text[,reviver]):把JSON的数据转化为JS的数据。reviver 为转化函数,较少使用。

    JSON.stringify(value[,replace[,space]]):把JS中的对象转换成字符串。

    相关文章

      网友评论

          本文标题:JavaScript 程序设计——基础篇 7-13

          本文链接:https://www.haomeiwen.com/subject/rtthrxtx.html