前端之JavaScript 02

一、函数

// 最基础的函数定义
function f1() {console.log('hello world!');
}
f1();
//  hello world!// 带参数的函数
function f2(name,age) {console.log("姓名 : " + name + "  年龄:" + age);
}
f2("jassin",18);
//  姓名 : jassin  年龄:18// 带返回值的函数
function f3(arg1,arg2) {return arg1 + arg2;
}var s = f3("jassin", "dulala");
console.log(s);
//  jassindulala// 匿名函数
var sum = function(arg1,arg2){return arg1 + arg2;
};
ret = sum(1,2);
console.log(ret);
// 3//自执行函数(比较常用
(function (arg1,arg2) {console.log("自执行函数" + (arg1 +arg2));
})(10,20);
// 自执行函数30

函数的定义

function 函数名 (参数){
<br>    函数体;return 返回值;
}

功能说明:

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致,大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

用 Function 类直接创建函数的语法如下:

var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

 

 

函数的全局变量和局部变量

局部变量:

在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它(该变量的作用域使是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除

全局变量会在页面关闭后删

// 1、
//  不推荐使用
(function (arg1,arg2) {n = 100;  // 相当于定义了一个全局变量var m = 100;console.log(" i can forget to you " + (arg1 + arg2));
})(10,20);// 2、可以使用
var n;  // 提前声明要使用的全局变量

(function (arg1,arg2) {n = 100;var m = 100;console.log(" i can forget to you " + (arg1 + arg2));
})("can","  youcan");

作用域

首先在函数内部查找变量,找不到则到外层函数查找

执行函数一定要去找函数定义的位置

例子:

//   执行函数一定要去找函数定义的位置
// 自己用找自己
var city = "beijing";
function f() {var city = "shanghai";function inner() {var city = "shenzhen";console.log(city);}inner();
}
f();
sehnzhen//  自己没有找上一级
var city = "beijing";
function bar() {console.log(city);
}
function f() {var city = "shanghai";return bar;
}
var ret = f();
ret();beijing

闭包

// 闭包
// 内部函数可以访问外部函数
var city = "beijing";
function f() {var city = "shanghai"function inner() {console.log(city);}return inner;
}
var ret = f();
ret();// shanghai

二、Date对象

1、创建Date对象

//方法1:不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2:参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3:参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());//方法4:参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示

 Date对象的方法—获取日期和时间(更多)

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月(0-11)
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

例子:

function getCurrentDate(){//1. 创建Date对象var date = new Date(); //没有填入任何参数那么就是当前时间//2. 获得当前年份var year = date.getFullYear();//3. 获得当前月份 js中月份是从0到11.var month = date.getMonth()+1;//4. 获得当前日var day = date.getDate();//5. 获得当前小时var hour = date.getHours();//6. 获得当前分钟var min = date.getMinutes();//7. 获得当前秒var sec = date.getSeconds();//8. 获得当前星期var week = date.getDay(); //没有getWeek// 2014年06月18日 15:40:30 星期三return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);}alert(getCurrentDate());//解决 自动补齐成两位数字的方法function changeNum(num){if(num < 10){return "0"+num;}else{return num;}}
//将数字 0~6 转换成 星期日到星期六function parseWeek(week){var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//             0      1      2      3 .............return arr[week];
}
View Code

Date对象的方法—设置日期和时间

//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒
View Code

Date对象的方法—日期和时间的转换

日期和时间的转换:getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差,以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)
View Code

练习

将当前日期按“2017-12-27 11:11 星期三”格式输出。

// 2017-12-27 11:11 星期三
function d() {// 创建Date 对象var date = new Date();// 获取当前年份var year = date.getFullYear();// 获取当前月份var month = date.getMonth()+1;// 获取日var day = date.getDate();// 获取小时var hour = date.getHours();// 获取分钟var minute = date.getMinutes();// 获取星期var week = date.getDay();var weekStr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];if (month < 10){month = "0" + month;}console.log(year+"-"+month+"-"+day+" "+hour+":"+minute+" "+weekStr[week])
}
d();
answer

 

三、序列化和反序列化(重要)

基础

