Javascript 高级篇
关注
分享
扫一扫
javascript的一些语法
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年7月5日 JavaScript高级篇 ES6(Reflect)
let obj = {name:'tony'}console.log('name' in obj);console.log(Reflect.has(obj,'name'));//Reflect 的api 和proxy代理的api通用 let obj = { name:'Chris'}let result = Reflect.get(obj,'name')console.log(result);let obj2 = { get he() { return thi原创 2020-07-05 20:06:01 · 563963 阅读 · 1 评论 -
(精华)2020年7月5日 JavaScript高级篇 ES6(Proxy)
// let p = new Proxy(target,handel)// tearget: 用Proxy包装的目标对象// handel:一个对象proxy代理操作的对象// ----------get用于对象属性读取的拦截 可以接收三个参数 目标对象 属性名 proxy实例本身(可选)------------------// 判断一个对象的属性是否存在let person = { name: 'tony'}let proxy = new Proxy(person, { ge原创 2020-07-05 20:03:36 · 564117 阅读 · 1 评论 -
(精华)2020年7月5日 JavaScript高级篇 ES6(async和await)
async function get(){ let res1 = await axios.get('http://127.0.0.1:2000/name.json') console.log(res1); let id = res1.data.data[0].id let res2 = await axios.get(`http://127.0.0.1:2000/wepon.json?id=${id}`) console.log(res2); return 1原创 2020-07-05 11:04:24 · 563750 阅读 · 2 评论 -
(精华)2020年7月5日 JavaScript高级篇 ES6(generator)
generator函数 介绍es6提出的一种异步解决的方案执行这个generator函数会返回一个遍历器对象形式上区别之一 function关键字与函数名之间有一个*号形式上区别之二 函数内部使用yield表达式用法function* helloGenerator(){ yield 'hello' yield 'world' return 123}let res = helloGenerator()// console.log(res);console.lo原创 2020-07-05 10:58:17 · 564025 阅读 · 1 评论 -
(精华)2020年7月5日 JavaScript高级篇 ES6(Promise)
Promise 是什么是一种异步解决的方案 比es5传统的解决异步的方案（回调函数）es6提供了promise对象以前处理异步的方式// 后者要等待前者执行的结果 f2 要等待 f1执行完function f1(callback){ setTimeout(()=>{ var res = 'f1' console.log('我先执行从后台获取到了f1'); callback(res) },1000)}function f2(v原创 2020-07-05 10:40:08 · 566615 阅读 · 1 评论 -
(精华)2020年7月4日 JavaScript高级篇 ES6(闭包底层)
// a函数定义function a(){ // b函数定义 function b(){ var b = 234 } var a = 123 // b函数执行 b()}var global = 1;// a函数执行a()a函数定义a函数执行b函数定义b函数执行原创 2020-07-04 23:15:51 · 563716 阅读 · 1 评论 -
(精华)2020年7月4日 JavaScript高级篇 ES6(class类的继承)
class Father{ constructor(){ this.name = '父亲' this.age = 33 } work(){ console.log('我是父类'); }}class Children extends Father{ constructor(name,age,play){ super() this.name = name }}原创 2020-07-04 23:06:15 · 563726 阅读 · 1 评论 -
(精华)2020年7月4日 JavaScript高级篇 ES6(class类)
是什么es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法（语法糖）作用无疑让写法更清晰 更像面向对象的写法回顾之前es5生成实例对象Person.prototype.say = function(){ console.log('我会说话');}// 这是错误的写法// Person.prototype.say = ()=>{// console.log(`我是${this.name}`);// }function Person(name,a原创 2020-07-04 22:55:47 · 563729 阅读 · 1 评论 -
(精华)2020年7月4日 JavaScript高级篇 ES6(箭头函数)
基本用法// 没有参数 多个参数 需要用() 包裹起来const fn = ()=>5console.log(fn());const fnG = (num1,num2)=>num1 + num2console.log(fnG(1,2));// 函数块的语句 多于一条语句的 要使用{} 包裹起来 并且要用return 返回const fJ = (a,b)=>{ let c = a+b; let d = c+19; return d}console.l原创 2020-07-04 22:37:04 · 564067 阅读 · 0 评论 -
(精华)2020年7月4日 JavaScript高级篇 ES6(函数扩展)
函数参数的默认值function Person(name = '张三',age=18){ this.name = name this.age = age}let person1 = new Person()console.log(person1);// 好处// 1 阅读代码清晰// 2 有利于代买维护 有利于封装代码// 注意：有默认参数声明 内部不能用let const声明function fn(x,y="123"){ let x = 1;}fn(1)原创 2020-07-04 22:31:52 · 563373 阅读 · 0 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(Iterator迭代器)
为什么要有iterator// Map Set 等数据结构 需要一个统一的接口去处理 iterator就是提供了这么一个机制作用// 数据部署了iterator接口 就可以用for ... of 循环遍历for…of 循环的遍历过程的本质// for...of 循环遍历的过程// 1 创建一个指针对象 指向数据的初始位置 iterator就是一个指针对象// 2 第一次调用指针对象的next() 可以将指针指向第一个成员// .....// 直到结束// !!!! 每一次调用指针对象原创 2020-07-03 22:07:21 · 565584 阅读 · 1 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(Map数据结构)
Map是什么// map???// es6 新提出的一种引用类型的数据结构 类似于对象// 字符创-》值 值-》值声明Map数据结构const map = new Map()const o = {p:'hello'} // 相当于键 key map.set(o,'content') // var a = {} a.name = '张三' a.nameconsole.log(map.get(o));证明是引用数据类型// null typeof null const map = n原创 2020-07-03 22:01:01 · 566068 阅读 · 1 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(Set数据结构)
Set是什么// Set是es6新提出的一个新的引用数据类型 类似于数组 但是成员是唯一的 没有重复的值// 和对象里面的 get set 不一样基本用法// 基本用法const set = new Set([1,2,3,4,5,6,5])console.log(set);证明set是js新的引用数据类型let arr = [1,2,3,4]let obj = {name:'张三'}let nu = null // 历史遗留问题console.log(typeof arr);c原创 2020-07-03 21:56:29 · 565295 阅读 · 1 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(Symbol数据结构)
概念以及引入的原因// 新提出的一个数据结构 Symbol 基本数据类型// Symbol表示独一无二 第七种数据类型// 对象的属性是字符串 对象的话隐式调用toString 转化成字符串let a = {a:1};let b = {b:2};let c = {};c[a] = 3; // [object Object]c[b] = 4; // [object Object]console.log(c);// ? 怎么解决 let s = Symbol()console.log(t原创 2020-07-03 21:41:34 · 565692 阅读 · 0 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(对象的扩展方法)
属性的简写const a = 'a';const obj = {a}// const obj = {a:a}console.log(obj);方法的简写const o = { say(){ return '我是chris' }}console.log(o.say());// 谁用我我就指向谁var name = '全局'const person = { name:'张三', say(){ console.log(`我的名原创 2020-07-03 21:36:15 · 565240 阅读 · 0 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(数组的扩展方法)
展开运算符 … 拆包函数调用的体现function f(a,b,c){}var args = [1,2,3]// f.apply(null,args)// 拆包f(...args)后面可以放表达式let a = 1;const arr = [ ...(a>0? ['a']: [])]替代函数的apply方法 // 思考连接两个数组的方法 let arr1 = [1,2,3] let arr2 = [4,5,6] console.log(arr1.concat(原创 2020-07-03 21:11:09 · 565607 阅读 · 1 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(新增的实例方法)
新增的实例方法includes() ，startsWith() ，endsWith()// includes()返回布尔值 startsWith() endsWith()let s = 'hello world'console.log(s.includes('o'));console.log(s.includes('p'));console.log(s.startsWith('hello'));console.log(s.endsWith('world'));// 支持第二个参数 表示开原创 2020-07-03 21:02:31 · 566351 阅读 · 2 评论 -
(精华)2020年7月3日 JavaScript高级篇 ES6(模板字符串)
<!DOCTYPE html>1<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>模原创 2020-07-03 20:53:12 · 565011 阅读 · 1 评论 -
(精华)2020年6月29日 JavaScript高级篇 ES6(解构赋值)
解构赋值1.1. 数组解构赋值 // 通过数组对变量进行赋值 let arr = [1,2,3] console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); let [a,b,c] = [1,2,3] console.log(a); console.log(b); console.log(c); 1.1.1. 模式匹配等号两边的模式相同 左边的变量就会被赋原创 2020-06-29 22:33:17 · 569125 阅读 · 1 评论 -
(精华)2020年6月29日 JavaScript高级篇 ES6(块级作用域)
1. 为什么要有块级作用域？ // 内层的变量会覆盖外层的变量 var a = '全局' function fn(){ // 预编译 找var a // var a console.log(a); // undefined if(false){ var a = '局部' } } fn() // 复习预编译的东西 // 全局 函数作用 块级作用域原创 2020-06-29 21:57:35 · 568135 阅读 · 1 评论 -
(精华)2020年6月29日 JavaScript高级篇 ES6(let,const,var)
1. es6的背景介绍ES6是什么？ ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了和js之间的关系 ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。 作用是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。（更具模块化）不存在变量提升console.log(a); // undefinedvar a = 123// es6 con原创 2020-06-29 21:51:26 · 568540 阅读 · 1 评论 -
(更新时间)2021年07月01日 JavaScript高级篇 mock.js的使用方法
const Mock = require('mockjs')const data = Mock.mock({ //定义数据生成规则 'memberList|2-6': [ { 'id|+1': 2, // 自增长1 ，初始值为2， 'name|1-3': '小梦', // 随机生成1到3个重叠小梦 'name|2': '小梦' 生成2个小梦 'phone|11': '8', // 888888888原创 2020-06-29 21:35:02 · 568006 阅读 · 1 评论 -
(精华)2020年6月28日 JavaScript高级篇 音量调节器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>日食原创 2020-06-28 07:23:22 · 564946 阅读 · 0 评论 -
(精华)2020年6月28日 JavaScript高级篇 图片上传预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</t原创 2020-06-28 07:19:28 · 564819 阅读 · 1 评论 -
(精华)2020年6月28日 JavaScript高级篇 侧边栏目录树
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>无限原创 2020-06-28 07:16:00 · 565127 阅读 · 0 评论 -
(精华)2020年6月28日 JavaScript高级篇 弹框封装
var createMsgWin = { init(param) { var initParam = { title: '友情提示', //标题 tips: "没有任何提示信息！", //主体内容 btnOk: '确定', //确定按钮文字 btnNo: '取消', //取消按钮文字 area: ['250', '210'], //自定义弹框大小原创 2020-06-28 07:08:15 · 564579 阅读 · 0 评论 -
(精华)2020年6月28日 JavaScript高级篇 设计模式-发布订阅模式
//发布订阅对象var eventObj = { //缓存列表，存放订阅者的信息 list:{}, //添加订阅 listen:function(key,fn){ if(!this.list[key]){ this.list[key] = []; } typeof fn==='function' && this.list[key].push(fn); }, // 发布信息原创 2020-06-28 06:56:52 · 564970 阅读 · 0 评论 -
(精华)2020年6月25日 JavaScript高级篇 设计模式-策略模式
<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=原创 2020-06-25 21:52:29 · 555541 阅读 · 1 评论 -
(精华)2020年6月25日 JavaScript高级篇 设计模式-代理模式
保护代理<script> //主体，发送 function sendMsg(msg) { console.log(msg); } //代理 function proxySend(msg) { msg = msg.replace(/XT/, ''); sendMsg(msg); } proxySend('XT，辛苦的码农')</script>虚拟代理<!-- scr原创 2020-06-25 21:50:52 · 575814 阅读 · 1 评论 -
(精华)2020年6月25日 JavaScript高级篇 深拷贝和浅拷贝
一：浅拷贝function deep(obj){ var mn = {}; for(var key in obj) { mn[key] = obj[key] } return mn; }var obj0 = deep(obj);//对象var obj1 = Object.assign({},obj);var {...obj2} = obj; //扩展运算符//数组var arr01 = [1,2,3];arr02=原创 2020-06-25 21:40:02 · 556363 阅读 · 4 评论 -
(精华)2020年6月25日 JavaScript高级篇 设计模式-单例模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>单例原创 2020-06-25 21:28:33 · 555715 阅读 · 1 评论 -
(精华)2020年6月25日 JavaScript高级篇 ajax封装
<script>function xmlAjax(opt) { return new Promise(function (resolve, reject) { var initOpt = { method: 'post', url: '', data: null, async: true, //告诉服务器，我给的是什么数据 co原创 2020-06-25 21:18:01 · 554630 阅读 · 1 评论 -
(精华)2020年6月25日 JavaScript高级篇 原型和继承
原型主要是用来存公共属性和方法function Animal(){}var a=new Animal()a._prop_=Animal.prototype//对象的_prop_指向函数对象的原型a.constructor=Animal//对象的构造函数指向函数对象//a即为Animal的实例也为Animal.prototype的实例原型继承function Animal(category){ this.category = 'Animal'; this.testrr=原创 2020-06-25 17:06:39 · 553783 阅读 · 0 评论 -
(精华)2020年6月25日 JavaScript高级篇 闭包
闭包特点1.函数嵌套函数2. 函数内部可以引用外部的参数和变量3. 参数和变量不会被垃圾回收机制回收，而是在保存在内存中闭包的好处1.希望变量存在缓存中2.避免全局污染闭包的两种方式1.函数作为返回值function create(){ let a = 1; return function(){ console.log(`函数作为返回值：${a}`) }}let a = 0;let getFunc = create();getFunc();原创 2020-06-25 16:57:48 · 576363 阅读 · 0 评论 -
(精华)2020年6月25日 JavaScript高级篇 click事件(冒泡，捕获，委托)
冒泡和捕获 <div id="wrapDiv">wrapDiv <p id="innerP">innerP <span id="textSpan">textSpan</span> </p> </div> <script> var wrapDiv = document.getElementById("wrapDiv"); var innerP = document.getEle原创 2020-06-25 16:48:47 · 553542 阅读 · 0 评论 -
(精华)2020年6月25日 JavaScript高级篇 对象类型
JS对象有内部对象，浏览器对象，自定义对象一：内部对象Array,Object,Date ,Math, Number,String,RegExp，Error, EvalError ,TypeError二：浏览器对象window, document , Screen ,History,Location二：自定义对象//图片对象var img = new Image();img.src='...';img.onload = function(){ //图片加载完成}// 表单对象原创 2020-06-25 16:26:12 · 553349 阅读 · 3 评论 -
(精华)2020年6月25日 JavaScript高级篇 数据类型
JS数据类型：Number、String、Boolean、Null、undefined、object、symbol、bigInt。1､Undefined 类型只有一个值。在使用var 声明变量但未对其加初始化时，这个变量就是undefined。2､Null 类型只有一个值。null是表示一个空对象指针，这也是typeof操作符检测 null 值时会返回 object 的原因。3､Boolean 类型使用最多的一个类型，有两个字面值，分别是true、false。true不一定等于1,false不一原创 2020-06-25 16:20:21 · 578589 阅读 · 3 评论 -
(精华)2020年6月25日 JavaScript高级篇 对象属性
一：自有属性// ----------实例属性，自有属性----------var obj01 = {};obj01.name = 'laney';obj01.action = function () { console.log('function');}obj01['from'] = '中国';Object.defineProperty(obj01, 'age', { configurable: true, enumerable: true, //可枚举 va原创 2020-06-25 08:57:12 · 551486 阅读 · 1 评论 -
(精华)2020年6月25日 JavaScript高级篇 面向对象
ES5-面向对象一：栈和堆内存空间//----------值类型(栈)----------var a = 10;var b = a;a++;console.log(a)//11console.log(b)//10//----------引用类型(堆)----------var aa = {};var bb = aa;aa.name = '一起改变';console.log(aa);//{name:一起改变}console.log(bb);//{name:一起改变}二：值相等==原创 2020-06-25 08:24:53 · 549503 阅读 · 3 评论