小仓桑-CSDN博客

一、方法调用模式当函数被保存为一个对象的属性时，它就可称为这个对象的方法。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用。例如：var name = "window";var obj = { name: "obj", getName: function(){ alert(this.name); }}obj.getName(); //"obj" getName函数作为对象obj的方法调用，所以

2022-03-13 18:55:48 505

原创 watch对数据的监测

computed: { // 使用计算属性将对象转换为单个变量（数据检测方式二） username() { return this.obj.username; }},watch: { // 对单个属性进行检测 'obj.username': { handler(newName, oldName) { console.log(newName, oldName); }, deep: true }, // 方式二：使用计算属性返回的参.

2022-03-11 19:10:20 356

原创组件之间传值使用方法

props/$emit父组件传子组件子组件export default { name: "Component2", props: { username: { type: String, default: '' } },}父组件<component2 :username="username"></component2>子组件传父组件子组件methods: { update() { t

2022-03-11 18:47:29 278

原创 new操作符具体做了什么

1．创建了一个空的对象function Foo() {}console.log(new Foo())2．将空对象的原型，指向于构造函数的原型function Foo() {}console.log(Foo.prototype == new Foo().__proto__)3．将空对象作为构造函数的上下文(改变this指向)function Foo() { console.log(this) this.name = "张三";}cons.

2022-03-03 20:24:35 133

原创 JavaScript深浅拷贝

对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个情况。let a = { age: 1}let b = aa.age = 2console.log(b.age) // 2浅拷贝首先可以通过Object.assign来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不...

2022-03-02 11:36:55 168

原创原生jsajax请求有几个步骤

创建XMLHttpRequest对象，也就是创建一个异步调用对象. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 设置响应HTTP请求状态变化的函数. 发送HTTP请求. 获取异步调用返回的数据. 使用JavaScript和DOM实现局部刷新....

2022-03-01 19:53:41 453

原创 JavaScript判断变量是不是数组

let a = [1, 2, 3];// 方法一：Array.isArray()console.log(Array.isArray(a));// 方法二：Array.prototype.isPrototypeOf()console.log(Array.prototype.isPrototypeOf(a));// 方法三：constructorconsole.log(a.constructor.toString().indexOf('Array'));// 方法四：Object.pro.

2022-03-01 15:08:12 408

原创包装对象的使用

对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。function mySplit(str, method, arg) { let obj = new String(str); return o

2022-02-28 17:17:37 215

原创 this的指向问题

// 直接调用function fn1() { console.log(this);}fn1(); // 指向的是window// 使用对象调用let fn2 = { name: '张三', getName: function () { console.log(this.name); }}fn2.getName();// 使用原型调用function fn3(name) { this.name = name;}fn3..

2022-02-28 17:15:02 124

原创 JavaScript常用数组

let list = [10, 20, 30, 40, 50, 40, 30, 20, 10, 11];// 又返回值let newList1 = list.map((item) => { if (item > 10) return item; return "";})console.log(newList1); // ['', 20, 30, 40, 50, 40, 30, 20, '', 11]// 无返回值（所循环到的元素、下标、遍历的数组）list.for.

2022-02-27 23:05:14 435

原创 v-model原理

<input placeholder="请输入名字" id="username">显示值：<p id="uName"></p>let obj = {};Object.defineProperty(obj, 'username', { get() { console.log("取值") }, set(v) { console.log("设置值") document.querySelector(.

2022-02-17 22:03:56 219

原创数组与对象的解构

数组// 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 1052

原创数组去重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 111

原创 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 153

原创递归求和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 596

原创 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 285

原创 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 80

原创过滤filter

let a = [1, 2, 3, 4, 10, 14, 15];// 1.current => 当前值 2.index => 当前的下标 3.array => 这个数组的对象let b = a.filter((current, index, array) => { console.log("current:", current) // 当前循环到的值 console.log("index:", index) // 循环到的下标 console.log(.

2022-02-14 23:13:21 147

原创 null和undefined

undefined1.声明，为赋值let o;console.log(o); // undefined2.对象某个属性不存在let obj = {}console.log(obj.a); // undefined3.少了参数function fn(a, b) { console.log(a, b); // 4 undefined}fn(4);4.方法的默认返回值function abcd() { console.log("111")}c

2022-02-14 23:11:42 209

原创防抖与节流

防抖HTML代码部分<input class="inp" placeholder="输入字符">JavaScript代码部分<script> // 防抖 // 多次操作变成一次 let inp = document.querySelector(".inp"); inp.addEventListener('input', antiShake(demo, 2000)) function antiShake(fn, wait)

2022-02-11 00:28:42 238

原创 Vue3中setup调用生命周期钩子函数

介绍如果要在setup方法中调用组件生命周期钩子函数:在原来的生命周期钩子函数名称前加on关键字,并且需要保持小驼峰的命名方式。语法import {onMounted, onUpdated} from 'vue'export default { name: "Lifecycle", setup() { onMounted(() => { console.log("组件视图挂载完成") }); onUpdated(() => {

2022-01-08 19:53:04 4320

原创 Vue3的watch与computed

watch介绍通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据，只要返回的结果没有发生变化, 那么计算属性就只会被执行一次。Vue3写法setup() { const name = ref('漩涡鸣人'); const {username, password} = toRefs(reactive({ username: '宇智波带土', password: 'zs1262597806' })) watch

2022-01-08 12:22:23 1221

原创 vue3中computed的使用方式

用法import { computed, ref } from "@vue/reactivity";export default { setup() { const msg = ref("宇智波带土"); // 实现msg反转操作 const reverseMsg = computed(() => { return msg.value.split("").reverse().join(""); }); return { msg

2022-01-06 23:13:23 1259

原创 Vue动态改变数据

方式一：reactive注意点reactive参数必须是对象使用方式import { reactive} from "vue";export default { setup() { const obj = reactive({ name: "张三", }); return obj; }, methods: { updataName() { console.log("方法进来啦！"

2022-01-06 22:54:34 1271

原创 TypeScript剩余参数

使用方式(() => { function showMsg(str: number, ...args: number[]) { console.log(str); console.log(args) } showMsg(1, 2, 3, 4, 5, 6, 7)})()运行结果

2022-01-06 14:40:45 635

原创 TypeScript抽象类

介绍包含抽象方法(抽象方法一般没有任何的具体内容的实现),也可以包含实例方法,抽象类是不能被实例化,为了让子类进行实例化及实现内部的抽象方法使用方式(() => { // 定义一个抽象类 abstract class Animal { // 抽象方法 abstract eat(): any sayHi() { console.log('你好啊') } } // 定义

2022-01-06 14:24:56 465

空空如也

空空如也