JavaScript
文章平均质量分 61
打工人C&K
学编程的小懒
展开
-
前端面试题--了解并简单介绍一下typescript
TypeScript是JavaScript的超集,具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript。向JavaScript添加静态类型的原因是什么?我想原因至少有三个:您可以避免经典的错误 ‘undefined’ is not a function.在不严重破坏代码的情况下,重构代码更容易。使大型、复杂的应用程序源码更易阅读。原创 2023-02-20 15:04:26 · 446 阅读 · 0 评论 -
前端面试的基础四十小问(前20问)
文章目录1.什么是HTML语义化?2.标签title与alt属性的区别是什么?3.iframe的优缺点?4.介绍一下CSS的盒子模型?部分答案来源于官方答案和网络综合答案如有错误答案请大佬们不吝赐教。1.什么是HTML语义化?答:语义化的HTML就是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。其主要目的就是让大家直观的认识标签和属性。对上述问题的补充:(1)为什么要做到语义化?答:有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效原创 2022-03-24 22:18:21 · 1877 阅读 · 1 评论 -
vue中的路由基础
**vue中的路由**在使用vue-router之前,首先需要安装该插件。首先在cmd中使用npm install vue-router进行插件的安装,如果要在工程项目中使用它必须通过Vue.use()明确地安装路由功能。就像这样:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)怎么用: 用Vue.js + vue-router创建单页应用非常简单。使用Vue.js ,已经可以通过组合组件原创 2022-02-09 13:30:17 · 376 阅读 · 0 评论 -
vue-进入/离开&列表过渡
**vue-进入/离开&列表过渡**在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过渡:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法格式:<transition name =原创 2022-02-07 18:43:30 · 611 阅读 · 0 评论 -
vue-事件处理
**vue-事件处理**一般使用v-on来进行事件监听,在监听DOM事件时会触发一部分的js代码。使用v-on:xxx或@xxx绑定事件,xxx指 事件名。 事件的回调要写在methods对象中,最终会放在vm上。2. 中的函数由Vue管理,函数中的this指向vm或组件实例。3. methods中的函数一定不要写成箭头函数,一旦写成箭头函数,函数中的this就不再是vm了。@click="showInfo"click="showInfo($event)"效果一致,但后者可以传参。原创 2022-02-02 13:32:50 · 376 阅读 · 0 评论 -
vue-列表的渲染
**vue-列表的渲染**vue的列表渲染指令是基于v-for的,官方文档中是这么说的*v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。*便于理解:对于v-for他就必须使用一种特殊的语法,item in items items代表的是数据中的数组,而我们说的这些item代表的就是其中的每一项。并且在v-for中,我们拥有一个权力,可以说这个权力比什么都大,就是说对于父作用域完全访问的权力。 <li原创 2022-02-02 11:58:09 · 1529 阅读 · 0 评论 -
vue中的计算属性和侦听器
**vue中的计算属性和侦听器**computed(计算属性)在模板中放入太多的逻辑不但难以维护,就连作者自身在看到代码的时候可能都难以理解。vue开发了计算属性,计算属性是依赖于本身的响应式以来进行缓存的,只在响应式的依赖中发生改变时他们才重新求值,所从根本上大大减少了麻烦的逻辑和运算复杂度。代码示例:<template> <div id="app"> <p>{{ reversedMessage }}</p>原创 2022-01-30 09:18:53 · 716 阅读 · 0 评论 -
vue中的生命周期(钩子函数)
**vue中的生命周期(钩子函数)**下图是整个vue的生命周期生命周期共有八个钩子函数生命周期:vue是一个构造函数,执行这个函数的时候,即相当于实例化了这个函数,因此我们在创建实力的过程中为了更近一步的确定函数的动态,所以我们需要设置数据监听,编译模板,将实例挂载到DOM上,让数据也可以在dom上更新。钩子函数:钩子函数就是可以让我们在初始化实例的时候可以自己添加代码,注意钩子函数中的this,会默认指向vue实例。beforeCreate created[可以获取数据及方法]bef原创 2022-01-28 11:32:28 · 1344 阅读 · 0 评论 -
vue中模板和组件分离
**vue中模板和组件分离**第一种:使用script,将其类型跟改为text/x-template。代码示例如下: <!-- 第一种方式: 使用script --> <script type="text/x-template" id="comp2"> <div> <h2>组件和模板分离的写法1</h2> </div> </script>原创 2022-01-27 18:19:04 · 1195 阅读 · 0 评论 -
vue中的父子组件以及语法糖写法
**vue中的父子组件**具有上述模样的具有嵌套关系的就是父子组件。我们先用代码定义一个组件名字为comp1// 定义组件1 const comp1 = Vue.extend({ template: <div> <p>组件1</p> </div> })然后再定义第二个组件名为comp2// 定义组件2原创 2022-01-27 18:03:45 · 796 阅读 · 0 评论 -
Vue中全局组件与局部组件
**Vue中全局组件与局部组件**Vue中的组件与普通语言中的变量类似有局部变量也有全局变量,限制条件也是相同的在注册组件的时候是在new Vue({})外面注册的话,是全局组件,也就表示任何一个vue实例对象都可以使用...原创 2022-01-27 17:36:34 · 890 阅读 · 0 评论 -
Vue组件化的构建
**Vue组件化的构建**本文主要参照官方文档进行学习思考。vue组件的用法类似于Java,py等基础语言中的函数,可以重复套用,将多次使用的程序段和功能定义为一个组件,使其可重复利用,便于开发。根据官方文档指示让我们将一个页面抽象成为一个大的应用或者功能库,然后将他们具有相同功能的模块归到一起,这个集结点为一个组件,之间的互相联系画成图,表现成树状图结构如果还不是很理解可以借助下图进行理解:首先对于组件的基本使用:共有三部:1,定义组件2,注册组件3,使用调用组件一:如何定义组原创 2022-01-23 12:42:51 · 621 阅读 · 0 评论 -
JavaScript中的构造函数
JavaScript中的构造函数目前比较好的构造函数方法:并且我们要详细了解prototype和constructor和——proto——之间的关系ES6之前的作用域链原创 2021-10-24 15:36:40 · 1037 阅读 · 0 评论 -
JavaScript中的异步编程
JavaScript中的异步编程JavaScript中的异步编程在前端开发的过程中经常出现回调函数,事件监听,promise,generator,async/await这几种方式都是异步编程首先我们需要了解一下同步编程和异步编程有哪些区别,那么同步编程又是什么呢?同步编程就是在执行某段代码时在该代码没有得到返回结果之前,其他代码暂时无法执行,但是一旦执行完成拿到返回值之后就可以执行其他代码了。异步编程就是当某段代码执行异步过程调用发出后这段代码不会立刻得到返回结果。而是在异步调用发出之后,一般通过回原创 2021-10-20 17:50:38 · 92 阅读 · 0 评论 -
进阶练习:手写JavaScript数组多个方法的底层实现
进阶练习:手写JavaScript数组多个方法的底层实现先了解一下push方法的底层实现:下面是ECMA的英文相关解释When the push method is called with zero or more argumentsthe followingsteps are taken:1.Let O be ? To0bject(this value).2.Let len be ? LengthOfArrayLike(O).3.Let argCount be the number of e原创 2021-10-18 18:54:11 · 164 阅读 · 0 评论 -
JavaScript数组排序(上)如何实现数组排序
JavaScript数组排序(上)如何实现数组排序提到数组排序就不得不提到排序算法,那么什么样的排序算法是好算法呢?提到算法就要讲到算法的时间和空间的复杂度下面有一张时间复杂度的曲线图一般来说应当将时间复杂度控制在O(nlogn)以下并且一般再n平方以上的时间复杂度是不能接受的空间复杂度就是程序所需要临时占用存储空间大小的度量下面我们就来讲述各种排序方式排序算法有很多但是我们可以根据它们的特性大致分为种类型:比较类排序:通过比较来决定元素之间的相对次序,其时间复杂度不能突破nlogn,因此也原创 2021-10-18 18:11:57 · 146 阅读 · 0 评论 -
JavaScript数组原理3:实现数组扁平化的几种方式
JavaScript数组原理3:实现数组扁平化的几种方式数组的扁平化其实就是将一个嵌套多层的数组array(嵌套可以是任意层数)转换为只有一层的数组举一个代码的例子:var arr = [1,[2,[3,4,5]]];console.log(flatten(arr));[1,2,3,4,5]...原创 2021-10-18 10:36:01 · 232 阅读 · 0 评论 -
JavaScript数组原理二:类数组详解
JavaScript数组原理二:类数组详解JavaScript中一直存在一种数组对象他们不能直接调用数组的方法,但是又和数组比较类似在某些特定的变成场景中会出现。首先我们要了解在哪些情况下会出现类数组:1.包括函数里面的参数对象arguments2.用getelements bytagname/classname/name获得的HTMLcollection3.用queryselector获得的nodelist这是主要遇到的几种类数组的情况首先先讲解arguments:类数组对象argumen原创 2021-10-15 12:03:56 · 206 阅读 · 0 评论 -
JavaScript数组原理:梳理数组API
数组原理:梳理数组API数组对于JavaScript的重要性:没有数组就不足以写好JavaScript在力扣的刷题题库中1800道题中有三百道都是与数组相关的,也是种类中最多的。本文章将会通过会改变自身值的和不会改变自身值的,遍历方法这三种类型来分开讲解,这样可以把知识更加的结构化。第一:Array构造器通常我们推荐使用对象字面量的方式创建一个数组总有字面量无法表述的时候例如我想创建一个长度为6的空数组用对象字面量的方式是无法创建的因此只能写成如下代码的样子://使用Array构造器,可以自定义原创 2021-10-15 00:50:40 · 175 阅读 · 0 评论 -
JavaScript中的json相关方法的实现
JavaScript中的json相关方法的实现JSON.stringfy 是日常开发中经常用到的JSON对象中的一个方法还有一种用于解析成JSON对象的parse()用于将对象转换为JSON字符串的方法的stringfy()JSON.parse方法用来解析JSON字符串构造由字符串描述的JavaScript值或对象在使用JSON.parse的时候需要传入两个参数,第一个参数是需要解析处理的JSON字符串,第二个对象是可选参数提供可选的reviver函数用于在返回对象之前进行的变换操作的回调。该方原创 2021-10-11 21:01:43 · 131 阅读 · 0 评论 -
JavaScript闭包的重难点剖析
JavaScript闭包的重难点剖析作用域的基本介绍:指变量能够被访问到的范围ES5之前有函数作用域和 全局作用域ES6出现之后:新增块作用域在JavaScript中的全局作用域,全局变量是挂载在window对象下的变量所以在网页中的任何位置你都可以使用并且访问到这个全局变量下面用代码来体验一下全局作用域:var globalName ='global';function getName(){console.log(globalName)// globalvar name = 'inner'原创 2021-10-10 18:26:06 · 104 阅读 · 0 评论 -
JavaScript中的闭包
JavaScript中的闭包我们在理解闭包时要先理解执行上下文(也就是执行环境)在JavaScript中有三种环境(全局环境,函数环境,Eval环境因为Eval环境是需要慎用的所以我们暂且只看前两种。JavaScript执行上下文的方式是通过栈的形式来调用执行的,在每次创建执行上下文的时候会分为两个步骤:创建阶段和执行阶段,在创建阶段中会创建作用域链和变量对象(参数、变量、函数声明)和this,之后再进入执行阶段,执行其中的每一行代码,变量赋值,函数引用等动作。理解闭包我们就要理解最关键的一点:作用域原创 2021-10-10 17:15:26 · 57 阅读 · 0 评论 -
继承的进阶
继承的进阶:如何实现new、apply、call、bind的底层逻辑首先我们从new开始,new关键词的主要作用是什么呢?就是执行一个构造函数,返回一个实例对象根据构造函数的情况,来确定是否可以接受参数的传递。代码实现如下:function Person(){this.name = 'jack';}var p = new Person();console.log(p.name)//jack上述代码是p通过person这个构造函数实现的一个实例对象那么new在底层逻辑中是如何实现的呢?1原创 2021-10-10 16:19:07 · 84 阅读 · 0 评论 -
JavaScript的继承实现详解
JavaScript的继承实现详解此文章共提及六种JavaScript中的继承实现方式第一种:原型链继承原型链继承是一种很常见的继承方式其中涉及了构造函数、原型和实例每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针...原创 2021-10-09 16:24:04 · 106 阅读 · 0 评论 -
关于JavaScript的深浅拷贝详解
关于JavaScript的深浅拷贝详解关于浅拷贝的方法:方法一:object.assign下述JavaScript的代码使用object.assign来简单理解一下浅拷贝:let obj1 = {a:{b:1},sym:Symbol(1)};Object.defineProperty(obj1,'innumerable',{ value:'不可枚举属性', enumerable:false});let obj2 = {};Object.assign(obj2,obj1)obj1.a.b原创 2021-10-06 21:10:27 · 189 阅读 · 0 评论 -
关于JavaScript的类型判断方式和数据转换方式详解
关于JavaScript的类型判断方式和数据转换方式详解对于数据类型的判断方式主要有两中在JavaScript中的内置函数可以判断分别是:typeof,使用typeof所判断出来的类型是如下的:上述是所有JavaScript中类型的判断但是其中的null类型是有问题的,虽然输出的是object类型,但是它并不是对象,这是在JavaScript中的一个bug,所以不要记错了,如果你想在判断条件中判定是不是null你可以直接在判断条件中使用三个等于号来直接判定就可以了。第二种判断方式是使用内置函数:in原创 2021-10-04 20:19:01 · 138 阅读 · 0 评论 -
教你如何使用JavaScript如何80行代码写个小项目
最适合新手练习JavaScript的小项目:网页计算器网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的,能和普通的计算器一样进行各种运算包括开根号等等的复杂运算,并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行,是最适合新手的小项目了不多BB上代码:<!doctype html><html lang="en"><head> <!-- 添加文档头部内容 --> <meta http-eq原创 2021-10-02 09:00:00 · 359 阅读 · 0 评论