javaScript学习第8天（对象 JSON 方法）

对象

this指向

this最终代表的是函数的执行者，最终指向一个对象。(决定this值的是调用方式。)

1. 全局执行环境中的this指的是window。

   window对象是最顶层的对象，它对应的是全局执行环境。在全局中定义的变量和函数都是作为window对象的属性和方法。

   在JavaScript当中window对象有两个功能：

   1. window对象是最顶层的对象。
   2. window对象在BOM中是操作浏览器的接口。

2. 如果函数是光秃秃（只是函数名进行调用前面没有任何东西）的，调用this指向的是window。

3. 通过对象的方法调用，this指向这个对象。

apply、call方法

每个函数对象都有call和apply这两个方法。

本质就是设置函数体内的this对象的值

格式：

• call(thisArg,arg1,arg2)
• apply(thisArg,[argsArray])

两者的工作方式完全相同，不同之处在于传递给调用函数的参数的传递形式。

作用：

1. 借用其他函数的方法，让本对象使用。

   var obj = {
       name : 'sex',
       say:function(){
           console.log(this);
           console.log(this.name);
       }
   }  
   obj.say();   
   var obj1 = {
       name:'hello'
   } 
   obj.say.call(obj1);//{name:'hello'}
   

2. 让其他构造函数中的属性变成自己的。

   function Demo(name){
       this.name = name;
   } 
   var obj = {sex:'nan',age:18};   
   // Demo.apply(obj,['wl']);
   Demo.call(obj,'wl');//执行Demo函数，Demo中的this指向了obj，那么当运行this.name时  就相当于obj.name了。  所以运行完成之后新增了属性。
   console.log(obj);
   

new运算符的流程

new运算符内部的执行过程。

过程：

1. 创建一个对象，开辟内存空间（堆）
2. 设置原型链
3. this指向该内存（让函数内部的this指向对象。）
4. 执行函数代码。
5. 将创建的对象实例返回。

基本类型、引用类型判断类型

• 基本数据类型判断:typeof

  1. undefined
  2. boolean
  3. string
  4. number
  5. object（null和对象）
  6. function（函数）

• 其他的对象只能使用instanceof

  格式：对象 instanceof 类型

• 判断是否是同一个对象（是不是同一个内存地址），使用==

  =是赋值、两个==是判断，是否等于（对于对象判断是不是同一个地址）、三个等于判断是不是全等于。

JSON

JSON是一个内置的对象，不用定义能够直接使用。

大写的JSON表示的是JS中的内置对象，小写的json表示的是一种数据格式。

• json是一种数据格式，现在的前后端交互都是使用json数据格式。

• json本质上是字符串，简称json串

  前端往后端传递数据时，要传json格式的数据。 后端返回给前端的数据也是json格式的数据。

json的值

• 简单值：字符串、数字、布尔值、null。

  JavaScript和json字符串最大的区别在于json字符串必须使用__双引号__。

• 对象：无序的键值对儿

  属性也是字符串 所以也得加上引号。

• 数组：有序的键值对儿

  我们通常会将数组和对象结合起来使用，形成复杂的数据集合。

json数据处理

• JSON.stringify(值)，将JavaScript的值转换为json字符串（用来向后端发送数据时转换为json数据）。
  • JSON.stringify()输出的JSON字符串不包含空格和缩进。
  • 在进行转换时，对于JavaScript对象，所有的函数、原型成员的值，以及值为undefined的任何属性都会被忽略。
• JSON.parse(值)，将JSON字符串解析成为JavaScript值。（用来将从后端得到的数据转换为javascript代码）

Math

ECMAScript为数学计算提供了全局的内置对象，即Math对象。

• 将小数转换为整数，如果是整数则不改变。

  • Math.ceil()，进一取整。
  • Math.floor()，舍一取整。
  • Math.round()，执行标准的四舍五入。

• 进行数学计算

  • Math.min()，获得最小值。
  • Math.max() ，获得最大值。
  • Math.abs()，求绝对值。
  • Math.pow(num,次方)，进行幂运算。
  • Math.PI，圆周率，这是一个属性。
  • Math.random()，返回大于等于0小于1的一个随机数。
    案例：验证码

