javaScript 知识点回顾

最新推荐文章于 2024-07-10 17:12:51 发布
最新推荐文章于 2024-07-10 17:12:51 发布
阅读量100 收藏
点赞数
文章标签： json 前端 后端 ViewUI
原文链接：https://juejin.im/post/5bbefde96fb9a05d1658aa07
版权

很长一段时间没看js书籍了，最近抽点时间，回顾一些js基础的知识点，写了半天，朋友问个问题，解决一下bug，再回来写，都没了，又从新写。

（一）javaScript 浅拷贝与深拷贝

1：简单的数据类型

它们的值占据了内存中固定大小的空间和位置，并被保存在栈内存中。当一个变量向另一个变量赋值基本类型的值，会创建这个值的一个副本，还有就是不能给基本数据类型的值添加属性

var a = 1;
var b = a;
a.attr = 'ciyt';
console.log(a.attr)//undefined
VM1600:4 undefined复制代码

上面代码中a就是简单数据类型（Number），b就是a的副本，它们两者都占有不同位置但相等的内存空间。

2：复杂数据类型

复杂数据类型的引用赋值，一般指向的是统一个对象，因为他们的引用指针是一样的，赋值的其实是内存里面的地址指针。

var obj = {
	name:'liu',
	age:'28'
}
var obj2 = obj;
obj2.sex="boy";
console.log(obj);
console.log(obj2);
VM1733:7 {name: "liu", age: "28", sex: "boy"}
VM1733:8 {name: "liu", age: "28", sex: "boy"}
复制代码

我们可以看到obj赋值给obj2后，当我们给一个obj2对象的添加属性值，两个对象都发生了改变，究其原因局势因为obj和obj2这两个变量都指向同一个指针，赋值只是复制了指针，所以当我们改变其中一个的值就会影响另外一个变量的值。

这段代码就是我们常说的 浅拷贝，改变其中一个对象，另外一个对象也会改变。

下面我们来讲解一下深拷贝的方法，分数组【Array】和对象【Object】

数组

对于数组我们可以使用slice()和concat()方法来解决上面的问题

var arry = [1,2,'a'];
var arry2 = arry;
arry2.push('b');
console.log('arry',arry)
console.log('arry2',arry2)
VM1974:4 arry (4) [1, 2, "a", "b"]
VM1974:5 arry2 (4) [1, 2, "a", "b"]
复制代码

slice()方法:

var arry = [1,2,'a'];
var arry2 = arry.slice(0);
arry2.push('b');
console.log('arry',arry)
console.log('arry2',arry2)
VM2057:4 arry (3) [1, 2, "a"]
VM2057:5 arry2 (4) [1, 2, "a", "b"]
复制代码

concat()方法：

var arry = [1,2,'a'];
var arry2 = arry.concat();
arry2.push('b');
console.log('arry',arry)
console.log('arry2',arry2)
VM2076:4 arry (3) [1, 2, "a"]
VM2076:5 arry2 (4) [1, 2, "a", "b"]
复制代码

对象

我们可以创建一个新对象 new Object() 或者封装一个深度拷贝的函数

var obj = {
	name:'liu',
	age:'28'
}
var obj2 = obj;
obj2.sex="boy";
console.log('obj',obj);
console.log('obj2',obj2);
VM446:7 obj {name: "liu", age: "28", sex: "boy"}
VM446:8 obj2 {name: "liu", age: "28", sex: "boy"}
复制代码

new Object()

var obj = {
	name:'liu',
	age:'28'
}
var obj2 = new Object();
obj2.name="liu";
obj2.age="28";
obj2.sex="boy";
console.log('obj',obj);
console.log('obj2',obj2);
VM508:9 obj {name: "liu", age: "28"}
VM508:10 obj2 {name: "liu", age: "28", sex: "boy"}
复制代码

封装一个deepCopy函数

var obj = [1,2,'a'];
function deepCopy(obj){
	var newObj = obj instanceof Array ? [] : {};
	for(var item in obj){
		var temporary = typeof obj[item] == 'Object' ? deepCopy(obj[item]) : obj[item];
		newObj[item] = temporary;
	}
return newObj
}
var obj2 = deepCopy(obj);
obj2.push('b');
console.log('obj',obj);
console.log('obj2',obj2);
VM1154:12 obj (3) [1, 2, "a"]
VM1154:13 obj2 (4) [1, 2, "a", "b"]
复制代码

var obj = {
	name:'liu',
	age:'28'
};
function deepCopy(obj){
	var newObj = obj instanceof Array ? [] : {};
	for(var item in obj){
		var temporary = typeof obj[item] == 'Object' ? deepCopy(obj[item]) : obj[item];
		newObj[item] = temporary;
	}
return newObj
}
var obj2 = deepCopy(obj);
obj2.sex = 'boy';
console.log('obj',obj);
console.log('obj2',obj2);
VM1222:15 obj {name: "liu", age: "28"}
VM1222:16 obj2 {name: "liu", age: "28", sex: "boy"}
复制代码

