搜索文章
类目归类
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
第七章 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...
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
第六章 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...
admin
2020-11-06
/
0 评论
/
0 阅读
2020-11-06
第五章 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')....
admin
2020-11-05
/
0 评论
/
0 阅读
2020-11-05
第四章 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 = ...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
第三章 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...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
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中是不生效的，至少我这里是。
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
微信小程序-正则表达式(验证手机号-身份证-邮箱..)
手机号验证: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...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
第二章 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]()...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
第一章 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...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
微信小程序子组件给父组件传参，调用父组件函数
今天我们讲解一下微信小程序子组件如何给父组件传参数，子组件如何调用父组件的函数参考文章：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":...
admin
2020-11-04
/
0 评论
/
0 阅读
2020-11-04
admin
2020-11-03
/
0 评论
/
0 阅读
2020-11-03
ECMAScript6 原生JS知识系统整理
笔者最近在对原生JS的知识做系统梳理，原因有两个，一个原因是我最近在面试一些前端er的时候发现他们连最基础的js知识都回答不上来，要不就是模模糊糊的回答，自己都说的不是很清楚，所以我觉得JS作为前端工程师的根本技术，学再多遍都不为过，第二个原因就是对个人的一个复习总结提升，从而发现新的东西，这就是所谓的温故而知新的道理。如何对JS的知识做系统的梳理呢，这里我以一系列的问题为驱动，当然也会有追问和扩展，内容系统且完整，对初中级选手会有很好的提升，高级选手也会得到复习和巩固。因为篇幅有点长，为了不给大家造成学习疲劳感，所以分好多篇内容进行整理，本文内容持续更新，直到本系列文章更新完结为止，敬请大家关注！<<第一章 ECMAScript 6简介>><<第二章 ECMAScript 6 let和const命令>><<第三章 ECMAScript 6 变量的解构赋值>><<第四章 ECMAScript 6 字符串的扩展>><<第五章 ECMAScript 6 正则的扩展>>...
admin
2020-11-03
/
0 评论
/
0 阅读
2020-11-03
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...
admin
2020-11-03
/
0 评论
/
2 阅读
2020-11-03
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对...
admin
2020-11-03
/
0 评论
/
0 阅读
2020-11-03
admin
2020-11-03
/
0 评论
/
0 阅读
2020-11-03
web前端之本地存储cookie
前言网络早期最大的问题之一是如何管理状态。简而言之，服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时，在页面中插入一些参数，并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单，或者作为URL参数的一部分传递。这两个解决方案都手动操作，容易出错。cookie出现来解决这个问题。作用cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）如何工作当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。存储在cookie中的数据，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数...