//验证码 随机的  3~4位的比较多。
//1. 所有的随机字符都是从这个字符串里面挑出来的。
var str = 'abcdefghjklmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
var code = '';
for (var i = 0; i < 4; i++) {
     code += str[Math.floor(Math.random() * (str.length - 1) + 0)];
}
console.log(code);

Date

Date是javaScript提供的构造函数。它用来处理日期、时间。

时间戳

1. 是一个整数，用来计算的。
2. 从1970年1月1日（计算机的元年）0点0分0秒~现在的毫秒数。

时间处理方法

Date既是函数（可运行的代码），又是对象（其中包含属性和方法）

Date.now()，获得当前的时间戳。

当做构造函数来使用：

格式：new Date()

new Date不写参数的话，直接获得当前的日期的对象。

传入参数需要获得指定日期的对象：

格式：new Date(年,月[,日[,时[,分[,秒]]]])（[]中的代表选填值）

• getFullYear()，获得4位的年份。
• setFullYear()，设置年份（传入的值是4位的数字）；
• getMonth()，获得日期的月份。 返回日期中的月份，其中0表示一月，11表示12月份。
• setMonth()，设置日期的月份。
• getDate()，返回天数。(1~31)
• setDate()，设置，如果超过了本月应有的天数那么增加月份。
• getDay()，获得星期几（0表示星期日，6表示星期六）；
• getHours()，获得小时。
• setHours()，设置小时，传入的值超过了23则增加天数。
• getMinutes()，获得分钟数。
• setMinutes()，设置分钟数。如果超过59增加小时
• getSeconds()，返回秒数(0~59)
• setSeconds()，设置秒数。如果超过59增加分钟数。
• toLocatimeString(),获得时分秒

案例

1. 获得当前的日期和时间，格式为：yyyy-mm-dd H:i:s

function formatDate(){
    //获得当前时间的对象。
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var seconds = date.getSeconds();
    //拼装字符串
    //：`yyyy-mm-dd H:i:s`
    return year + '-' + (month+1) + '-' + day + ' ' + hour + ':' + min + ':' + seconds; 
}
console.log(formatDate());

包装对象

实际上在JavaScript中提供了三个特殊的构造函数Number()、String()、Boolean()。可以通过new操作符来调用它们生成对应类型的对象。

var str = new String('abc');
console.log(str);

通过上面可以看出来，确实是个对象__proto__属性，指向了原型对象，原型对象中有大量的方法、属性。

根本不使用这三个构造函数。当把number、boolean、string类型当做对象调用的时候，它会自动的调用对应的构造函数生成一个对象。

var str = 'abc';//声明了一个字符串放在了str中。
//当执行str.length时 发现是对象调用，js内部自动调用new String('abc')创建一个包装对象。
//然后就可以使用属性、方法。当使用完成之后（本行  str.length），又会自动将包装对象转换为字符串。
console.log(str.length);
//这里打印还是基本类型
console.log(str);

number、boolean、string都会经过上面的这个过程。

普通对象和包装对象的区别：对象的生存周期。

• 使用new操作符创建的引用类型的实例，在执行时候，当前作用域中会一直存在（存在于内存中）。
• 自动创建的基本包装类型对象，只存在于一行代码的一瞬间，然后立即被销毁。

字符串方法

ES5方法

• charAt()，根据传入的位置取得其所在的字符。

• charCodeAt()，根据传入的位置取得其所在的字符编码（unicode码）。（不常用）

• String.fromCharCode()，根据传入的unicode码，转换为相应的字符。返回转化后的字符。

• concat()，将一或多个字符串拼接起来返回拼接的新字符串。

• indexOf(searchValue[,offset])，从一个字符串中向后搜索给定的子字符串，然后返回子字符串的位置（如果没有找到该子字符串，则返回-1）。第二个参数可以指定从哪开始(默认从0位置开始查找)；（常用）

var str = 'helloeh';
   console.log(str.indexOf('eh'));//5
   console.log(str.indexOf('e',3));//5 

