#yyds干货盘点 前端小知识点扫盲笔记记录3
标签： #yyds干货盘点 前端小知识点扫盲笔记记录3 JavaScript博客 51CTO博客
2023-04-07 18:23:54 105浏览
前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
localStorage 和 sessionStorage
cookie 本身用于浏览器和 server 通讯。 被“借用”到本地存储来的。 可用 document.cookie = '...' 来修改。 其缺点： 存储大小限制为 4KB。 http 请求时需要发送到服务端，增加请求数量。 只能用 document.cookie = '...' 来修改，太过简陋。 2、localStorage 和 sessionStorage HTML5 专门为存储来设计的，最大可存 5M。 API 简单易用， setItem getItem。 不会随着 http 请求被发送到服务端。 它们的区别： localStorage 数据会永久存储，除非代码删除或手动删除。 sessionStorage 数据只存在于当前会话，浏览器关闭则清空。 一般用 localStorage 会多一些
objectDefineProperty
// 三个参数（属性所在的对象，你要操作的属性，被操作的属性的特性）
// var geyao = {
// sex: "男",
// age: 18,
// };
// console.log(geyao,"geyao1")
// Object.defineProperty(geyao, "sex", {
// get: function () {
// console.log("读取时,get被触发");
// return this.sex
// },
// set: function (value) {
// console.log(value,"value");
// this.sex=value
// },
// });
// console.log(geyao.sex,"geyao2")
function getObj() {
let obj = {
sex:"男",
age:18
};
let val = ""; //此处val是安全的,外部是无法修改的
let o = Object.defineProperty(obj, "key", {
configurable: true,
enumerable: true,
get: function () {
return val || 0;
},
set: function (n) {
val = n;
},
});
return o; //每个对象都是新的
}
let aa = getObj();
console.log(aa.sex); //返回性别objectDefinePropertytest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//
let geyao = {
name: "歌谣",
age: 18,
};
function definereactive(data, key, val) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function () {
console.log("有人在读取我");
return val;
},
set: function (newVal) {
if (val == newVal) {
console.log("我没有变化");
return;
}
console.log("我变化了 我的天呀");
val = newVal;
},
});
}
console.log("--------------1");
console.log(definereactive(geyao, "age", 18));
console.log("--------------1");
console.log("--------------2");
geyao.age = 19;
console.log(geyao,"geyao")
console.log("--------------2");
console.log("--------------3");
console.log(definereactive(geyao, "age"));
console.log("--------------3");
</script>
</body>
</html>slice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slice</title>
</head>
<body>
<script>
var fangfang=["geyao","fangfang","huahua","mingming"]
//arr.slice([begin[, end]])
var fangfangTest=fangfang.slice(1)
//从第一位进行截取
console.log(fangfangTest,"fangfangTest") // [ "fangfang", "huahua", "mingming" ]
//截取数组的二到四位
var fangfangList=fangfang.slice(2,4)
console.log(fangfangList,"fangfangList") //[ "huahua", "mingming" ]
//截取数组的第一位到倒数第二个元素
var fangfangHH=fangfang.slice(1,-1)
console.log(fangfangHH,"fangfangHH") //[ "fangfang","huahua"]
</script>
</body>
</html>symbol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Symbol</title>
</head>
<body>
<script>
const symbol1 = Symbol()
const symbol2 = Symbol(42)
const symbol3 = Symbol('foo')
console.log(typeof symbol1)
// expected output: "symbol"
console.log(symbol2 === 42)
// expected output: false
console.log(symbol3.toString())
// expected output: "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo'))
// expected output: false
</script>
</body>
</html>this指向小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this指向</title>
</head>
<body>
<script>
window.val = 1;
var json = {
val: 10,
dbl: function () {
this.val *= 2;
},
};
json.dbl();
console.log(json.val,"jsonval")//20
console.log(window.val,"winval")//1
var dbl = json.dbl;
dbl();
console.log(json.val,"jsonval")//20
console.log(window.val,"winval")//2
json.dbl.call(window);
console.log(json.val,"jsonval")//20
console.log(window.val,"winval")//4
console.log(window.val + json.val); //24
</script>
</body>
</html>this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this指向</title>
</head>
<body>
<script>
function foo() {
console.log(this.a)
}
var a = 1
foo() //1
const obj = {
a: 2,
foo: foo
}
obj.foo()//2
const c = new foo()//undefined
</script>
</body>
</html>typeOf
//typeof：能判断所有值类型，函数。不可对 null、对象、数组进行精确判断，因为都返回 object // console.log(typeof undefined) // undefined // console.log(typeof 2) // number // console.log(typeof true) // boolean // console.log(typeof 'str') // string // console.log(typeof Symbol('foo')) // symbol // console.log(typeof 2172141653n) // bigint // console.log(typeof function () {}) // function // // 不能判别 // console.log(typeof []) // object // console.log(typeof {}) // object // console.log(typeof null) // object
总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
展开评论