（二）jsonp原理

首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，另外一种常见的是XML格式，当一个网页在请求JavaScript文件时则不受是否跨域的影响，凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>所以我们这里运用了script标签的跨域能力，让它用一个callback函数包裹着一段JSON格式的数据，当该数据返回到前端页面的时候，我们再执行这个函数就可以把数据读取出来

前端代码

jsonp.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>What's jsonp</title>
    </head>
    <body>
        <button onclick="jsonpServer('jsonp.php')">JSONP</button>
    </body>
    <script>
        function jsonpServer(url) {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", url);
            document.body.appendChild(script);
        }   
        function JSON_CALLBACK(data) {
            console.log(data);
        }
    </script>
</html>复制代码

后端代码

jsonp.php 
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>复制代码

jQuery 的Ajax写法

$.ajax({
    url:'index.php',
    type:'get',
    dataType:'jsonp',
    //jsonp:'JSON_CALLBACK',
    jsonpCallback:'JSON_CALLBACK',
    success:function(data){
        console.log(data)
    }
})
复制代码

后端代码

<?php
    $data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
    $data = "JSON_CALLBACK(" . $data . ")";
    echo $data;
?>复制代码

（三）JavaScript 中的 call 与 apply 继承方法

call的意思就是把Animal构造的方法应用到cat这个对象身上，也就是Animal的属性创建到了cat里面,所以cat就继承了Animal的方法

function Animal(a, b) {
    this.type = 'Animal'
    this.behavior = function(){
        console.log(this.type+" is running")
    }
}

function cat(a, b) {
    this.name = 'goodCat'
    //这里call的意思就是把Animal的方法应用到cat这个对象身上
    //所以cat就继承了Animal的方法
    Animal.call(this);
}

console.log(new cat())VM2223:15 cat {name: "goodCat", type: "Animal", behavior: ƒ}behavior: ƒ ()name: "goodCat"type: "Animal"__proto__: Object复制代码

call实现多重继承 (ps:我们可以继承多个构造函数，这就是多重继承)

function Animal(a, b) {
    this.type = 'Animal'
    this.behavior = function(){
        console.log(this.type+" is running")
    }
}

function ageCat(a, b) {
    this.age = 0
}

function cat(a, b) {
    this.name = 'goodCat'
    //这里call的意思就是把Animal的方法应用到cat这个对象身上
    //所以cat就继承了Animal的方法
    Animal.call(this);
	//这里call的意思就是把ageCat的方法应用到cat这个对象身上
    //所以cat就继承了ageCat的方法
    ageCat.call(this);
}

console.log(new cat())VM2350:22 cat {name: "goodCat", type: "Animal", behavior: ƒ, age: 0}age: 0behavior: ƒ ()name: "goodCat"type: "Animal"__proto__: Object复制代码

apply与call的区别

其实apply和call这两个方法基本上是差不多的，区别在于call的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments（即传给构造函数的参数）。

继续优化继承

如果构造函数this绑定太多属性（比如一些共同方法），在实例化后会造成浪费，为此我们一般会使用原型链来优化，但是使用原型链之后我们的apply和call的继承方法就会失效
为此我们一般使用混合的写法，使用原型链和(apply或者call)方法进行继承
具体两句话
让子的原型链指向父的实例（父实例化的对象）
cat.prototype = new Animal();
让父的属性创建在子的this上
Animal.call(this, type)
整体代码如下，那么就会让父原型链的属性和this上的属性都得到继承

function Animal(type) {
    this.type = type
    this.behavior = function() {
        console.log(this.type + " is running")
    }
}
Animal.prototype.action = function() {
    console.log("running")
}

function cat(name, type) {
    this.name = name
    Animal.call(this, type)
}

cat.prototype = new Animal();
console.log(new cat('xiaohong', 'beautiful'));
(new cat('xiaohong')).action() //runningVM2490:17 cat {name: "xiaohong", type: "Animal", behavior: ƒ}behavior: ƒ ()name: "xiaohong"type: "Animal"__proto__: Animal复制代码

（四）sessionstorage，localstorage和cookie

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

总结：

  • localStorage没有过期时间，只要不clear或remove，数据会一直保存。
  • sessionStorage 针对一个session进行数据存储，生命周期与session相同，当用户关闭浏览器后，数据将被删除。


