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);
}
}
*/