对象{}、防抖与节流、常用日期对象、new 操作符做了哪些事（面试题）、计时器与定时器、递归、阻止对象的默认行为、mouseover 和 mouseenter的区别

已于 2023-04-28 09:21:56 修改
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 面试篇 文章标签： javascript js 前端
于 2022-04-11 23:17:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TKY666/article/details/124111689
版权

目录

一、对象是什么？

二、对象的构成

1.属性

2.方法

三、对象的创建及使用

创建对象的三种方式

1.对象字面量：

2.利用new Object创建对象 

new 操作符做了哪些事（面试题）

3.利用构造函数创建对象

for in 遍历对象

Object.keys()遍历对象

拷贝对象--扩展运算符

如何合并对象

Object.assign（）

扩展运算符

如何删除对象属性

使用 delete 操作符

使用对象解构（较多属性操作时推荐）

使用Reflect (单个属性操作时推荐）

日期对象 

vue中设置日期及其格式模板

字符串对象+方法

计时器与定时器

防抖与节流

防抖简单方法封装：

节流简单方法封装：

阻止默认行为 

关于递归

一、对象是什么？

对象是一个具体的事物。

对象是一组无序的相关属性和方法的集合，所有的事物都是对象，比如，字符串，数值，数组，函数等

二、对象的构成

1.属性

属性：是指事物的特征，在对象中用属性来表示（常用名词）

2.方法

方法：是指事物的行为，在对象中用方法来表示（常用动词）

示例：

//代码表示
  <script>
        var iphone12 = {  //iphone:对象名
            price: 9999, //price:属性  9999:属性值
            sendTEL: function () { //方法
                console.log("我能打电话")
            },
        }
        console.log(iphone12.price);
        console.log(iphone12.sendTEL())
    </script>

三、对象的创建及使用

创建对象的三种方式

1.对象字面量：

花括号{ }里面包含了表达对象的属性和方法

示例：

            // var obj ={}  //创建了一个空对象

总结：
1、创建对象

用字面量{ }创建对象，里面的属性或者方法采用的是：键:值 (键值对)的方式
多个属性或者方法之间是 ，(用逗号)隔开
方法 冒号后面跟的是一个匿名函数

2、 使用对象

（1）调用对象的属性，使用  对象名.属性名的方式，可以理解为，对象 的 属性
（2）调用对象的属性，也可使用 对象名[‘属性名’]的方式，注意加引号
调用对象的方法： 对象名.方法名() ，对象名.方法名() ，千万别忘了加小括号

3、变量、属性、函数、方法的总结
变量：单独声明赋值、单独存在
属性：对象里面的变量称为属性、不需要声明，用来描述该对象的特征
函数：单独存在的、通过  函数名() 的方式就可以调用
方法：对象里面的函数称为方法、方法不需要声明、使用 对象.方法名() 的方式就可以调用，方法用来描述该对象的行为和功能
变量和函数都需要声明，属性和方法不需要声明就可直接使用

2.利用new Object创建对象 

    <script>
        var obj = new Object()
        obj.name = '小坤';
        obj.age = 18;
        obj.sayHi = function () {
            console.log("我能说：只因你太美！")
        }
        console.log(obj.name);
        console.log(obj['age']);
        console.log(obj.sayHi());
    </script>

注意：在这里使用new Object() 创建对象，使用的是 =(等号)赋值的方法来添加对象的属性和方法

new 操作符做了哪些事（面试题）

1.创建一个空对象   new  Object()

2.把空对象的__proto__,指向构造函数的原型对象prototype

3.把空对象作为this的指向上下文

4.如果函数无返回值，则返回this

引用类型：数组,对象,函数
    每一个引用类型都有一个__proto__属性  隐式原型对象[[prototype]]
    每一个函数都有一个 显式原型对象 prototype

1.创建一个空对象   new  Object()
2.把空对象的__proto__,指向构造函数的原型对象prototype
3.把空对象作为this的指向上下文
4.如果函数无返回值，则返回this

3.利用构造函数创建对象

为什么需要用构造函数创建对象？因为前面两种创建方法一次只能创建一个对象，请看下面代码：

 <script>
        var obj1 = {
            name: '张三疯',
            age: 18,
            sayHi: function () {
                console.log("hello")
            }
        }
        var obj2 = {
            name: '李四',
            age: 20,
            sayHi: function () {
                console.log("hello")
            }
        }
    </script>

可以发现，创建的对象属性和方法都相同，如果需要创建很多个，一个一个创建效率就会很低。但是，我们可以利用一个函数去重复创建对象，这个函数称为构造函数。构造函数中封装的不是普通代码，而是对象。

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来封装到这个函数里面。

构造函数的语法格式：

function 构造函数名(){			//this可以理解为： 对象的...
	this.属性=值；
	this.方法=function（）{}
}
使用构造函数：new 构造函数名            //注意：构造函数名首字母大写哟
//使用new调用构造函数返回的是一个对象

 示例：

<script>						
        function Obj(name, age) {	//创建构造函数，传入两个参数
            this.name = name;
            this.age = age;
            this.sayHi = function () {
                console.log("hello!");
            }
        }
        var obj1 = new Obj('小蔡', 18) //使用new调用构造函数，返回的是一个对象
        console.log(typeof (obj1));   //使用typeof()函数判断obj1的数据类型，证明返回的是对象
        console.log(obj1.name);		 //获取名称
        console.log(obj1.age);		//获取年龄
        console.log(obj1.sayHi());	//调用方法
    </script>

总结：

1、构造函数和对象的区别：

  1. 构造函数是把对象相同的属性(公共部分)封装在一起，泛指的某一大类，如：明星/汽车图纸
    他类似于java里面的类(class)

  2. 对象：特指的一个具体事物，如：刘德华/一辆真实的汽车

2、new关键字执行构造函数创建对象的过程

  1. 在内存中创建一个新的空对象
  2. 让this指向这个新对象
  3. 执行构造函数里面的代码，给这个对象添加属性和方法
  4. 返回这个新对象（所以构造函数里面不需要return）

通过new关键字创建对象的过程也加对象的实例化

for in 遍历对象

let obj = {name:'cxk',Music:'鸡你太美'};
	for(var item in obj){
		console.log(item); // name,Music
		console.log(obj[item]); // cxk 鸡你太美
	}

Object.keys()遍历对象

作用：遍历对象
返回结果：返回对象中每一项key的数组

	// 1. 定义一个对象
    var obj = { 0:'熊大',1:'熊二',2:'光头强' }
    // 2. 使用Object.keys()方法
    var keyValue = Object.keys(obj)
    // 3. 打印结果
    console.log(keyValue)  // 得到是：["0","1","2"]

也可以结合forEach来使用
Object.keys(要遍历的对象).forEach((v,i) => {})

 Object.keys(obj).forEach(key => {
     console.log(key, obj[key]);
     })

     // 得到的是：0---熊大
     //          1---熊二
     //          2---光头强

拷贝对象--扩展运算符

拓展运算符 ... 用于取出参数对象所有可遍历属性然后拷贝到当前对象。

一层嵌套为深拷贝

let person1={name:"Amy",age:16};
let someone1={...person1}
person1.age=17
console.log(someone1); // {name:"Amy",age:16}

多层嵌套为浅拷贝，也就是只能深拷贝一层嵌套的数据
let aa = {
	age: 18,
	name: 'aaa',
	address: {
		city: 'shanghai'
	}
}

let bb = {...aa};
bb.address.city = 'shenzhen';

console.log(aa.address.city);  // shenzhen

这种拷贝方式如果只是一层数组或是对象，其元素只是简单类型的元素，那么属于深拷贝，如果数组或对象中的元素是引用类型的元素，那么就是浅拷贝

如何合并对象

Object.assign（）

同名属性会被覆盖
Object.assign种第一个值是目标对象，第二个值是源对象

const obj1={a:"1",b:"2"}
const obj2={b:"3",c:"4"}
const result = Object.assign(obj1,obj2)
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

扩展运算符

同名属性会被覆盖

使用…扩展运算符合并对象obj1对象在前和在后最后打印的结果是不同的

const obj1={a:"1",b:"2"};
const obj2={b:"3",c:"4"};
const result = {...obj1,...obj2};
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

如何删除对象属性

使用 delete 操作符

delete 将完全从对象中删除属性，会导致原始对象的发生改变，但速度很慢。

const item = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' 
}; 
 