// JSON对象有两个方法: JSON.parse()和JSON.stringify()方法,
// 前者是将一个字符串解析为JSON对象,后者是将一个JSON对象转换为一个字符串。var o= {"name":"jassin","age":18
};
// 序列化
var s = JSON.stringify(o);
console.log(o,typeof o);  // Object "object"
console.log(s, typeof s);  // {"name":"jassin","age":18} string// 反序列化
var obj =JSON.parse(s);
console.log(obj, typeof obj); // {name: "jassin", age: 18} "object"//在使用JSON.stringify()时,
// 如果对象中的值是function或是undefined,则在序列化为字符串时会会忽略掉这个键值对。如:
var person = {"name":"jassin","age" : 18,"brother":undefined,"say": function () {alert("hello")}
};
console.log(JSON.stringify(person));//  {"name":"jassin","age":18}

 

// JSON.stringify()方法除要序列化的JavaScript 对象外,还可以接收另外两个参数,
这两个参数用于指定以不同的方式序列化JavaScript 对象。第一个参数是个过滤器,可以是一个数组,
也可以是一个函数;第二个参数是一个选项,表示是否在JSON 字符串中保留缩进。单独或组合使用这两个参数,
可以更全面深入地控制JSON 的序列化。//  1、如果过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性。如下:
var person = {"name":"lishi","age":21,"brother":[{"name":"lili","age":18},{"name":"yan","age":22}],"sex" :"女","birthday": new Date(1996,12,20)
};
var personStr = JSON.stringify(person,["name","brother","sex"]);
console.log(personStr);// {"name":"lishi","brother":[{"name":"lili"},{"name":"yan"}],"sex":"女"}// 2、如果第二个参数是函数,行为会稍有不同。传入的函数接收两个参数,属性(键)名和属性值。
// 根据属性(键)名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串,
// 而在值并非键值对儿结构的值时,键名可以是空字符串。为了改变序列化对象的结果,
// 函数返回的值就是相应键的值。不过要注意,如果函数返回了undefined,那么相应的属性会被忽略。
// 如下:var person = {"name": "莉莉","age":21,"sister":["妹妹","我也不知道"]
}var personStr = JSON.stringify(person,function (key,value) {switch (key){case "sister":return value.join(",");case "age":return value + 1;default:return value;}
});
console.log(personStr);//  {"name":"莉莉","age":22,"sister":"妹妹,我也不知道"}// 3、JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。
// 如果这个参数是一个数值,那它表示的是每个级别缩进的空格数。最大缩进空格数为10,
// 所有大于10 的值都会自动转换为10。如果缩进参数是一个字符串而非数值,
// 则这个字符串将在JSON 字符串中被用作缩进字符(不再使用空格)。
// 缩进字符串最长不能超过10 个字符长。如果字符串长度超过了10 个,结果中将只出现前10 个字符。如
// :
var person = {"name" : "lili","age" : 20,"sister" : ["哆啦A梦","皮卡丘"]
};
// var personStr = JSON.stringify(person,null,4);
// console.log(personStr);
// {
//     "name": "lili",
//     "age": 20,
//     "sister": [
//         "哆啦A梦",
//         "皮卡丘"
//     ]
// }var personStr = JSON.stringify(person,null,"***");
console.log(personStr);
// {
// ***"name": "lili",
// ***"age": 20,
// ***"sister": [
// ******"哆啦A梦",
// ******"皮卡丘"
// ***]
// }
探索

四、RegExp对象(正则)

                1. Python里面:1. import re2. p1 = re.compile("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")3. p1.match()4. p1.search()5. p1.findall()
View Code

 

//RegExp对象//创建正则对象方式1
// 参数1 正则表达式
// 参数2 验证模式:g(global)和i(忽略大小写)// 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。// 创建RegExp对象方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");// 匹配响应的字符串
var s1 = "bc123";//RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
reg1.test(s1);  // true

 

//方式一
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");
var s1 = "ba1223";
var s2 = "123alex";
console.log(reg1.test(s1));
console.log(reg1.test(s2));// true
// false// 简写模式
var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
console.log(r2.test(s1));
console.log(r2.test(s2));// String对象与正则结合的4个方法
var s2 = "hello world";s1 = s2.match(/o/g);
console.log(s1);    //  ["o", "o"]

s3 = s2.search(/h/g);
console.log(s3);    // 0

s4 = s2.split(/o/g);
console.log(s4);    // ["hell", " w", "rld"]

s5 = s2.replace(/o/g,"s");
console.log(s5);    // hells wsrld// 关于匹配模式:g和i的简单示例
var s1 = "name:lishi  age:18";
s1 = s1.replace(/a/,"哈哈哈");
console.log(s1);
// n哈哈哈me:lishi  age:18

