JavaScript学习笔记进阶篇（二）

7.面向对象

7.1 面向对象基础

• 类

内置：Object类

• 创建对象

var s = new Object()

• 访问属性，调用方法

var s = new Object()
//直接[.]
s.name = "xiaoli";
s.age = 18;
console.log(s.name);
console.log(s.age);
s.say = function (){
	console.log(this.name+"say function");
}

• 注意

• JS方法中属性前必须加this
• JS对象没有的属性或方法，直接[.]可以自动添加

7.2 JSON

JSON：(JavaScript Object Notation)JS对象表示形式

• 语法

json形式定义对象
{
    属性名:属性值,
    属性名:属性值,
    ...
    方法名:function(){},
    方法名:function(){}
}

• 示例

var o = {
	name : "xiaoli",
	age : 18,
	say : function(){
		console.log(this.name+"say function");
	}
}

• 注意

JSON中分隔属性或方法的[,]不能省略
JSON中赋值用[:]

8.常用类

8.1 Math

var r = Math.random();//返回0-1范围内的随机数
console.log(r);

//floor向下取整
var r1 = Math.floor(10.9);//10
//ceil向上取整
var r2 = Math.ceil(10.1);//11
//round四舍五入
var r3 = Math.round(10.4);//10
var r4 = Math.round(10.6);//11
console.log(r1);
console.log(r2);
console.log(r3);
console.log(r4);

8.2 Number

        var s1 = "10";
        var s2 = "10.1";
        //转换数字
        var i = Number.parseInt(s1);
        var d = Number.parseFloat(s2);
        console.log(i);
        console.log(d);
        console.log(typeof i);
        console.log(typeof d);
        var s ="abc";
        var n = Number.parseInt(s);//转换失败，但是不出异常 返回NaN (Not a Number)
        console.log(n);
        //判断转换是否成功 （和NaN比较）
        //不能直接和NaN比较，通过Number.isNaN方法判断
        var b = Number.isNaN(n);
        console.log(b);

8.3 String

		var s = new String("a-b-c");

        var c = s.charAt(0);
        console.log(c);
        // 字符串获取长度通过length属性获取
        console.log(s.length);

        var index = s.indexOf("ab");//返回参数所在字符串的索引位置.没有的话返回-1
        console.log(index);

        console.log(s.endsWith("c"));
        console.log(s.startsWith("a"));

        var ss = s.split("-");
        console.log(ss);

        console.log(s.substring(0,2));

• 字符串模板

js中可以用“+”对字符串进行拼接，但是格式或者引用变量/方法方面都会很麻烦，可以用ES6提供的字符串模板来解决这一问题

• 语法：使用【``】替代原先的【“”】

• 示例1：随意折行

<script type="text/javascript">
    let str = `Hello
        World
        Spring
    `;

    console.info(str);
</script>
/**
	在两个`之间的部分都会被作为字符串的值，可以任意换行
*/

• 示例2：字符串拼接、引用变量

<script type="text/javascript">

    // 过滤掉不能被3整除的数
    let name = 'xiaoli';
    let age = 18;
    let address = "北京";

    let str = `姓名是:${name}年龄是:${age}家庭住址是:${address}`

    console.info(str);

</script>

• 示例3：调用函数

<script type="text/javascript">

    let fn = function () {
        return "HelloWorld";
    }

    let content = `你好, ${fn()}`;

    console.info(content);

</script>

8.4 Date

Date：该对象表示一个日期

• 示例

        var date = new Date();//当前系统时间
        //设置年
        date.setFullYear(1992);
        //设置月 (0-11)
        date.setMonth(11);
        //设置日
        date.setDate(1);
        //设置时
        date.setHours(10);
        //设置分
        date.setMinutes(20);
        //设置秒
        date.setSeconds(30);
        //获取年
        var year = date.getFullYear();
        //获取月
        var month = date.getMonth();
        //获取日
        var de = date.getDate();
        //获取时
        var hours = date.getHours();
        //获取分
        var minutes = date.getMinutes();
        //获取秒
        var seconds = date.getSeconds();
        //获取周几
        var day = date.getDay();

        //获取unix时间戳 从1970年开始算，有多少ms
        var time = date.getTime();

8.5 Array

• 数组定义

//定义数组
        var a1 = new Array();
        var a2 = [];

        var a3 = new Array(1,2,3);
        var a4 = [1,2,3];

        console.log(a1);
        console.log(a2);
        console.log(a3);
        console.log(a4);

• 访问数组元素

		//访问元素
        console.log(a4[0]);
        console.log(a4[1]);
        //js的数组不会出现下标越界异常
        console.log(a4[-1]);
        console.log(a4[3]);
        //js数组是可变长数组，类似于Java中的List
        a4[3] = 4;
        console.log(a4[3]);

• 数组的遍历

//遍历数组 获取数组长度 数组名.length
        for(var i = 0; i < a4.length; i++){
            console.log(a4[i]);
        }
        //for in遍历
        for(var i in a4){
            console.log(i+"-->"+a4[i]);//i是下标
            
        }
        //for in可以遍历对象
        var o = {
            name:"xiaohei",
            age:18,
            say:function(){
                console.log(this.name+" "+this.age);
            }
        }

        for(var key in o){
            console.log(key+"-->"+o[key])//key表示属性名
        }

• 数组的方法

       var a = [2,1,3,4];

        //入栈方法
        a.push(5);
        console.log(a);
        //出栈
        console.log(a.pop());
        console.log(a);

        //遍历方法 接收一个操作元素的函数
        a.forEach(function(item,index,a){
            console.log(item+" "+index+" "+a);
        })
		/*
		即传入一个函数去操作数组中的元素
        forEach(f){
            for(var i = 0; i < a.length; i++){
                f(a[i],i,a);
            }
        }
        */