前端常用数据处理语法-1

    // 一、charAt()方法 
    //     定义和用法
    // charAt() 方法可根据索引返回指定位置的字符 => 调用时记得return 需要返回值 没有值时默认索引为0
    let str = 'Hello,world!'
    console.log(str.charAt(1)) // e

    // 二、charCodeAt()方法
    //     定义和用法
    // charCodeAt() 方法可返回指定位置的字符的 => Unicode 编码 这个返回值是 0 - 65535 之间的整数
    let strCharCodeAt = 'Hello,world!'
    console.log(strCharCodeAt.charCodeAt(2)) // 108

    // 三、concat()方法
    //     定义和用法
    // concat()方法用于连接两个或多个数组
    // 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本
    // 实例1、将参数连接到数组中
    let strConcat = [1, 2, 3, 4]
    console.log(strConcat.concat(3, 4)) // [1,2,3,4,3,4]
    // 实例2、两个数组连接起来
    let arrConcat = [1, 2, 3, 4]
    let arrConcat2 = [5, 6, 7, 8]
    console.log(arrConcat.concat(arrConcat2)) // [1, 2, 3, 4, 5, 6, 7, 8]

    // 实例2、三个数组连接起来
    let arrConcat3 = [9, 10, 11, 12]
    console.log(arrConcat.concat(arrConcat2, arrConcat3)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

    // 四、fromCharCode()
    //     定义和用法
    // fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串
    console.log(String.fromCharCode(72, 69, 76, 76, 79).toLowerCase()) // hello

    // 五、indexOf()
    //     定义和用法 => 找不到返回-1
    // indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置的索引
    console.log(str.indexOf('o')) // 4 
    console.log(str.indexOf('Hello')) // 0
    console.log(str.indexOf(',')) // 5
    console.log(str.indexOf('world')) // 6

    // 六、lastIndexOf()
    //     定义和用法 => 找不到返回-1
    // lastIndexOf()方法可返回一个指定的字符串值最后出现的位置 在一个字符串中的指定位置从后向前搜索
    console.log(str.lastIndexOf('l')) // 9
    console.log(str.lastIndexOf(',')) // 5
    console.log(str.lastIndexOf('o')) // 7


    // 八、match()
    //     定义和用法 => 找不到返回null 正则中使用偏多
    // match() 方法可在字符串内检索指定的值 或找到一个或多个正则表达式的匹配
    console.log(str.match('Hello'))//['Hello',index:0,input:'Hello,wodld!',groups:undefined]
    console.log((str + 123).match(/\d+/g)) //['123] 匹配出所有的数字返回处理


    // 九、test()
    //     定义和用法 => 检索一个字符串是否匹配一个正则表达式 返回布尔值
    console.log(/\d+/g.test(str)) // false
    console.log(/\d+/g.test(str + '123')) // true

    // 十、replace(需要替换的值, 用来替换的值)
    //     定义和方法 => 替换字符
    console.log(str.replace(/world/, '独爱那杯cc')) // Hello,独爱那杯cc!
    // 将字符串中所有单词的首字母都转换为大写
    let name = 'aaa bbb ccc';
    uw = name.replace(/\b\w+\b/g, function (word) {
      return word.substring(0, 1).toUpperCase() + word.substring(1);
    }
    );
    console.log(uw)//'Aaa Bbb Ccc'

    // 十一、substring和substr截取字符串区别
    // 相同点:如果只是写一个参数,两者的作用都一样:都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
    console.log(str.substring(1)) // ello,world!
    console.log(str.substr(1)) // ello,world!
    // 不同点:第二个参数
    console.log(str.substr(1, 9)) // ello,worl 第二个参数是截取这个字符串的长度
    console.log(str.substring(1, 9)) // ello,wor 第二个参数是截取字符串最终的下标

    // 十一、search()
    //       定义和用法 => 用于检索字符串中指定的子字符串 或检索与正则表达式相匹配的子字符串  返回下标 找不到是-1
    console.log(str.search(/Hello/)) // 0
    console.log(str.search(/hello/)) // -1  对大小写敏感
    console.log(str.search(/hello/i)) // 0  忽略大小写的检索

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB前端助手(FeHelper)_v6.2.crx FeHelper--弹出菜单 插件入口,点击ICON,插件相关的所有功能都会在这里列出来,在popup中选择所需使用的功能即可使用 代码美化 包括Javascript代码美化、CSS代码美化、HTML代码美化;其实所有C系的代码,都可以通过Javascript代码美化工具进行格式化查看 代码压缩 包括Web前端Javascript代码压缩、CSS代码压缩、HTML代码压缩 JSON接口自动格式化查看 当你访问的接口(打开的页面)返回的是一个JSON格式的数据,FeHelper会自动将内容进行格式化处理,便于您的查看 JSON查看器 把你的JSON代码粘贴到JSON查看器的输入框中,点击“格式化”,在下方便会以非常友好的方式列出JSON数据,便于查看 字符串编解码 包括Unicode编码和解码、UTF-8字符串编码和解码、Base64字符串编解码、字符串MD5编码,前端非常实用的工具 图片Base64编码 对图片文件进行base64编码,直接拷贝datauri格式的数据 二维码生成器 能对网址、普通文本内容、电话号码、通讯录、短信等编码并生成二维码,很实用的二维码生成工具 Tracker(Javascript嗅探器) 协助您了解目标网页中 JavaScript 的运行情况,包括:执行覆盖率、执行行数、是否存在执行或语法错误等信息Tracker官网 时间(戳)转换工具 支持任意时间到对应时间戳的转换;支持任意时间戳到对应日期的转换 正则表达式工具 提供一个正则表达式的及时测试工具,并能将匹配结果进行高亮显示、高亮定位等;同时还罗列了一些常用的正则表达式供开发者使用 编码规范检测 对当前网页进行Javascript、CSS、HTML编码规范的检测,包括文件是否压缩、标签是否正确闭合、cookie管理等等 页面性能检测 对当前页面的性能进行检测,如HTTP响应时间、页面渲染时间、是否启用gzip压缩等等 栅格规范检测 如果您的页面是基于栅格系统而开发的(如960gs),这个简单的工具能很好的帮助您分析栅格对齐是否规范
二、Vue的数据驱动---mvvm模式的介绍 Vue是一款轻量级的渐进式前端框架,主要功能: 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能:路由 等等 Vue资源: 中文官网:https://cn.vuejs.org/ Github源码:https://github.com/vuejs/vue MVVM: M:Model数据模型 负责数据存储 V:View视图 负责页面的显示 VM:View Model负责业务处理,对数据进行加工,之后交给视图 Vue1 下载地址:http://v1-cn.vuejs.org/js/vue.js Vue2 下载地址:https://unpkg.com/[email protected]/dist/vue.js 三、Vue常见指令介绍上 1、插值表达式 {{}} 当模型中的数据发生改变时,那么视图中的数据也对应的发生改变。 2、v-text 将一个变量的值渲染到指定的元素中 3、v-html 可以真正输出html元素 4、v-model 实现双向数据绑定 5、v-build 绑定页面中元素的属性 6、v-if和v-show v-if 作用:判断是否加载固定的内容,如果是真,就加载,如果是假,就不加载; 语法:v-if='判断表达式' v-show 作用:判断是否显示内容 语法:v-show='判断表达式' v-if和v-show的相同点和不同点 1.相同点:都可以实现对于一个元素的显示与隐藏操作 2.不同点:v-if是将元素添加或移出dom树模型中,v-show只是在这个属性上添加display:none而已。 3.v-if有更高的切换小号,安全性高。v-show初始化消耗大点。所以,如果需要频繁切换并对安全性没有要求时, 可以用v-show。如果在运行时,条件不可能改变的话,使用v-if更好点。 7、v-for 作用:控制html元素中的循环 语法:v-for="item in 集合" 8、v-on 作用:对页面中的事件进行绑定 语法:v-on:事件类型 = '监听器' 缩写@事件类型='监听器' 四、Vue常用的组件使用 组件是vue.js中一个非常强大的功能,可以扩展HTML元素,封装可重用的代码。 1、将组件内容定义到template模板中 2、组件中实现指令以及事件绑定 五、组件间的传值 1、父组件传值给子组件 2、子组件传值给父组件 六、Vue-router路由的基本使用上 在一个系统或App中,由多个页面组成,通常会使用vue中的组件来实现,那么从一个页面跳转到另一个页面时, 通过url路径来实现的,哪个url对应哪个页面,在vue中是通过vue-router来实现 Vue-router在vue2.0中的使用、 配合vue1.0使用的版本的帮助文档地址: https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 配合vue1.0使用的vue-router下载地址: https://cdnjs.doubflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js 配合vue2.0使用的版本的帮助文档地址:http://router.vuejs.org/zh-cn/installation.html 配合vue2.0使用的vue-router下载地址:https://unpkg.com/vue-router/dist/vue-router.js 七、路由的传值 vue2.0的路由参数定义实现url的传值 八、ECMAScript6 九、let使用 let是申明变量的关键字 1、在相同的作用域内,let不能重复申明一个变量 2、let申明的变量不会被预解析 3、暂时性死区(变量在let声明前都不能访问,为了防止先调用后声明这个现象) 十、let与for的使用 1.块级作用域 let声明的变量拥有块级作用域,块级作用域是一对大括号 块级作用域可以直接些一堆大括号,以后就不用写自执行函数了 2.var与for循环 3.let与for循环 十一、const的用法 const声明一个常量,一旦声明后就不能修改了 1.如果声明后再去修改的话就会报错 2.只声明不赋值也会报错 3.只能先声明后使用,不会被提前解析 4.不能重复声明一个常量 注意:const声明的对象中属性是可以修改的 十二、结构赋值-数组 结构赋值 按照一定的模式,从数组或者对象中把数据拿出来,对变量进行赋值 数组结构赋值 等号左边与右边必须都是数组,数组的结构赋值要一一对应。如果对应不上的话就是undefind 十三、对象结构赋值 对象结构赋值 等号左边与右边必须都是对象,名字要一一对应,顺序不需要对应,对应不上的值结果是undefind 十四、字符串模板 1.字符串需要用一堆反引号包裹起来,它可以定义多行字符串,只用一堆反引号 2.要拼进去的数据需要放在${}里面 3.大括号里面还可以进行运算 4.大括号里面可以调用函数 十五、箭头函数 语法: 1.function用var、let、const来表示 2.参数要卸载第一个等号后面 a.如果没有参数,需要写一堆空的小括号 b.只有一个参数,那就直接写,不用加括号 c.参数有多个,需要加一个小括号,参数用逗号隔开 3.函数的主题内容是放箭头后面, 如果语句只有一条,那就直接写; 如果语句有多条,需要把他们放在一堆大括号里 。 十六、rest参数 rest参数 ...变量名 rest参数是一个数组,他的后面不能再有参数,不然会报错 扩展方法... 1.三个点后面是一个类数组,它的作用是把这个类数组转成真正的数组,但是它需要放到一对中括号里面 2.三个点后面是一个真正的数组,它的作用是把数组转成一个普通集合数据,不需要加中括号 十七、Symbol介绍 新增的第7中数据类型,表示独一无二。用来作为属性名,能保证不会与其他的属性名冲突 1.它是通过Symbol函数生成的 2.它的前面不能用new,因为它生成的是一个原始类型的数据,不是对象 3.它可以接受一个参数,为了便于区别。及时长的一样他们也不同 4.它不能与其他的值进行运算,没有隐式转换 5.它的值可以被转换成布尔值或字符串,不能转换成数字 十八、set数据结构 set数据结构,类似数组,所有的数据都是唯一的,没有重复的值。它本身是一个构造函数 size数据长度 add()添加一个数据 delete()删除一个数据 has()查找某条数据,返回一个布尔值 clear()删除所有数据 十九、map数据结构 map数据结构,类似于对象。键值对的集合,所有输一局都是唯一的,不会重复。每条数据都需要放在一个数组中 它本身就是一个构造函数 size()数据的长度 set()添加一条数据 delete()删除一条数据 get()获取一条数据 has()查找某条数据,返回一个布尔值 clear()删除所有数据 二十:教学视频

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值