1. JS基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 书写js代码 -->
<script type="text/javascript">
alert("HELLO JS");
</script>
</head>
<body>
<!-- JS和HTML的结合方式
1.内联方式：将JS代码写在html标签的内部，不推荐使用，偶尔可以用一下
2.内部方式：将JS代码写在script标签的内部
<script type="text/javascript">
书写js代码，这种方式比较常见
</script>
补充说明：script标签 可以放在html页面的任意地方，但是你现在先放到<head>标签之间，
那么至于script标签放到html页面的上面或下面有没有区别？是有区别的，那我们后面涉及到了再是说，你先放到<head>标签之间
3.外部方式：开发首选，将JS代码单独放到一个js文件中，html页面引用这个js文件
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
-->
<button type="button" onclick="alert('哈哈!')">一个按钮</button>
</body>
</html>
2. 引入外部的js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的js文件 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
3. 数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 单行注释，JS的注释和Java的注释一样
/* 多行注释 */
//数据类型：
//Java的数据类型：基本数据类型和引用数据类型
//Java的基本数据类型：四类八种：整数型 byte short int long，小数型 float double，字符型 char，布尔型 boolean
//JS的数据类型：简单数类型（原始数据类型）和 复杂数据类型
//原始数据类型：Number 数字型（整数和小数）,字符串类型（字符，字符串）布尔类型，未定义类型undefined null
//ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
//ES5 没有类这个概念的,有对象的概念 但是在 ES6 引入了class类的这个概念
//定义变量：JS是一门弱类型语言，JS中定义变量，采用关键字var
//定义数字类型
var num=100;
var num2=3.14;
//定义字符串类型
// 字符串，使用单引号和双引号都可以，推荐使用双引号
var str="abc";
var str2='abc';
//定义布尔类型
var flag=true;
var flag2=false;
var v;
var obj=null;
//我们可以通过typeof运算符可以获取该变量的原始数据类型
alert(typeof num);
alert(typeof num2);
alert(typeof str);
alert(typeof flag);
alert(typeof flag2);
alert(v);
alert(typeof v);
alert(obj);
//alert(typeof obj);
//JS中，一条语句后面的的分号，可以省略不写，但是我建议你还是写上
// ES5 中没有定义常量 的关键字
// ES6 提供了一个关键字const 可以用来定义常量
const name="abc"; //定义一个常量
//name="aaa";
</script>
</head>
<body>
</body>
</html>
数据类型补充说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
var v;
alert(v);
alert(typeof v);
alert(v== undefined); //true
// Null 类型
// 另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
alert(null == undefined); //输出 "true"
// 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
var obj=null;
alert(typeof obj)//null object
// 注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
</script>
</head>
<body>
</body>
</html>
4. JS中的语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* JS中的语句的语法，跟java中一模一样
if
for
while
do..while
switch
*/
for(var i=0;i<10;i++ ){
alert(i);
}
//打印99乘法表
</script>
</head>
<body>
</body>
</html>
5. 往html网页输出内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//可以输出，普通的字符串，数字等等，当然也可以输出html代码，js代码
document.write("hello JS");
document.write("<hr>");
document.write(true);
document.write("<br>");
document.write(3.14);
document.write("<br>");
document.write("<h1 style='color: red;'>hello JS</h1>");
var num=100;
//往页面上输出这个变量
document.write(num);
//打印99乘法表
</script>
</head>
<body>
</body>
</html>
6. 打印九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write("<span style='font-size: 25px;color: red;'>"+j+"*"+i+"="+(j*i)+" "+"</span>");
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
7. 一元运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=1;
num++;
++num;
alert(num);
var j=1;
// ++ -- 混合使用
//++在前，先运算后使用，++在后先使用，再运算
var n=++j;
alert(n);
alert(j);
var h=-1;
var r=+5;
</script>
</head>
<body>
</body>
</html>
8. 数据类型的自动转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num="100";
//类型的自动转换：当一个运算符想要的数据类型和他期望的不一致时，就会尝试进行数据类型的转换。
var r=num-20;
alert(r);
//字符串类型转换成数字，根据字面上的值来转换，如果字面上是个数字，就转换成数字。
//如果字面上不是一个有效的数字，就转换成NaN
var str=+"a100";
//Number 整数 小数 NaN（不是一个数字）
alert(str)
//注意：NaN 参与数学运算结果都是NaN
var r2=NaN*5;
alert(r2);
var flag=true;
//布尔类型转换成数字，true 转换成1 false 转换成0;
var f2=flag+5+false;
alert(f2);
</script>
</head>
<body>
</body>
</html>
9. 比较运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//== ===
// ==
//=== 全等于 先比较数据类型，如果数据类型不一致，直接就false，如果类型一致，就比较值是否相等
//类型的转换
var num="1";
// == 号，就会转换这个num的类型
var r=num==1;
alert(r);
// === 先比较数据类型，如果数据类型不一致，直接就false，如果类型一致，就比较值是否相等
var r2=num===1;
alert(r2);
//JS关于字符串的比较,字面上的内容是否相同，使用 ==号来比较即可
//如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
var s1="abc";
var s2="abcd";
alert(s1==s2);
//注意：NaN参与比较运算，结果都是false 除了!=号
alert(NaN==NaN);
alert(NaN>1);
alert(NaN!=NaN);//true
var ss=+"aa";
alert(ss==NaN);//NaN
//你要判断一个数据是不是NaN 不能用==号来判断，可以调用方法来判断
</script>
</head>
<body>
</body>
</html>
10. 逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//&& || !
var a="aabc";
//&&想要的类型是布尔类型的，如果你给的不是，就会尝试去转换。
//String类型转换成布尔,空串转换成false,非空串转换成true
var f=a&&true;
alert(f);
alert(!'');
if(""){
alert("真的")
}else{
alert("假的");
}
//数字类型转换成布尔：0转换成false 非0转换成true
if(10){
alert("真的")
}else{
alert("假的");
}
//NaN 和 undefined 转布尔类型，转换成false
var v;
if(v){
alert("真的")
}else{
alert("假的");
}
//对象转换布尔,对象不为空，转换成true 为null转换成false
var obj=new Object();
if(obj){
alert("真的")
}else{
alert("假的");
}
</script>
</head>
<body>
</body>
</html>
11. 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//函数，JS中的函数类似与Java中的方法，对一段功能逻辑代码进行封装，以实现重复调用。
//定义函数的两种常见方式
//方式1：采用 function 来定义函数
/*
函数名(形参)
function add(){
//函数体
}
*/
//注意形参不需要写var
function add(a, b) {
//函数体
var sum = a + b;
return sum; //可以使用return来返回结果
}
//调用函数
var r = add(10, 20);
document.write(r);
//方式2：
var show=function(a,b,c){
alert("show---"+a);
}
show("hello");
// 定义函数的方式3，不推荐用 var fun = new Function("参数列表","方法体");
var fun = new Function("a,b","alert(a+b)");
fun(2,3);
</script>
</head>
<body>
</body>
</html>
12. 函数语法的注意事项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function add(a,b){
alert(a);
alert(b);
return a+b;
}
//JS中，调用函数时，你可以传参，也可以不传参，传多传少，语法不会报错，但是我们建议实参和形参一一对应。
var sum=add(20);
alert(sum);
alert(add.length)
//函数：有一个内置对象arguments 是一个伪数组,会接收所有传过来的实参。
//arguments 是一个伪数组 可以存储传过来的实参，有角标，你可以通过角标取传过来的实参
//之所以arguments 是一个伪数组，就是不能调用数组对象的方法
function add2(){
var a=arguments[0];
var b=arguments[1];
var c=arguments[2];
return a+b+c;
}
var sum2=add2(20,30,40);
alert(sum2);
//函数还有一个属性length 可以获取形参的个数
var len= add2.length;
alert(len);
</script>
</head>
<body>
</body>
</html>
13. 自调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//自调用函数：(function () { /* code */ } ());
/* function show(){
alert("呵呵");
}
show(); */
// 自调用函数
var sum=(function add(a,b){
return a+b;
}(10,20));
alert(sum);
</script>
</head>
<body>
</body>
</html>
14. 内置对象 - String 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//ES5 没有类这个概念，只有对象的概念，JS 也提供了一些常用的内置对象，我可以创建对象，调用方法。
//String 对象
//1.创建String对象的方式
//方式1
//当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
var str=new String("abc");
//方式2：
// 当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
var s=String("aaa");
var s2="abc";
alert(typeof str);
alert(typeof s);
//instanceof 判断一个对象或引用，是不是该类型的一个引用
alert(str instanceof String);
alert(s instanceof String);
//属性:length 获取字符串的长度
</script>
</head>
<body>
</body>
</html>
15. String对象中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str=new String("abc");
//charAt() 返回在指定位置的字符。
var ch=str.charAt(0);
//打印到浏览器的调试模式的控制台输出 按F12到浏览器的调试模式
console.log(ch);
// concat() 连接字符串。 你可以使用 + 来拼接字符串
var s1="abc".concat("cccc").concat("dddd");
//alert(s1);
//indexOf() 检索字符串。 检索该字符串第一次出现的索引，如果检索不到返回 -1
//lastIndexOf() 从后向前搜索字符串。
var index= "abcdeff".indexOf("fff");
console.log(index);
//replace() 替换与正则表达式匹配的子串。
var s2="aaa====bbb======ccc";
var regx=/[=]+/g;
var s3= s2.replace(regx,"#");
console.log(s3);
//slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
// substring() 提取字符串中两个指定的索引号之间的字符。
//从起始索引，截取到终止索引，但是不包含终止索引这个字符
var v= "替换与正则表达式匹配的子串".substring(0,5);
console.log(v);
//替换与正则
var vv="替换与正则表达式匹配的子串".slice(-5,-1);
console.log(vv);
// toLowerCase() 把字符串转换为小写。
// toUpperCase() 把字符串转换为大写。
//split() 把字符串分割为字符串数组。
//startsWith() 查看字符串是否以指定的子字符串开头。
//trim() 去除字符串两边的空白
//去除左端空格
" 替换与正则表达式匹配的子串 ".trimLeft();
//去除右端空格
" 替换与正则表达式匹配的子串 ".trimRight();
</script>
</head>
<body>
</body>
</html>
16. 内置对象中Number对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=100;
// 创建 Number 对象的语法：
// var myNum=new Number(value);
// var myNum=Number(value);
var obj=new Number(num);
var myNum=Number("100");
alert(typeof obj);// object
alert(typeof myNum);//number
// 参数
// 参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。
// 返回值
// 当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。
//如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。
// MAX_VALUE 可表示的最大的数。
// MIN_VALUE 可表示的最小的数。
//toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
var v= new Number(3.1455555587474747474);
//保留小数点后面几位，会四舍五入，返回的是字符串类型的数字
var str=v.toFixed(3);// "3.146"
alert(str);
var sum=str*1;
var v2=Number(str);
//Integer Double Number
</script>
</head>
<body>
</body>
</html>
17. Date日期对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// Date 对象
// Date 对象用于处理日期和时间。
// 创建 Date 对象的语法：
// var myDate=new Date()
// 注释：Date 对象会自动把当前日期和时间保存为其初始值。
var myDate=new Date();
var year=myDate.getFullYear();
alert(year);
//getTime() 返回 1970 年 1 月 1 日到现在所间隔的毫秒数。
var time= myDate.getTime();
alert(myDate);
// toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
// toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
// toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串
var timeStr=myDate.toLocaleString();
alert(timeStr);
alert(myDate.toLocaleTimeString());
alert(myDate.toLocaleDateString());
</script>
</head>
<body>
</body>
</html>
18. 第三方的日期时间处理的工具类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入js文件 -->
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var timeStr=moment().format();
alert(timeStr);
//格式化当前的日期为一个如日期字符串
var timeStr2=moment().format('YYYY-MM-DD HH:mm:ss');
alert(timeStr2);
//把指定的毫秒值毫秒值，格式化成日期字符串。
var time=new Date().getTime();
var dateStr2=moment(time).format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>"+dateStr2+"</h1>");
//把日期字符串转换成毫秒值 unix()
var a=moment('2019-08-22 12:30:23').unix()
//1566448223
alert(a);
</script>
</head>
<body>
</body>
</html>
19. Math 内置类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Math 内置对象，不需要new 直接使用对象名调用方法即可
/* var pi=Math.PI;
var num=Math.random();
Math.max(2.5,35);
Math.min(3.5,89);
Math.ceil(3.25);
Math.floor(3.5);
Math.round(3.69); */
//要 1---100 之间一个随机整数包含 1也包含100
//Java中：int num=(int)(Math.random()*100+1);
/*
for(var i=0;i<1000;i++){
var num=Math.random()*100+1;
num=Math.floor(num);
document.write(num);
document.write("<br>");
}
*/
//弹出一个四位的随机验证码
var str="0123456789asdfasdfADFEfsdfefiliafedaefaWQEFF";
/* //生成四个随机索引
var index1=Math.floor(Math.random()*str.length);
var index2=Math.floor(Math.random()*str.length);
var index3=Math.floor(Math.random()*str.length);
var index4=Math.floor(Math.random()*str.length);
var code=str.charAt(index1).concat(str.charAt(index2)).concat(str.charAt(index3)).concat(str.charAt(index4));
alert(code); */
var code="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*str.length);
code+=str.charAt(index);
}
alert(code);
</script>
</head>
<body>
</body>
</html>
20. 全局对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//全局属性和函数可用于所有内建的 JavaScript 对象。直接调用即可
//isNaN() 检查某个值是否是数字。
var n=NaN;
var s=NaN;
// alert(n==s);
//判断一个值是不是NaN 使用方法来判断isNaN()
var b=isNaN(n);
alert(b);
var c=isNaN(2*"abc");
alert(c);
//把字符串的数字，转换成数字
//parseFloat() 解析一个字符串并返回一个浮点数。
//parseInt() 解析一个字符串并返回一个整数。
var numStr="100";
//方式1
var nn=numStr*1;
//方式2
var n1=Number(numStr);
//方式3
var n2=parseInt(numStr);
var n3=parseFloat("3.1458585");
// 解析一个字符串并返回一个整数。
// * 从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
// 比正号强大些 var v=+“123”；
var v=parseInt("100abc");
alert(v+20);
</script>
</head>
<body>
</body>
</html>
21. 全局对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//decodeURIComponent() 解码一个编码的 URI 组件。
//encodeURIComponent() 把字符串编码为 URI 组件。
var str="张三";
var code=encodeURIComponent(str);
alert(code);
var name=decodeURIComponent(code);
alert(name);
//浏览器会对中文参数进行 URL编码
// http://127.0.0.1:8848/20210222-JS-%E4%B8%8A%E5%8D%88/8.%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1.html
var v=decodeURIComponent("http://127.0.0.1:8848/20210222-JS-%E4%B8%8A%E5%8D%88/8.%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1.html");
alert(v);
</script>
</head>
<body>
</body>
</html>
22. Boolean对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var b="true";
var f=Boolean(0);
// 注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 "false"）。
if(f){
alert("真的")
}else{
alert("假的")
}
</script>
</head>
<body>
</body>
</html>
23. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 1.问
console.log(num);
//2.问
console.log(v);
var v=100;
//问3：
//show();
function show(){
console.log(100);
}
//show();
//test();
var test=function(){
console.log(100);
}
test();
</script>
</head>
<body>
</body>
</html>
24. 数组对象Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JS中数组的定义方式
//JS中的数组其实更像Java中 ArrayList
//方式1：new
var arr=new Array(3); //长度可以规定，也可以不用规定。
//方式2:定义的时候，就可以往数组中放置元素
var arr2=new Array(20,20,58,200,3.14,"abc",false);
//方式3：简写方式
var arr3=[20,50,60,68];
//1.JS中的数组长度是可变的。
arr[0]=20;
arr[1]=30;
arr[2]=60;
arr[3]=80;
alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
alert(arr[3]);
alert(arr[5]); //undefined
//2.JS中的数组可以任意数据类型。
alert(arr2[arr2.length-1]);
</script>
</head>
<body>
</body>
</html>
25. 数组对象中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[10,20,30,40,50];
var arr2=[60,70,80];
//遍历数组
// for(var i=0;i<arr.length-1;i++){
// alert(arr[i]);
// }
//concat() 连接两个或更多的数组，并返回结果。
//把多个数组的元素，归并到一个新的数组中
var newArr=arr.concat(arr2,arr2);
alert(newArr);
//join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
//分隔符 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
var arr3=[10,20,30,40,50];
var str=arr3.join("");
alert(str);
</script>
</head>
<body>
</body>
</html>
26. 数组中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var arr = new Array();
arr[0] = 10;
//往数组中后面元素添加元素
arr.push(100);
arr.push(200); //add()
var len=arr.push(300, 400, 500, 600);
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
arr.unshift(1,2,3);
alert(arr);
</script>
</head>
<body>
</body>
</html>
27. 数组中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[10,20,30,40];
//shift() 删除并返回数组的第一个元素
//pop() 删除并返回数组的最后一个元素
var ele=arr.pop();
alert(ele);
alert(arr);
var ele2=arr.shift();
alert(ele2);
alert(arr);
//根据索引来删除数组中的某个元素
var arr2=[10,20,30,40,50,60,70,80];
//splice() 删除元素，并向数组添加新元素。记住这个方法，这个方法可以完成，删除，替换
// 参数1：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//参数2: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
arr2.splice(4,1);
alert(arr2);
var arr3=[10,20,30,40,50,60,70,80];
arr3.splice(4,1,500,100,300);
alert(arr3);
// reverse() 颠倒数组中元素的顺序。
// sort() 对数组的元素进行排序
</script>
</head>
<body>
</body>
</html>
28. 数组排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[10,20,30,40,50,1,8,9,10,8];
//冒泡排序，选择排序，直接插入排序，快速排序，归并排序，堆排序，桶排序
//sort() 不传参，默认是按照元素的字典顺序来排序的。
arr.sort();
alert(arr);
//如果你想要安照元素的大小顺序来排，需要传入比较函数。
var bjq=function(a,b){
return a-b; //正负0
}
arr.sort(bjq);
alert(arr);
//直接传入匿名函数
arr.sort(function(a,b){
return b-a; //正负0
});
alert(arr);
</script>
</head>
<body>
</body>
</html>
26. ES6新增加的关于数组的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// ES6 数组新增的方法： https://www.runoob.com/jsref/jsref-obj-array.html
//every() 检测数值元素的每个元素是否都符合条件。
var arr = [10, 20, 30, 40, 50, 1, 8, 9, 10, 8];
var hs = function(ele) {
return ele > 0;
}
var f = arr.every(hs);
alert(f);
//forEach() 数组每个元素都执行一次回调函数。
//ele 数组中的元素 ，index元素的索引
arr.forEach(function(ele, index) {
//alert(index + "==" + ele);
})
//filter() 检测数值元素，并返回符合条件所有元素的数组。
var arr = [10, 20, 30, 40, 50, 1, 8, 9, 10, 8, 3, 11, 13, 14, 49, 20];
//过滤出数组中的偶数
var newArr = arr.filter(function(ele) {
/* if(ele%2==0){
return true; //返回true就说明符合条件，就会放到新数组中
}else {
return false; //返回false就说明不符合条件，就不要
} */
return ele % 2 == 0;
})
//alert(newArr);
//map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
//提取：应用的一个新的函数上
var arr2 = [10, 20, 30, 40, 50, 1, 8, 9, 10];
//提取数组中的偶数，并对提取出来的偶数进行平方的操作
// 定义和用法
// map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
// map() 方法按照原始数组元素顺序依次处理元素。
// 注意： map() 不会对空数组进行检测。
// 注意： map() 不会改变原始数组。
var newArr3 = arr2.map(function(ele,index,oldArr) {
if (ele % 2 == 0) {
return Math.pow(ele, 2)
}else{
return ele;
}
})
//alert(newArr3);
//reduce() 将数组元素计算为一个值（从左到右）。
var arr3 = [10, 20, 30, 40, 50, 1, 8, 9, 10];
//array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
var sum=arr3.reduce(function(total,currentValue,index,arr){
return total+currentValue;
},0);
alert(sum);
</script>
</head>
<body>
</body>
</html>
27. 二维数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr1=new Array(20,20,58,200);
var arr2=new Array(20,20,58,200);
var arr3=new Array(20,20,58,200);
var maxArray=new Array();
maxArray[0]=arr1;
maxArray.push(arr1);
maxArray.push(arr2);
maxArray.push(arr3);
for(var i=0;i<maxArray.length;i++){
for(var j=0;j<maxArray[i].length;j++){
alert(maxArray[i][j]);
}
}
//简便定义二维数组
var myArray=[[20,20,58],[20,20,58],[20,20,58]];
</script>
</head>
<body>
</body>
</html>
28. 正则表达式对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//定义正则表达式对象
//方式1:new RegExp(pattern, attributes);
var regx=new RegExp("^[a-z0-9]+$","i"); //i 不区分大小写
var f=regx.test("AAA");
alert(f);
//方式2：简便方式 /正则表达式/模式 比较常用
var regx2=/^[a-z0-9]{6,16}$/i;
//test("要匹配的数据") 判断这数据是否符合正则表达式
var f2=regx2.test("AAAaaaaa");
alert(f2);
</script>
</head>
<body>
</body>
</html>
29. 正则表达式的注意
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = "hello123";
//注意加上开头和结尾，防止一部分匹配上，也会返回true
var reg = /^[A-Z0-9]+$/;
alert("匹配吗？" + reg.test(str));
</script>
</head>
<body>
</body>
</html>
30. 正则表达式的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//test 检索字符串中指定的值。返回 true 或 false。
//exec 检索字符串中指定的值。返回找到的值，并确定其位置。
//获取字符串中是3个字母组成的单词。
// \b 单词边界
var str ="da abcd jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi; //g全文匹配
/* var s=reg.exec(str);
alert(s);
s=reg.exec(str);
alert(s);
s=reg.exec(str);
alert(s); */
var ss="";
while((ss=reg.exec(str))!=null){
alert(ss);
}
</script>
</head>
<body>
</body>
</html>
31. 支持正则表达式的 String 对象的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* var str="aaa=bbb=ccc";
//跟据普通的分隔符来截取
var arr=str.split("=");
alert(arr);
//根据正则来截取
var arr2=str.split(/=/);
alert(arr2)
// replace(/=/g,"#");说明
// 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
var newStr=str.replace(/=/g,"#");
alert(newStr);
*/
/* var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!")) */
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g)) //[0-9]+
</script>
</head>
<body>
</body>
</html>
32. 作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JS中的作用域：全局作用域，局部作用域
//全局作用域：一对script标签所包裹起来的范围，或者一个单独的js文件
//局部作用域：就是函数的范围
//ES5:里面没有块级作用域：if(){ 块级作用域 } for(){ 块级作用域 }
/* 2.3 全局变量和局部变量的区别
- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间 */
var num=100; //全局变量,
function show(){
var num=200; //局部变量
}
show();
//alert(num);
if(true){
let i=100;
}
alert(i);
for(let j=20;j<30;j++){
}
alert(j);
{
//ES6新增的let 关键字 let定义块级作用域变量
let h=20;
}
alert(h);
//var let const
</script>
</head>
<body>
</body>
</html>
33. 作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
//局部变量
var num=20;
n=200; //如果函数中的变量，省略var 此变量为全局变量
}
show();
alert(n);
//alert(num);
</script>
</head>
<body>
</body>
</html>
34. 变量的访问-就近原则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Java中方法不能嵌套定义
//JS中函数时可以嵌套定义的
var num = 500;
//变量的访问遵循就近原则
function show() {
//var num = 20;
console.log(num);
function test() {
//var num = 100;
console.log(num);
}
test();
}
show();
console.log(num);
</script>
</head>
<body>
</body>
</html>
35. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//问题1：
//console.log(num);
//问题2：
/* console.log(num); //undefined
var num=100; */
/* show();
function show(){
alert("函数调用了");
} */
/* test();
var test=function(){
alert("函数调用了");
} */
</script>
</head>
<body>
</body>
</html>
36. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 4.1 预解析的相关概念
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。
JavaScript 解析器在运行 JavaScript 代码的时候分为两步：
预解析和代码执行。
- 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义，预解析也叫做变量、函数提升。
- 代码执行： 从上到下执行JS语句。
注意：**预解析会把变量和函数的声明在代码执行之前执行完成。** */
/* console.log(num); //undefined
var num=100; */
//上面的代码进行预解析后,其实是下面这样的
var num;
//变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
console.log(num);
num=100;
</script>
</head>
<body>
</body>
</html>
37. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* console.log(num);
var num = 10;
show();
function show() {
//alert("abc");
console.log("函数调用了");
} */
//上面的代码相当于下面的执行顺序
var num;
function show() {
//alert("abc");
console.log("函数调用了");
}
console.log(num);
num=10;
show();
</script>
</head>
<body>
</body>
</html>
38. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
test();
var test=function(){
console.log("函数调用了")
}
//上面代码就相当于下面的。
var test;
test();
test=function(){
console.log("函数调用了")
}
</script>
</head>
<body>
</body>
</html>
39. 预解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num = 10;
fun();
function fun() {
console.log(num); //
var num = 20;
}
/* //上面的代码进行预解析，变成如下：
var num = 10;
function fun() {
var num;
console.log(num); //
num = 20;
}
fun(); */
</script>
</head>
<body>
</body>
</html>
40. 倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
手机号：<input type="" name="" id="" value="" /> <button type="button">发送</button>
</body>
<script type="text/javascript">
var btn=document.querySelector('button');
var time=60;
btn.addEventListener('click',function(){
//alert("倒计时")
btn.disabled=true;
var timeID=setInterval(function(){
if(time==0){
//倒计时完毕，清除定时器，并回复按钮原来的状态。
clearInterval(timeID);
//不要禁用按钮
btn.disabled=false;
//按钮的文字改回来
btn.innerHTML="发送";
//时间在设置为原来的
time=60;
}else{
btn.innerHTML="剩余"+time+"秒钟";
time--;
}
},1000);
})
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
