JavaScript基础## 标题
JavaScript的组成
- ECMAScript - 简称es,JavaScript的基本语法。(js基础)—ES5
- DOM - 文档对象模型,用来操作页面上的标签。
- BOM - 浏览器对象模型,用来操作浏览器的部分功能。
js的书写方式
一、内嵌式:
在一个固定的标签 —— script , 写js代码
<script>
alert('邮箱的名字不合理');
</script>
二、外联式:
在外部准备一个js文件,使用script标签引入
// 语法 <script src="js文件的路径" ></script>
<script src="./01.js"></script>
三、行内式:
写在标签的属性里面的,通常都是 onXXX 这些属性里面
<input type="button" value="按钮" onclick="alert('hello world');">
注释语法
多行注释
/* 多行注释,用于注释多行 */
单行注释
// 单行注释
// alert('123');
四个常用js方法
alert()弹窗提示
// 弹窗提示
alert('不好意思,您的账号输入错误!');
prompt()弹窗文本输入框
prompt("请输入你的银行卡密码"); // 同样使用引号包起来
console.log()
作用:这个方法可以在开发者工具的 Console
选项,也就是我们所说的控制台
里面输出消息
// 在浏览器控制台窗口显示内容(后期主要用于调试代码)
console.log('测试一下~')
document.write()
作用:这是一个比较早期的时候,浏览器里面提供的一个在页面的body标签里面输出消息的方式,现在很少用了
//使用js把内容写入页面
document.write('今天天气真好');
变量
什么是变量
——变量就是存储数据的容器!!!
var 变量名 = 数据;
变量定义分为两个过程:**变量声明和变量赋值**
// 变量声明
var a;
// 变量赋值
a = 10;
var可以同时声明多个变量名
变量命名规范
- 能够使用那些字符 : 数字、字母、下划线、$
- 不能使用数字开头
- 不能使用js里面具有特殊功能的单词 —— 关键字,也不建议使用保留字
- 区分大小写
- 命名语义化——建议使用驼峰命名(多个单词组成的一个变量名)
- 大驼峰MyFirstName——所有单词首字母大写
- 小驼峰myFirstName——第一个单词首字母小写,其他的单词的首字母大写
JavaScript 中最重要的保留字(按字母顺序):
abstract | else | instanceof | super |
---|---|---|---|
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
数据类型
五大简单的数据类型
简单数据类型(基本数据类型、值类型):number、string、boolean、null、undefined
**复杂数据类型(引用数据类型):**数组,对象,函数—— 后面会学习
数值类型number
其实就是数字,就是整数、小数、负数…
var num1 = 123;
可以做加减法
但是小数相加会有bug
console.log(0.1 + 0.2); // 不是0.3 , 是一个不准确的数字
这是由于二进制的缘故
字符串类型string
字符串主要作用就是用来表示文本的,单词、字母、汉字、文章、名字…
'字符'
"字符"
如果引号里面还要出现引号
// 1.嵌套引号
console.log('<div id="box"></div>');
// 2 转义字符
console.log("<div id=\"box\"></div>")
字符串拼接:
var name = "阿伟", age = "18";
var str = name+"今年"+age+"岁了";
布尔类型boolean
是在编程中专门为了表示条件结果的,只有两个值: true 和 false
true - 表示结果成立,为真
false - 表示结果不成立,为假
var result = 4 > 5;
console.log(result);// false ,因为 4 > 5 不成立
var res = 5 < 6;
console.log(res); // true 因为 5 < 6 成立
null和undefined
undefined —— 未定义 ,声明了变量但是没有赋值,就是undefined
null —— 空 , 什么都没有 , 通常也是不会主动使用,而是得到的一个结果是null
prompt('输入框'); // 如果点击了取消,就是 null
返回数据类型关键字——typeof
typeof 数据;
typeof(数据);
数据类型转换
主要是三大类:转成数字、转成字符串、转成布尔
把其他转成数字: Number() 、 parseInt() 、 parseFloat()
把其他转成字符串:String() 、.toString()
把其他转成布尔: Boolean()
转成数字
Number(数据) // 把其他的类型转换为数字
parseInt(数据) // 把字符串转换为整数
parseFloat(数据) // 把字符串转换为小数
转换为字符串
例:
var res2 = String(true);
var res3 = (123).toString();
转换为布尔
Boolean(数据);
只有以下几个是false,其他都是true
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(false));
console.log(Boolean(NaN));
算术运算符
+
操作符
数字相加
1. 字符串 + 其他 = 字符串
会把其他类型 转换为 字符串 , 两个字符串连接到一起
2. 数字 + 数字 = 数字
会把其他类型 转换为 数字 ,再相加
-
操作符
数字相减
都是优先把非数字的转换为数字,再运算
var res3 = '456' - 123;
console.log(res3); // 输出 数字 333
var res4 = 'abc' - 123;
console.log(res4); // 输出NaN
这是因为,数字和字符串在相减的过程中,会把字符串隐式转换成数字,再相减。但是如果字符串在转换的过程中,无法转换成数字,就会转换成NaN,再计算就无法得到一个正确的数字结果
*
操作符
作用是两个数字相乘
/
操作符
作用是两个数字相除
%
操作符
作用是两个数字求模(得到余数)
a % b 取模运算:
a能不能被b整除 无法整除的部分就是余数
取模就是 得到a除以b的余数
比如:奇偶数判断
隐式转换
隐式转换是指在数据在参与运算的过程中,数据根据操作符的运算规则自动进行的数据类型转换。
- 加法会发生字符串拼接的情况
- 减法、乘法、除法……默认都会调用Number
比较运算符
> < >= <=
以上都是和数学里面的比较是一样的规则
==
判断两个值是否相等(数字和字符串)
console.log(5 % 2 == 0);
!=
判断两个值不相等
console.log(5 % 2 != 0);
===
判断类型和值是否相等
console.log(undefined === null);
!==
判断类型和值是否不相等
// 特殊的数字NaN,和谁都不相等
console.log(NaN == NaN); // false
// 如何验证一个数据, 不是NaN
// isNaN(数据) 判断一个数据是否是NaN
console.log(isNaN(NaN)) // NaN是一个NaN, 所以得到的是true
console.log(isNaN(123)) // 123不是一个NaN, 所以得到的是false
补充算术操作符
++ 自增运算符
数据++; 数据++ 先拿数据原本的值进行计算,计算完后,再自增
++数据; ++数据 先自增,自增的结果来参与计算
var a = 10;
a++; // 或者 ++a;
console.log(a); //11 相当于 a = a + 1的结果,实现数据自增1
– 自减运算符
数据--;先拿数据原本的值进行计算,计算完后,再自减
--数据;先自减,自减的结果来参与计算
赋值操作符
赋值运算符 =
执行过程:
先执行 = 右边的代码,得到结果,再给 = 的左边
var num = 30;
// num = num + 20;
// 简写方式
num += 20;
console.log(num); // 50
// -= *= /= %=
逻辑操作符
&&
与
&&
与:用在需要多个条件同时成立的时候;
// 用户在登录的时候要用户名和密码同时正确才能登录
var userName = prompt('请输入用户名');
var password = prompt('请输出密码');
console.log(userName === 'admin' && password === '123456');
// 只有 && 两边的 结果都是 true ,最终结果才是 true
||
或
||
或:用在只需要任意条件成立的时候
// 只要年龄小5岁或者身高小于120cm就可以免费乘坐
var age = parseInt(prompt('请输入你的年龄'));
var height = parseFloat(prompt('请输入你的身高'));
console.log(age < 5 || height < 120);
// 只要 || 两边的结果有一个是true,最终结果就是true
!
非
!
非:用于颠倒是非的时候;
var res = true;
console.log(!res);
console.log(!!res);// 转布尔值
// 这里暂时用不到,在后面做具体效果的时候都用,那个时候我们再学习具体的使用
操作符的优先级
1. 第一优先级: [] . ()
2. 第二优先级: ++ -- !
3. 第三优先级: * / %
4. 第四优先级: + -
5. 第五优先级: > >= < <=
6. 第六优先级: == != === !==
7. 第七优先级: &&
8. 第八优先级: ||
9. 第九优先级: = += -= *= /= %=
1. 括号先算
2. 其次算算术
3. 再次算比较
4. 然后算逻辑
5. 最后算赋值
分支结构
if/else结构
只有一个条件的判断:
if( 条件表达式 ){
条件表达式的结果是true的时候要执行的代码
}
var gender = prompt('请问您的性别是男的吗');
if( gender === '男' ){
alert('男厕所在二楼的最东边,请去吧');
}
两个条件的判断:
if( 条件表达式 ){
条件表达式的结果是true的时候要执行的代码
}else {
条件表达式的结果是false的时候要执行的代码
}
var gender = prompt('请告诉我你的性别');
if(gender === '男'){
alert('男厕所在二楼的最东边,请去吧');
}else {
alert('女厕所在3楼的西边');
}
多个条件的判断:
if( 条件表达式1 ){
条件表达式1的结果是true的时候要执行的代码
}else if(条件表达式2){
条件表达式2的结果是true的时候要执行的代码
}else if(){
}
// 如果还有更多的判断,继续写 else if ()
else {
以上的条件都不为true,就会执行这里的代码
}
var num1 = +prompt("请输入一个数字(1~7):");
if(num1 === 1){
console.log("星期一");
}else if(num1 === 2){
console.log("星期二");
}else if(num1 === 3){
console.log("星期三");
}else if(num1 === 4){
console.log("星期四");
}else if(num1 === 5){
console.log("星期五");
}else if(num1 === 6){
console.log("星期六");
}else if(num1 === 7){
console.log("星期日");
}else{
// 这里的代码,当上面所有条件都不成立, 就执行这里的代码
console.log("请务必输入1-7");
}
switch结构
在js里面如果是比较固定值,推荐使用swtich-case结构
switch (变量){
case 要比较的固定的值1:
变量和 固定的值1 === 的时候要执行的代码
break;
case 要比较的固定的值2:
变量和 固定的值2 === 的时候要执行的代码
break;
case 要比较的固定的值3:
变量和 固定的值3 === 的时候要执行的代码
break;
default:
当以上所有的条件都不成立的时候,代码在这里执行
break;
}
三元表达式(补充)
三元(三目)表达式的使用是简写if-else结构
表达式1 ? 表达式2 : 表达式3
// 如果表达式1 成立, 那么就执行表达式2
// 如果表达式1 不成立, 那么就执行表达式3
//例如: 求二个数字中谁更大
var a = 10; var b = 20;
var max = a > b ? a : b;
console.log(max);
if/else结构,多用于判断区间、不定值判断
switch-case 只能用于定值判断
循环结构
for循环
for(初始化表达式 ; 条件表达式 ; 递增或者递减表达式){
循环体(需要重复执行的代码)
}
for(var count = 0;count < 6; count++){
console.log('javascript天下无敌!!!');
}
执行过程:
1.先执行初始化表达式
2.判断条件是否成立
3.如果成立,执行循环体
4.执行递增表达式
重复2~4,直到第2步的条件为false,就结束循环
while循环
语法
while( 条件表达式 ){
当表达式的结果是true的时候,这里面的代码会重复的执行,直到条件为false
循环体(需要重复执行的代码)
}
当条件表达式永远为true时,形成死循环
执行过程:
1.先判断条件是否成立
2.如果成立,会执行循环体
3.重复1~2过程,直到条件为false为止
do-while循环
语法:
do {
循环体(需要重复执行的代码)
}while (条件)
**执行过程:**
1.先执行循环体1次
2.再判断条件是否成立
3.如果成立,就执行循环体
4.重复2~3多次,直到条件是false为止
深入for循环使用
条件表达式会发生隐式转换
条件表达式, 会发生隐式转换(Boolean)
循环的结束语句
break关键字
作用:
1.阻止switch-case结构的继续判断
2.阻止循环的继续执行,然后break之后的代码就不会执行了
语法:
for(var i=1;i<=5;i++){
if(i===3){
break;
}
console.log(i);
}
continue关键字
作用
跳过当前这一次循环,继续执行下一次循环
for(var i=1;i<=5;i++){
if(i===3){
continue;
}
console.log(i);
}
循环总结
- 当我们需要多次执行同样的代码的时候,就可以使用循环来实现。
- while、do-while可以用于未知次数循环的,for可以用于已知次数循环的(最常用的)。
- while、for循环可能一次循环都不执行, do-while循环至少执行一次。
- 终止整个循环,使用break;跳过一次循环,使用continue。
数组
数组是一个有顺序、有长度的数据集合
定义数组
// 先定义一个数组
var arr = [];
console.log(arr);
// 另一种定义方式
var arr = new Array();
数组存值
数组中的数据使用索引管理。索引就是序号,只不过数组中的数据从0开始
// 声明一个空数组
var arr = [];
// 或者 var arr = new Array();
//把成绩存储到数组中
arr[0] = 91;
arr[1] = 88;
arr[2] = 72;
arr[3] = 45;
arr[4] = 63;
console.log(arr); // 输出 [91,88,72,45,63] 就是一个数据集合
或
var arr = [91,88,72,45,63];
console.log(arr); // 输出的结果是一样的
数组取值(索引)
把数据存储在数组里面,是为了将来能使用的,所以要从里面把数据取出来。数据取值同样使用索引取。
语法
console.log(arr[0]);
var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
console.log(sum); // 输出370
遍历数组
语法
var sum = 0;
for(var i = 0; i <= 4; i++){
sum += arr[i];
}
console.log(sum); // 输出 370,和我们一个一个相加是一样的
数组长度
数组长度:就是数组中数据的个数
console.log(arr.length); // 数组.length 就是数组的长度
遍历的完善一下(简写)
for(var i = 0; i <= arr.lensgth - 1; i++){
console.log(arr[i]);
}
// 简化一下
// 把 <= 的 = 号 去掉,会使循环的次数少一次,我们把上限次数+1,就变成了 i < arr.length - 1 + 1 ,最终:
for(var i = 0; i < arr.lensgth; i++){
console.log(arr[i]);
}
prompt中转行
// \ 转义符号 \r\n 换行
prompt("请选择: \r\n1.xxxxx \r\n2.xxxx \r\n3.xxxx");
字符串切割(掌握)
字符串.split(指定分隔符)
var str = '12,88,72,6';
// 以逗号为分隔符,分割字符串,得到一个数组
var arr = str.split(',');
console.log(arr); // 输出 ['12','88','72','6']
获取当前的日期和时间
创建Date对象:
var date = new Date();
console.log(data); // 系统时间不同,输出的结果也会不同,但是都是输出当前系统的时间
获取时间的各个部分:
var date = new Date();
// 获取年份
var year = date.getFullYear();
console.log(year);
// 获取月份 , 得到的月份是从0开始的 ,使用 0-11 表示 1-12 月
var month = date.getMonth()+1;
console.log(month);
// 获取天 几号
var day = date.getDate();
console.log(day);
// 获取星期数
var d = date.getDay();
// 获取小时
var h = date.getHours();
console.log(h);
// 获取分钟
var m = date.getMinutes();
console.log(m);
// 获取秒数
var s = date.getSeconds();
console.log(s);
// 获取毫秒
var ms = date.getMilliseconds();
// 返回事件戳。1970年1月1日 0时0分0秒到现在的毫秒值
// 最初计算机操作系统是 32 位,而时间也是用 32 位表示。
// 最长时间是 68 年
// 最早出现的 UNIX 操作系统考虑到计算机产生的年代和应用的时限
// 综合取了 1970 年 1 月 1 日作为 UNIX TIME 的纪元时间
var dateTime = date.getTime();
// 把需要补0的先补上
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
if (h < 10) {
h = '0' + h;
}
if (m < 10) {
m = '0' + m
}
if (s < 10) {
s = '0' + s;
}
console.log("现在是: " + year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s + ",星期" + d);
随机功能
Math对象
获取随机数:
// 获取随机数
var r = Math.random();
console.log(r); // 输出一个在 [0,1) 之间的浮点数,可以得到0,但是无法得到1
*对浮点数取整:
取整才能得到10
r = Math.floor(r);
console.log(r); // 得到一个在 [0,10] 之间的整数
函数
函数的定义
函数就是一段可以重复执行的代码段。
语法
// 1. 定义函数(函数声明式):
function 函数名(){
函数体 - 需要重复时候用的代码
}
// 2. 调用函数(函数调用式):
函数名();
tellStory(); //此时在控制台中就会输出一个故事
// 如果想输出多次,就可以调用多次这个函数
// 每调用一次,就会执行一次,做了代码的重复使用。
函数的参数
function 函数名(参数){
函数体
}
总结:
函数的参数可以一个,也可以是多个,只要在重复的过程中,有多个会产生变化的数据,都可以使用参数的方式解决
在定义函数时写的占位用的参数,我们称为**形参**,在调用函数,实际参与函数执行的参数,我们称为**实参**
函数的返回值
函数执行完毕之后会有一个执行结果,该结果就叫 —— 返回值
function 函数名(参数){
return 想要的数据
}
书写函数的步骤
- 写出要实现的过程
- 分析过程中哪些是会变化的,哪些是不会变化的
- 把变化的作为参数,不变的作为函数体
- 按照函数的语法把代码写来
- 考虑是否需要修改函数的返回值
函数表达式
var 函数名 = function(参数){
函数体
}
var getSum = function(a,b){
return a + b;
}
匿名函数
没有名字的函数
function (参数){ 函数体 }
自调用函数
// 立即执行函数
(function({
// 写一些为了避免变量污染的代码
}))();
js中的作用域
函数和变量的有效范围就是作用域
作用域:
作用域就是指定一个变量或者一个函数的作用范围。
能在页面的任何位置都可以访问,称为 全局作用域
只能在局部(函数内)访问,称为为 局部作用域
在全局作用域下声明的变量,称为 全局变量
在局部作用域下声明的变量,称为 局部变量
上述代码中,a是全局变量,b是局部变量
ES5中只有函数才有作用域,所谓是局部作用域也可以叫函数作用域。
作用域的作用就是为了把数据进行保护,不让外部的数据对我们的数据进行污染
函数和变量声明的提升
JS是解释性语言,JS引擎对代码的处理分为两步:
**1、预解析处理:**在代码执行之前,对代码做全局扫描,对代码中出现的变量和函数提前声明处理;
var a;//变量提前声明,但不初始化
//函数提前声明
function f() { };
2、**调用执行:**然后自上而下的执行代码
声明提升的规则
1、变量和变量同名,解析之后只存在一个当前变量的声明。
2、**函数和函数同名,后面的声明将前面的覆盖
3、函数和变量同名,只有函数声明提升,忽略变量的声明。
4、如果是命名函数,则只将前面的变量声明提升,函数不动。(函数表达式 只会提升变量声明)
5、声明变量不适用var ----- 就是全局变量(语法不规范)
a= 10;
// 不适用var 声明变量 不管在哪里都是全局变量
var a = b = c = 9;// 从右往左赋值
函数参数是局部变量
function fn(a){// 函数参数是局部变量
// 相当于 var a = 20
a = 10;}
虽然多个变量x同名,但是不同作用域内优先使用自己内部作用域的变量x。
函数b内部没有变量b,会向自己的外面的作用域查找x变量,函数a内的x变量离函数b最近,会优先得到函数a的变量x
函数b内部没有x变量,会向函数a的作用域查找,但是函数a内部也没有x变量,会向函数a的上一层作用域再查找,直到查找到了全局作用域。
函数b内部没有变量x,会顺着上层作用域一层一层地查找,直到全局作用域也没有,就会报错。
总结:
- 只有函数可以制造作用域链结构
- 只要是代码,就至少有一个作用域,即全局作用域。
- 凡是代码中有函数,那么这个函数就构成另一个作用域。
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。
- 将这样的所有的作用域列出来,可以有一个结构:函数内指向函数外的链式结构——作用域链。
- 由内而外的访问规律,一直向外找,找不到,报错。
arguments
获取所有实参的对象:arguments
语法:
function fn(){
console.log(arguments);
}
fn(1); // 输出 [1]
fn(1,2) // 输出 [1,2]
fn(1,2,3,4,5) // 输出 [1,2,3,4,5]
注意: arguments这个东西只能在函数内部使用,也不需要我们声明,只要我们在函数中直接使用就行
求和:
function getSum(){
var sum = 0;
for(var i = 0; i < arguments.length ; i++){
sum += arguments[i];
}
return sum;
}
getSum(1,2,3);// 输出 6
getSum(1,2,3,4,5); // 输出15
短路运算
逻辑 && 且,一false全false。结果为true的时候,返回最后一个为true的值,结果为false,返回第一个为false的值;
console.log(2 && 3); // 3
console.log(0 && 3); // 0
console.log(0 && null); // 0
// 如果是true,得到右边,如果左边是false,得到左边
// 两边都为false,返回第一个为false
逻辑 || 或,一true全true。结果为true的时候,返回第一个为true的值,结果为false,返回最后一个为false的值;
console.log(2 || 3); // 2
console.log(0 || 3); // 3
console.log(0 || null); // 0
// 如果左边是true,得到左边,如果左边是false,得到右边
// 两边都为false,返回最后一个为false
短路运算在函数中的使用:
对象
创建对象
方法一:字面量创建对象
var obj = {}; // 这是一个空对象,什么内容都没有
里面用逗号隔开“,”
console.log(obj);
方法二:使用Object内置对象创建对象
var obj = new Object(); // 这是一个没有属性和方法的对象
用分号隔开“;”
console.log(obj);
方法三:工厂函数创建对象
为对象添加值
对象的值(对象成员)有两类:
- 属性(变量,一般表示对象的静态属性)
- 方法(函数,一般表示对象的动态行为)
添加属性的语法:对象.属性 = 值;
添加方法的语法:对象.方法名 = function(){}
var obj = {};
obj.name = '阿伟';// 名字是一个人的特征
obj.sayName = function(){ // 人会说出自己的名字,也就是人有自己的行为
console.log('你好,我叫阿伟');
}
**字面量初始化对象:**
// 描述一个学生
var student = {
name : '阿伟',
age : 12,
gender : '男',
sayName : function(){
console.log(student.name);
}
}
// 属性和值之间使用分号分隔,一个属性和一个值叫一个键值对。多个键值之间使用逗号分隔
工厂函数创建对象
封装成函数
语法:
function createObj() {
var obj = new Object();
obj.name = '阿伟';
obj.sayName = function(){
console.log('你好,我叫阿伟');
}
}
我们需要得到这个封装好的对象,那么就需要返回这个对象。
function createObj(name) {
var obj = new Object();
obj.name=name;
obj.sayName = function(){
console.log('你好,我叫'+name);
}
return obj;
}
工厂函数的优点:值是活的,可以批量操作,减少重复代码。
使用对象的属性和方法
语法:
// 得到对象的名字,属性可以当成变量使用
console.log(obj.name);
// 调用对象的方法,方法的本质是函数
obj.sayName();
键的方式访问对象的属性和有方法
语法:`对象[属性名]`
var obj = {};
obj['name'] = '狗蛋';
obj['sayName'] = function(){
console.log('你好,我叫' + obj['name']);
}
obj['sayName']();
遍历对象
语法:
for(var key in obj){
console.log(key);// 键名
console.log(obj[key]); // 每个key对应的键值
}
渲染表格
var datas = [
{ name: '狗蛋', age: 18, gender: '男' },
{ name: '翠花', age: 19, gender: '女' },
{ name: '来福', age: 17, gender: '男' }
]
var str = `<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>`
for (var i = 0; i <= datas.length; i++) {
str += `<tr>`;
var obj = datas[i]
for (var key in obj) {
str += `<td>${obj[key]}</td>`;
}
str += `</tr>`;
}
str += `</table>`;
// 在页面中输出这个表格的字符串
document.write(str);
内置对象
js里面的对象分成三大类:
-
内置对象
- Array Date Math
- 所谓内置对象,就是JavaScript自带的一些功能对象,里面提供了很多常用、实用的属性和方法,我们需要做的就是学习这些属性和方法怎么使用,在需要用的时候直接用就行
-
宿主对象
- 浏览器提供的对象(如bom、dom等等)
-
自定义对象
- 开发人员自己定义的对象
数学对象——Math
Math.random()
生成一个 [0,1) 之间的随机浮点数**
var r = Math.random();
console.log(r);// 每次执行等到的数字都一样
Math.floor(x)
浮点数进行向下取整**
向下取整就是从这个数字开始,朝数轴的左边找到一个离它最近的整数
console.log(Math.floor(3.9)); // 3
console.log(Math.floor(-3.1)); // -4
Math.round(x)
浮点数四舍五入取整(正5入负5舍)
console.log(Math.round(3.2));// 3
console.log(Math.round(3.5));// 4
console.log(Math.round(-3.5));// -3
console.log(Math.round(-3.51));// -4
Math.ceil(x)
浮点数进行向上取整**
向上取整就是从这个数字开始,朝数轴的右边找到一个离它最近的整数
console.log(Math.ceil(3.1));//4
console.log(Math.ceil(3.5));//4
console.log(Math.ceil(-3.5));//-3
console.log(Math.ceil(-3.9));//-3
Math.abs(x)
求一个数的绝对值absolute**
console.log(Math.abs(3)); // 3
console.log(Math.abs(-3)); // 3
Math.max(x,y…)
求多个数字中的最大值
这个方法的参数个数是不限定的,想写几个就写几个
console.log(Math.max(10,20)); // 20
console.log(Math.max(8,4,5,7,3)); // 8
Math.min(x,y…)
求多个数字中的最小值**
这个方法的参数个数是不限定的,想写几个就写几个
console.log(Math.max(10,20)); // 10
console.log(Math.max(8,4,5,7,3)); // 3
数组 —Array对象
push()
从数组最后增加成员**
var aList = [1,2,3,4];
var res = aList.push(5);
console.log(res); //5 返回添加元素后,数组的长度
console.log(aList); //[1,2,3,4,5] 原数组。改变
pop()
从数组最后删除成员
var aList = [1,2,3,4];
var res = aList.pop();
console.log(res); //4 返回被删除的元素
console.log(aList); //[1,2,3] 原数组。改变
unshift()
从数组前面增加成员**
var aList = [1,2,3,4];
var res = aList.unshift(5);
console.log(res); //5 返回添加元素后,数组的长度
console.log(aList); //[5,1,2,3,4] 原数组。改变
shift()
从数组前面删除成员
var aList = [1,2,3,4];
var res = aList.shift();
console.log(res); //1 返回删除的元素
console.log(aList); //[2,3,4] 原数组。改变
reverse()
将数组反转**
var aList = [1,2,3,4];
var res = aList.reverse();
console.log(res); //[4,3,2,1] 返回翻转后的数组
console.log(aList); //[4,3,2,1] 原数组。改变
splice(index,多少,项1,项2…)
从数组中添加或删除项目,返回删除的项目**
删除从 index 处开始的零个或多个元素,
并且用参数列表中声明的一个或多个项,来替换那些被删除的元素(如果没有,则不替换)
var aList = [1, 2, 3, 4];
var res = aList.splice(2, 1,'a','b');
console.log(res); //[3] 返回切割掉的元素
console.log(aList); //[1,2,'a','b',4] 原数组。改变
aList.splice(0); // 清空数组
以下的方法不会改变原数组
slice(start,end)
切割数组,返回切割项目**
选取从数组 start位置 到数组的 end位置(不包含end位置) 所有元素,
如果没有end,选取从 start 到数组结尾的所有元素
var aList = [1,2,3,4];
var res = aList.slice(0,2);
console.log(res); //[1,2] 返回切割掉的元素
console.log(aList); //[1,2,3,4] 原数组。不变
indexOf()
返回数组中元素第一次出现的索引值
var aList = [3,2,"a",1,2,3,"a"];
var res = aList.indexOf("a");
console.log(res); //2
var res2 = aList.indexOf("a",3);
console.log(res2)
join()
将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
var res = aList.join('-');
console.log(res); //1-2-3-4 返回合并后的字符串
console.log(aList); //[1,2,3,4] 原数组。不变
forEach
遍历数据的方法**
// 作用: 遍历数组
arr.forEach(function(item,index){
item 是数组里面的每个元素
index 是数组的每个索引
})
filter
数组筛选之后返回新数组
// 作用: 把数组中满足条件的元素,放到一个新的数组里面
var result = arr.filter(function(item,index){
return 条件
// item就是当前遍历到的这个元素, index是这个元素索引
return item > 20
});
map
数据处理之后返回新数组
var newArr = arr.map(function(item,index){
item+=3;
return item;
})
concat
用于合并两个或多个数组**
var arr1 = [1,2,3],arr2=[5,6,7];
var arr3 = arr1.concat(10,20,arr2);
console.log(arr1,arr2,arr3)
String内置对象
字符串合并操作:“ + ”
var num1 = 123;
var str2 = 'def';
console.log(str1+str2) // 123def
split()
把一个字符串按某种方式分隔成字符串组成的数组
var str2 = 'a-b-c';
var arr2 = str4.split('-');
console.log(arr4) // ['a','b','c']
charAt()
获取字符串中的某一个字符
var str3 = 'hello word'
var res = str3.charAt(2)
console.log(res)//l
indexOf()
查找字符串是否含有某字符**(和数组一样的使用方式)
substring()
截取字符串 用法**: substring(start,end)(不包括end)截取从star开始,到end之间的字符串
如果只传一个值,表示从这个位置开始,一致截取到字符串末端
注意: substring是以两个参数中较小一个作为起始位置,较大的参数作为结束位置
var test = 'hello world';
alert(test.substring(7,4)); //o w
注意: 如果substring里面碰到负数,则干脆将负参数都直接转换为0
var test = 'hello world'
alert(test.substring(-3)); //hello world
alert(test.slice(3,-4)); //lo w
substr(index,n) :
从index索引位置开始截取,截取n个字符
如果只传一个值,表示从这个位置开始,一致截取到字符串末端
toUpperCase() 字符串转大写
toLowerCase() 字符串转小写
replace(旧字符, 新字符)
该方法会返回一个新字符串,原字符串不改变
var str9 = 'hello word'
var res = str.replace('word','hhhhhhhh')
console.log(res)// hello hhhhhhhh
Date内置对象
可以获取 时间+日期
var date = new Date(); // 当前的系统的时间和日期
console.log(date.getFullYear());// 年份
console.log(date.getMonth()); // 月份,从0开始
console.log(date.getDate()); // 当前天数
console.log(date.getHours()); // 小时,0-23
console.log(date.getMinutes()); // 分钟 , 0-59
console.log(date.getSeconds()); // 秒数 , 0-59
console.log(date.getMilliseconds()); //毫秒 0-999 1000毫秒=1秒
返回距 1970 年 1 月 1 日之间的毫秒数
date.getTime()
或者
+date 也可以获取距 1970 年 1 月 1 日之间的毫秒数
也可以生成一个指定的日期
1.传入不同的年月日时分秒
var d1 = new Date(2020,0,1,8,30,59); // 2020年1月1日 8:30:59
2.传入一个指定的字符串
var d2 = new Date('2020-01-01');
3.传入一个 大的数字 -- 从1970年1月1日开始到某个日期的总共的毫秒数
var d3 = new Date(1378594320999);