javascript
小仓桑
I want something just like this
展开
-
数组与对象的解构
数组// ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构let [a, b, c] = [1, 2, 3]; // a:1 b:2 c:3// 这种写法属于'模式匹配',只要等号两边的模式相同,左边的变量就会被赋予对应的值let [aa, [[bb], cc]] = [1, [[2], 3]]; // aa:1 bb:2 cc:3let [, , z] = [1, 2, 3]; // z:3let [x, ...y] = [1, 2, 3, 4]; // x=1原创 2022-02-16 22:23:39 · 1027 阅读 · 0 评论 -
数组去重ES5和ES6
ES5let arr = [12, 13, 14, 12, 15, 14];let newArr = []for (let i = 0; i < arr.length; i++) { var current = arr[i]; if (newArr.indexOf(current) === -1) { newArr.push(current) }}console.log(newArr);ES6let arr = [12, 13, 14,原创 2022-02-15 23:39:36 · 85 阅读 · 0 评论 -
const、let、var的知识
var声明提升console.log(num); // undefinedvar num = 123;变量覆盖var num1 = 12;var num1 = 13;console.log(num1); // 13没有块级作用域function fn() { for (var i = 0; i < 3; i++) { console.log(i); } console.log(i);}fn();const1.co原创 2022-02-15 23:11:38 · 145 阅读 · 0 评论 -
递归求和1-100
function add(num1, num2) { let num = num1 + num2; if (num2 + 1 > 100) { return num; } else { return add(num, num2 + 1); }}let sum = add(1, 2);console.log(sum); // 5050原创 2022-02-15 22:13:41 · 566 阅读 · 0 评论 -
foreach()与map()
foreach1.forEach没有返回值2.forEach不能用break打断3.遍历的是value值let arr = ['a', 'b', 'c'];arr.forEach((e) => { console.log(e);})map1.map有返回值(数组)默认return是undefined2.接收的参数是一个参数(key,value)3.不能用break打断let arr = ['a', 'b', 'c'];let map = arr.map原创 2022-02-15 22:07:52 · 240 阅读 · 0 评论 -
JavaScript原型
原型链从当前实例属性去查找,如果找了就返回,否则顺着原型链一层一层往上面找 直到找到null为止,如果找到null都没有找到,报错function Person() {}Person.prototype.name = "张三";Person.prototype.age = 18;Person.prototype.getName = function () { console.dir(this.name)}let person = new Person();person.原创 2022-02-15 22:05:35 · 71 阅读 · 0 评论 -
JavaScript判断操作系统与浏览器
判断操作系统var os = (function() { var UserAgent = navigator.userAgent.toLowerCase(); return { isIpad : /ipad/.test(UserAgent), isIphone : /iphone os/.test(UserAgent), isAndroid : /android/.test(UserAgent)原创 2021-12-11 14:15:06 · 601 阅读 · 0 评论 -
短路运算符&&与||的用法
||用法1、如果左边的值为false,那么b就等于右边的值2、如果左边的值为true,那么b就等于左边的值let a = 6;let b;b = a > 7 || 10;// 如果左边的值为false,那么b就等于右边的值// 如果左边的值为true,那么b就等于左边的值console.log("b的值为:", a > 7, b);// 结果为:b的值为: false 10&&用法1、如果左边的值为false,那么C就等于左边的值(短路效果)原创 2021-08-17 23:30:05 · 303 阅读 · 0 评论 -
ajax模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>老师学生课程</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script></head><body> .原创 2021-04-07 09:44:22 · 110 阅读 · 0 评论 -
async/await用法
function shaketheDice() { return new Promise((resolve, reject) => { let sino = parseInt(Math.random() * 6 + 1) setTimeout(() => { resolve(sino); }, 6000) })}function getTime() { return new Promise((.原创 2021-02-02 18:19:58 · 95 阅读 · 0 评论 -
JavaScript函数的使用
函数的声明//function 命令function print1(s) { console.log("print1执行了:" + s);}print1(10);// 函数表达式var print2 = function (s) { if (s == undefined) { console.log("未输入值...."); } console.log("print2执行了:" + s);}print2(10);//Function原创 2020-12-28 16:32:29 · 118 阅读 · 0 评论 -
JavaScript对象的操作集合
let obj = [ // 键名[属性名]:name、age、sex // 键值[属性值]:赵本山、赵匡胤、赵光义 {name: '赵本山', age: 16, sex: '男'}, {name: '赵丽颖', age: 20, sex: '女'}, {name: '赵匡胤', age: 18, sex: '男'}, {name: '赵光义', age: 20, sex: '男'}];//对象的引用let obj2 = obj;//为obj2引用o.原创 2020-12-28 15:59:26 · 185 阅读 · 0 评论 -
JavaScript时间格式化
Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getHours(), //小...原创 2020-12-11 10:02:51 · 65 阅读 · 0 评论 -
JavaScript数组常用方法大全
Array.from将字符串转化为数组let arr = [1,2,3,4,5,6,7,8,9] ;let names = Array.from(name) ;console.log(names) ;结果:["宇", "智", "波", "带", "土"]Array.of将一组值转换为数组,类似声明数组let arr2 = Array.of('hello','world') ;console.log(arr2) ;结果:["hello", "world"]原创 2020-11-13 18:31:32 · 181 阅读 · 0 评论 -
对象去重操作
var arr = [{ id : 1, name : '宇智波佐助', age : 18, sex : '男' },{ id : 2, name : '宇智波鼬', age : 19, sex : '男' },{ id : 3, name : '宇智波带土', age : 18, sex : '男'.原创 2020-11-12 18:46:34 · 343 阅读 · 0 评论 -
对象转数组以及数组转对象
对象转数组方法一:var box = { name : '赵', age : 12, sex : '男'}var arr = Object.values(box);输出结果:Object.values()返回一个数组,其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。方法二:var box = { name : '赵', age : 12, .原创 2020-11-12 18:45:02 · 545 阅读 · 0 评论 -
JavaScript各种数据遍历方法
for循环for语句用于创建一个循环,它包含了三个可选的表达式,这三个表达式被包围在圆括号之中,使用分号分隔,后跟一个用于在循环中执行的语句(通常是一个块语句)。var arr = ['一','二','三','四','五'] ;for (var i = 0 ; i < arr.length ; i++ ){ console.log(arr[i]); $("#for").append(arr[i]);}语法for ([initializatio.转载 2020-11-12 11:00:41 · 186 阅读 · 1 评论 -
JavaScript数据类型的理解
js的数据类型有:原始值类型(number、string、boolean、undefined、null)和引用类型object。原创 2020-11-11 11:09:32 · 118 阅读 · 0 评论 -
React-新的生命周期(React16版本)
组件生命周期的三个阶段Mounting(加载阶段) Updating(更新阶段) Unmounting(卸载阶段)旧的生命周期Mounting(加载阶段:涉及6个钩子函数)constructor()加载的时候调用一次,可以初始化stategetDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性。getInitialState()初始化state,可以直接在constructor中定义this.statecompo转载 2020-06-10 09:51:20 · 412 阅读 · 0 评论 -
Vue基本赋值绑定操作
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <...原创 2019-11-04 09:08:26 · 4555 阅读 · 0 评论 -
JS中的Date对象的使用方法
<script> function dateToString(date){ var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"] ; var y = date.getFullYear() ; var x = date.getMonth()+1 ; var a = date.getDate() ; va...原创 2019-11-02 21:11:09 · 685 阅读 · 0 评论 -
bootStrap写简单页面附判断是否为空以及二次密码是否一致
源码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text...原创 2019-10-31 15:47:46 · 1885 阅读 · 1 评论 -
通过原生JS全选全不选按序号选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> 请选择你的必修课:<br> <input ty...原创 2019-10-28 16:12:59 · 126 阅读 · 0 评论 -
使用JS进行图片切换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图片切换</title> </head> <body> <div id="controls"> <input id="round" typ...原创 2019-10-28 10:23:46 · 230 阅读 · 0 评论 -
JS数组去重与添加
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>数组去重</title> </head> <body> </body></html><script type="app...原创 2019-10-27 16:54:34 · 1941 阅读 · 0 评论 -
JS实现冒泡排序
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="application/javascript"> var arr = [54,32,67,43,5...原创 2019-10-25 21:37:25 · 79 阅读 · 0 评论 -
JS小案例
案例一:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>控制div元素</title> <style> #div1{ text-align: center; } #div2{ hei...原创 2019-10-25 09:01:20 · 681 阅读 · 0 评论 -
JS的数组对象中的方法(对数组的增删改查)
对数组用方法进行操作后,有两种情况 改变原数组和不会改变原数组改变原数组的方法:arr.push() ; :在数组的后面添加一个或多个元素,返回一个新的数组长度arr.pop() ; :删除数组最后一个元素,并且返回删除的元素arr.shift() ; :删除数组第一个元素,并且返回删除的元素arr.unshift() ; :在数组的前面添加一个或多个元素,返回一个新的数组长度arr....原创 2019-10-24 11:03:42 · 784 阅读 · 0 评论 -
通过循环按行顺序为一个5*5的二维数组赋1到25的自然数,然后输出该数组的左下半三角
最初效果:function Table(){ var arr = [[],[],[],[],[]] document.write("<table border='' width='300'>") ; var index = 0 ; for (var i = 0 ; i <5 ; i++) { document.write("<tr>"...原创 2019-10-24 09:26:16 · 5523 阅读 · 0 评论 -
通过js实现单击显示隐藏图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 300px; height: 200px; background: red; } ...原创 2019-10-23 11:00:12 · 1443 阅读 · 0 评论 -
JavaScript鼠标事件,键盘事件,表单事件,输入框事件,窗口事件
1.元素事件 鼠标事件: onclick : 单击鼠标 ondblclick :双击两下鼠标 onmousedown : 等同于onclick onmouseover : 鼠标移入事件 onmouseenter : 鼠标移入事件 onmouseout : 鼠标离开事件 onmouseleave : 鼠标离开事件 onmousemove : 鼠标移动事件 on...原创 2019-10-22 14:56:45 · 665 阅读 · 0 评论 -
函数基础语法和形参的细节知识
//求两个数的和,算完和后乘以10,然后再除以2...//n/m是形参,是变量,用来储存执行函数时传递的实参//sum()是让函数执行,代表函数最终返回结果//sum是函数名,代表这个函数//创建函数的时候我们设置了形参变量,//但如果执行的时候并没有给传递对应的实参值,那么形参变量默认是:undefinedfunction sum(n , m){ //形参默认值处理:如果没有传递...原创 2019-10-17 11:22:08 · 179 阅读 · 0 评论 -
CSS与JS实现隔行变色
HTML代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>隔行变色</title> </head> <link rel="stylesheet" href="css/index.css" /> <...原创 2019-10-16 12:52:10 · 458 阅读 · 0 评论 -
JS获取当前时间
点击跳转页面<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试时间</title> </head> <link rel="stylesheet" href="css/index.css" /> <...原创 2019-10-15 17:53:14 · 96 阅读 · 0 评论 -
通过JS实现判断数字正负
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!-- 导入css样式 --> <style> #numInp,#submit{ box-sizing: border-box...原创 2019-10-14 22:04:39 · 7654 阅读 · 0 评论 -
基于JS与CSS实现鼠标滑过显示详情
JS实现鼠标滑过显示详情<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标滑过详情</title> <style> *{ margin: 0; padding: 0; } #box{ ...原创 2019-10-14 09:37:42 · 1388 阅读 · 0 评论 -
打印倒正金字塔
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>金字塔</title> <style> div{ text-align: center; line-height: 20px; }原创 2019-01-04 20:48:25 · 3234 阅读 · 0 评论 -
统计考试科目的成绩,编写函数,实现使用prompt输入两个数和运算符号,并计算两个数的操作结果
function countScore () { var scoreNum = prompt('请输入考试科目数量',''); if (isNaN(scoreNum)||scoreNum <=0) { alert("输入的不是数字") return ; } //根据科目考试数量,统计总成绩 var res = 0 ; for (let i = 0 ; i<scor...原创 2019-01-04 21:09:33 · 15120 阅读 · 1 评论 -
验证邮箱地址的有效性javascript
function isEmail(email){ if (email=="") { alert("邮箱不能为空") ; } else if (email.split("@").length==1 || email.split(".").length==1) { alert("邮箱地址必须包含@和."); } else { let arr = email.split("@"原创 2019-01-04 21:14:49 · 16157 阅读 · 16 评论 -
使用prompt在页面中弹出提示对话框
根据用户输入星期一~星期日的不同,弹出不同信息提示对话框,要求使用函数实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>作息提示</title> </head> <body>原创 2019-01-04 21:34:59 · 7914 阅读 · 5 评论