JavaScript中的部分函数/方法参考

乖乖我左边的房子在动

已于 2022-07-28 11:24:29 修改

阅读量471

点赞数

分类专栏：前端文章标签： vue.js javascript 前端 html

于 2022-07-11 10:29:06 首次发布

本文链接：https://blog.csdn.net/Gong_01/article/details/125716308

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Object.defineProperty方法

2.for、for...in、for...of、forEach方法

for循环（可使用return、break等来中断循环）

forEach循环（不能使用 break 语句跳出循环，或者使用return从函数体内返回，主要针对数组）

for…in循环

for…of循环

总结：

3.write( )和writeln( )方法

4.Object.prototype.valueOf( )方法

5.toLocaleString( )方法

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方法（详解）_爱前端的小菜的博客-CSDN博客_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的区别和用法_六叶草~的博客-CSDN博客

forEach、for...in、for...of_bidepanm的博客-CSDN博客

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的博客-CSDN博客

JavaScript中的toLocaleString()方法你知道吗？_.ToString()°的博客-CSDN博客