weixin_34279061
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript知识点
weixin_43187737的博客
01-13 86
文章目录1 语法知识点1.1 箭头函数 1 语法知识点 1.1 箭头函数 箭头函数本质还是函数，我们来看看他与JavaScript中普通函数的区别，先看看写法上的区别。 解释 写箭头函数，我们记住一个顺序就好，参数、箭头、函数体、这个顺序记住就足够了，参数、箭头、函数体、这三个是必须的，函数名可以没有，但这三项必须有，一些简写的方式也是简写这三项里的东西。 简写 1、只有一个参数时，() 可省略 //不简写 var demo = (x) =>{ console.log(x); } //简写
javaScript知识点简易总结
XD8235的博客
01-25 127
javaScript知识点简易总结 开发工具 编辑器： VSCode、Atom、Sublime Text、Brackets、WebStorm、Notepad++、HBuilder、Vim、记事本（我用的HBuilder）。 JavaScript一种轻量级的脚本语言，也是一种嵌入式语言，是一种 对象模型 语言，简称JS 。 javaScript由核心语法ECMAScript、浏览器对象模型(BOM) 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window、文档对象模型(DOM)三部分组成。 网页中引入
html %3ca%3e传递js变量,四种动态加载 JavaScript 脚本的方法
weixin_36079903的博客
06-28 266
这四种方法中，应该说只有第一种是正统，因为其他三种总有些不妥，比如无法运行 alert，当然其他三种也是有优点的。法一、创建 scriptvar script = document.createElement("script");script.setAttribute("type", "text/javascript");script.setAttribute("src", "foo.js");d...
JavaScript知识点的回顾
maggie_live的博客
07-05 424
JavaScript的组成  JavaScript由一下三部分组成：EECMAScript（核心）：JavaScript语言基础DOM（文档对象模型）：规定了访问HTML和XML的接口BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法js的基本数据类型和引用数据类型基本数据类型：undefined、null、Boolean、number、string、symbol引用数据类型：ob...
JavaScript知识点回顾
BlackStar的博客
06-06 93
JS面试题——初试
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
Js知识点回顾脑图(一).xmind
03-21
Js知识点回顾脑图(一).xmind
javascript中的一些核心知识点以及需要注意的地方
03-03
感觉没有什么可说的最后甚至对webapp中的History的处理方案也是有一些心得，一点方案，但是依旧难以整理成文，于是便开始文荒了这个时候不妨便温故知新吧，对javascript的一些老知识点进行整理回顾，之后有大动作...
js_relearn:通过版本控制复盘JavaScript知识点
04-28
JavaScript是一种广泛应用于网页和互联网应用...通过“js_relearn”项目，我们可以借助版本控制工具跟踪学习过程，对比不同阶段的理解和实现，进一步巩固JavaScript的知识体系。不断回顾和实践，是提升编程技能的关键。
Jmeter使用JSON Extractor提取多个变量
空城雀的博客
07-05 273
1.当正则不好使时，用json extractor。2.提取多个值时，默认值必填，否则读不到变量。
Exploting an API endpoiint using documentation
fencecat的博客
07-05 1118
Exploting an API endpoiint using documentation
fastjson 如何忽略@type类型解析
01世界的博客
07-10 162
但是在自己实现的过程中发现一个问题Java.lang.ClassCastException: class com.alibaba.fastjson.JSONObject cannot be cast to class。FASTJSON支持AutoType功能，这个功能会在序列化的JSON字符串中带上类型信息，在反序列化时，不需要传入类型，实现自动类型识别。这是因为在序列化是 FastJSON会向redis填充@Type类型，反序列化时，无法根据Type类型值转化为对应的类，导致报错。
【HarmonyOS NEXT】鸿蒙JSON解析与生成
wu1004019946的博客
07-09 897
本模块提供了将JSON文本转换为JSON对应对象或值，以及将对象转换为JSON字符串等功能。
后端开发常见错误
jupiter_888的博客
07-05 293
8、批次处理表数据，要在try中占用批次，占用完成后要重新select批次数据，以避被其他线程占用数据。批次处理完成后要在finally中释放批次数据，即把执行批次(exe_batch_no)字段给清空。6、如遇奇怪的参数丢失，请仔细检查原始json，常见错误包括(1)字段重复，同一个字段写多次。4、表字段长度，在接口层校验字段长度， 调用三方系统的报错要截取报错的信息长度，避免登记表字段长度不足。3、使用mybatis的foreach的时候要考虑拼接sql的耗时，尤其是超过10条数据。
ant 的Modal.confirm 关闭不了
suk_java的博客
07-05 198
ant 的Modal.confirm 关闭不了
【鸿蒙学习笔记】Stage模型工程目录
张紫娃的博客
07-06 403
【代码】【鸿蒙学习笔记】Stage模型工程目录。
vue vite+three在线编辑模型导入导出
最新发布
regretTAT的博客
07-10 268
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
yolov5 json 和 txt数据格式关系
weixin_41021342的博客
07-06 142
关于yolov5 数据格式一直以来都傻傻分不清楚，这下进行了一个梳理，做了笔记，也希望可帮助到有需要的有缘人~
2022 年了，这些 ES7-ES12 的知识点你都掌握了嘛？
02-17
这些ES7至ES12的知识点是现代JavaScript开发不可或缺的部分，熟练掌握它们能让你编写出更高效、易读且维护的代码。在实际项目中，持续学习和实践新的特性能帮助你跟上JavaScript语言的发展，提升编程技能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值