s2 = s1.replace(/a/g,"哈哈哈");
console.log(s2);
//  n哈哈哈me:lishi  哈哈哈ge:18

s3 = s1.replace(/a/gi,"哈哈哈");
console.log(s3);
//  n哈哈哈me:lishi  哈哈哈ge:18

 

 

五、Math对象

//该对象中的属性方法 和数学有关.
   abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。//方法练习://alert(Math.random()); // 获得随机数 0~1 不包括1.//alert(Math.round(1.5)); // 四舍五入//练习:获取1-100的随机整数,包括1和100//var num=Math.random();//num=num*10;//num=Math.round(num);//alert(num)//============max  min=========================/* alert(Math.max(1,2));// 2alert(Math.min(1,2));// 1 *///-------------pow--------------------------------alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.

 

转载于:https://www.cnblogs.com/jassin-du/p/8120561.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453259.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是双绞线

双绞线&#xff08;twisted pair&#xff0c;TP&#xff09;是一种综合布线工程中最常用的传输介质&#xff0c;是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起&#xff0c;每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消&a…

Android蒙版倒计时,【倒计时海报设计】- 虎课网

我们在大街上经常会看到各种宣传海报&#xff0c;有时商家为了达到促销的目的会在醒目的地方张贴一张倒计时海报&#xff0c;为的就是吸引群众的眼睛&#xff0c;大家了解PS倒计时海报设计的制作过程吗&#xff1f;如果对这方面操作不太了解的话&#xff0c;大家可以关注一下下…

linkit-smart-7688-feed 安装笔录

转载于:https://www.cnblogs.com/orangezs/p/8571791.html

android浏览SD卡的文件,简单实现浏览Android SD卡中的文件

