JavaScript
DangR-Jisoo
Web Sport Cook Music History
展开
-
React父子组件之间的传值
想要了解父子组件之间的通信,必须搞清楚谁是父组件,谁是子组件,谁给谁传值这几个问题,为了方便演示:把App.js当作父组件,在父组件里引入并使用Son.js,即Son.js为子组件,如下图所示:子组件(Son.js)import React, {Component} from 'react';class Son extends Component { render() { return ( <div> 我是原创 2021-10-25 11:38:13 · 143 阅读 · 1 评论 -
JavaScript map(),forEach(),reduce(),filter()的使用
map()使用场景1:对数组进行遍历,并对原数组进行一些操作,返回一个新的数组,但不影响原来的数组const arr=[1,3,5,7,9]const newArr=arr.map((item)=>{ return item+1})console.log(arr)//打印原数组[1, 3, 5, 7, 9]console.log(newArr)//打印新数组[2, 4, 6, 8, 10]由上述代码可以看出,map()不会影响原数组使用场景2:在React中利用map()来渲染.原创 2021-10-08 22:28:26 · 147 阅读 · 0 评论 -
JavaScript如何将一个对象里的某些属性抽离出来
JavaScript如何将一个对象里的某些属性抽离出来需求:如图所示,此数据是一个个很规范的键值对,属性有value和name如下图所示:另外一组数据有很多很多属性,现在要将该数组里面的属性删至两个,只保留下图的’yjms’和’yl’,但是要将这两个属性名分别改为上图所示的value和name,即value=yl,name=yjms实现步骤:创建一个新的空数组使用for循环遍历如图一所示的数组给创建的空数组设置属性值const newArr = [];//创建空数组for (let原创 2021-04-08 17:16:33 · 1722 阅读 · 0 评论 -
Vue中的父子组件通信——props和$emit
Vue中的父子组件通信——props和$emit父传子——props子传父——$emit举例——父传子场景:子组件需要得到父组件data中的信息,并将其渲染到页面中<!-- 父组件 --><template> <div id="app"> <child :travel="books"></child><!-- travel是自定义的名字,但是必须跟子组件里props的属性值一样,books为父组件data里定义的值原创 2021-04-01 17:05:23 · 342 阅读 · 0 评论 -
JavaScript中的高阶函数filter,map,reduce
JavaScript中的高阶函数filter,map,reducefilter()要求有一个回调函数,回调函数必须返回一个boolean值——当为true时,会自动将这次回调的n加入到新的数组中;当为false时,函数内部会过滤掉这次的n<script> let arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; //要求返回arr中大于10的元素 let newarr=arr.filter(function(n){ return n>原创 2021-03-02 23:07:34 · 108 阅读 · 0 评论 -
Vue中的插值操作及其他指令
Vue中的插值操作及其他指令插值操作<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message+' '+'李银河'}}</h3>//也可以做字符串的拼接 <h4>{{lastName+' '+firstName}}</h4> <h5>{{lastName}} {{fir原创 2021-02-28 20:50:07 · 112 阅读 · 0 评论 -
Vue的简单使用及小案例
Vue的简介Vue的安装在官网上下载源码Vue.js,直接在代码中引用<script src="./js/vue.js"></script>Vue的初体验<body> <div id="app"> <h1>{{message}}</h1> <h2>{{name}}</h2> </div> <!-- 引入Vue.js --原创 2021-02-28 20:32:06 · 183 阅读 · 0 评论 -
ES6——class(类)的介绍
ES6——class(类)的介绍ES6提供了更接近于传统语言的写法,引入了class(类)这个概念,作为对象的模板,通过class关键字,可以让对象原型的写法更加清晰,更像面对对象编程的语法class声明类,constructor定义构造函数初始化 class Phone1 { constructor(brand, price) { this.brand = brand; this.price = price原创 2021-02-28 20:15:20 · 215 阅读 · 0 评论 -
ES6箭头函数
ES6箭头函数格式原来的函数写法function fn(a,b){ return a+b;}箭头函数写法let fn=(a,b)=>{ return a+b;}let result=fn(1,2);console.log(3);注意点this是静态的,始终指向函数声明时所在作用域下的this的值,即使使用call,apply等方法改变作用域,也不会改变this的指向例如: window.name = 'jisoo'; let obj =原创 2021-02-28 19:58:25 · 132 阅读 · 0 评论 -
ES6字符串的扩展(includes(),startsWith(),endWith())
ES6字符串的扩展在ES5中,我们学习到了indexOf()和lastIndexOf()来检索字符串,ES6为我们拓展了三种检索字符串的方法,分别是includes(),startsWith(),endsWith()includes()返回布尔值,表示是否找到了参数字符串let str = 'hello world';console.log(str.includes('ell'));//truestartsWith()返回布尔值,表示参数字符串是否在源字符串首部let str =原创 2021-01-21 12:20:02 · 227 阅读 · 0 评论 -
ES6——字符串,数值,布尔值以及函数参数的解构赋值
ES6——字符串,数值,布尔值以及函数参数的解构赋值字符串的解构赋值之所以字符串能够被解构,是因为字符串被转换成了一个类数组的对象 let [a, b, c, d, e] = 'Jisoo'; console.log(a); //J console.log(b); //i console.log(c); //s console.log(d); //o console.log(e); //o类数组都有l原创 2020-12-10 23:07:46 · 202 阅读 · 0 评论 -
ES6——对象的解构赋值
ES6——对象的解构赋值与数组一样,对象也可以进行解构let {name, age} = {name: 'jisoo', age:25};console.log(name);//'jisoo'console.log(age);//25但是对象的解构赋值和数组的解构赋值有一个区别就是,数组的元素是按次序排列的,变量的取值是由它的位置决定的,而对象的属性没有次序,变量必须与属性同名才能取到正确的值let {job, salary}={salay: 20000, job: 'doctor'};c原创 2020-12-10 21:47:11 · 114 阅读 · 0 评论 -
ES6——数组的解构赋值
ES6——数组的解构赋值解构的定义ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值在以前,为变量赋值只能直接指定,例如: let a=1; let b=2; let c=3;而自从ES6引入了解构赋值之后,可以下列这样定义变量: let [d, e, f] = [4, 5, 6]; console.log(d, e, f); //4 5 6 console.log([d, e, f]); //[4,5,6]上述代码就原创 2020-12-08 22:40:22 · 280 阅读 · 0 评论 -
ES6块级作用域详解
ES6块级作用域详解在ES5中,只有全局作用域和函数作用域,没有块级作用域,而let实际上为JavaScript新增了块级作用域 function f1() { let n = 5; if (true) { let n = 10; } console.log(n); } f1(); //5上述代码有两个代码块,都声明了变量n原创 2020-12-06 20:44:31 · 184 阅读 · 0 评论 -
ES6中let const命令详解及区别
ES6中let const命令详解及区别一. let命令let命令用于声明变量,其用法与var类似,但是所声明的变量只在let命令所在的代码块内有效 { let a = 1; var b = 0 } console.log(a); //因为在a所在的块级作用域之外访问,所以会抛出错误let不存在变量提升,而var存在变量提升 console.log(temp); //undefin原创 2020-12-06 20:31:15 · 191 阅读 · 0 评论 -
jQuery自定义动画animate
jQuery自定义动画animate//css代码div{ position: absolute;//自定义动画的元素必须添加定位 width: 100px; height: 100px; background-color: red;}//html代码<div></div>//jQuery代码(记得引入jQuery文件)$(function(){ $('div').animate({ width: 300, height: 300, backgro原创 2020-12-05 21:11:06 · 163 阅读 · 0 评论 -
jQuery元素遍历,创建,添加,删除操作
jQuery元素遍历,创建,添加,删除操作元素遍历语法一:$('div').each(function(index,ele){ }) (主要用于遍历元素)//html代码 <div>1</div> <div>2</div> <div>3</div>//jQuery代码(记得引入jQuery文件) $('div').each(function(index,ele){原创 2020-12-05 21:04:16 · 597 阅读 · 0 评论 -
jQuery事件处理及事件解绑
jQuery事件处理及事件解绑绑定单个事件 div{ width: 200px; height: 200px; background-color: teal; } <div></div> //方法1 $(function() { $('div').click(function() { ale原创 2020-12-05 19:47:44 · 141 阅读 · 0 评论 -
jQuery获取或设置元素的属性值
jQuery获取或设置元素的属性值获取元素属性值固有属性($('div).prop(‘color’))自定义属性($('div).attr(‘index’)) <a href="www.baidu.com" title="百度">百度</a> <input type="checkbox" checked='checked'> <div index="1"></div> console.log($('a').原创 2020-12-05 18:45:09 · 895 阅读 · 0 评论 -
jQuery筛选方法及筛选选择器
jQuery筛选方法及筛选选择器筛选选择器 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>$(‘li:first’原创 2020-12-05 18:10:49 · 389 阅读 · 0 评论 -
jQuery样式操作(获得样式,修改样式,删除样式,切换样式)
jQuery样式操作(获得样式,修改样式,删除样式,切换样式) <style> div { width: 400px; height: 400px; background-color: pink; color: black; } </style> <script src="jQuery.min.js"></scrip原创 2020-12-05 12:14:56 · 1206 阅读 · 0 评论 -
jQuery中的位置操作offset
jQuery中的位置操作(offset,position,scroll)offset()返回距离父元素的偏移量left和top值,把这两个值封装在一个对象中,若想得到具体的值(使用offset().left,offset().top),父元素必须要有定位,否则返回距离文档的值 <style> * { margin: 0; } .father { position: relative;//给原创 2020-12-05 11:25:41 · 256 阅读 · 0 评论 -
jQuery中的尺寸操作(width,height,innerWidth,innerHeight,outerWidth,outerHeight)及与DOM中尺寸操作的区别
jQuery中的尺寸操作(width,height,innerWidth,innerHeight,outerWidth,outerHeight)及与DOM中尺寸操作的区别一. jQuerywidth()返回当前元素的宽度height()返回当前元素的高度innerWidth()返回当前元素的宽度(含padding值)innerHeight()返回当前元素的高度(含padding值)outerWidth()返回当前元素的宽度(含padding+border值)outerHeight(原创 2020-12-05 10:58:15 · 351 阅读 · 0 评论 -
JavaScript内置对象Math详解
JavaScript内置对象Math一. JavaScript对象共有三种:自定义对象(前面所学,基础),浏览器对象(API所学),内置对象(基础)二. 内置对象:JavaScript语言自带的一些对象,供开发者使用,并提供了最常用,最基本的属性和方法(Math,Array,Date,String等)三. Math对象:是一个内置对象,具有数学常数和函数的属性和方法,不是一个函数对象四. 有关Math的相关方法Math.max() 是一个方法,返回一组数据里的最大值console.log(原创 2020-11-28 23:25:55 · 254 阅读 · 0 评论 -
详解JavaScript内置对象Array(数组)
JavaScript内置对象Array(数组)一. 创建数组的两种方式方法一:数组字面量var arr=[1,2,3,4,5,6];方法二:new Array()var arr1=new Array(); //创建一个空数组var arr2=new Array(2); //创建一个长度为2的数组var arr3=new Array(2,3,4); //创建一个[2,3,4]的数组二. 检测是否为数组的两种方法方法一:instanceof运算符var arr4=[1,2,3,原创 2020-11-27 23:00:47 · 161 阅读 · 0 评论 -
VS Code常用的快捷键
VS Code常用的快捷键掌握VS Code一些常用的快捷键,会让我们在编写代码时非常方便ctrl+/ 单行注释Alt+Shift+A 多行注释Alt+up 向上移动行Alt+down 向下移动行Ctrl+c 复制当前行Ctrl+v 粘贴当前行Shift + Ctrl + k 删除当前行Ctrl + ~ 打开或关闭控制台终端Ctrl+ +/- 字体放大或缩小Ctr原创 2020-12-03 20:48:03 · 111 阅读 · 0 评论 -
JavaScript中this指向问题和改变this指向方法
JavaScript中this指向问题一. 各种情况下this的指向普通函数调用时this指向windowfunction fn() { console.log(this);}fn(); //window构造函数调用时this指向实例化对象,原型对象里this也指向实例化对象 function Star(name, age) { this.name = name; this.age = age;原创 2020-12-03 19:07:09 · 175 阅读 · 0 评论 -
JavaScript中创建类及类的继承
JavaScript中创建类及类的继承JavaScript 是面向对象的语言,引用数据类型都是对象,包括函数也是对象,同时还可以通过 Object 对象自定义对象。但是,和其他面向对象语言(如 Java 等高级语言)比,也有很大差异,JS 中没有类或接口的概念,即不能直接定义抽象的类,也不能直接实现继承。不过,为了编程的方便,我们可以在 JS 中模拟类和继承的行为简单来说就是Javascript中没有类的概念,不过它可以用构造函数来实现类的功能,构造函数就是一个函数,一般构造函数名首字母大写实际上,原创 2020-12-03 16:40:10 · 508 阅读 · 0 评论 -
JavaScript正则表达式案例(座机号码验证及敏感词替换)
JavaScript正则表达式案例案例一:座机号码验证//座机号码验证 0913-5549400 010-12345678var reg4 = /^\d{3,4}-\d{7,8}$/; //或者var reg4 = /^\d{4}-\d{7}|\d{3}-\d{8}$/;console.log(reg4.test('0913-5549400')); //trueconsole.log(reg4.test('010-12345678')); //trueconsole.log(reg4.te原创 2020-11-29 21:24:53 · 839 阅读 · 0 评论 -
JavaScript之正则表达式详解
JavaScript之正则表达式什么是正则表达式?正则表达式:用于匹配字符串中字符组合的模式,在javascript中,正则表达式也是对象正则表达式的作用?匹配(验证表单√)替换(过滤敏感词)提取(从字符串中提取特定成分)创建正则表达式的两种方法方法一:构造函数方法二:字面量//方法一var regexp = new RegExp(/123/); //正则表达式里面不需要加引号console.log(regexp); // /123///方法二var rg=/123/;c原创 2020-11-29 21:19:28 · 120 阅读 · 0 评论 -
JavaScript之递归及其相关案例
JavaScript之递归及其相关案例什么是递归?递归:一个函数在内部可以调用其本身var num = 1;function fn() { console.log('我爱写代码'); if (num == 6) { return; } else { num++; } fn();}fn(); //'我爱写代码'*6由于递归很容易发生栈溢出错误,所以必须要加退出条件return原创 2020-11-29 20:44:16 · 132 阅读 · 0 评论 -
JavaScript闭包详解及案例
JavaScript闭包详解及案例一. 变量作用域函数内部可以使用全局变量函数外部不可以使用局部变量当函数执行完毕时,本作用域内的局部变量会被销毁二. 闭包闭包:有权访问另一个函数作用域中变量的函数(变量所在的函数就是闭包函数,闭包就是典型的高阶函数)闭包的作用:延申了变量的作用范围//方法一function fn() { var num = 10; return function() { consol原创 2020-11-29 15:16:57 · 180 阅读 · 0 评论