本文详细讲解了JavaScript中的Object.defineProperty方法，探讨了for、for...in、for...of和forEach的不同用途，以及write()和writeln()在DOM操作中的区别。重点介绍了如何使用defineProperty模拟Vue双向绑定，并对比了各种循环语句的特性和应用场景。
目录
2.for、for...in、for...of、forEach方法
forEach循环（不能使用 break 语句跳出循环，或者使用return从函数体内返回，主要针对数组）
4.Object.prototype.valueOf( )方法
6.Object.prototype.toString( )方法
1.Object.defineProperty方法
三个参数：
1.属性所在的对象
2.属性的名字
3.一个描述符对象
描述符对象包括：
（数据属性：）
1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否 把属性修改为访问器属性，默认值为false
2.enumerable：表示能否通过for in循环访问属性，默认值为false
3.writable：表示能否修改属性的值。默认值为false
4.value：包含这个属性的数据值。默认值为undefined
var p1 ={
name:"lisi",
}
Object.defineProperty(p1,"name",{
configurable : false,
})
console.log(p1); //{ name: 'lisi' }
delete p1.name;
console.log(p1); //{ name: 'lisi' }
Object.defineProperty(p1,"age",{
writable :false,
value : 15,
})
console.log(p1.age); //15
p1.age = 20;
console.log(p1.age); //15
Object.defineProperty(p1,"age",{
enumerable:false
})
for(var i in p1){
console.log(p1[i]);
} // lisi
（访问器属性：）
1.get：在读取属性时调用的函数，默认值是undefined
2.set：在写入属性的时候调用的函数，默认值是undefined
var book = {
_year : 2004,
edition : 1
}
Object.defineProperty(book,"year",{
get: function(){
return this._year
},
set: function(newYear){
if(newYear > 2004){
this._year = newYear;
this.edition += newYear - 2004
}
}
})
book.year = 2005;
console.log(book.edition); // 2
console.log(book._year); //2005
定义多个属性：
var student = {};
Object.defineProperties(student,{
name:{
writable:false,
value:"lisi"
},
age : {
writable:true,
value : 16,
},
sex:{
get(){
return '男';
},
set(v){
p1.sex = v
}
}
})
p1.sex = "男";
console.log(student.name + ":" + student.age);
console.log(p1.sex); // 男
student.sex = "女";
console.log(student.sex); //男
console.log(p1.sex); // 女
模拟Vue中v-module数据双向绑定原理的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#myInput {
width: 400px;
height: 50px;
font-size: 40px;
color: red;
}
#contain {
margin-top: 20px;
width: 400px;
height: 200px;
border: 1px solid salmon;
}
</style>
</head>
<body>
<input id="myInput" type="text" />
<div id="contain"></div>
<script>
var text;
window.data = {};
var oIn = document.getElementById("myInput");
var oDiv = document.getElementById("contain");
oIn.addEventListener("input", function (e) {
text = e.target.value;
console.log(text);
window.data.value = text;
});
Object.defineProperty(window.data, "value", {
get() {
return "";
},
set(v) {
oDiv.innerHTML = v;
},
});
</script>
</body>
</html>
参考：Object.defineProperty方法（详解）_爱前端的小菜的博客-优快云博客_object.defineproperty
2.for、for...in、for...of、forEach方法
for循环（可使用return、break等来中断循环）
基本语法格式：
for(初始化变量;条件表达式;操作表达式){
循环体语句;
}//遍历数组
var arr = [1,2,3,4,5];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
//遍历对象
var obj={
x0:10,
x1:20,
x2:30
}
for(var k=0;k<3;k++){
console.log(obj['x'+k]);
}
forEach循环（不能使用 break 语句跳出循环，或者使用return从函数体内返回，主要针对数组）
参数：数组内容、数组索引、整个数组
//遍历数组
var array = ['a', 'b', 'c', 'd'];
array.forEach((a)=> {
console.log(a);
});
//输出：
a
b
c
d
var array = ['a', 'b', 'c', 'd'];
array.forEach((a,b,c)=> {
console.log(a);
console.log(b);
console.log(c);
});
//输出：
a
0
['a','b','c','d']
b
1
['a','b','c','d']
c
2
['a','b','c','d']
d
3
['a','b','c','d']for…in循环
基本语法格式：
for(var 变量 in 数组名或集合名)
{
数组名[变量]
}
//遍历数组
var arr = [1,2,3,4,5];
for(var i in arr){
console.log(arr[i]);
}
//遍历对象
var obj={
x0:10,
x1:20,
x2:30
}
for(var k in obj){
console.log(obj[k]);
}
1.下标的值可能会是字符串（String）类型
2.循环不仅会遍历数组元素，还会遍历自身可枚举属性以及原型链上可枚举属性，还会遍历任意其他自定义添加的属性，如，obj上面包含自定义属性，obj.name，那这次循环中也会出现此name属性
3.某些情况下，上述代码会以随机顺序循环数组
4.for in 一般用于遍历对象的属性；
5.for in 循环如果用作遍历数组，i是字符串类型的，不能用于运算；
var arr = ['a','b','c']
Array.prototype.test=function(){}
arr.name='数组'
for(var i in arr){
console.log(i);//"0","1","2","name","test"
}
for(var i in arr){
console.log(arr[i]);//a,b,c,数组,ƒ (){}
}
for…of循环
基本语法格式：
for(var 变量 of 数组名或集合名)
{
console.log(变量);
} //遍历数组
var arr = [3,2,3,9,5];
for(var value of arr){
console.log(value);
}
//遍历对象
var obj={
x0:10,
x1:20,
x2:30
}
for(var k of Object.entries(obj)){
console.log(k);
}
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key， 数组元素作为 value。
1.可以避免所有 for-in 循环的陷阱
2.不同于 forEach()，可以使用 break, continue 和 return
3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4.它也支持字符串的遍历
5.for-of 并不适用于处理原有的原生对象
总结：
- forEach更多的用来遍历数组
- for in 一般常用来遍历对象或json
- for of 用来遍历数组非常方便且比较安全
- for in循环出的是key，for of循环出的是value
1.for…in用于迭代对象的所有可枚举属性，包括继承的可枚举属性, 该迭代语句可用于数组、字符串或普通对象，但不能用于Map或Set对象，但是可以通过扩展运算符转成数组后遍历。最好用来遍历对象，遍历的时候还会遍历其他新增的属性
2.forEach、map和filter能遍历数组，forEach能直接遍历Map、Set，map和 filter只能通过扩展运算符转成数组后遍历
3.for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。但不能与普通对象一起使用，如果不部署Symbol.iterator 属性，想遍历普通对象，需要联合Object.keys()来使用
参考：
JavaScript中for、for...in、for...of、forEach的区别和用法_六叶草~的博客-优快云博客
forEach、for...in、for...of_bidepanm的博客-优快云博客
3.write( )和writeln( )方法
document.write() 将内容写入文档，当前编辑位置为写入的内容的后一个字符
document.writeln() 将内容写入文档，并添加一个换行符，当前编辑位置为写入的内容的后一行的起始位置
<script type="text/javascript">
var str='nishizhuma';
document.write(str);
document.writeln(str);
document.write(str);
</script>
注：在浏览器中显示的时候，write()函数和writeln()函数都没有换行，而writeln()函数多了个空格；他们的效果是在源码中显示的，writen( )函数在源码中换行
4.Object.prototype.valueOf( )方法
1.JavaScript 中的 valueOf() 方法用于返回指定对象的原始值，若对象没有原始值，则将返回对象本身。通常由JavaScript内部调用，而不是在代码中显式调用。
2.默认情况下，valueOf 方法由 Object 后面的每个对象继承。 每个内置的核心对象都会覆盖此方法以返回适当的值。
3.JavaScript 的许多内置对象都重写了该函数，以实现更适合自身的功能需要。因此，不同类型对象的 valueOf( ) 方法的返回值和返回值类型均可能不同。
| 对象 | 返回值 |
|---|---|
| Array | 数组实例对象(数组对象本身） |
| Boolean | 布尔值 |
| Date | 从 UTC 1970 年 1 月 1 日午夜开始计算的毫秒数 |
| Function | 函数本身 |
| Number | 数字值 |
| Object | 对象本身，这是默认设置 |
| String | 字符串值 |
| Math和Error | 没有valueOf( )的方法 |
// Array：返回数组对象本身
var array = ["ABC", true, 15, -7];
console.log(array.valueOf() === array); // true
// Date：当前时间距1970年1月1日午夜的毫秒数
// Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
console.log(date.valueOf()); // 1376838719230
// Number：返回数字值
var num = 15.26540; // 15.2654
num.valueOf() // 15.2654
console.log(num.valueOf() === num); // true
// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool); // true
// new一个Boolean对象
var newBool = new Boolean(true); // Boolean {true}
newBool.valueOf() // true
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool); // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool); // false
// Function：返回函数本身
function foo(){}
console.log( foo.valueOf() === foo ); // true
var foo2 = new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() === foo2); // true
/*
ƒ anonymous(x,y) {
return x + y;
}
*/
// Object：返回对象本身
var obj = {name: "张三", age: 18};
console.log( obj.valueOf() === obj ); // true
// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str ); // true
// new一个字符串对象
// String {"http://www.hjk.com"}
var str2 = new String("http://www.hjk.com");
str2.valueOf() // "http://www.hjk.com"
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 ); // false
参考：转载自知乎 “shixm” 的文章 valueOf()方法
5.toLocaleString( )方法
toLocaleString( )方法是用于返回格式化对象后的字符串，该字符串格式因语言不同返回值也会不同
语法：object.toLocaleString([locales [, options]])
参数：
locales ：参数用于指定格式化对象时使用的语言环境，默认为当前环境的语言，可以不传。默认为美式英语(en-us)，中文使用zh；【node环境中默认没有中文，所以即使指定为中文仍然会使用英语的表示】，这里是一些常见语言选项：en(英语)，zh(中文)，fr(法语)，de(德语)，ja(日语)
options ：参数为输出样式的配置项，根据 object 类型不同会有不同选项，用来指定字符串的显示格式。但需要注意的是如果不传 locales 参数，那么 options 参数是不会生效的
例子参考：
JS - toLocaleString() 方法_kelly0721的博客-优快云博客
JavaScript中的toLocaleString()方法你知道吗？_.ToString()°的博客-优快云博客
6.Object.prototype.toString( )方法
参考：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
