05-JS基础(对象方法)

javascript基础五

对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、布尔、日期、数学和正则表达式、函数...

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象,是封装了一些属性和方法的集合,是带有属性和方法的特殊数据类型

此外,JavaScript 允许自定义对象。

在JavaScript中 所有的对象都是函数 所有的函数也可以称为"对象"

创建对象的方法:

通过Object对象new创建:

var obj = new Object();
        var obj1 = new Object();
        // 对象是有方法和属性的  动态添加
        obj.name = '张三';
        obj.sex = 0;
        obj.age = 20;
        obj.say = function () {
            // this ==> 在这里指向obj实例对象本身
            alert(this.name);
        }
        obj1.name = '李四';
        // 怎么用?
        obj.say();
        alert('手动弹出==>'+obj.name);
        alert('手动弹出2==>'+obj1.name);

通过字面量形式创建对象:

// 通过字面量形式创建对象

//方法一:
        var obj = {};//创造一个对象
        // 添加属性和方法
        obj.name = '张三';
        obj.age = 20;
        obj.say = function () {
            alert(this.name+'的年龄为:'+this.age);
        }
        alert('手动弹出name:'+obj.name);
        obj.say();
//方法二:
        // 键值对  key:value  key=value
        // 这是zs的一个实例对象
        var zs = {
            name:'张三',
            age:20,
            sex:0,
            run:function () {
                alert('Hi , i can  running...');
            }
            sing: function () {
                alert('Hi i am '+ this.name);
            }
        };

        alert('手动弹出属性为===>'+zs.name);
        zs.say();

函数创造对象:

// 在js中 所有的对象都是函数 所有的函数也可以称为"对象"
// 此时 这个Human为手动创建的自定义构造函数对象
// 在js中 this的指向在调用前是不确定的.
function Human () {
            this.name = '张三';
            this.age = 20;
            this.say = function () {
                alert(this.name+'的年龄为:'+this.age);
            }
        }
        // zs为通过Human创建的一个实例对象
        var zs = new Human();
        // 通过zs的实例对象调用的属性 和方法
        alert('手动弹出name==>'+zs.name);
        zs.say();

this指向问题:

  • this只出现在函数中

  • 构造函数对象的this指向new出来的实例对象,即:==this指向调用者==.(面试)

  • 注意:如果没有实例化构造函数直接调用,会导致this指向整体运行对象window,进而影响函数值被重置

    //案例
    // script 有一个整体的运行对象window对象
    //而window对象作为网页js的默认运行环境,一般不写.
    //如果不通过new实例对象,那么this指向调用者
    //直接调用Human()自定义构造函数对象导致:
    //this.name==>windows.this,即windows对象本身
    //this.name被重新赋值变成张三
          // this在调用之前 是不知道指向谁的
          // 面试: 1. 构造函数对象的this指向new出来的实例对象
          var name = '李四';
          function Human () {
              this.name = '张三';
              this.age = 20;
              this.say = function () {
                  alert(this.name+'的年龄为:'+this.age);
              }
          }
            Human();
            alert(name);//弹出张三.
    

new的作用:

  • 开辟内存空间,存储新创建的对象( new Object() )
  • 把this设置为当前对象
  • 执行内部代码,设置对象属性和方法
  • 返回新创建的对象 ==<面试重要>==

JSON和JS对象:

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。

JSON 是 JavaScript 原生格式,JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号;

