搜索文章
类目归类
第七章 ECMAScript 6 数组的扩展
Array.from()Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。下面是一个类似数组的对象,Array.from将它转为真正的数组。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).forE...第六章 ECMAScript 6 数值的扩展
二进制和八进制表示法ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true 0o767 === 503 // true从ES5开始,在严格模式之中,八进制就不再允许使用前缀0表示,ES6进一步明确,要使用前缀0o表示。// 非严格模式 (function(){ console.log(0o11 === 011); })() // true // 严格模式 (function(){ 'use strict'; console.log(0o11 === 011); })() // Uncaught SyntaxError: Octal literals are not allowed in strict mode.如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。Number('0b111') // 7 Number('0o10') // 8Number.isFinite(), Number.isNaN()ES6在Number对象上,新提供了Number.is...第五章 ECMAScript 6 正则的扩展
RegExp构造函数在ES5中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz', 'i'); // 等价于 var regex = /xyz/i;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。var regex = new RegExp(/xyz/i); // 等价于 var regex = /xyz/i;但是,ES5不允许此时使用第二个参数,添加修饰符,否则会报错。var regex = new RegExp(/xyz/, 'i'); // Uncaught TypeError: Cannot supply flags when constructing one RegExp from anotherES6改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。new RegExp(/abc/ig, 'i')....第四章 ECMAScript 6 字符串的扩展
ES6加强了对Unicode的支持,并且扩展了字符串对象。字符的Unicode表示法JavaScript允许采用uxxxx形式表示一个字符,其中“xxxx”表示字符的码点。"\u0061" // "a"但是,这种表示法只限于u0000——uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表达。"\uD842\uDFB7" // "????" "\u20BB7" // " 7"上面代码表示,如果直接在“u”后面跟上超过0xFFFF的数值(比如u20BB7),JavaScript会理解成“u20BB+7”。由于u20BB是一个不可打印字符,所以只会显示一个空格,后面跟着一个7。ES6对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。"\u{20BB7}" // "????" "\u{41}\u{42}\u{43}" // "ABC" let hello = ...第三章 ECMAScript 6 变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。var a = 1; var b = 2; var c = 3;ES6允许写成下面这样。var [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2...vue+elementui--$message提示框被dialog遮罩层挡住问题解决
最近碰到一个先执行this.$message提示内容,然后接着弹出dialog带遮罩层弹框。那么问题来了,message提示框会默认被dialog遮罩层挡住,现在就是要解决这个问题。由于都是弹框,问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。不过好在message组件中提供了customClass 属性,我们可以利用这个属性去添加一个z-index超过dialog遮罩层比重的值就好了。this.$message({message:'这是一条消息提示',type:'success',customClass:'zZindex'});<style> .zZindex {z-index:3000 !important;}</style>dialog遮罩层的比重好像是2007左右,我们只要超过这值就好,这里有个小细节,样式定义的地方要写在全局的style中,写在含有scoped的style中是不生效的,至少我这里是。微信小程序-正则表达式(验证手机号-身份证-邮箱..)
手机号验证:if (!(/^1[34578]\d{9}$/.test(e.detail.value.phone))) { wx.showToast({ title: '手机号码有误', duration: 2000, icon:'none' }); return false; }邮箱验证:if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(that.data.Emlia))){ wx.showToast({ title: '邮箱输入有误', duration: 2000, icon: 'none' }); return false; }中英文姓名验证(没有长度限制):if (!(/^[\u4E00-\u9FA5A-Za-z]+$/.test(e.detail.value.name))) { wx.showToast({ title: '姓名有误', duration: 2000, icon: true }); return fals...第二章 ECMAScript 6 let和const命令
let命令ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。for循环的计数器,就很合适使用let命令。for (let i = 0; i < arr.length; i++) {} console.log(i); //ReferenceError: i is not defined上面代码的计数器i,只在for循环体内有效。下面的代码如果使用var,最后输出的是10。var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6]()...第一章 ECMAScript 6简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ECMAScript 和 JavaScript 的关系一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript...微信小程序子组件给父组件传参,调用父组件函数
今天我们讲解一下微信小程序子组件如何给父组件传参数,子组件如何调用父组件的函数参考文章:http://www.freetechs.cn/archives/1251、子组件js文件定义函数addInfo注:triggerEvent第一参数要跟第4步中bind:addInfo中的字符保持一致addInfo(){ let item = {title:'测试',money:8,category:'吃饭'}//要传给父组件的参数 this.triggerEvent('addInfo',item)//通过triggerEvent将参数传给父组件 }, 2、子组件wxml绑定函数addInfo<button type="primary" bindtap="addInfo">确定</button>3、父组件.json文件引用子组件(这段代码只是示例)复制代码{"component": true, "usingComponents": { "add-item":...ECMAScript6 原生JS知识系统整理
笔者最近在对原生JS的知识做系统梳理,原因有两个,一个原因是我最近在面试一些前端er的时候发现他们连最基础的js知识都回答不上来,要不就是模模糊糊的回答,自己都说的不是很清楚,所以我觉得JS作为前端工程师的根本技术,学再多遍都不为过,第二个原因就是对个人的一个复习总结提升,从而发现新的东西,这就是所谓的温故而知新的道理。如何对JS的知识做系统的梳理呢,这里我以一系列的问题为驱动,当然也会有追问和扩展,内容系统且完整,对初中级选手会有很好的提升,高级选手也会得到复习和巩固。因为篇幅有点长,为了不给大家造成学习疲劳感,所以分好多篇内容进行整理,本文内容持续更新,直到本系列文章更新完结为止,敬请大家关注!<<第一章 ECMAScript 6简介>><<第二章 ECMAScript 6 let和const命令>><<第三章 ECMAScript 6 变量的解构赋值>><<第四章 ECMAScript 6 字符串的扩展>><<第五章 ECMAScript 6 正则的扩展>>...css 添加手状样式,鼠标移上去变小手,变小手
用css 添加手状样式,鼠标移上去变小手,变小手cursor:pointer;用JS使鼠标变小手onmouseover(鼠标越过的时候)onmouseover="this.style.cursor='hand'"cursor其他取值auto //标准光标 default //标准箭头 pointer, hand //手形光标 wait //等待光标 text //I形光标 vertical-text //水平I形光标 no-drop //不可拖动光标 not-allowed //无效光标 help //帮助光标 all-scroll //三角方向标 move //移动标 crosshair //十字标 e-resize //箭头朝右方n-res...web前端之本地存储localStorage
前言本文主要为大家详细介绍了本地存储localStorage的用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下什么是localStorage?在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的localStorage的局限1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对...web前端之本地存储cookie
前言网络早期最大的问题之一是如何管理状态。简而言之,服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时,在页面中插入一些参数,并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单,或者作为URL参数的一部分传递。这两个解决方案都手动操作,容易出错。cookie出现来解决这个问题。作用cookie是纯文本,没有可执行代码。存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来向访问者电脑上存储数据,或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)如何工作当网页要发http请求时,浏览器会先检查是否有相应的cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的,而且每一次http请求浏览器都会自动帮我们做。这个特点很重要,因为这关系到“什么样的数据适合存储在cookie中”。存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销;但如果这些数...