- 博客(66)
- 收藏
- 关注
RSS订阅原创 vue的响应式
核心逻辑数据变化，页面就会重新渲染怎么改变数据？<div id="app">{{ msg }}</div>const vm = new Vue({ el: '#app', data: { msg: '你好vue' }});这时候我们在页面的控制台里面修改数据vm.msg = "hello vue"这时候我们发现，页面改变了。为什么data里面的数据会直接出现在vue实例对象中？当创建vue实例时，vue会将data
2020-08-31 16:08:03
365
原创 开始使用VUE
使用vue引入vue.js使用构造函数Vue创建一个Vue实例配置Vue实例<div id="app"></div>const vm = new Vue({ el:"#app", data:{ msg:"开始使用vue", obj:{ year:2020, month:8 } }})上面的js代码就控制了id为app的那个div区域插值表达式使用方法:{{}}:可以将vue中的数据填在插值表达式中<div id="ap
2020-08-31 15:11:26
153
原创 我怀疑你真的不会自增++和自减--
自增和自减++ --基本功能++: 将某个变量的值自增1--：将某个变量的值自减1细节x++: 将变量x自增1，得到的表达式的值是自增之前的值。++x: 将变量x自增1，得到的表达式的值是自增之后的值。x--: 将变量x自减1，得到的表达式的值是自减之前的值。--x: 将变量x自减1，得到的表达式的值是自减之后的值。优先级从高到底依次是：1. ```++ --```...
2020-05-08 10:39:41
405
原创 es6属性描述符
属性描述符是什么？属性描述符是一个普通对象，用于描述一个属性的相关信息Object.defineProperty(对象,属性)可以设置对象的属性描述符Object.definePropertys(对象,属性)可以设置对象多个属性的属性描述符通过Object.getOwnPropertyDescriptor(对象，属性名)可以得到一个对象的某个属性的属性描述符value：属性值...
2020-04-30 21:57:02
314
原创 map集合
map集合的意义map集合专门用于存储多个键值对数据。诶，明明我们可以用对象来做这件事情，为什么还要用map集合呢？对象存储键值对的问题键名只能是字符串获取数据的数量不方便键名容易跟原型上的名称冲突const newObj = { name:'abc', age:123};console.log(Object.keys(newObj));创建ma...
2020-04-27 21:42:56
931
原创 利用set集合求数组的并集、交集、差集
并集const arr1 = [11, 22, 44, 33, 55, 33, 77];const arr2 = [66, 55, 44, 33, 88, 99, 99];console.log("并集", [...new Set([...arr1, ...arr2])]);交集const cross = [...new Set(arr1)].filter(item => a...
2020-04-27 20:45:33
1221
原创 set集合
set集合用于存放不重复的数据创建set集合new Set();//创建一个没有任何内容的set集合new Set(iterable);//创建一个有内容的set集合，来自于可迭代对象每一次迭代的结果如何后续操作add(数据)：添加一个数据到set末尾，如果已存在，则不操作has(数据)：判断set中是否存在对应的数据，set使用Object.is的方式判断两个数据是否相同，但...
2020-04-23 20:15:38
442
原创 es6新增生成器
什么是生成器？生成器是一个通过构造函数Generator创建的对象，它既是一个迭代器，又是一个可迭代对象。怎么创建生成器？必须使用生成器函数创建怎么书写生成器函数？function* test(){}//该函数一定返回一个生成器，*必须有，可以没有名字和function关键字生成器函数的内部执行生成器函数内部是为了给生成器每次迭代提供数据，每次调用生成器的next方法，将导致...
2020-04-20 17:47:40
173
原创 可迭代协议和for of循环
概念ES6规定，如果一个对象具有知名符号属性Symbol.iterator，并且属性值是一个迭代器创建函数，那么这个对象是可迭代的（iterable）可迭代对象var obj = { a:1, b:2, [Symbol.iterator](){ const keys = Object.keys(this); let i = 0; return { next:()=&g...
2020-04-18 20:06:11
120
原创 迷人的迭代器
迭代器1.什么是迭代？从一个数据集合中按一定顺序，不断取出数据的过程是迭代2.和遍历的区别？遍历强调要把所有数据全部取出迭代强调依次取数据，不保证取多少和取完数据3.什么是迭代器？对迭代过程的封装，通常是一个对象4.迭代模式一种设计模式，统一迭代过程，规范迭代器规格迭代器应该具有得到下一个数据的能力迭代器应该具有判断是否还有后续数据的能力js中的迭代器js规定，如果一...
2020-04-13 21:53:06
120
原创 es6的async和await讲解
简介async和await是es6新增的两个关键字，为了简化promise的使用asyncasync用于修饰函数，放在函数最开始的位置，被修饰的函数的返回结果一定是promise对象async function test(){ console.log(1); return 2;}//等效于function test(){ return new Promise(...
2020-04-12 21:49:46
426
原创 es6的promise讲解（3）
promise的其他api实例成员then：注册一个后续处理函数，当promise为resolved状态时运行该函数catch：注册一个后续处理函数，当promise为rejected状态时运行该函数finally：【es2018】注册一个后续处理函数（无参），当promise为已决时运行该函数静态成员resolved（数据）：该方法返回一个resolved状态的promise...
2020-04-11 15:58:57
115
原创 es6中的promise讲解（2）
promise的串联当后续的promise需要用到之前的promise处理结果时，需要promise的串联。promise对象中，无论是then还是catch，它们都有一个返回值，返回的是一个全新的promise对象，它满足下面的规则。如果当前promise是未决的，那么返回的是挂起状态。如果当前的promise是已决的，那么会影响后续处理函数，并将后续处理的结果作为resolved状态...
2020-04-10 21:52:15
114
原创 es6中的异步处理模型详解
模型1.es6将某一件可能发生异步操作的事情分为两个阶段：unsettled和settled。unsettled：未决阶段，表示事情还在进行前期处理，还没有发生通向结果的事情settled：已决阶段，表示事情已经有了结果，事情无法逆转事情总是从未决到已决的，未决有控制何时到达已决的能力。2.es6将事情划分为三种状态：pending、resolved、rejectedpending...
2020-04-09 21:08:29
266
2
原创 js中事件和回调函数的缺陷
解决异步函数我们通常使用回调或者事件来解决异步问题。事件某个对象的属性是一个函数，当发生某一件事情时，调用函数。//html代码：<div> <button id="btn1">按钮1：给按钮2注册点击事件</button> <button id="btn2">按钮2：给按钮3注册点击事件</button>...
2020-04-08 21:54:58
664
原创 javascript中的事件循环机制
事件循环首先我们需要明白js可以不止在浏览器端运行，js运行的环境称之为宿主环境。浏览器，服务器，桌面…。**执行栈：**一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的信息会被加入到执行栈中。函数调用之前，创建环境，然后加入到执行栈，调用过后销毁执行环境。js引擎永远执行执行栈的最顶部异步函数：某些函数不会立即执行，需要等到时机成熟才执行。浏览器宿主环境中包含5个线程...
2020-04-07 21:07:31
128
原创 es6的promise讲解（1）
promise的基本使用const pro = new Promise((resolve,reject)=>{ //未决阶段的处理 //通过调用resolve函数将promise推向resolved状态 //通过调用reject函数将......rejected状态 //resolve和reject可以传递一个参数，表示推向状态的数据})pro.then(data=>{...
2020-04-06 22:24:21
148
原创 es6新增符号类型（3）
知名符号知名符号是一些具有特殊含义的共享符号，通过Symbol的静态属性得到例子1.Symbol.hasInstance:该符号用于定义构造函数的静态成员，它将影响instance的判定function A() {}const a = new A();console.log(a instanceof A);function A() {}//改变instance的判定O...
2020-04-05 12:03:18
184
原创 es6新增符号类型（2）
共享符号可以根据某个符号名称，得到同一个符号语法Symbol.for("符号名/符号描述")例子1.得到相同的符号const symbol1 = Symbol.for("共享符号");const symbol2 = Symbol.for("共享符号");const obj1 = { a: 1, b: 2, [symbol1]: 3,};const obj2 = {...
2020-04-05 09:42:09
120
原创 es6新增符号类型（1）
普通符号符号是es6新增的一个数据类型，使用函数Symbol(“符号描述”)来创建。初衷符号的初衷，是为了给对象设置私有属性，只能在对象内部使用，外面无法使用。特点1.符号没有字面量2.使用typeof得到的是symbol3.每次调用Symbol函数得到的符号永远不相等4.符号作为对象的属性名存在，叫做符号属性5.符号不能被枚举，Object.getOwnPropertyName...
2020-04-04 22:29:47
176
原创 什么是对象解构，数组解构和参数解构
什么是解构解构是es6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中注意解构不会对被解构的目标造成任何影响语法1.同名属性// var/let/const{属性名}=被解构的对象const user = { name: "abc", age: 18, sex: "男", address: { province: "重庆",...
2020-04-03 20:31:01
2339
1
原创 es6新增类详解
为什么要用类在解释这个问题之前，我们先来看看传统的构造函数的问题属性和原型方法定义分离，降低了可读性原型成员可以被枚举（for in循环能拿到原型上的属性和方法）默认情况下，构造函数可以被当做普通函数使用类的特点类声明不会被提升，存在暂时性死区类中的所有代码都在严格模式下执行类的所有方法都是不可枚举的类的所有方法不能被当做构造函数使用类的构造必须使用new来调用例子...
2020-04-02 13:12:22
231
原创 es6Object的新增API
新增API1.Object.setPrototypeOf:用于设置某个对象的隐式原型2.Object.getOwnPropertyNames:以前就存在，但是es6规定了返回的属性名数组的排序方法（1）先排数字，并按照升序排序（2）再排其他，按照书写顺序排序3.Object.assign:用于混合对象，会改变第一个参数对象4.Object.is:用于判断两个数据是否相等，基本上跟严格相...
2020-04-01 17:40:41
215
原创 es6新增对象字面量语法
新增语法1.计算属性名：属性名来自于某个表达式的值，可以用中括号来表示该属性名2.方法速写：初始化对象字面量时，方法可以省略冒号和function关键字3.成员速写：如果初始化对象字面量时，成员的名称来自于一个变量，并且和变量的名称相同，则可以进行简写例子1.计算属性名const prop1 = "name";const prop2 = "age";const obj = { ...
2020-04-01 17:02:03
199
原创 es6箭头函数
箭头函数首先我们需要来回顾一下this指向的问题1.对象调用函数，this指向对象2.直接调用函数，this指向全局对象3.通过new调用函数，this指向新创建的对象4.通过apply、call、bind调用函数，this指向指定的数据5.如果是DOM事件，this指向事件源箭头函数的语法与概念箭头函数是一个函数表达式，理论上，任何使用函数表达式的场景都可以使用箭头函数语法：...
2020-03-30 22:30:17
86
原创 es6新增展开运算符讲解
展开运算符用法：…要展开的东西es6：支持展开数组es2016：支持展开对象例子1.展开数组并传入函数var arr = [1,2,3,4,5];function test(...arg){ for(let i = 0; i < arg.length; i++){ console.log(arg[i]); }}test(...arr);...
2020-03-29 22:21:38
144
原创 es6剩余参数讲解
剩余参数专门用于接收末尾的所有参数，将其放到一个形参数组中，剩余参数的出现是为了解决arguments的缺陷：arguments的缺陷1.如果和形参配合使用，容易导致混乱，因为在严格模式下，传入参数后改变形参不会改变arguments对应的值。2.使用arguments获取参数，无法从函数定义上理解函数的真实意图语法function(...形参名){}注意事项1.一个函数只能...
2020-03-28 21:28:03
804
原创 es6参数默认值
使用在书写形参时，直接给形参赋值。如果调用函数时，没有给对应的参数赋值，那么则会自动使用默认值。例子1.使用默认值function test(a, b) { console.log(a, b);}test(undefined,2); 2.可以用参数赋值function test(a, b = a) { console.log(a, b);}test(unde...
2020-03-27 22:22:57
630
原创 es6中的模板字符串
为什么需要模板字符串es6之前处理字符串繁琐的两个方面：1.多行字符串2.字符串拼接var str1 = "abc\bcd\cde"console.log(str1);var str2 = "abc" + "bcd" +"cde";console.log(str2);这样写，只是让我们在书写的时候实现了多行字符串，然后真正的多行效果却并不理想。如果我们想要字符串换行，...
2020-03-26 22:03:27
302
原创 es6新增的变量声明方法,以及和var的区别
变量声明的三个关键字var let constvar使用var关键字声明变量会出现一些问题。1.允许重复的变量声明，数据被覆盖2.变量提升，闭包3.全局变量挂载到全局对象，污染全局变量例子1.数据被覆盖 var a = 1; function print(){ console.log(a) } var a = 2; print();//输出22.闭包func...
2020-03-24 23:40:40
222
原创 用CSS3实现一个魔方转动动画
*{ margin: 0; padding: 0;}:root, body{ height: 100%;}@keyframes round{ 0%{ transform: rotateY(0deg) rotateX(0deg); } 50%{ transform: rotateY(360deg) rotat...
2020-03-23 23:00:23
431
原创 css3中的transform属性讲解
transform变换属性如下matrix()：2d矩阵translate()：平移，第一个参数为x轴，第二个参数为y轴，第二个参数默认为0translatex()：X轴（水平方向）的平移translatey()：Y轴（垂直方向）的平移rotate()：2D旋转scale()：2D伸缩。第一个参数对应X轴，第二个参数对应Y轴。第二个参数默认与第一个参数的值一样。伸缩的是此元素的变化坐...
2020-03-22 22:03:07
493
原创 css3中的animation详解
animation它是一个动画复合属性，有以下的属性animation-name ：动画名称animation-duration ：动画的持续时间animation-timing-function ：动画的过渡类型，运动函数animation-delay ：动画延迟的时间animation-iteration-count ：动画的循环次数animation-direction：动画在...
2020-03-22 18:31:18
469
原创 transition和animation中的运动函数
transition-timing-functionlinear：线性过渡。ease：平滑过渡。ease-in：由慢到快。ease-out：由快到慢。ease-in-out：由慢到快再到慢。step-start：等同于 steps(1, start)step-end：等同于 steps(1, end)steps接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参...
2020-03-22 17:08:51
474
原创 css中的transition讲解
transition过渡一共有四个属性transition-property: 属性; 监听所有具备动画过渡的属性(默认为all)transition-duration:时间; 时间间隔，过渡完成的时间transition-timing-function:运动函数; 过渡的运动函数transition-delay: 时间; 延迟时间开始过渡也可以一起写。也可以多写几次举例d...
2020-03-20 22:12:21
1642
原创 数组方法every,some,map,reduce
every：全部满足条件就返回true，否则返回false,只要不满足条件，就不再继续遍历。传参：可传两个参数第一个是function(ele, index, self)必传但是ele，index，self看情况传。ele代表数组的某一项，index代表索引，self代表数组本身。第二个参数改变this指向，可传可不传some:有一个满足条件就返回true，否则false，就算最后返回fals...
2020-03-19 21:40:48
218
原创 数组方法filter
作用filter函数是用来过滤数组的可以传两个参数，第一个参数必须传是个function(ele, index, self)ele代表数组中的某一项，index代表索引，self代表数组本身，function里面的参数看情况传入。第二个参数可传可不传，改变this指向。函数的返回值是一个新数组，注意不要返回引用值，这样会导致原数组被修改。例子var demo = [ ...
2020-03-18 23:19:09
1486
原创 深入理解css3中的弹性盒flex
写法你想给谁设置成弹性盒，就给它设置display:flex;然后它就变成了弹性盒，这可是个好东西。下面我们来详细讲一讲。下面的属性都是给弹性盒本身设置改变主轴方向flex-direction:row(默认从左到右) column（从上到下）row-reverse（反row）column-reverse（反column）对应主轴的有一个纵轴，默认与主轴垂直，所以如果我们改变了主轴方向...
2020-03-17 22:49:37
405
原创 css3中的border和background属性
borderborder是一个组合属性，它有四个值，每个值代表一个方向，每个方向都有宽度，线条样式和颜色div{ width: 100px; height: 100px; border: 5px solid black; border-left: 5px solid red; border-right: 5px dashed blue; bord...
2020-03-16 15:56:38
1092
原创 css3常用新增选择器详解
E + F下一个满足条件的兄弟元素节点div + p{ background-color: red;} <div>div</div> <p>1 <p>11</p> </p> <p>2</p> <p>3</p>...
2020-03-16 14:15:21
147
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人