----Main.javapublic class Main extends Activity {private TextView textView;private Button button;private ListView listView;public File currentParentFile;public File[] currentFiles;public static String sdcardDir ;static {try {//sd卡的路径sdcardDir Environ…

Java线程状态Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释

一、线程5种状态 新建状态&#xff08;New&#xff09; 新创建了一个线程对象。 就绪状态&#xff08;Runnable&#xff09; 线程对象创建后&#xff0c;其他线程调用了该对象的start()方法。该状态的线程位于可运行线程池中&#xff0c;变得可运行&#xff0c;等待获取CPU的使…

彩票相关知识

很多人做梦都想中得彩票头奖&#xff0c;很多人希望天上能掉下馅饼来砸中自己&#xff0c;很多人在作白日梦……彩票是一种风险投资&#xff0c;是一种四两拨千斤的气势&#xff0c;更是一种众人拾柴火焰高的真实写照&#xff0c;没买过彩票的人是很难体会那种美好的期望及期望…

(模拟信号/数字信号)分别以(模拟信号/数字信号)中传输方式

1、基本概念、基本术语和数据通信系统 1.基本概念和基本术语 数据&#xff1a;能够由计算机处理的数字、字母和符号等具有一定意义的实体。 分类&#xff1a;模拟数据可以在一定的数据区域中取连续的值&#xff0c;如声音和图像&#xff1b;数字数据只能取离散的数值&#xff0…

android11 rom,小米打造基于安卓11的ROM来了:米10尝鲜

原标题&#xff1a;小米打造基于安卓11的ROM来了&#xff1a;米10尝鲜据XDA报道&#xff0c;距离Android 11正式版发布还有几天时间&#xff0c;9月8日正式面向Pixel 2、Pixel 3、Pixel 4和Pixel 3a等机型推送Android 11正式版。另一方面&#xff0c;各大手机品牌已经紧锣密鼓开…

基于 HTML5 WebGL 的 3D 服务器与客户端的通信

这个例子的初衷是模拟服务器与客户端的通信&#xff0c;我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的&#xff0c;这样找产品以及整个空间的概括会比较明确&#xff0c;在这个例子中我也加了&#xff0c;这篇文章就算是我对这次项目的一个…

七种常见的核酸序列蛋白编码能力预测工具 | ncRNAs | lncRNA

注&#xff1a;这些工具的应用都是受限的&#xff0c;有些本来就是只能用于预测动物&#xff0c;在使用之前务必用ground truth数据来测试一些。我想预测某一个植物的转录本&#xff0c;所以可以拿已经注释得比较好的拟南芥来测试一下。&#xff08;测试的结果还是比较惊人的&a…

寒武纪找到了引领中国AI芯片走向世界的路

大约6亿年前在地质学上被称作“寒武纪”的时代&#xff0c;大量无脊椎动物在短时间内出现“生命大爆发”。如今&#xff0c;“寒武纪”这个名字再次被人们提及&#xff0c;它源自中科院计算所研发的人工智能芯片处理器的命名&#xff0c;意喻人工智能即将迎来大爆发的时代。“寒…

浅谈PPM (Project Portfolio Management)

前言&#xff1a; 本文以纯理论性的PPM讲解为主&#xff0c;不会涉及到具体如何实施&#xff0c;我会在以后介绍详细的PPM实施方案介绍。 PPM&#xff0c;可能很多人并不清楚甚至可能没听说过&#xff0c;这是一个近些年才流行起来的概念&#xff0c;是Project Portfolio Mana…

Android怎么插手机卡,魅蓝E手机卡怎么装 魅蓝E手机SIM卡安装图文教程

昨天下午&#xff0c;魅族发布了全新系列魅蓝手机——魅蓝E&#xff0c;定位魅蓝高端产品线&#xff0c;售价1299元&#xff0c;李楠号称魅蓝E采用三四千元的旗舰机工艺&#xff0c;外观/屏幕/拍照提升明显。此外&#xff0c;魅蓝E依旧支持全网通双卡双待。那么魅蓝E怎么插卡/装…

快速幂总结

快速幂总结 快速幂这个东西比较好理解&#xff0c;但实现起来到不老好办&#xff0c;记了几次老是忘&#xff0c;今天把它系统的总结一下防止忘记。 首先&#xff0c;快速幂的目的就是做到快速求幂&#xff0c;假设我们要求a^b,按照朴素算法就是把a连乘b次&#xff0c;这样一来…

第三章

一.项目前期的主要工作 1.现状分析 ①.硬件分析 ②.软件分析 2.需求收集 3.粗略设计 ①.体系结构分析 ②.硬件&#xff08;网络&#xff09;设计 ③.应用系统设计 ④.安全设计 ⑤.配套设计 4.可行性分析 二.结构的项目前期实例 1.组织分析 3.需求收集 4.粗略设计 ①.系统体系结…

荣耀magic3会用鸿蒙,赵明:荣耀Magic3芯片领先行业,大家看到以后会换掉手机!...

荣耀CEO赵明亲自参加高通2021技术峰会&#xff0c;宣布与高通达成战略合作&#xff0c;未来全系产品采用高通平台。赵明同时透露未来的产品动向&#xff0c;不排除未来与华为继续合作&#xff0c;采用鸿蒙操作系统的可能。赵明表示&#xff0c;Android操作系统依旧是荣耀的首选…

三周第三次课 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录

3.7 su命令1、su命令su命令是用来切换用户的&#xff1b;su命令需要使用- 进行切换&#xff0c;如果不使用- 也可以&#xff0c;但当前目录是在root下&#xff0c;没有彻底切换在root下 使用su命令创建文件&#xff0c;以指定用户的身份创建文件切换后显示-bash-4.2因为user5的…

html坐标绘制路径,canvas学习笔记之绘制简单路径

1 线段(直线路径)绘制线段一般步骤:moveTo(x,y) 移动画笔到指定的坐标点(x,y)lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y)stroke() 根据当前的画线样式&#xff0c;绘制当前或已经存在的路径2 矩形路径绘制矩形路径一般步骤:rect(x, y, width, height) 矩形路径&…

增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)

要想更好运用表单就要了解表单的的更多元素与属性&#xff0c;首先看看对表单基本了解。表单的基本了解 元素用于用户输入数据的收集元素是最重要的表单元素&#xff0c;有许多type其中是用于向表单处理程序提交表单的按钮。元素 元素定义待选择的下拉列表选项&#xff0c;元素…

给博客或站点加入百度统计

概述 记得刚接触百度统计的时候&#xff0c;苦于没有个人网站&#xff0c;不能加入统计代码查看访问量等数据。然后渐渐的忘了这件事。之前看别人博客中提及了百度统计&#xff0c;然后粗略的看了一下加入方法&#xff0c;觉得很惊喜&#xff0c;太简单了&#xff01; 加入方法…