前端基础之JavaScript
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
● 核心（ECMAScript） ------------>基础语法---------->必须要会的
● 文档对象模型（DOM） Document object model (整合js，css，html)----------->重要
● 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）------------>不重要
JavaScript引入方式
1.书写位置
# js文件
# 浏览器控制台
# script标签
2.注释（注释是代码之母:快捷键：ctrl + ?(单行), 多行的(ctrl+shift+?)）
3.结束符
JavaScript中的语句要以分号（;）为结束符。
4. 变量声明
es5:
var name = 'kevin';
es6:
let name='kevin'
5. 变量的命名
# 基本上遵循python的变量命名规则即可
# 下划线、驼峰体、大驼峰、小驼峰
6. 常量
# python没有真正意义上的常量，全大写就是常量
# js中有真正意义上的常量，一旦声明，其值就不能轻易改变
# 如何定义常量
const pi = 3.14
JavaScript数据类型
JavaScript也是一门面向对象的语言，一切皆对象
查看数据类型：typeof
console.log(type of)
数值（Number）
var a=1;
var b=2.2;
整数和小数都为数值,还有一种NaN，表示不是一个数字
字符串（string）
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld
# 拼接字符串一般使用“+”
1. 常用方法
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
2.ES6中引入了模板字符串。
模板字符串（template string）是增强版的字符串，用反引号（）标识。 它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 var name = "jason", time = "today"; Hello ${name}, how are you ${time}?`
布尔值
""(空字符串)、0、null、undefined、NaN都是false。
# null和undefined
● null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
● undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
数组（也就是列表）
常用方法：
方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素，并向数组添加新元素。
.map() 返回一个数组元素调用函数处理后的值的新数组
运算符
算术运算符
+ - * / % ++ --
eg：
var x=10;
var res1=x++;
var res2=++x;
res1;
10
res2;
12
这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！
比较运算符
> >= < <= != == === !==
# ===(强等于，即比较数值，又比较类型)
逻辑运算符
&&(and)
||(or)
!(not)
复制运算符
= += -= *= /=
流程控制
if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if-else if-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
内置对象和方法
Date对象
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
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);
REFEXP对象（正则对象）
// 定义正则表达式两种方式
var reg1 = new RegExp("[1][a-zA-Z0-9]{5,11}");
var reg2 = /[2][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 = /[3][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/第二个注意事项，全局匹配时有一个lastIndex属性/
// 校验时不传参数
var reg2 = /[4][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);
var reg3 = /undefined/;
reg3.test();
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) 返回角的正切。
浙公网安备 33010602011771号