1.JavaScript引入方式
#标签内部写js代码
<script> // 在这里写你的JS代码 </script>
#引入额外的JS文件
<script src="myscript.js"></script>
2.JavaScript代码注释风格
// 这是单行注释
/*
这是
多行注释
*/
3.JavaScript基础之变量
#变量声明
var name = "Xufengfan";
var age = 18;
不可使用关键字,变量分大小写
ES6语法中:
新增let用来声明变量,其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效:
for (let i=0;i<arr.length;i++){...}
新增const声明常量,一旦声明,其值就不能改变:
const PI = 3.1415;
PI // 3.1415
PI = 3
// TypeError: "PI" is read-only
4.JavaScript数据类型:
#数值(number)
JavaScript不区分整型和浮点型,就只有一种数字类型
var a = 15.6;
var b = 18;
还有一种NaN(Not a Number)
#字符串
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // Helloworld
// 字符串拼接
#布尔值(Boolean)
区别于Python,true和false在js中都是小写
var a = true;
var b = false;
//""、0、null、undefined、NaN都是false
#null和undefined
null为空,比如name=null,undefined是说明一个变量没有初始化
#对象(object)
JavaScript中所有事物都是对象,也允许自定义对象,对象只是带有属性和方法的特殊类型而已。
#数组
数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
#类型查询
typeof "abc" // "string"
typeof null // "object"
typeof true // "boolean"
typeof 123 // "number"
typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。
5.运算符
#算术运算符
+ - * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
#比较运算符
> >= < <= != == === !==
==表示弱等于,1==“1”为true,===表示强等于,即不止值要相等,类型也要相等
#逻辑运算符
&& || !
#赋值运算符
= += -= *= /=
6.流程控制
#if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
#if-else-else
var a = 10; if (a > 5){ console.log("a > 5"); }else if (a < 5) { console.log("a < 5"); }else { console.log("a = 5"); }
#switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
#for
for (var i=0;i<10;i++) { console.log(i); }
#while
var i = 0; while (i < 10) { console.log(i); i++; }
#三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
x
10
7.函数
#函数定义
// 普通函数定义
function f1() {
console.log("Hello world!");
}
// 带参数的函数
function f2(a, b) {
console.log(arguments); // 内置的arguments对象
console.log(arguments.length);
console.log(a, b);
}
// 带返回值的函数
function sum(a, b){
return a + b;
}
sum(1, 2); // 调用函数
// 匿名函数方式
var sum = function(a, b){
return a + b;
}
sum(1, 2);
// 立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
(function(a, b){
return a + b;
})(1, 2);
ES6中新增箭头函数(=>)来定义函数。
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
#函数参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}
add(1,2)
//输出3
//2
//1
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回
#函数的全局变量和局部变量
局部变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它
变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
作用域:
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层
8.Date对象
创建date对象
//方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2:参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3:参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4:参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示
date对象的方法:
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月(0-11)
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
9.JSON对象
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
10.RegExp对象
// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')
/*第一个注意事项,正则表达式中不能有空格*/
// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项,全局匹配时有一个lastIndex属性*/
// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();