![](https://img-blog.csdnimg.cn/20210716100928114.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
js
note
iteval
大把时间迷茫,几个瞬间成长
展开
-
DOM - 子元素逆序
DOM-子元素逆序。原创 2022-07-24 17:12:38 · 208 阅读 · 1 评论 -
DOM - 封装 insertAfter 函数
DOM-封装insertAfter函数原创 2022-07-24 17:07:00 · 202 阅读 · 0 评论 -
DOM - 找出当前节点下的所有元素节点(不管多少层都找出来)
DOM-找出当前节点下的所有元素节点(不管多少层都找出来)原创 2022-07-24 16:55:12 · 422 阅读 · 0 评论 -
DOM - 查看当前节点的前后兄弟元素节点
DOM - 查看当前节点的前后兄弟元素节点原创 2022-07-23 15:53:21 · 220 阅读 · 0 评论 -
DOM - 查看当前节点下有无子元素节点
DOM-查看当前节点下有无子元素节点。原创 2022-07-23 14:18:54 · 560 阅读 · 0 评论 -
DOM - 找出当前节点的子元素节点和找出当前节点的第 n 层父级元素
遍历任意父元素的子元素节点和找出一个元素节点的第n层父级元素的子节点。原创 2022-07-18 15:44:48 · 577 阅读 · 0 评论 -
字符串数组排序
字符串数组排序原创 2022-07-14 20:48:44 · 104 阅读 · 0 评论 -
重写 typeof 方法
重写 typeof 方法原创 2022-07-14 20:40:08 · 88 阅读 · 0 评论 -
重写JS数组常用方法
重写JS数组常用方法原创 2022-07-13 10:41:53 · 391 阅读 · 0 评论 -
JS 深浅拷贝
总结JS拷贝问题二、深拷贝(deepClone)使用 循环遍历 + 递归简单粗暴直接原创 2022-07-13 08:49:35 · 190 阅读 · 0 评论 -
ES6 扩展运算符
ES6 数组相关一、扩展运算符 …用于函数调用将一个数组变为参数序列;可与正常的函数参数结合使用;扩展运算符后面也可以放表达式;如果扩展运算符后面是空数组,不产生任何结果。只有函数调用时,扩展运算符才可以放到圆括号里。const array1 = [];const array2 = [];const arr = [1, 2, 3];function push(array, ...items) { array.push(...items); console.log(...(原创 2021-07-17 22:20:17 · 133 阅读 · 0 评论 -
ES6 里面的 class
ES5 对象的写法let x = 10, y = 20;const obj = { x: x, y: y, sum: function () { return this.x + this.y; }};ES6 对象的写法const obj = { x, y, sum() { return this.x + this.y; }};class 有点类似 java 的 classclass Person {原创 2021-07-20 11:32:37 · 41 阅读 · 0 评论 -
ES6 let 和 const 关键字
let 关键字不会存在变量提升必须先定义在使用,没有定义就使用的话就会报错console.log(a); // RefenceError a is not definedlet a = 10;会产生作用域和 const 一样不允许重复声明变量let a = 10;let a = 20;console.log(a); // 报错,因为变量a已经被赋值了function (num) { let num; // 报错,不能在函数内部重新声明参数 co原创 2021-07-16 11:40:27 · 100 阅读 · 0 评论 -
ES6 箭头函数
ES6箭头函数ES6新增了创建函数的方式:“箭头函数”真实项目中箭头函数和其他函数一起混合使用优点箭头函数简化了创建函数的代码箭头函数的创建都是函数表达式方式(变量 = 函数)在这种模式下,不存在变量提升,函数只能在创建完成后被执行一、基础语法const fn = ([形参]) => { // 函数体 (return)}fn([实参]);二、如果形参只有一个,小括号可以不加const f = v => v;// 等同于const f = functi原创 2021-07-17 22:01:04 · 191 阅读 · 0 评论 -
Set 和 map 数据结构
set 和数组有点相似一、set 实现数组去重const set = new Set(['1', '1', 1, 2, 1, 2, 3, 3]);// ['1', 1, 2, 3]const set = new Set([[1], [1], 1, 1]);// [[1], [1], 1] ==> 引用数据类型地址不一样二、set 的一些方法set.add() – 添加元素let arr = [1, 2, 3];let set = new Set(arr);set.add(4原创 2021-07-20 11:41:04 · 50 阅读 · 0 评论 -
ES6 Symbol 数据类型
ES6-Symbol 类型ES5 除类数组对象(类数组对象名可以为数字,对象必须有 length 属性,可以用数组下标的方式访问对象属性,但不能通过点的方式访问)外,对象属性名都是字符串,这很容易造成属性名的冲突。而且 JavaScript 是弱类型语言,属性名冲突不会报错,处于代码执行顺序后面的属性值会覆盖前面的属性值(属性值容易被篡改),这样对象的属性就不能保证是我们想要的。ES6 引入了Symbol数据类型很好地解决了对象属性名冲突的问题。Symbol表示 独一无二的值 ,它是原始原创 2021-07-17 22:17:26 · 261 阅读 · 1 评论 -
关于引入 js 文件
一、说说 script 标签的几个常用属性async 表示立即下载该 js 文件,但不妨碍页面中的其他操作(只对外部 js 文件有效)defer 表示该 js 文件可以延迟到整个页面被解析并显示之后再执行(只对外部 js 文件有效)src 指定要引入的 js 文件路径type 是 language 的替代属性,表示当前脚本的类型,如 text/javascript | text/babel二、引入 js 文件正常引入<script src="./js/routerList.js"原创 2021-09-24 10:03:05 · 6723 阅读 · 0 评论 -
获取元素大小和位置的方式
一、直接获取元素样式属性值 – element.style.widthconsole.log(div.style.width); // 500pxconsole.log(parseInt(div.style.width)); // 500console.log(typeof (div.style.width)); // string二、offset 偏移量offsetWidth = width + padding + borderoffsetHeight = height + padding原创 2021-07-20 11:01:28 · 1040 阅读 · 0 评论 -
location 和 history
Location 对象:封装了浏览器地址栏的 URL 信息一、hash返回 URL 中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串# 位置标识符 : 当前页面的位置信息, 比如: 跳转顶部console.log(location.hash); // ""二、host : 返回服务器名称和端口号console.log(location.host); // "localhost:63342"三、hostname : 返回不带端口号的服务器名称console.log(lo原创 2021-07-20 10:24:53 · 329 阅读 · 0 评论 -
window 事件
1. 滚动事件 – onscroll// 当页面发生滚动就会触发这个事件window.onscroll = function () { console.log('我会随着鼠标滚动改变');}2. 窗口大小改变事件 – onresize// 当窗口大小发生改变就会触发这个事件window.onresize = function () { console.log('我会随着窗口改变');}3. 页面加载完毕后执行 – onload// 当页面全部加载完毕之后, 才会执行w原创 2021-07-17 23:13:08 · 238 阅读 · 0 评论 -
BOM -- browser object model
浏览器窗口大小的设置1. innerWidth / innerHeight获取浏览器的内容可视区的大小(包括滚动条不包括开发者工具区域)console.log(浏览器的内容可视区的宽度是: ' + window.innerWidth + 'px');console.log(浏览器的内容可视区的宽度是: ' + window.innerHeight + 'px');2. outerWidth / outerHeight获取浏览器软件界面的大小(包括浏览器边框的阴影部分)console.log(原创 2021-07-17 23:10:29 · 86 阅读 · 0 评论 -
DOM 元素以及内容的增删改
一、DOM元素中的增加、删除、修改1、创建元素const div = document.createElement('div'); // 创建一个 div 元素2、增加元素const div = document.createElement('div'); // 创建一个 div 元素document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面document.getElementsByClassName('wapper原创 2021-07-17 22:54:18 · 172 阅读 · 0 评论 -
DOM 节点类型及属性
DOM 节点类型及属性一、节点类型节点名称节点类型节点文本内容#document (文档节点)9null大写标签名 (元素节点)1null#text (文本节点 )3文本内容#comment (注释节点)8注释的内容二、获取节点的方式描述节点和节点之间的关系属性,基于这些属性可以获取到指定的节点1. 获取所有子节点——节点集合语法:[container].childNodes获取当前容器中所有的子节点包含各种类型的原创 2021-07-17 22:43:39 · 114 阅读 · 0 评论 -
改变 this 指向的 call 和 apply
一、call() 方法基本用法function test() { console.log('hello world');}test(); // hello worldtest.call(); // hello world// test() ==> test.call()借用别人的方法,实现自己的功能function Person(name, age) { // this == obj this.name = name; this.age原创 2021-07-17 21:51:43 · 104 阅读 · 0 评论 -
js 里面令人头疼的 this
JS中this相关问题梳理this 就是 js 里的关键字,有特殊意义,代表函数执行主体一、定义函数执行主体(不是作用域):意思是谁把函数执行了,那么执行主体就是谁二、使用情况全局作用域里的this 是window , 全局作用域下相当于是window.fn() 执行只是把window 省略了(严格模式下是undefined )。console.log(this === window); // truewindow.a = 13;console.log(this.a); //转载 2021-07-17 21:50:15 · 79 阅读 · 0 评论 -
属性的表示方法和对象的枚举
属性的表示方法一、对象.属性var obj = { name : 'mary', age : 18};console.log(obj.name, obj.age); // mary 18二、对象[‘属性’] – 让对象属性更加灵活var zhang = { wife1: {name: 'xiaomei'}, wife2: {name: 'xiaoli'}, wife3: {name: 'xiaowang'}, wife4: {name: 'xi原创 2021-07-16 10:48:31 · 80 阅读 · 0 评论 -
js 继承发展史
JS继承发展史传统模式 --> 原型链过多的继承了没用的属性借用构造函数不能继承借用构造函数的原型,只能借用构造函数的方法, 每次构造函数都要多走一个函数,只是从视觉上变少了而已共享原型(标准)不能随便改动自己的原型圣杯模式一、传统模式Grand.prototype.lastName = '王五';function Grand() { }var grand = new Grand();Father.prototype = grand;转载 2021-07-16 10:20:41 · 77 阅读 · 0 评论 -
js 原型以及原型链
原型一、概念原型是 function 对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。利用原型特点和概念,可以提取共有属性。对象如何查看原型 --> 隐式属性 __ proto __对象如何查看对象的构造函数 --> constructor// Person.prototype ---- 原型// Person.prototype = {} ---- 祖先// 操作原型Person.prototyp转载 2021-07-16 10:02:47 · 73 阅读 · 0 评论 -
对象的包装类
对象包装类一、首先抛出疑问:原始值为啥添加属性而且不会报错 ???var str = 'a';str.name = 'abc';console.log(str.name); // 就是因为原始值要经过包装类var str = 'abc';str.length = 2;// new String('abc').length = 2; deleteconsole.log(str); // abc// new String('abc').length --> 这个 lengt原创 2021-07-16 09:50:32 · 93 阅读 · 0 评论 -
js 对象和构造函数
对象的创建方法题外话:java c++ 同样能生产出对象,但是是死的JavaScript 生产出的对象是活的,更像是人的生长过程,后天可以增加和删除方法一、用字面量(对象字面量、对象直接量)创建var obj = {};二、对象的增删改查增let obj = { };obj.name = '张三';obj.age = 18;删delete obj.age;一旦经历了 var 的操作,所得出的属性,window ,这种的属性叫做不可配置的属转载 2021-07-16 09:26:49 · 109 阅读 · 0 评论 -
js 闭包
闭包的作用实现公有变量 — 函数累加器可以做缓存(存储结构)可以实现封装,属性私有化模块化开发,防止污染全局变量闭包实现 1 + … + 100function add() { var count = 0; function demo() { count++; console.log(count); } return demo;}var counter = add();counter();for原创 2021-07-16 09:16:29 · 93 阅读 · 0 评论 -
函数的作用域以及预编译
一、函数的作用域函数作用域有点像单面镜(外面看不到里面,里面可以看到外面)JS的特点:单线程、是 解释性语言 (翻译一行,执行一行)二、预解析JS预解析三部曲语法解析预编译解释执行JS 在执行之前会通篇扫描代码,看有没有语法语义错误(语法解析),如果没有,然后开始执行代码(预编译)通篇扫描 --> 语法分析通篇扫描之后开始执行 --> 预解析test(); // 这种情况仍然会执行,就是预编译的作用function test() { consol原创 2021-07-16 09:12:18 · 114 阅读 · 0 评论 -
函数的结束条件和返回值 — return
return 的作用1. 返回值function sum(a, b) { return a + b;}sum(1, 2); // 32. 作为函数的终止条件函数遇到 return 就会停止function sum(a, b) { console.log('a'); return; // 如果 return 写在这里,后面的语句统统不会执行 console.log('b');}sum(1, 2);小案例 – 输入数字,输出字符类型的数字functio原创 2021-07-16 08:49:25 · 634 阅读 · 0 评论 -
js 函数参数
函数的参数函数有了参数才变得强大。参数规则:形参比实参多,多的形参赋值 undefined。实参比形参多,有多少形参就对应赋多少实参,其余的放到 arguments 里面。arguments[] 是一个类数组 – 实参列表// 形式参数 -- 形参 -- 用来占位的function fun(a, b) { let c = a + b; // 和数学一样,把两个数相加的规则抽象出来。 document.write(c);}// 实际参数 -- 实原创 2021-07-16 08:25:36 · 161 阅读 · 0 评论 -
js 函数
1. 高内聚,弱耦合 -->把相同功能的代码抽取出来,放到一个黑匣子里面,需要用到的时候调用这个黑匣子就可以了,这个黑匣子在JS里面叫函数2. 函数最基本的用法 – 简化代码// 原来let num = 1;let count = 0;if (num < 0) { console.log('这是一个整数');}if (num > 0) { console.log('这是一个整数');}if (num === 0) { c原创 2021-07-15 09:59:47 · 125 阅读 · 0 评论 -
arguments 类数组
类数组类数组:长得像数组,可以拿它当数组用,但它不是数组可以利用属性名模拟数组的特性可以动态的增长 length 的属性如果强行让类数组调用 push 方法,则会根据 length 属性值的位置进行属性的扩充不能往类数组里面添加东西function test() { console.log(arguments); arguments.push('age'); // arguments.push is not a function}test(1, 2, 3);原创 2021-07-15 09:55:26 · 174 阅读 · 0 评论 -
不改变原数组的一些方法
1. concat() — 数组合并var arr = [1, 2, 3];var arr1 = [4, 5, 6];console.log(arr.concat(arr1)); // [1, 2, 3, 4, 5, 6];2. 把数组变成字符串// Array.prototype.toString();var arr = [1, 2, 3];console.log(arr.toString); // "1, 2, 3"3. slice() — 截取字符串范围截取var ar原创 2021-07-15 09:49:47 · 1814 阅读 · 0 评论 -
JS遍历数组的12种方法
JS遍历数组的12种方法const arr = [1, 2, 3];1. for普通版for (let i = 0; i < arr.lengthl; i++) { // ...}优化版// 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。let len = arr.length;for (let i = 0; i < len; i++) { // ...}for 循环和 for…in 能正确响应 break、c原创 2021-07-15 09:38:42 · 7258 阅读 · 0 评论 -
数组常用方法
数组常用方法1. 获取数组的长度 – lengthlet arr = ['red', 'blue', 'pink'];console.log(arr.length); // 32. 更改数组元素的值 – arr[下标] = 要改的东西let arr = ['red', 'pink', 'blue'];arr[2] = 'white';console.log(arr); // ['red', 'white', 'blue']3. 判断是不是数组 – isArray()const arr原创 2021-07-15 09:17:33 · 137 阅读 · 0 评论 -
隐式类型转换
一、isNaN()隐式类型转换内部调用的都是显示类型转换的方法!!!isNaN的机制:先调用方法,再把得到的值,和 NaN 进行比较console.log(isNaN(NaN)); // trueconsole.log(isNaN('a')); // trueconsole.log(isNaN(undefined)); // trueconsole.log(isNaN(null)); // falseconsole.log(isNaN('')); // falseconsole.l原创 2021-07-15 08:48:02 · 146 阅读 · 0 评论