JavaScript ☞ day1
2018-06-07 本文已影响0人
浪子彦卿L
JavaScript基础学习笔记之JavaScript基础
HTML中添加JS代码、注释方法、输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML中添加JS代码、注释方法、输出方式</title>
<!-- 外部添加JS代码，src属性为外部js文件的路径(绝对路径或者相对路径) -->
<!-- 绝对路径：从根目录开始链接的路径 -->
<!-- 相对路径：不从根目录开始链接的路径 -->
<script type="text/javascript" src="sunck.js">
//此时在此处写JS代码无效
console.log("测试是否有效");
</script>
</head>
<body>
<!-- 内部添加JS代码，使用script标签，不可以使用单标签 -->
<script type="text/javascript">
//双斜线注释单行
//注释掉的部分不影响程序的正常执行
/**
可以注释多行
注意：多行注释不能嵌套使用
*/
//输出方式
//1、页面上输出
document.write("sunck is a good man<");
//2、控制台输出
console.log("sunck is a handsome man");
//3、浏览器弹出框上输出
alert("sunck is a nice man");
</script>
<!-- script标签可以有多个，按顺序执行 -->
<script type="text/javascript">
console.log("我在第二个script标签里");
</script>
</body>
</html>
sunck.js文件内容
document.write("sunck is a good man-外部");
console.log("sunck is a nice man-外部");
alert("sunck is a handsome man-外部");
document输出标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document输出标签</title>
<style type="text/css">
#box{
width: 200px;height: 200px;background-color: red
}
</style>
</head>
<body>
<script type="text/javascript">
alert("即将用document输出标签");
document.write("<div id='box'></div>");
//下面两种当字符串输出
console.log("<div id='box'></div>");
alert("<div id='box'></div>");
</script>
</body>
</html>
JS中的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
/**
* JS中的数据类型
*
* 一、基本数据类型
* 1、数字(Number)：包括浮点数与整数
* 2、字符串(String)：包括由任意数量字符组成的序列
* 3、布尔值(Boolean)：包括true和false
* 4、Undefined：当我们试图访问一个不存在的变量时，就会得到一个特殊的值undefined。除此之外，使用已定义却未赋值的变量也会如此，以为js会自动将变量在初始化之前的值设定为undefined。而Undefined类型的值只有一个，那就是undefined
* 5、Null：只包含一个值的特殊数据类型。所谓的null值，通常是没有值或空值，不代表任何东西。null与undefined最大的不同在于，被赋予null的变量通常被认为是已经定义了的，只不过它不代表任何东西。
*
* 二、非基本数据类型(对象)
*/
</script>
</body>
</html>
标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标识符</title>
</head>
<body>
<script type="text/javascript">
/**
* 标识符：是一个字符串(注意：字符串未必是标识符)
* 标识符规则：
* 1、只能由字母、数字、下划线和$符号组成
* 2、开头不能是数字
* 3、不能是js的关键字和保留字
* 4、区分大小写
* 5、遵循驼峰原则
* 6、见名知意
*
* 作用：给变量、函数等命名的
*/
</script>
</body>
</html>
js中的保留字
js中的关键字
变量与常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量与常量</title>
</head>
<body>
<script type="text/javascript">
/**
* 变量：
* 1、程序可操作的存储区的名称
* 2、程序运行期间能改变的数据
* 3、每个变量都有特定的类型
* 变量的作用：将不同类型的数据存储到内存
*
*
* 变量的定义：var 变量名;
* 数据的存储：变量名 = 表达式;
*
*
* 常量：程序运行期间不能改变的数据
*/
</script>
</body>
</html>
数字和查看类型操作符typeof
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字和查看类型操作符typeof</title>
</head>
<body>
<script type="text/javascript">
//定义了一个名为num的变量
var num;
//打印变量num的值
console.log(num);
//打印变量的数据类型
//查看类型操作符typeof
console.log(typeof num);
//当num定义后没有任何赋值的情况下num的类型是Undefined，值为undefined
//定义了一个名为num1的变量
var num1;
//给变量赋值
//此时num1变量类型为数字类型，变量可以根据值的不同而改变类型
num1 = 1;
//打印类型
console.log(typeof num1);
//打印num1变量的值
console.log(num1);
//改变变量的值，直接赋值即可
num1 = 10;
console.log(num1);
//八进制数字
//八进制数以0开头
num1 = 0377;
//打印出的是八进制0377的十进制形式
console.log(num1);
//十六进制数字
//十六进制数以0x开头
num1 = 0xff;
//打印出的是十六进制0xff的十进制形式
console.log(num1);
//Infinity：特殊值，代表的是超出js处理范围的数值，但它依然是一个数字。
num1 = 1e308;
console.log(num1);
//超出表示范围
num1 = 1e309;
console.log(num1);
//任何数除以0结果为Infinity
console.log(10 / 0);
//Infinity与其他任何操作数执行任何算术运算的结果也是Infinity
console.log(num1 * 2);
//正负Infinity相加的结果？
//结果为NaN
console.log(Infinity + (-Infinity));
//NaN：表示不是数字，但事实上它依然属于数字类型，只不过是一种特殊的数字罢了
console.log(typeof NaN);
//如果我们在算术运算中使用了不恰当的操作数，导致运算失败，就会得到NaN
console.log(10 * 'f');
//NaN具有传染性，只要算术运算中存在一个NaN，整个运算就会失败
console.log(1 + 2 + NaN);
</script>
</body>
</html>
同一命名空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同一命名空间</title>
<script type="text/javascript" src="sunck.js"></script>
</head>
<body>
<!-- -->
<script type="text/javascript">
console.log(a);
a = 20;
</script>
<script type="text/javascript">
console.log(a);
</script>
</body>
</html>
sunck.js文件内容
var a = 10;
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
//js中一对双引号或单引号之间的任何都会被视为一个字符串
//定义了一个名为str的变量，类型为字符串类型
var str = "sunck is a good man";
//打印
console.log(str);
console.log(typeof str);
var arr = "!";
//两个字符串相加，相当于拼接
var ret = str + arr;
console.log(ret);
//数字+字符串:将数字转换成字符串后相加拼接
var num = 10;
ret = str + num;
console.log(ret);
</script>
</body>
</html>
布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布尔值</title>
</head>
<body>
<script type="text/javascript">
//布尔类型 Boolean
//只有两种值：true和false
var br = true;
console.log(br);
console.log(typeof br);
</script>
</body>
</html>
falsy值和truthy值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>falsy值和truthy值</title>
</head>
<body>
<script type="text/javascript">
/**
* flasy值常用于判断
* 1、数字:0
* 2、数字:NaN
* 3、空字符串:""
* 4、布尔值:false
* 5、undefined
* 6、null
*/
</script>
</body>
</html>
其它基本类型转换成Number类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其它基本类型转换成Number类型</title>
</head>
<body>
<script type="text/javascript">
//Number()
//功能：将其他类型数据转成Number类型数据
//1、Null-->Number
console.log(Number(null));//0
//2、Undefined-->Number
console.log(Number(undefined));//NaN
//3、Boolean-->Number
console.log(Number(true));//1
console.log(Number(false));//0
//4、String-->Number
//如果字符串中只有数字、小数点、(最前面空格 正负号)则转换成对应的十进制数
console.log(Number("123"));//123
console.log(Number("12.3"));//12.3
console.log(Number("+123"));//-123
console.log(Number("-123"));//-123
console.log(Number(" 123"));//123
//如果是一个空字符串，结果是0
console.log(Number(""));//0
console.log(Number(" "));//0
//如果字符串中含有非数字，非正负号，转换失败，结果NaN
console.log(Number("123abc"));//NaN
console.log(Number("123+456"));//NaN
console.log(Number("abc"));//NaN
//parseInt()
//功能：会试图将其收到的任何输入值(通常是字符串）转成整数类型，如果转换失败就返回NaN。
//转换规则：如果第一个非空白字符(空格、换行、tab)是数字或者正负号则开始转换，直到碰到第一个非数字字符停止转换。如果第一个非空白字符不是数字或者正负号，转换失败，结果是NaN.
console.log(parseInt("123"));//123
console.log(parseInt("+123"));//123
console.log(parseInt("-123"));//-123
console.log(parseInt(" 123"));//123
console.log(parseInt("12a3"));//12
console.log(parseInt("12.3"));//12
console.log(parseInt("12 3"));//12
//NaN
console.log(parseInt("true"));
console.log(parseInt(" .123"));
console.log(parseInt("+-123"));
//parseFloat()
//功能：会试图将其收到的任何输入值(通常是字符串）转成浮点数类型，如果转换失败就返回NaN。
console.log( parseFloat(" 2.5a") );//2.5
console.log( parseFloat(" .56") ); //0.56
console.log( parseFloat(" -.23")); //- 0.23
console.log( parseFloat(" +.23 + .1") );//0.23
console.log( parseFloat(" 3.14.956") ); //3.14
console.log( parseFloat("a3.14") ); //NaN
</script>
</body>
</html>
其它基本类型转换成String类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其它基本类型转换成String类型</title>
</head>
<body>
<script type="text/javascript">
//Null-->String
var str0 = "sunck" + null;
console.log(typeof str0);
console.log(str0);
//Undefined-->String
var str1 = "sunck" + undefined;
console.log(typeof str1);
console.log(str1);
//Boolean-->String
var str2 = true.toString();
console.log(typeof str2);//string
console.log(str2);//"true"
console.log(false.toString());//"false"
//Number-->String
var num = 10;
var str3 = num.toString();
console.log(typeof str3);//string
console.log(str3);//"10"
</script>
</body>
</html>
其它基本类型转换成Boolean类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其它基本类型转换成Boolean类型</title>
</head>
<body>
<script type="text/javascript">
//绝大部分值在转换为布尔类型时都为true，但以下6中falsy值除外
/**
* 1、""
* 2、null
* 3、undefined
* 4、0
* 5、NaN
* 6、false
*/
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(false));
</script>
</body>
</html>
isNaN()函数和isFinite()函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>isNaN()函数和isFinite()函数</title>
</head>
<body>
<script type="text/javascript">
//isNaN(info) 判断值是否是NaN，如果info===NaN则返回true，否则返回false
console.log(isNaN(NaN));//true
console.log(isNaN(parseInt("abc")));//true
console.log(isNaN(123));
</script>
<script type="text/javascript">
//isFinite() 检测输入是否是一个既非Infinity也非NaN的数字
console.log(isFinite(Infinity));//false
console.log(isFinite(-Infinity));//false
console.log(isFinite(NaN));//false
console.log(isFinite(123));//true
</script>
</body>
</html>
prompt输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入</title>
</head>
<body>
<script type="text/javascript">
//需求：定义两个变量a和b，通过框给变量a和b赋值，输出a+b的结果。
//通过输入框接收外部输入的值，存储给变量
var a = prompt("请输入变量a的值");
var b = prompt("请输入变量b的值");
console.log(typeof a);
console.log(typeof b);
console.log(a + b);
</script>
</body>
</html>
算数运算符和算数运算表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>算数运算符和算数运算表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 表达式：由变量、常量和运算符组成的式子称为表达式
* 如何阅读表达式？
* 1、阅读表达式的功能
* 2、阅读表达式的值
*/
/**
* 算数运算符：+ - * / %(取余)
*
* 算数运算表达式
* 功能：进行符号对象的算数运算，不会修改变量的值
* 值：相关算数运算的结果
*/
//1、Number + Number 直接数学运算
var num1 = 10;
var num2 = 20;
console.log(num1 + num2);
//1.任何数与NaN进行运算结果都是NaN;
//2.Infinity+(-Infinity) = NaN;
//2、Boolean/Undefined/Null + Number
//先转换成Number类型，然后进行算术运算
console.log(num1 + null);
//3、String+(Number/Boolean/Undefined/Null)
//+相当于是字符串的拼接符
console.log("str" + num1);
</script>
</body>
</html>
赋值运算符和赋值运算表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>赋值运算符和赋值运算表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 赋值运算符 =
*
*
* 赋值运算表达式 变量 = 表达式
* 功能：计算等号左侧"表达式"的值，并赋值给等号右侧变量
* 值：赋值结束后变量的值
*/
var num = 10;
var ret;
ret = num + 20;
console.log("ret = " + ret);
</script>
</body>
</html>
自增自减运算符和自增自减运算表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自增自减运算符和自增自减运算表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 自增运算符 ++
* 自增运算表达式 ++变量 变量++
*
* 功能：a++,++a都是自增运算表达式，功能都是将a的值加１
* 值：
* a++称为加前取值，先取值再增加，表达式的值是a增加之前的值。
* ++a称为加后取值，先增加后取值，表达式的值是a加后的值。
*/
var a = 1;
var b;
b = a++;
console.log(a);
console.log(b);
/**
* 自减运算符 ++
* 自减运算表达式 --变量 变量--
*
* 功能：m--,--m都是自减运算表达式，功能都是将a的值减１
* 值：
* m--称为减前取值，先取值再减少，表达式的值是a减少之前的值。
* --m称为减后取值，先减少后取值，表达式的值是a减少之后的值。
*/
var m = 1;
var n;
n = m--;
console.log(n);
console.log(m);
</script>
</body>
</html>
复合运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合运算符</title>
</head>
<body>
<script type="text/javascript">
/**
* 复合运算符 += -= *= /= %=
*
* a += 1 === a = a + 1
*/
var a = 1;
a += 1;
console.log(a);
</script>
</body>
</html>
if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* if (表达式)
* {
* 语句
* }
*
* 逻辑：当程序执行到if语句时，首先计算"表达式"的值，如果"表达式"的值为真，那么就执行if下大括号中的语句。如果"表达式"的值为假，则跳过整个if语句继续向下执行。
*
* falsthy值为假
*/
if (1) {
console.log("******");
}
</script>
</body>
</html>
if-else语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if-else语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* if (表达式)
* {
* 语句1
* } else {
* 语句2
* }
*
* 逻辑：当程序执行到if-else语句时，首先计算"表达式"值，如果"表达式"的值为真，那么执行语句1，执行完语句1则跳过整个if-else语句继续向下执行。如果"表达式"的值为假，那么执行语句2，执行完语句2则跳过整个if-else语句继续向下执行。
*
*
*
*/
if (1) {
console.log("真");
} else {
console.log("假");
}
</script>
</body>
</html>
关系运算符和关系运算表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符和关系运算表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 关系运算符 > < >= <= == === != !==
*
*
* 关系运算表达式 表达式1 关系运算符 表达式2
* 功能：计算"表达式1"和"表达式2"的值
* 值：如果关系成立，整个关系运算表达式的值为真，关系不成立，整个关系运算表达式的值为假
*
*
*/
var a = 1;
var b = "1";
console.log(a == b);
console.log(a === b);
var m = 1;
var n = "1";
console.log(m != n);
console.log(m !== n);
</script>
</body>
</html>
三目运算符和三目运算表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三目运算符和三目运算表达式</title>
</head>
<body>
<script type="text/javascript">
/**
* 三目运算符 ?:
*
*
* 三目运算表达式 表达式 ? 表达式1 : 表达式2
* 功能：如果"表达式"的值为真，则计算"表达式1"的值，否则计算"表达式2"的值
* 值：如果"表达式"的值为真，则整个三目运算表达式的值为"表达式1"的值，否则为"表达式2"的值
*/
var a = 1 ? 2 : 3;
console.log(a);
</script>
</body>
</html>
逻辑与运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑与运算符</title>
</head>
<body>
<script type="text/javascript">
/**
* 逻辑与运算符 &&
*
* 逻辑与运算表达式 表达式1 && 表达式2
*
* 值：
* 如果表达式1的值为真，表达式2的值为真，则整个逻辑与运算表达式的值为真
* 如果表达式1的值为真，表达式2的值为假，则整个逻辑与运算表达式的值为假
* 如果表达式1的值为假，表达式2的值为真，则整个逻辑与运算表达式的值为假
* 如果表达式1的值为假，表达式2的值为假，则整个逻辑与运算表达式的值为假
*
* 【有一个为假就为假】
*
*/
if (1 && 1) {
console.log("******1");
}
if (1 && 0) {
console.log("******2");
}
var a = 1;
var b = 1;
var c = 1;
if (a++ && --b && c++){
console.log("sunck is a good man");
}
console.log(a);
console.log(b);
console.log(c);
//惰性求值(短路原则)
//表达式1&&表达式2&&表达式3&&……&&表达式n
//【短路原则】从左至右依次计算表达式的值，当遇到某一个表达式的值为假，那么已经确认整个表达式的值为假，后面的表达式就不会再被计算了
</script>
</body>
</html>
逻辑或运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑或运算符</title>
</head>
<body>
<script type="text/javascript">
/**
* 逻辑或运算符 ||
*
* 逻辑或运算表达式 表达式1 || 表达式2
*
* 值：
* 如果表达式1的值为真，表达式2的值为真，则整个逻辑与运算表达式的值为真
* 如果表达式1的值为真，表达式2的值为假，则整个逻辑与运算表达式的值为真
* 如果表达式1的值为假，表达式2的值为真，则整个逻辑与运算表达式的值为真
* 如果表达式1的值为假，表达式2的值为假，则整个逻辑与运算表达式的值为假
*
* 【有一个为真就为真】
*
*/
if (1 || 1) {
console.log("******1");
}
if (0 || 1) {
console.log("******2");
}
if (1 || 0) {
console.log("******3");
}
if (0 || 0) {
console.log("******4");
}
var a = 1;
var b = 1;
var c = 1;
if (a++ || --b || c++){
console.log("sunck is a good man");
}
console.log(a);
console.log(b);
console.log(c);
//惰性求值(短路原则)
//表达式1||表达式2||表达式3||……||表达式n
//【短路原则】从左至右一次计算表达式的值，当遇到某一个表达式的值为真，那么已经确认整个表达式的值为真，后面的表达式就不会再被计算了
</script>
</body>
</html>
逻辑非运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑非运算符</title>
</head>
<body>
<script type="text/javascript">
/**
* 逻辑非运算符 !
*
* 逻辑非运算表达式 !表达式
*
* 值：
* 如果表达式的值为真，则逻辑非运算表达式的值为假
* 如果表达式的值为假，则逻辑非运算表达式的值为真
*【颠倒黑白】
*
*/
if (!0) {
console.log("****1");
}
if (!1) {
console.log("****2");
}
</script>
</body>
</html>
if-else-if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if-else-if语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* if (表达式1) {
语句1
} else if (表达式2) {
语句2
}
……
else if (表达式n) {
语句n
}
else {
语句e
}
*
* 注意：最后的else可有可没有
*
* 逻辑：当程序执行到if-else-if语句时，首先计算表达式1，如果表达式1的值为真，那么执行语句1，执行完语句1则跳出整个if-else-if语句继续向下执行。如果表达式1的值为假，那么去计算表达式2的值。如果表达式2的值为真，那么执行语句2，执行完语句2则跳出整个if-else-if语句继续向下执行，如果表达式2的值为假，计算下一个表达式。如此下去，直到某个表达式为真为止。如果没有一个表达式是真的，且最后有一个else，那么会执行语句e。
*
*【注】每一个else都是对它上面表达式的否定
*
*/
/*
从终端输入一个人的年龄，判断这个年龄所属的阶段
0~3 婴儿
4~6 幼儿
7~14 儿童
15~18 少年
19~30 青年
31~40 中年
41~50 壮年
51~150 老年
151~ 妖怪
*/
var age = prompt("请输入年龄");
if (age < 0) {
console.log("输入有误");
} else if (age <= 3) {
console.log("婴儿");
} else if (age <= 6) {
console.log("幼儿");
} else if (age <= 14) {
console.log("儿童");
} else if (age <= 18) {
console.log("少年");
} else if (age <= 30) {
console.log("青年");
} else if (age <= 40) {
console.log("中年");
} else if (age <= 50) {
console.log("壮年");
} else if (age <= 150) {
console.log("老年");
} else {
console.log("妖怪");
}
</script>
</body>
</html>
switch语句与break语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句与break语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* switch (表达式)
* {
* case 表达式1:
* 语句1
* case 表达式2:
* 语句2
* ……
* case 表达式n:
* 语句n
* default
* 语句d
* }
* 注意：最后的default可有可无
*
* 逻辑：当程序执行到switch语句时，首先计算表达式的值，表达式的值能匹配到哪个case后的表达式那么就跳到那个case处继续向下执行。没有匹配的case表达式，且最后有个default，那么会执行语句d。
*
*/
var num = 2;
//只执行对应标号处的语句？？
//可以使用break语句
//break语句：专门用来跳出switch语句和循环语句
switch (num)
{
case 1:
console.log("****1");
break;
case 2:
console.log("****2");
break;
case 3:
console.log("****3");
break;
case undefined:
console.log("****4");
break;
case Infinity:
console.log("****5");
break;
case NaN: //NaN疯狂起来连自己都不认识
console.log("****6");
break;
default:
console.log("****d");
}
num = 2;
switch (num)
{
case 1+1:
console.log("****a");
break;
case "1":
console.log("****b");
break;
case "2":
console.log("****c");
break;
default:
console.log("****e");
}
</script>
</body>
</html>
while语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* while (表达式) {
* 语句
* }
*
* 逻辑：当程序执行到while语句时，首先计算"表达式"的值。如果"表达式"的值为假，跳过整个while语句继续向下执行。如果"表达式"的值为真，那么执行大括号中的语句。执行完语句，再去计算"表达式"的值。如果"表达式"的值为假，跳过整个while语句继续向下执行。如果"表达式"的值依然为真，执行语句。执行完语句，再去"计算表"达式的值。如此循环往复，知道"表达式"的值为假才停止。
*
*
*/
//1+2+……+10的和
var num = 1;
var sum = 0;
while (num <= 10) {
sum += num;
num++;
}
console.log("sum = " + sum);
</script>
</body>
</html>
do-while语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do-while语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* do
* {
* 语句
* } while (表达式)
*
* 逻辑：当程序执行到do-while语句时，首先执行一次“语句”，执行完语句再去计算表达式的值。如果表达式的值为假，则跳过整个do-while语句继续向下执行。如果表达式的值为真，则执行“语句”。执行完语句，再计算表达式的值。如此循环往复，直到表达式的值为假才停止。
*
* do-while语句与while语句的区别：
* do-while语句中的语句至少会被执行一次
*
*/
//1+2+……+10
var num = 1;
var sum = 0;
do {
sum += num;
num++;
} while (num <= 10);
console.log("sum = " + sum);
</script>
</body>
</html>
for语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for语句</title>
</head>
<body>
<script type="text/javascript">
/**
* 格式：
* for (语句1; 表达式; 语句3) {
* 语句2;
* }
*
* 逻辑：当程序执行到for语句时，首先执行语句1(仅仅会执行一次)。执行完语句1，计算表达式的值。如果表达式的值为假，则跳过整个for语句。如果表达式的值为真，则执行语句2。执行完语句2再去执行语句3，执行完语句3再去计算表达式的值。如此循环往复，直到表达式的值为假才停止。
*
*/
//1+2+……+10
var sum = 0;
for (var i = 1; i <= 10; i++) {
sum += i;
}
console.log("sum = " + sum);
</script>
</body>
</html>
break语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>break语句</title>
</head>
<body>
<script type="text/javascript">
/**
* break语句：专门用于跳出switch和循环
*/
var num1 = 1;
while (num1 <= 10) {
if (num1 === 5) {
break;
}
console.log("num1 = " + num1);
num1++;
}
console.log("**********" + num1);
var num2 = 1;
do {
if (num2 === 7) {
break;
}
console.log("num2 = " + num2);
num2++;
} while (num2 <= 10);
console.log("**********" + num2);
for (var num3 = 1; num3 <= 10; num3++) {
if (num3 === 7) {
break;
}
console.log("num3 = " + num3);
}
console.log("**********" + num3);
</script>
</body>
</html>
continue语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>continue语句</title>
</head>
<body>
<script type="text/javascript">
/**
* continue语句：跳过本次循环，继续下一次循环。
* 注意：本次循环中continue后面的代码不会被执行到
*/
var num1 = 1;
while (num1 <= 10) {
if (num1 === 5) {
num1++;
continue;
}
console.log("num1 = " + num1);
num1++;
}
console.log("**********" + num1);
var num2 = 1;
do {
if (num2 === 7) {
num2++;
continue;
}
console.log("num2 = " + num2);
num2++;
} while (num2 <= 10);
console.log("**********" + num2);
for (var num3 = 1; num3 <= 10; num3++) {
if (num3 === 7) {
continue;
}
console.log("num3 = " + num3);
}
console.log("**********" + num3);
</script>
</body>
</html>
for-in语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for-in语句</title>
</head>
<body>
<script type="text/javascript">
/**
* for-in语句:往往被用来遍历某个数组或对象中的元素
*
* 注：讲完数组在回顾for-in语句
*/
var arr = ['a','b','c','d'];
for (var i in arr) {
console.log("index:" + i + " value:" + arr[i]);
}
</script>
</body>
</html>
函数概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数概述</title>
</head>
<body>
<script type="text/javascript">
/**
* 认识函数：在一个完整的项目中，某些功能会被反复使用。那么会将某段代码封装成函数，当我们要使用功能的时候直接调用函数即可。
* 注意：函数是对功能的封装
* 优点：
* 1、简化代码结构，增加代码的复用度(重复使用的程度)
* 2、如果想修改或调试某一功能时，只需修改对应的函数即可
*/
/**
* 函数概述(函数的声明)：
* function 函数名(参数列表) {
* 语句
* return 表达式;
* }
* 1、function：是函数的关键词
* 2、函数名：遵循标识符的规则
* 3、()：参数列表的开始和结束
* 4、参数列表：函数从函数的调用者获得的信息，可以没有参数
* 5、{}：函数体的开始和结束
* 6、语句：函数封装的功能
* 7、return 表达式：return一般用于结束函数，并返回给函数的调用者一些信息，"表达式"即为要返回的数据。如果一个函数没有显示的返回return子句，我们就默认它的返回值为undefined。
*
* 注意：在仅仅只声明之后是不会被执行的，只是说明有了一个能完成该功能的函数，还没有被使用
*
*/
/**
* 函数在声明之后就可以被使用了
*
* 函数的调用：函数名(参数列表);
* 函数名：即要使用某个功能函数的名字
* 参数列表：函数的调用者给函数传递的信息
*/
</script>
</body>
</html>
最简单的函数(无参无返回值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的函数(无参无返回值)</title>
</head>
<body>
<script type="text/javascript">
/**
* 编写函数，实现在控制台上打印"sunck is a good man!"的功能
*/
//函数的调用，可以写在函数声明之前或之后
myConsole();
//函数的声明
function myConsole() {
console.log("sunck is a good man!");
}
//函数的调用
myConsole();
</script>
</body>
</html>
函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数</title>
</head>
<body>
<script type="text/javascript">
/**
* 编写函数，给函数一个字符串，函数内部在控制台上打印出来。
*/
//多个参数之间用逗号分隔
//此时str、age可以称为形式参数(形参)，本质是变量
function myConsole(str, age) {
console.log(str, "he is " + age);
}
//此时()中的参数可以称为实际参数(实参)，本质是值
//函数的调用过程本质就是实参给形参赋值的过程
myConsole("sunck is a good man!", 18);
//对于已经传进来的参数js是来者不拒的，但是多余的部分会被默默的忽略掉
myConsole("sunck is a good man!", 18, "nice", "handsome");
//arguments后期讲解
</script>
</body>
</html>
函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的返回值</title>
</head>
<body>
<script type="text/javascript">
/**
* 编写函数，实现功能，给函数两个整数，返回这两个整数的和。
*/
//函数声明
function mySum(num1, num2) {
var sum = num1 + num2;
return sum;//将结果返回给函数的调用者
}
//函数调用
var ret = mySum(1,2);
console.log("ret = " + ret);
</script>
</body>
</html>
变量的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的作用域</title>
</head>
<body>
<script type="text/javascript">
/**
*
* 注意：js中变量的定义并不是以代码块为作用域的，而是以函数作为作用域的
*
* 变量的作用域：变量可以使用的范围
*
* 局部变量：在某个函数中定义的变量，仅在该函数内部可以使用
* 全局变量：定义在所有函数之外的变量
*
*/
var num1 = 10;
function f() {
var num2 = 20;
//声明一个变量时没有使用var语句，该变量就会被默认为全局的
num3 = 30;
//函数内部可以向访问自己的局部变量那样访问全局变量
num1++;
}
f();
console.log(num1);
//console.log(num2);//访问不到函数中的局部变量
console.log(num3);
</script>
</body>
</html>
变量提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量提升</title>
</head>
<body>
<script type="text/javascript">
var num = 1;
//js在执行过程进入新函数时，这个函数内被声明的所有变量都会被移动到函数最开始的地方，叫做变量的提升。
//注意：仅仅提升变量的声明，不会提升赋值
function f() {
console.log("1---num = " + num);
var num = 2;
//此时打印的值是2，因为函数域始终优先全局域，所以函数内定义的num会覆盖掉所有与它同名的全局变量。
console.log("2---num = " + num);
}
f();
//下面代码类似上面代码
// var num = 1;
// function f() {
// var num;
// console.log("1---num = " + num);
// num = 2;
// console.log("2---num = " + num);
// }
// f();
</script>
</body>
</html>
函数也是一种数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数也是一种数据</title>
</head>
<body>
<script type="text/javascript">
/**
* 函数实际上也是一种数据，我们可以把一个函数赋值给一个变量，在通过变量访问函数。
*/
function mySum(num1, num2) {
return num1 + num2;
}
//将函数赋值给变量
var sum = mySum;
//通过变量执行函数
var a = sum(1,2);
console.log("a = " + a);
</script>
</body>
</html>
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
var f = function(a){
console.log("a = " + a);
};
f(123);
//通过这种方式定义的函数被称为匿名函数(即没有名字的函数)，特别上当它不被赋值给变量单独使用时，可以有两种优雅的用法。
//1、可以将匿名函数作为参数传递给其他函数
//2、定义匿名函数完成某些一次性任务
function fun(num1, num2, fc) {
return fc(num1, num2);
}
var num = fun(1,2,function(a,b){
return a + b;
});
console.log("num = " + num);
</script>
</body>
</html>
即时函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>即时函数</title>
</head>
<body>
<script type="text/javascript">
//即时函数：这种函数可以在定以后立即调用
//将匿名函数的定义放进一对小括号中，然后外面再紧跟一对小括号即可。最后的小括号起到的是"立即执行"的作用，同时它也是向匿名函数传递参数的地方。
(function(a){
console.log("a = " + a);
})("sunck is a good man!");
</script>
</body>
</html>
认识数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识数组</title>
</head>
<body>
<script type="text/javascript">
//存储5个人的年龄，求他们的平均年龄
var age1 = 18;
var age2 = 19;
var age3 = 20;
var age4 = 21;
var age5 = 22;
var averageAge = (age1 + age2 + age3 + age4 + age5) / 5;
console.log("averageAge = " + averageAge);
//思考：如果要保存100个人的年龄求他们的平均值，难道要定义100个变量吗？？
//此时我们就需要数组了
/**
* 内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能.
* 浏览器上面跑的JS的内置对象有Math, String，Array, Date等
*
* 对象：包含属性和方法(函数)
*
*
* 数组：就是对象
* 可以存储多个不同类型的数据
*
*/
</script>
</body>
</html>
创建数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建数组</title>
</head>
<body>
<script type="text/javascript">
//1、构造函数法
//1.1 使用构造函数创建一个空数组
//new 开辟空间并返回内存空间的引用
var arr1 = new Array();
console.log(arr1);
//1.2 使用构造函数创建一个容量为20的数组
var arr2 = new Array(20);
console.log(arr2);
//1.3 使用构造方法创建一个包含三个元素的数组
var arr3 = new Array("a", "b", 1);
console.log(arr3);
//2、数组字面量表示法
//2.1 通过字面量创建空数组
var arr4 = [];
console.log(arr4);
//2.2 通过字面量创建一个包含三个元素的数组
var arr5 = [1, 2, "abc"];
console.log(arr5);
</script>
</body>
</html>
数组元素的访问(赋值与取值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组元素的访问(赋值与取值)</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3,4];
//数组元素的访问：数组名[下标]
//注意：下标是从0开始的
//取值
console.log(arr[2]);
//赋值
arr[2] = 5;
console.log(arr[2]);
</script>
</body>
</html>
数组长度length、元素的更新、增加和删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组长度length、元素的更新、增加和删除length</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3,4];
//打印数组的长度(元素个数)
//(暂时了解就行)注意：不计算非下标类的属性名
console.log("数组arr长度：" + arr.length);
//改变数组的长度（增加）
//其余元素默认值为undefined
arr.length = 10;
console.log(arr);
console.log("arr[4] = " + arr[4]);
console.log("arr[5] = " + arr[5]);
console.log("arr[6] = " + arr[6]);
console.log("arr[7] = " + arr[7]);
console.log("arr[8] = " + arr[8]);
console.log("arr[9] = " + arr[9]);
//改变数组的长度（减少）
//多余的直接裁剪
arr.length = 2;
console.log(arr);
//通过索引一个之前不存在的位置来添加元素
arr[2] = 5;
console.log(arr.length);
console.log(arr);
//如果新元素添加的位置与原数组末端存在一定的间隔，那么这之间的元素将会被自动设置为undefined值
arr[5] = 10;
console.log(arr.length);
console.log(arr);
console.log("arr[3] = " + arr[3]);
console.log("arr[4] = " + arr[4]);
//删除：用delete操作符删除特定的元素
//原数组长度不会改变
//删除元素的位置知识被留空了而已，为undefined值
delete arr[2];
console.log(arr.length);
console.log(arr);
console.log("arr[2] = " + arr[2]);
</script>
</body>
</html>
数组的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的遍历</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3,4];
//下标循环遍历
for (var i = 0; i < arr.length; i++) {
console.log("arr[" + i + "] = " + arr[i]);
}
//for-in快速遍历
//对于数组来说，in的前面是数组中的下标(属性名)
//arr["sunck"] = "abc";
console.log(arr);
for (var j in arr) {
console.log(j);
console.log("arr[" + j + "] = " + arr[j]);
}
//forEach()遍历数组，是ECMAScript5.0中加入的，在低版本的IE中无法使用
//forEach()中不能使用break和continue
arr.forEach(function(e){
console.log(e);
});
</script>
</body>
</html>
数组中常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组中常用的方法</title>
</head>
<body>
<script type="text/javascript">
//1、push(item1,item2...)
// 功能：向数组的末尾插入元素
// 参数：一个或者多个数组元素
// 返回值：数组改变之后的容量
var arr1 = [1,2,3];
var length1 = arr1.push(4,5);
console.log("length1 = " + length1);
console.log(arr1);
//2、unshift(item1,item2......)
// 功能：向数组的头部插入元素
// 参数：一个或者多个数组元素
// 返回值：数组改变之后的容量
var arr2 = [1,2,3];
var length2 = arr2.unshift(-1,0);
console.log("length2 = " + length2);
console.log(arr2);
//3、pop()
// 功能：删除数组末尾的元素
// 参数：无参
// 返回值：删除的元素
var arr3 = [1,2,3];
var value3 = arr3.pop();
console.log("value3 = " + value3);
console.log(arr3);
//4.shift();
// 功能：删除数组头部的元素
// 参数：无参
// 返回值：删除的元素
var arr4 = [1,2,3];
var value4 = arr4.shift();
console.log("value4 = " + value4);
console.log(arr4);
//5、join(str)
//功能：用参数字符串将数组中元素拼接成一个新字符串
//参数：拼接使用的字符串
//返回值：拼接后的字符串
//不会改变原数组
var arr5 = [1,2,3,4];
var str5 = arr5.join("good");
console.log(arr5);
console.log(str5);
//6、reverse()
//功能：将原数组元素倒置
//参数：无
//返回值：返回原数组
//注意：原数组改变
var arr6 = [1,2,3,4];
var ret6 = arr6.reverse();
console.log(arr6);
console.log(ret6);
//7.slice(startIndex,endIndex)
// 功能：截取数组元素
// 参数：开始下标，结束下标
// 返回值：截取到的数组元素组成的数组
// 注意：
// 1.不包括arr[endIndex]元素
// 2.原数组不会改变
// 3.endIndex的值必须大于1并且不能小于startIndex的值
var arr7 = [1,2,3,4,5,6,7,8];
var ret7 = arr7.slice(0,6);
console.log("******");
console.log(ret7);
console.log(arr7);
// 8.splice(下标,个数,item1,item2...)
// 必须的参数：下标 个数
// 可选的参数：item1,item2...
// 功能：在数组中间插入或者删除数组元素，如果要插入元素的话，个数为0
// 返回值：被删除的元素组成的数组
//splice插入方式
var arr8 = [1,2,3,4,5];
var ret8 = arr5.splice(2, 0 , 8, 9);
console.log(ret8);
console.log(arr8);
//splice删除方式
ret8 = arr8.splice(3,2);
console.log(ret8);
console.log(arr8);
// 9、concat()
// 功能：将两个数组拼接
// 参数：一个或者多个数组
// 返回值：新数组，数组元素是所有拼接的数组元素。
// 注：对原数组没有影响。
var arr9 = [1,2,3,4];
var str9 = [8,9];
var acp9 = [0,6,8];
var ret9 = arr9.concat(str9, acp9);
console.log(arr9);
console.log(str9);
console.log(acp9);
console.log(ret9);
//10、indexOf()
//功能：从数组的头部查找数组元素，找到返回数组元素的下标，否则话返回-1.
//参数：要查找的元素
// 返回值：下标或者-1
var arr10 = [1,2,3,3,5];
var ret10 = arr10.indexOf(3);
console.log(arr10);
console.log(ret10);
// 8.lastIndexOf()
//功能：从数组的尾部查找数组元素，找到返回数组元素的下标，否则话返回-1.
//参数：要查找的元素
// 返回值：下标或者-1
var arr11 = [1,2,3,3,5];
var ret11 = arr11.lastIndexOf(3);
console.log(arr11);
console.log(ret11);
</script>
</body>
</html>
数组排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组排序</title>
</head>
<body>
<script type="text/javascript">
/**
* 冒泡排序
*
* 54321 --> 12345
* 54321 -> 45321 -> 43521 -> 43251 -> 43215
* 0-1 1-2 2-3 3-4
* 43215 -> 34215 -> 32415 -> 32145
* 0-1 1-2 2-3
* 32145 -> 23145 -> 21345
* 0-1 1-2
* 21345 -> 12345
* 0-1
*/
var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
//sort()排序
//注意：默认排序结果为升序
var arr1 = [4,2,5,1,3];
arr1.sort();
console.log(arr1);
//改变sort()排序标准
var arr2 = [4,2,5,1,3];
arr2.sort(compare);
function compare(v1, v2) {
if (v1 > v2) {
return 1;
}
return -1;
}
console.log(arr2);
</script>
</body>
</html>
数组的数组(多维数组)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的数组(多维数组)</title>
</head>
<body>
<script type="text/javascript">
var a = [1,2,3];
var b = [4,5,6];
var c = [7,8,9];
//声明
var arr = [a, b, c];
console.log(arr);
//元素访问
console.log(arr[1]);
console.log(arr[1][2]);
</script>
</body>
</html>
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
//这是String类型，是基本类型
var str1 = "sunck is a good man";
//字符串对象，引用类型，Object
var str2 = new String("sunck is a nice man");
console.log(typeof str1);
console.log(typeof str2);
//引用类型封装属性与方法。在前端开发中有许多关于字符串的操作。基本类型的字符串无法完成这些操作，js就添加了一种引用类型的字符串，在该引用类型中封装了有关字符串的属性和方法，方便开发者对字符串进行操作。
//区别：
//1、数据类型不一样。
//2.引用类型的字符串包含了属性和方法。通常说引用类型的String是字符串包装类型
// 实际操作中，基本类型的字符串可以直接使用引用类型的字符串中封装的属性与方法。不要自己手动转换。
//字符串创建之后就不能改变了
console.log("str1 = " + str1);
console.log("str2 = " + str2);
</script>
</body>
</html>
字符串的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的长度</title>
</head>
<body>
<script type="text/javascript">
//这是String类型，是基本类型
var str1 = "sunck is a good man";
//字符串对象，引用类型，Object
var str2 = new String("sunck is a nice man");
//str1是String基本类型，当使用String的引用类型的属性与方法时，默认转换成Object类型
console.log(str1.length);
console.log(str2.length);
//lenght是只读属性
//根据各国字符计算长度
var str3 = "凯哥是个好男人";
console.log(str3);
console.log(str3.length);
</script>
</body>
</html>
字符串的常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的常用方法</title>
</head>
<body>
<script type="text/javascript">
//1、charAt(index)
//获取指定下标的字符，下标从0开始
var str1 = "sunck凯 is a good man";
console.log(str1.charAt(2));
console.log(str1.charAt(5));
//2、charCodeAt(index)
//获取指定下标的字符的ASCII码(Unicode)
//返回值为0~65535之间的整数
var str2 = "sunck凯 is a good man";
console.log(str1.charCodeAt(2));
console.log(str1.charCodeAt(5));
//3、String.fromCharCode(ASCII码)
//将ASCII码转换成对应的字符
var str3 = String.fromCharCode(97);
console.log(str3);
//对象方法（实例方法） 对象名.XXX()
//类方法(静态方法) 引用类型名.XXX()
//4、字符串大小写转换，返回转换后的结果字符串
var str4 = "SUNCK is a GooD Man!";
//将字符串中所有的大写字符转换成小写字符，小写字符不变
var ret4_1 = str4.toLowerCase();
//将字符串中所有的小写字符转换成大写字符，大写字符保持不变
var ret4_2 = str4.toUpperCase();
//不会改变字符串本身，以返回值的形式返回结果
console.log("str4 = " + str4);
console.log("ret4_1 = " + ret4_1);
console.log("ret4_2 = " + ret4_2);
//5、判断是否相等
//== 值相等
//=== 绝对相等(值和类型都相等)
//10 == "10" true
//10 === "10" flase
var str5_1 = 10;
var str5_2 = "10";
console.log(str5_1 == str5_2);
console.log(str5_1 === str5_2);
//6、字符串比较大小
//规则：从左至右依次对比相同下标处的字符，当两个字符不相等时，哪个字符的ASCII值大，那么字符串就大
//返回值为1，左边大于右边，返回值为-1，右边大于左边，返回值为0则相等
var str6_1 = "za";
var str6_2 = "gbc";
var flag6 = str6_1.localeCompare(str6_2);
console.log("flag6 = " + flag6);
if (flag6 > 0) {
console.log("str6_1 > str6_2");
} else if (flag6 < 0) {
console.log("str6_1 < str6_2");
} else {
console.log("str6_1 = str6_2");
}
//汉字比较大小
//Unicode
str6_1 = "孙常凯";
str6_2 = "太帅";
console.log(str6_1 < str6_2);
//7、查找字符串
var str7 = "sunck is a good man! sunck is a nice man";
//正向查找
//返回第一次出现字符串的首下标
var ret7_1 = str7.indexOf("sunck");
console.log("ret7_1 = " + ret7_1);
//反向查找
//返回第一次出现字符串的首下标
var ret7_2 = str7.lastIndexOf("sunck");
console.log("ret7_2 = " + ret7_2);
//8、替换子串
//replace(被替换的子串, 新子串)
//注意：此时只能替换第一次出现的子串，如果想全替换需要正则
var str8 = "sunck is a good good man!";
var ret8 = str8.replace("good", "handsome");
console.log("str8 = " + str8);
console.log("ret8 = " + ret8);
//9、提取子串
var str9 = "sunck is a good good man!";
//从指定的下标截取到字符串结束。返回新字符串，新字符串是由被截取到的字符组成的
console.log(str9.substring(3));
//从参数1下标出开始截取到参数2下标之前(注意不包含参数2下标出的字符)
console.log(str9.substring(3,7));
//从指定的下标截取到字符串结束。返回新字符串，新字符串是由被截取到的字符组成的
console.log(str9.substr(3));
//从参数1下标出开始截取参数2长度的字符串
console.log(str9.substr(3,7));
//字符串分割
var str10 = "sunck is a good man";
var arr10 = str10.split(' ');
console.log(arr10);
console.log(arr10.join('+'));
</script>
</body>
</html>
Math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
</head>
<body>
<script type="text/javascript">
//四舍五入
console.log(Math.round(3.6));
//向上取整
console.log(Math.ceil(3.1));
//向下取整
console.log(Math.floor(3.1));
//取最大值
console.log(Math.max(1,2,3,4,5));
//取最小值
console.log(Math.min(1,2,3,4,5));
//绝对值
console.log(Math.abs(-3.4));
//求x的y次方(x = 2, y = 3)
console.log(Math.pow(2,3));
//开平方
console.log(Math.sqrt(25));
//随机输出x~y之间的一个整数（包含x和y）
console.log(parseInt(Math.random() * (6 - 2 + 1) + 2));
</script>
</body>
</html>