• lastIndexOf()，从一个字符串中向前搜索给定的子字符串，然后返回子字符串的位置（如果没有找到该子字符串，则返回-1）。

• replace()方法，替换子字符串。（其他功能讲正则的时候说）将某个字符串置换成某个字符串。

• slice(beginSlice[,endSlice])，提取一个字符串的一部分，返回一个新的字符串。beginSlice从0开始，endSlice可以省略，如果省略endSlice会一直提取到字符串末尾。（beginSlice是开启的位置，endSlice是结束的下标的----但结果不会包含结束的下标）—用的较多。（按下标取字符串）

var str = 'hello';
   console.log(str.slice(1));//1~截取到末尾。 ello
   console.log(str.slice(0));//hell0
   console.log(str.slice(0,str.length));//hello 

• substr(start[,length])，返回一个字符串中从指定位置开始到指定字符数的字符。start，提取字符的位置，索引从0开始。length提取的字符数，length的最大值为字符串的长度减去1。省略length会从起始位置一直到字符串结束位置（按长度取字符串）

• split()，基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。(常用)

var color = "red,blue,green,yellow";
            var res1 = color.split();
            console.log(res1); 
            //Array [ "red,blue,green,yellow" ]
            //直接写一个字符作为分隔符。
            var res2 = color.split(',');
            console.log(res2);
            //Array(4) [ "red", "blue", "green", "yellow" ]
            //传空字符串进来，它会将每个字符作为数组的一个元素。
            var res3 = color.split('');
            console.log(res3); 
            //Array(21) [ "r", "e", "d", ",", "b", "l", "u", "e", ",", "g", … ]
            //第二个参数用来指定生成数组的元素的个数。
            var res4 = color.split('',10);
            console.log(res4);
            //Array(10) [ "r", "e", "d", ",", "b", "l", "u", "e", ",", "g" ]

• toLowerCase()，将字符串转换为小写。

• toUpperCase()，将字符串转换为大写。

• valueOf()，返回对象的字符串、数值或布尔值表示。如果是包装类型返回包装类型的值，如果是对象则返回对象本身。

  如果是包装类型获得的是__proto__原型对象中的valueOf()，返回的是基本值。如果是其他的对象类型，获取的是Object构造函数原型对象中的valueOf()，返回的是对象本身。

  该方法没有参数

  返回值：如果是包装对象，返回的是包装对象中的基本值；如果不是包装对象类型，返回的是对象本身。

• toString()，返回对象的字符串表示。

  该方法没有参数

  返回值：如果是包装对象，返回的是包装对象中的基本值转换为字符串；如果不是包装对象类型，根据对象类型的不同返回值也不同。

  总结：

  对象分为包装对象和非包装对象，都可以使用valueOf和toString()方法。

  • valueOf()：用来取对象中基本值的。

    • 包装对象：调用的都是各自的valueOf()，可以获得基本值。
    • 非包装对象：调用的是同一个valueOf()，是Object原型当中的；获取不到基本值，返回的还是对象本身。

  • toString，用来把对象转换为字符串

    • 所有的对象都调用的是各自的toString()都可以转换为字符串。

    • 包装对象：转换的时候将基本值拿出来转换为字符串。

    • 非包装对象：转换的时候根据对象不同结果不同。

      • 如果是数组，返回的是去掉中括号之后的列表。

      • 如果是函数，返回的是函数本身转换为字符串。

      • 普通的对象，返回的是[object Object]

• match()，根据正则来匹配指定的字符串。

• search()方法，返回字符串中第一个匹配项的索引，如果没有找到则返回-1。该方法是从字符串开头向后查找模式。

ES6方法

• includes(string,n)，返回布尔值，表示是否找到了参数字符串。

• startsWith(string,n)，返回布尔值，表示参数字符串是否在源字符串的头部。

• endsWith(string,n)，返回布尔值，表示参数字符串是否在源字符串的尾部。

• repeat(N)，返回一个新字符串，表示将原字符串重复N次。返回新字符串。

• padStart(length,str)，如果没有到达length的长度使用str在头部进行填充。

• padEnd(length,str)，如果没有到达length的长度使用str在尾部进行填充。