JSON 与 JS 对象的关系:

  • JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串

    //这是一个对象,注意键名也是可以使用引号包裹的
    var obj = {a: 'Hello', b: 'World'};
    //这是一个 JSON 字符串,本质是一个字符串
    var json = '{"a": "Hello", "b": "World"}';
    
  • JSON 和 JS 对象可以相互转换:

    //js对象转换为JSON
    //要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
    var json = JSON.stringify({a: 'Hello', b: 'World'});
    console.log(json);//结果是 '{"a": "Hello", "b": "World"}'
    
    
    //JSON转换为JS对象:JSON实际上就是字符串
    //要实现从 JSON 转换为对象,使用 JSON.parse() 方法:
    var obj = JSON.parse('{"a": "Hello", "b": "World"}');
    console.log(obj);//结果是 {a: 'Hello', b: 'World'}
    
    
  • JSON 和 JS 对象遍历:

    • 在js中,for……in用于遍历一个对象的属性,把对象的属性名和属性值都提出来。

    • 直接根据键获取值时,obj["name"]和obj.name两种方法均可以获取到值。

    • [ ]可以使用变量作为参数,在实际使用过程中非常灵活,比如可以写出很通用的代码,而不用考虑具体对象的结构,多用于for (var key in obj) {}。

    //对象
              var user = {
                  name:'张三',
                  age: 20
              }
              // json类型对象
              var userJson = {
                  "name":"李四",
                  "age":30
              }
    //遍历
              for(var i in user){
                  // console.log(i); name,age
                  //xx.xx 这种形式 只能取原来具有的属性
                  //非常重要! xx.abc  abc是变量,就必须通过  xx[abc] 形式取值
                  console.log('属性'+i+'==>'+user[i]);
              }
    
              for(var a in userJson){
                  console.log('属性'+a+'==>'+userJson[a]);
              }
    

数组和字符串高阶API

数组的内置方法

将数组转换为字符串

toString()方法:
var arr = ["a","b","c","d"];
console.log(arr.toString()); //输出a,b,c,d
join()方法:
var arr = [1,3,5,6,7];
        //join可以把数组转换为字符串.
        //如果没有参数 默认逗号隔开
        var str = arr.join('!');
        console.log(str);//控制台输出1!3!5!6!7

翻转数组

  • reverse()方法:
    //方法用于颠倒数组中元素的顺序。
    //该方法会改变原来的数组,而不会创建新的数组。
    var arr = [10,11,1,3,5,7,9];
           console.log(arr.reverse()); //输出9,7,5,3,1,11,10
    

数组排序

sort() 方法:

该方法会改变原来的数组,而不会创建新的数组。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值。

