WEB前端技术
文章平均质量分 71
web前端学习
God Void
努力努力!!!
展开
-
ES6学习笔记(十)-- Proxy代理
前言:Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。由于Proxy实例方法非常多,本文不一一描述,详情还请大家参考官方文档。一、Proxy概述Proxy 可以对目标对象的读取、赋值、函数调用等操作进行 拦截,然后 进行操作处理。它不直接操作对象,而是像代理模式,通过对对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。(可以理解成污水处理厂,它们会把污水拦下来,进行处理,然后在原创 2021-11-22 20:07:43 · 447 阅读 · 0 评论 -
ES6学习笔记(九)-- Map对象
前言:了解Map之前,我们先来看看什么是键值对。JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),也就是{ key:value }的形式。但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。所以ES6提供了Map来解决这个问题,它类似于对象,也是键值对的集合,但是 “键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是 由原来的 字符串 - 值 ,变成了 值 - 值一、Map的特性Map对象支持使用复杂数据结构作为key,所以Map原创 2021-11-14 22:19:01 · 1409 阅读 · 0 评论 -
ES6学习笔记(九)-- Set集合
前言:ES6为我们提供了一种新的数据结构,它就是Set。实际上这里的Set 和 java 中的Set十分相似,存放的都是键值对,并且不能重复。让我来一起学习一下吧。一、Set的概念和基本用法Set 对象允许你存储任何类型数据的唯一值,无论是原始值或者是对象引用。简单点说就是:Set对象可以存任何数据类型的数据,而且会自动帮我们去重。// Set , 存放数组,不允许存放重复的值let setArr = new Set(['I','love','you','love'])console.lo原创 2021-11-12 15:39:30 · 529 阅读 · 0 评论 -
ES6学习笔记(八)-- 新增数据类型Symbol
前言:Symbol是ES6新增的一种数据类型,表示独一无二的值,防止属性名的冲突。一、Symbol的定义Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述let s1 = Symbol('foo');console.log(s1) // Symbol(foo)console.log(s1.toString()) // "Symbol(foo)"// 如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,// 将其转为字符串,然后才生成一个原创 2021-11-10 15:35:49 · 393 阅读 · 0 评论 -
ES6学习笔记(七)-- ES6对象
前言:ES6对JS对象也升级了很多便利的操作以及新增的方法,这里只介绍一部分。更多详情请参考官网。一、ES6对象内的一些简洁操作1.在构建对象时,如果键值和值一样,则可以用属性简写;当然方法也可以简写let name = 'mikasa'let age = 16let obj = { name, age, method() { // 省略 function return "Hello!"; }}2.属性名表达式 (常用于构建key值(键名))Java原创 2021-11-09 16:10:25 · 594 阅读 · 0 评论 -
ES6学习笔记(六)-- 数组的扩展
前言:ES6为我们的数组操作提供了很多方便的方法,我们一起来看看吧。一、扩展运算符这里其实和前面讲的解构赋值是一样的,就不过多赘述。let arr = ['I','love ','you']function fn(a,b,c){ console.log(a,b,c);}fn(...arr)主要用途:(1)复制数组const a1 = [1, 2];// 写法一const a2 = [...a1]; // 得到新的内存地址// 写法二const [...a2] = a1原创 2021-11-08 17:07:20 · 119 阅读 · 0 评论 -
ES6学习笔记(五)-- 函数的扩展
前言ES6为我们在函数的使用上也提供了许多的便捷的东西,这里只阐述一部分,详情请参考官方文档。1.函数参数的默认值2.rest 参数3.箭头函数(重点:this的指向问题)一、函数参数的默认值ES6 之前,不能直接为函数的参数指定默认值。而 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。function log(x = 'Hello', y = 'World') { console.log(x, y);}log() // Hello Worldlog('Hello'原创 2021-11-06 15:15:44 · 133 阅读 · 0 评论 -
ES6学习笔记(四)-- 数值的扩展
前言:ES6也为我们的数值操作提供了很多便利的操作,详情请参考官方文档。一、二进制和八进制表示法ES6 提供了二进制(Binary)和八进制(Octal)数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true,二进制0o767 === 503 // true,八进制二、Number对象方法方法描述Number.isFinite()检查一个数值是否为有限的(finite),即不是InfinityNumb原创 2021-11-05 19:56:07 · 161 阅读 · 0 评论 -
ES6学习笔记(三)-- 字符串的新增方法
前言:ES6为我们提供了更多方便的字符串操作,这里只写了常用的,详情请参考官网。新增的实例方法:(实例方法 都需要先声明实例才能使用)方法描述includes(string, position)判断字符串中是否包含指定字符串,返回值是布尔值startsWith(string, position)判断字符串的开头是否包含指定字符串,返回值是布尔值endsWith(string, position)判断字符串的尾部是否包含指定字符串,返回值是布尔值repea原创 2021-11-05 16:51:14 · 96 阅读 · 0 评论 -
ES6学习笔记(二)-- 解构赋值
前言:解构赋值主要分为 数组的解构 和 对象的解构 ,在ES5中,我们想要获取数组中的每一个元素时,会十分的繁琐:let arr = [1,2,3];console.log(arr[0]);console.log(arr[1]);console.log(arr[2]); // 想要获得数组的每一个元素,得要一个个取,十分繁琐而ES6 的解构赋值,为我们很好的解决了这些问题,大大加快了开发效率。一、数组的解构赋值解构数组时,我们 解构出来的数据 都是按照 数组的下标顺序 获取的。1原创 2021-11-02 19:34:01 · 298 阅读 · 0 评论 -
ES6学习笔记(一)--let 和 const
前言:let 的用法类似于 var ,但是 let 只在所在的代码块内有效,所以我们一般使用 let 替代 var 。而 const 用来声明常量。一、let命令1. 块级作用域ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ // 块级作用域 let a = 10; var b = 1;}console.log(a); // ReferenceError: a is not defined.console.log原创 2021-11-01 20:00:35 · 110 阅读 · 0 评论 -
H5新特性
一、什么是H5?HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。二、新特性1.语意特性,添加< header >< header/原创 2021-08-27 21:26:00 · 148 阅读 · 0 评论 -
sessionstorage 和 localstorage 的区别
Web存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案。 Webstroage API提供的方法: setItem (key, value) —— 保存数据,以键值对的方式储存信息。 getItem (key) —— 获取数据,将键值传入,即可获取原创 2021-08-25 21:14:21 · 348 阅读 · 0 评论