数组方法

ES5方法

Array.prototype开头的。只要是prototype 那么就是给实例用的。

• Array.prototype.push()，接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

• Array.prototype.pop()，从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

• Array.prototype.unshift()，在数组前端添加任意个数选项并返回新数组的长度。

• Array.prototype.shift()，移除数组中的第一个项并返回该项，同时将数组长度减1。

• Array.prototype.splice()，向数组的中部插入项。

  整体格式：arr.splice(起始项,删除的个数,要插入的项目1,要插入的项目2......)

  • 删除，可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数，返回删除的项组成的数组，原数组受到更改。

  • 替换，可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需要指定3个参数：起始位置、要删除的项数、要插入的任意数量的项（插入的项数不必与删除的项数相等）。

  • 插入，可以向指定位置插入任意数量的项，只需要提供3个参数：起始位置、0（要删除的项数）、要插入的项目（要插入的项目可以传入任意多个项）。

• Array.prototype.concat(value1,…,valuen)，基于当前数组中的所有项创建一个新数组。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾。最后返回新构建的数组。

• Array.prototype.join()，使用指定的字符串拼接数组中的每个元素，组成一个字符串。

  如果说不给join方法传递任何值，或者传递给他一个undefiend，则使用逗号作为分隔符。

• Array.prototype.reverse()，反转数组项的顺序，返回反转后的原数组。

• Array.prototype.slice()，基于当前数组中的一个或多个项创建一个新数组（该方法不会影响原始数组），返回值是一个新数组。

  • 一个参数，返回从该参数指定位置到当前数组末尾的所有项。
  • 两个参数，该方法返回起始和结束位置之间的项（但是不包括结束位置的项）；
  • 一个都不写，该方法返回从0开始一直到最后元素的一个新数组。

• Array.prototype.sort([sortFunc])，按升序排列数组项（最小的值位于最前面，最大的值排在最后面）。排序后改变原数组。

  • 不传递参数的情况下，sort()方法会调用每个数组项的toString()方法然后比较得到的字符串。即使都是数值也是按照字符串来进行比较。

  • sort可以接收一个函数作为参数，让这个函数作为排序的规则。

    这个函数接收两个参数，分别是要比较的两个值。

    如果第一个参数应该位于第二个参数之前需要返回一个附属，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回正数。

    排序规则：

    val1-val2 升序
    val2-val1 降序
    var values = [0,5,1,15,10];
    	values.sort(function(val1,val2){
    	return val1 - val2;//0 - 5   =  -5    
    	// return val2 - val1;//5 - 0   
    	});
    console.log(values);
    

• Array.prototype.toString()，返回数组的字符串表示。

• Array.prototype.indexOf()，查找指定的值并返回要查找的项在数组中的位置。没有找到返回-1。比较使用全等操作符。

  注意：

  1. indexOf()方法接受两个参数，要查找的项和要查找的起点位置（可选的）。第二个参数如果不写默认从0开始向后查找。
  2. 进行查找时使用的是全等操作。

• Array.prototype.forEach()，对数组中的每一项运行给定函数，这个方法没有返回值(返回值是undefiend)。

  forEach和for循环都可以遍历数组，他们的区别在于：

  1. forEach只能遍历数组（因为它是Array.prototype上查找方法），for可以遍历类数组。
  2. forEach只能遍历完，for可以中途使用break退出。

• Array.prototype.map()，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

• Array.prototype.filter()，对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

• Array.prototype.every()，对数组中的每一项运行给定函数，如果该函数中每一项都返回true，则返回true

• Array.prototype.some()，对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。

• Array.isArray(value)，确定value是否是数组，如果是数组返回true否则返回false。

ES6

• Array.from方法用于将类数组对象转为真正的数组：类数组对象（array-like object，有length属性和索引元素）和可遍历对象。

• Array.of用于将一组值转换为数组。返回新数组。

• Array.prototype.includes()方法返回一个布尔值，表示某个数组是否包含给定的值。

  该方法主要用来替代indexOf()，因为indexOf()是全等运算，而NaN和NaN也不相等。