function sortNumber(a, b)
    {
    return a - b //正序,b - a 倒序也可以用reverse()
    }
   var arr = new Array(6)
   arr[0] = "10"
   arr[1] = "5"
   arr[2] = "40"
   arr[3] = "25"
   arr[4] = "1000"
   arr[5] = "1"
  
   document.write(arr + "
") document.write(arr.sort()) //输出结果为: //10,5,40,25,1000,1 //1,10,1000,25,40,5

参数为arr.sort(sortNumber)时:

//基本数据类型:    
function sortNumber(a, b)
    {
    return a - b
    }
    var arr = new Array(6)
    arr[0] = "10"
    arr[1] = "5"
    arr[2] = "40"
    arr[3] = "25"
    arr[4] = "1000"
    arr[5] = "1"

    document.write(arr + "
") document.write(arr.sort(sortNumber)) //输出结果为: //10,5,40,25,1000,1 //1,5,10,25,40,1000 //复杂数据类型: var users = [ { name:'张胜男', age:20, height: 180 }, { name:'李四', age:22, height: 170 }, { name:'王五', age:18, height: 172 }, { name:'赵六', age:22, height: 168 } ] // 要求: 按照年龄和身高升序排列. 如果年龄相同,比较身高. // 对象数组的多条件排序 users.sort(function (a,b) { //比较年龄 排序 if(a.age==b.age){ return a.height - b.height; } return a.age-b.age; }); console.log(users);//先按年龄升序,如果年龄相同也按升序排列

查找数组中某个值在数组中对应的位置(下标)

indexOf()方法:
//indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
//indexOf(a,b);
//a表示,要查找的元素
//b表示,开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
lastIndexOf() 方法:
//lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 b 处开始.
//lastIndexOf(a,b);
//a表示,被查找的元素。
//b表示,从此位置开始逆向查找。默认为数组的长度减 1,即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

截取数组

slice()方法:

从当前数组中截取一个新的数组,不影响原来的数组

slice($1, $2) 并非在原数组上操作,而是返回被切部分的副本。区间表示为[$1, $2)$1 是起始下标,$2 是截止下标。

slice(0)==>创建一个数组的clone(克隆)对象

svar arr = [1,2,3,4,5];
        //截取一个数组 [)  
        var rs = arr.slice(1,3);
        //从下标为2开始
        var rs2 = arr.slice(2);
        // 有什么用类? 注意!
        // var rs3 = arr; // 还是同一个对象 
        // 一般用于数组clone
        var rs3 = arr.slice(0); // 创建一个数组的clone(克隆)对象
        console.log(rs); //[2 , 3]
        console.log(rs2);//[3, 4, 5]
        console.log(rs3);//[1, 2, 3, 4, 5]
splice()方法:

删除或替换当前数组的某些项目

splice($1, $2) 直接在原数组上操作,返回被切掉的部分。区间表示为 [$1, $1+$2-1]$1 是起始下标, $2 是切多少个。

var arr = [1,3,5,7];
        var arr2 = [1,2,3,4,5];
        var arr3 = [1,2,3,4,5];
        var arr4 = [1,2,3,4,5];
        //从下标为2的位置开始 替换1位,替换为8
        arr.splice(2,1,8);  // 常用
        arr2.splice(2,2,8);
        arr3.splice(2,1,['a','b','c']); // 二维数组
        arr4.splice(2,1,'a','b','c'); //  常用
        console.log(arr); // [1, 3, 8, 7]
        console.log(arr2); // [1, 2, 8, 5]
        console.log(arr3); // [1, 2, Array(3), 4, 5]
        console.log(arr4);// [1, 2, "a", "b", "c", 4, 5]

清空数组的方法

array.length = 0;
  • 更直接,在方法内可以直接影响方法外的数组.
  • length属性可以赋值,其它语言中length是只读
array=[];
  • 更简便,但是不彻底,在方法内使用时,==不会影响方法外的数组==

字符串方法

获取某个字符在字符串中的位置

indexOf()

字符串中的字符被从左向右索引,首字符的索引(index)为 0。

指定值的第一次出现的索引; 如果没有找到 -1。

indexOf() 方法对大小写敏感!

"Blue Whale".indexOf("Blue");     // returns  0
"Blue Whale".indexOf("Blute");    // returns -1
"Blue Whale".indexOf("Whale", 0); // returns  5
"Blue Whale".indexOf("Whale", 5); // returns  5
"Blue Whale".indexOf("", 9);      // returns  9 为空时遍历定义的数组长度
"Blue Whale".indexOf("", 10);     // returns 10 
"Blue Whale".indexOf("", 11);     // returns 10 超过数组长度返回数组最大长度
lastIndexOf()

字符串中的字符被从左向右索引。首字符的索引(index)是 0,

最后一个字符的索引,返回指定值在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。

"canal".lastIndexOf("a")   // returns 3
"canal".lastIndexOf("a",2) // returns 1
"canal".lastIndexOf("a",0) // returns -1
"canal".lastIndexOf("x")   // returns -1

截取字符串

slice()

可提取字符串的某个部分,并以新的字符串返回被提取的部分。

提取后不影响原副本

var str="Hello happy world!"
//提取从位置 6 开始的所有字符:
document.write(str.slice(6));//happy world!
//提取从位置 6 到位置 11 的所有字符:
document.write(str.slice(6,11));//happy

substr()

方法返回一个字符串中从指定位置开始到指定字符数的字符。范围大

截取后不影响原副本

var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3,7))//lo worl
substring()

方法返回一个字符串中介于两个指定下标之间的字符。范围小

截取后不影响原副本

var str="Hello world!"
document.write(str.substring(3));//lo world!
document.write(str.substring(3,7));//lo w

连接字符串

concat()

用的比较少,一般用+号拼接字符串

var str1 = '   hello,world! ';
var str2 = 'abcdefdaf';
console.log(str1.concat(str2)); //拼接等同console.log(str1+str2);

获取指定位置的信息

charAt()

可返回指定位置的字符。

字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串。

var str="Hello world!"
document.write(str.charAt(1));//e
charCodeAt()

返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。

var str="Hello world!"
document.write(str.charCodeAt(1));//101

你可能感兴趣的:(05-JS基础(对象方法))