专栏首页Python 学习前端-part5-JavaScript函数+面向对象+部分基础方法
原创

前端-part5-JavaScript函数+面向对象+部分基础方法

1.function 一般函数

function func(a,b){ //function 关键字声明一个函数,类似于 Python里面的 def
	return a+b
}
var a = func(10,20);
console.log(a);

2.forEach方法+map()+filter()方法的使用

var a = [11,22,33,44];
a.forEach(function(i){console.log(i);}) //类似于Python的列表推导式
=================================================================
a = [11,22,33,44];
a.forEach((i)=>{console.log(i)})  //这是另一种表达式,遍历列表中的元素
=================================================================
a = [11,22,33,44];
a.forEach((m,n)=>{console.log(m,n)}) // 传递两个参数是,会输出列表的元素和对应下标


var lis = [11,22,33,44,55];
lis.map(function(i){  //map方法,对列表所有元素操作
	return i+1 // 所有元素全部 +1
})           // 最终结果  [12, 23, 34, 45, 56]

lis.filter(function(i){  //map方法,对列表所有元素操作
	return i>22 // 筛选元素大于22的组成列表返回
})           // 最终结果  [33,44,55]

3.对于接收多个参数的function处理

function mySum(a,b){ //这里可以声明几个参数,代表两个或者更多
	var ret = 0;
	for(var i=0; i<arguments.length;i++){ //arguments代表已经把所有参数做成了一个列表
		ret += arguments[i];               // 这里其实相当于遍历列表,元素累加,arguments关键字
	}
	return ret;
}
var a = mySum(10,20,30); // 这里给的参数可以使多个
console.log(a)

4.面向对象基础

var Person = function(dream){  //固定格式,自定义一个 Person 的类,有一个 dream 属性
	this.dream = dream; //类似于 Python 的 self ,初始化类参数
};
var p1 = new Person("暴富"); // 产生一个对象,类似于Java里面的生成一个对象
p1.dream // 这里可以获得属性值,即“暴富”,没有括号 ()

5.面向对象追加类方法

var Person = function(dream){  
	this.dream = dream; 
};
var p1 = new Person("暴富"); 
p1.dream 
Person.prototype.makeDream = function(){ // 固定用法,类名+prototype+方法名 = function(){...};
	console.log("梦想是做白日梦!");
};
var p2 = new Person("食屎");
p2.dream;
p2.makeDream(); // 此时最新生成的 p2 就有 makeDream() 这个方法啦!

6.面向对象的继承,了解一下

var Person = function(dream){
	this.dream = dream;
};
var p1 = new Person("暴富");

Person.prototype.makeDream = function(){
	console.log("梦想是做白日梦!");
};
var p2 = new Person("食屎");

var Yello = function(dream){  //创建一个新的类,叫Yellow,从这一句开始,继承 Person 类
	Person.call(this, dream); //固定用法,父类.call(this,父类属性)
};
Yello.prototype = Object.create(Person.prototype); //固定用法
Yello.prototype.constructor = Yello; //固定用法,到此,一共三句话,完成了继承

Yello.prototype.singSong = function(){ //这里定义Yellow的一个新的方法
	console.log("龙的传人");
};

var p3 = new Yello("发财");
p3.singSong();//方法被使用
p3.makeDream();//同样拥有父类 Person 的 makeDream() 方法

7.date对象

var d = new Date();
d.toLocaleString(); //获取当前时间
d.getDate(); //获取当前 日
d.getDay(); //获取 星期,某个月的第几个星期
d.getMonth(); //获取月份,永远比实际的月份小 1
d.getFullYear(); //获取当前年份
d.getHours(); // 获取当前的小时
d.getMinutes(); // 获取当前的 分钟
d.getSeconds(); // 获取当前的秒数

8.JSON模块的使用

lis = {"name":"zhangsan","age":20};
var s1 = JSON.stringify(lis); // 序列化,转化成字符串
s1;
var s2 = JSON.parse(s1); // 反序列化
s2;

9.正则表达式的简单了解

var r1 = new RegExp('^1[3-9][0-9]{9}$'); // 生成正则对象,括号内单引号,输入正则表达
r1.test("18913079152"); // 这里的正则表达用来测试这里是否是一个合法的手机号码
// 也可以如下写法,只用两个"/",中间写正则,是一样的效果,使用两个"/"即使用正则
/^1[3-9][0-9]{9}$/.test("18913079152"); 

10.正则小例子

var s = "ying Ying";
s.replace(/Y/,"哈哈"); // "Y" 被换成 "哈哈"
s.replace(/Y/i,"哈哈"); // "i" 代表忽略大小写,但是只有第一个 "y" 被换了 "哈哈"
s.replace(/Y/gi,"哈哈"); // "i" 忽略大小写, "g" 代表 "global",就是全局的意思,然后 "y" 和 "Y" 全被换成了 "哈哈"

11.数学的 Math 模块

Math.abs(x); // 取 x 的绝对值
Math.max(x,y,z); // 取最大值
Math.min(x,y,z); // 取最小值
Math.pow(x,y); // 取 x 的 y 次幂
Math.random(); // 随机取一个在 1 和 0 之间的一个小数
Math.round(x); // 四舍五入取整数
Math.sqrt(x); // 取 x 的平方根

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端-part11-Bootstrap初识

    2.Bookstrap...复制粘贴...复制粘贴...link导入bookstrap.css,分分列,然后往里面贴

    少年包青菜
  • day76-<项目>-模糊查询和分页保留查询条件

    少年包青菜
  • 前端-part4-JavaScript字符串+数组+循环

    少年包青菜
  • 谈谈ES6语法(汇总下篇)

    ES2017标准引入了async函数,使得异步操作更加方便。async函数是Generator函数的语法糖。不打算写Generator函数,感兴趣的话可以看文档...

    嘉明
  • javascript预编译(执行期的上下文)

    这句话很重要,函数执行之前也就是在这段程序开始之前,浏览器对马上要执行的函数进行预编译!! 预编译四部曲

    ZEHAN
  • Fastadmin使用—新增可视化数据

    在fastadmin开源项目中,首页有可视化配图,看起来很酷炫.那么,如果自己想做自己的可视化使徒.有需要怎么做呢?

    桑先生
  • jQuery on()方法

    绑定click事件,使用jquery的$().click(func)?别闹了,属实是low。

    陈灬大灬海
  • Html|Vue实战小项目-购物车

    在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进...

    算法与编程之美
  • nodejs解析xml文件

    xml作为一种重要的数据交换格式,在使用nodejs中也需要对其进行解析,这里所使用的解析模块是xmlreader。其作用是将xml根据节点解析为一个JSON对...

    无邪Z
  • js节流函数和js防止重复提交的N种方法

    Java中文社群-磊哥

扫码关注云+社区

领取腾讯云代金券