delete item.gender; 
Object.keys(item); // ['species', 'age', 'name']
  • delete操作符移除对象指定属性，删除成功返回true，否则返回false。
  • 删除的属性不存在，delete不会起任何作用 ，但是仍会返回true。
  • 如果原型链有同名属性，只会删除自身的属性。
  • delete不能删除全局作用域函数以及作用域中用let或const声明的属性。
  • delete可以删除对象的函数。
  • 不可设置属性不能被删除。比如Math、Array、Object内置对象属性以及使用Object.defineProperty()方法设置的属性。
     

使用对象解构（较多属性操作时推荐）

通过用展开运算符(…)可以将需要省略特定属性的对象解构到新对象。这个技巧在需要删除多个属性时特别有用，并且不会更改原始对象。

const item = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' 
}; 
 
const { gender,name, ...newItem } = item; // 删除 gender,name,两个属性且生成一个深拷贝的新对象
Object.keys(item); // ['species', 'age', 'name', 'gender'] 
Object.keys(newItem ); // ['species', 'age'] 
console.log(Object.keys(item),Object.keys(newItem ),item == newItem);//false

使用Reflect (单个属性操作时推荐）

ES6新增的方法，Reflect.deleteProperty(对象，属性名)，返回一个布尔值。

const item = { 
  species: 'dog', 
  age: 3, 
  name: 'celeste', 
  gender: 'female' 
}; 
 
Reflect.deleteProperty(item, 'gender')
Object.keys(item); // ['species', 'age', 'name']

日期对象 

getFullYear()
使用 getFullYear() 获取年份

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数

setFullYear()
如何使用 setFullYear() 设置具体的日期

toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串

getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字

转自菜鸟教程更多对象前往菜鸟教程查看

举例：

 var mydate = new Date();
        console.log(mydate);
        console.log(mydate.toLocaleDateString()); //2022/4/8 以本地日期字符串显示
        console.log(mydate.toLocaleTimeString()); //11:29:08 以本地时分秒字符串显示
        console.log(mydate.toLocaleString()); //2022/4/8 11:29:08 以本地日期字符串显示

        console.log(mydate.getFullYear());//年份
        console.log(mydate.getMonth()); //月份  0-11使用时要+1
        console.log(mydate.getDate()); //日期
        console.log(mydate.getHours()); //小时  24小时制
        console.log(mydate.getMinutes()); //分钟
        console.log(mydate.getSeconds()); //秒
        console.log(mydate.getMilliseconds()); //毫秒 1s=1000ms
        console.log(mydate.getDay()); //   0-6  星期日-->0 星期一-->1 使用时要进行判断转化
        console.log(mydate.getTime()); //毫秒数  距离1970.1.1的毫秒数
        console.log(mydate.Date.now()); //也表示毫秒数  距离1970.1.1的毫秒数

vue中设置日期及其格式模板

created() {
        const date = new Date()
        const Y = date.getFullYear()   // 年
        const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;   //月
        const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()   //日
        // const HH = date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()   //时
        // const MM = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()   //分
        this.startDate = `${Y}-${M}-${D}`;
        this.endDate = `${Y}-${M}-${D}`;
        // this.dateValue = moment(new Date());
        // console.log(moment().format("YYYY-MM-DD"));
        // console.log(this.startDate, this.endDate,);
    },

字符串对象+方法

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等

字符串（String）使用长度属性length来计算字符串的长度

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

     // var a = new String("asdasffafg")
        // document.write(a.length)
        // for(var b = 0; b<=a.length-1;b++){
        //     document.write(a[b])//索引号 取值范围[0, b.length - 1]
        // }
       // var a = new String("asdafgsdfgsdfasd")
      // document.write(a.indexOf("3")) 
       // .indexOf(参数1，参数2)
       //从参数2的位置开始查找参数1的位置 默认从 0 开始
       //参数1： 必需 查找的子串
       //参数2： 可选 开始查找到的位置
       //返回值：若查找到该子串 返回该字串在整个字符串第一次出现的位置 查找不到返回-1
       // .lastindexOf(参数1，参数2)
       // 从参数2的位置开始查找参数1的位置 默认从 最后一位 开始

计时器与定时器

计时器：setInterval(参数1,参数2) 间隔参数2的时间 执行一次参数1 的代码（不断执行）

clearInterval();  取消setInterval的设置

定时器：setTimeout(参数1,参数2)   延迟参数2的时间，执行参数1里的代码  参数1 ：待执行的代码串（只执行一次）

clearTimeout();   取消setTimeout的设置

更多细节可查看链接

https://developer.mozilla.org/zh-CN/docs/Web/API/setIntervalhttps://developer.mozilla.org/zh-CN/docs/Web/API/setInterval

注意：

如setInterval(参数1,参数2);

参数一若为函数写法应是（函数名，参数2）或（"函数名()"，参数2）,注意小括号在哪种情况下应该写。

参数一若为匿名函数写法应是（function(){}，参数2）

使用举例：

//方法一
function gundong() {
            oDiv.scrollTop += 100;
            console.log(oDiv.scrollTop);
        }
        timer = setInterval("gundong()", 500);
//方法二
function gundong() {
            oDiv.scrollTop += 100;
            console.log(oDiv.scrollTop);
        }
        timer = setInterval("gundong()", 500);
//匿名函数
timer = setInterval(function () {
                document.documentElement.scrollTop -= 20; //高度值每次减少数值  累减
                gdsz = document.documentElement.scrollTop;
                // console.log(gdsz);
                if (gdsz <= 0) {
                    //计时器停止条件
                    clearInterval(timer);
                }
            }, 10);

防抖与节流

防抖：若一段时间内多次触发事件，则重新计时。

节流：若一段时间内多次触发事件，则只有一次生效。

防抖与节流常用在定时器上面。读上面两句话感觉没什么区别，其实区别大了，（如上图）比如要实现所有路口点单击后触发显示同一个提示框（单击不同点显示内容不同，显示框4s后会自动消失），若按照节流思路来做会导致单击其他路口点时显示框不足4s就消失，因为只有一次生效，所以此处应使用防抖思路来解决。

防抖简单方法封装：

<template>
	<div>
		<button @click="timerClick">测试</button>
	</div>
</template>
<script>
export default {
	data() {
		return {
			timer: null,//作用：控制定时器
		}
	},
	methods: {
		// 自定义防抖事件
		timerClick() {
			console.log("触发事件立即执行的操作");
			clearTimeout(this.timer);//执行前先清除上次的定时器
			this.timer = setTimeout(function () {
				console.log("4秒后的操作");
			}, 4000)
			console.log("重新计时");
		},
	}
}
</script>

节流简单方法封装：

<template>
	<div>
		<button @click="timerClick">测试</button>
	</div>
</template>
<script>
export default {
	data() {
		return {
			flag: true,//作用：判断是否需操作执行
		}
	},
	methods: {
		// 自定义防抖事件
		timerClick() {
			console.log("触发事件立即执行的操作");
			let thit = this;
			if (this.flag) { // 判断下次是否可执行
				this.flag = false; //一次事件未执行完成下次既不可执行
				setTimeout(function () { // 注意此处this指向
					console.log("4秒后的操作");
					thit.flag = true; // 一次事件执行完成，下次可执行
				}, 4000)
				console.log("只触发了一次");
			}
		},
	}
}
</script>

阻止默认行为 

return false;放在要阻止执行的位置即可；还有其他更多方法，后续持续整理

 举例：

<body>
    <form action="">
        <p>
        <label for="uname">邮箱:</label>
        <input type="text" id="uname" name="uname">
        </p>
        <p>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd" name="pwd">
        </p>
        <input type="submit" value="提交" id="but">
        <!-- 提交有默认行为 提交 -->
    </form>
</body>
<script>
    var _input1=document.getElementById("uname")
    var _input2=document.querySelector("#pwd")
    var _but = document.querySelector("#but")
    _but.onclick = function(){
        var a = _input1.value
        var b = _input2.value
        if(a.indexOf("@")===-1){
            alert("请输入正确邮箱格式");
            return false;//阻止提交默认行为
        }
        if(b.length<6){
            alert("密码长度最少六位");
            return false;//阻止提交默认行为
        }
        
    }
</script>

关于递归

递归指的是在函数的定义中使用函数自身的方法

递归通常不在意具体操作，只关心初始条件、结束条件和上下层的变化关系。

递归函数需要有临界停止点(结束条件)，即递归不能无限制的执行下去。通常这个点为必须经过的一个数。

递归可以被栈替代。有些递归可以优化。比如遇到重复性的可以借助空间内存记录而减少递归的次数

大脸胖柴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阻止事件的传播、事件委托、阻止浏览器默认行为
qq_48937489的博客
12-04 489
阻止事件的传播、事件委托、阻止浏览器默认行为
js高级之防抖
weixin_42201272的博客
04-06 184
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
mouseenter 与mouseover的区别 去抖技术
weixin_30689307的博客
09-21 72
转载于:https://www.cnblogs.com/yaomengli/p/7569655.html
1、交互优化(防抖与节流、MouseEnter 和 mouseLeave事件)
RRRRRDong的博客
07-25 2138
需求：二级菜单的显示与隐藏。鼠标移到一级菜单上，会显示二级菜单，移出元素时，二级菜单则会隐藏。 有以下三种实现方法 1、首先我们想到的是通过js的鼠标事件来进行处理，那么我们应该先明确一下几个事件的基本概念。 mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件 mouseleave:指点设备（通常是鼠标）的指针移出某个元素时，会触发mouseleave事件。 mouseout 和 mouseover和以上两个事件的作用相似，那么他们的区别在于什么地方
JS防抖与节流
csdn_cai_csdn的博客
11-22 1301
JS防抖与节流
PHP数组与对象之间使用递归实现转换的方法
12-18
这里涉及一些简单的对象与数组的相互转换的问题，采用递归写了两个方法如下： function arrayToObject($e){ if( gettype($e)!='array' ) return; foreach($e as $k=>$v){ if( gettype($v)=='array' || getType($...
JS基于面向对象实现的多个倒计时器功能示例
10-20
在这个示例中，我们看到了如何利用面向对象技术来实现一个能够处理多个倒计时器的功能。下面将详细解释这个示例中的关键知识点。 首先，定义了一个名为`msTimeCount`的构造函数，它代表一个倒计时器对象。这个构造...
javascript-leetcode面试题解递归与回溯问题之第59题递归矩阵-题解.zip
最新发布
03-15
javascript javascript_leetcode面试题解递归与回溯问题之第59题递归矩阵_题解
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
12-09
函数表达式 1、JavaScript中定义函数有2钟方法： 　1-1.函数声明： 代码如下:function funcName(arg1,arg2,arg3){ //函数体}　①name属性：可读取函数名。非标准，浏览器支持:FF、Chrome、safari、Opera。...
js防抖和节流
风流倜傥唐伯虎的博客
03-22 752
js防抖和节流
vue实现防抖
weixin_42536961的博客
03-13 1575
开发中经常会遇到频繁调接口，导致性能降低的情况，类似输入框的值改变就会调一次接口，那么就应该加一个防抖函数，避免频繁调取接口，话不多说，上代码。在输入框输入值，等待1000毫秒后，会执行打印事件。然后在vue页面中直接引入就好了，下面是事例。2.在methods的函数中添加一下防抖。1.首先导入刚才写好的防抖函数。
vue的点击事件作防抖
qq_41429765的博客
10-31 708
vue的防抖
vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
yw1376394716的博客
04-02 1万+
vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法重点：事件写到父元素上才行！！！ 0.0样式代码：其他代码： ** 最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题。就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象。** 重点：事件写到...
Vue的click事件防抖和节流处理
weixin_42735794的博客
06-10 8839
函数防抖 定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event ==...
Vue 2.6.X中@mouseover闪烁问题
03-04 4353
事情原委是这样的，原来工程中的使用mouseover、mouseout来进行判断鼠标是否hover，升级了下Vue版本后发现会闪烁，百度了一下发现如下解决方法： https://segmentfault.com/q/1010000009888794 改成mouseenter和mouseleave即可完美解决问题 ...
Vue防抖（三种方式）
热门推荐
qq453660983的博客
06-14 2万+
Vue防抖（三种方式）
节流与防抖和其在vue中使用的测试
shinjie1210的博客
06-28 392
目录 防抖 节流 vue中的防抖使用测试 防抖 简单理解防抖的内容：对当前操作重复执行会造成不必要的性能浪费，通过防抖可以让自定义时长内的重复操作的前n次都不执行，只执行最后一次，我们以一个简单mouseover事件举例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css
java面试题之代码与编程题
11-30
面试中常见的java面试题之代码与编程题，绝对是一些大公司的面试题。都很经典，如果一笔试没遇到你抽我。一个经典的编程题是要求写一个 Singleton，即保证在 Java 应用程序中，一个类 Class 只有一个实例存在。一般 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值