JavaScript 练习上（历史，基础语法，常用对象）
1. JS的历史
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
JS: 很早之前，互联网刚刚兴起，那个时候，网速很慢。类似于现在的2G网速
上网体验差，输入了用户名和密码，登录一个论坛，就可以出去抽根烟，
回来也不一定登录上，回来发现后台返回了用户名格式错误。
用户名和密码的规则校验，能不能放在前台校验，而不是发送给后台校验，因为网速慢，如果放在后台校验用户体验极差。
有一家公司Nombas 开发了要给语言叫做 C--
浏览器器厂商网景浏览器，借鉴了C-- 这个思想。
推出了脚本语言 LiveScript 使用到网景浏览器中，把表单数据的校验放在浏览器端进行校验，提高了用户的上网体验，先占领了
浏览器市场，后来找到SUN 继续完善，后改名为 JavaScript 从此网景浏览器就火起来了
微软这个时候，也要进军浏览器市场，推出了IE浏览器，他也搞出来了要给浏览器脚本语言叫做 JScript
为了制定同样的浏览器脚本语言的规范，这些浏览器厂商，就找到 ECMA 欧洲计算机协会，
由他来制定一套 浏览器脚本语言的规范 ECMA 大部分还是照搬了 JavaScript
推出这个叫做 ECMAScript规范，以后的浏览器脚本语言，就得遵循这个规范
ECMAScript4 ECMAScript5 ECMAScript6 ECMAScript7
JS:最早的推出，就是为了做表单数据的校验，来提高用户的上网体验，随着不断的发展，JS可以做出很多网页特效。
-->
</body>
</html>
2. Js 与 html 结合的3种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的js脚本文件，开发首选方式 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<!-- 内部方式：在HTML页面提供一对 script标签，在标签内部，写JS -->
<script type="text/javascript">
var num=100;
alert(num)
</script>
</head>
<body>
<!--
JS跟HTML结合的方式
//1.内联方式：将JS代码直接写在HTML标签上
//2.内部方式：在HTML页面提供一对 script标签，在标签内部，写JS
这一对 script标签，他可以放在 HTML页面的任何地放，那你目前先放在 head标签之间
//3. 外部方式：把JS代码单独放在一个文件中，页面进行引用，开发首选方式
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
-->
<!-- 内联方式：将JS代码直接写在HTML标签上 不常用-->
<button type="button" onclick="alert('点击了')">一个按钮</button>
</body>
</html>
index.js: 放在js文件夹下
var str="Hello";
alert(str);
3. 数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Java的基本数据类型：四类八种
//整数型 byte short int long
//小数型 float double
//字符型 char
//布尔型 boolean
//ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
//JS:原始数据类型：数字型 Number 布尔 Boolean 字符串 String 未定义 undefined 对象占位符 Null
//JS是一门弱类型语言，他定义变量时 采用 var 关键字来定义 不需要明确数据类型
//定义数字
var num=100 //注意：后面的分号，可写可不写，语法不报错，我们写Java习惯了，那建议还是写上。
var a=3.24
//定义字符串，单引号，双引号都可以使用
var s="abc"
var str='hehe'
//定义boolean类型
var flag=true
var flag2=false
//定义了一个变量，没有赋值，就是 undefined
var v;
//null对象的占位符。
var obj=null;
//使用弹框的方法，来弹出一下变量的值
alert(num);
alert(a);
alert(s);
alert(str);
alert(flag);
alert(flag2);
alert(v);
alert(obj);
//有一个typeof 运算符可以获取变量的原始数据类型
alert(typeof num);
alert(typeof a);
alert(typeof s);
alert(typeof str);
alert(typeof flag);
alert(typeof flag2);
alert(typeof v);
alert(typeof obj);
</script>
</head>
<body>
</body>
</html>
4. 逻辑语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
语句：
if
switch
while
do...while
for */
var num = 200;
if (num >= 200) {
alert("真")
} else {
alert("假的")
}
for(var i=1;i<=10;i++){
alert(i);
}
</script>
</head>
<body>
</body>
</html>
5. 打印的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=100;
//输出数据到html页面上
document.write(num);
//输出HTML标签
document.write("<h1>你好JS</h1>")
//输出HTML标签
document.write("<h1 style='color: red;'>你好世界</h1>")
//拼接变量
document.write("<h1 style='color:blue;'>你好世界"+num+"</h1>")
document.write("<b style='color:blue;'>你好世界"+num+"</b>")
//换行
document.write("<br>")
document.write("<b style='color:blue;'>你好世界"+num+"</b>")
</script>
</head>
<body>
</body>
</html>
5. 输出语句到控制台查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var num=100;
var sal=3.25;
//输出数据到浏览器的控制台 f12或查看元素--->控制台
console.log(num);
//输出多个变量的值
console.log(num,sal);
</script>
</head>
<body>
</body>
</html>
练习：打印99乘法表
<!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(j+"*"+i+"="+(j*i)+" ")
}
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
6. 算数运算符：+ - * / %
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* *算术运算符：+ - * / %
* 其他类型转为number
*
* 1.字符串转成数字，根据字面上去转，如果字面是个有效数字，就转换成数字，如果转换不过来就转换成 NaN
* 空串转换数字转成 0
* 注意：NaN参与数学运算结果也NaN
* undefined 参与数学运算结果都NaN
*
*
* 2. 布尔类型转换数字，true 转成1 false 转换成0
*
* */
var str = "2";
str = "abc100";
//NaN参与数学运算结果也NaN
var num = str * 5; //NaN*5
//alert(num);
var flag = false;
var sum2 = 2 * flag;
alert(sum2)
alert(5 * "");
alert(undefined/2);
</script>
</head>
<body>
</body>
</html>
7. 一元运算符：++ – +(正) -(负)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
* 一元运算符
++ -- +(正) -(负)
++ 自增1 -- 自减1
++ 在前，先运算，后使用 ++ 在后，先使用后运算
*/
var i=1;
var j=++i;
//数据类型的自动转换
var a=+"100"; //+100 -100
var sum=100+a;
alert(sum);
//JS中数据类型的自动转换：当运算符想要的数据类型和你给的数据类型不一致，运算符就会尝试去转换这个数据。
var s="100"*1+"200"*1;
alert(s)
</script>
</head>
<body>
</body>
</html>
8. 比较运算符： > < >= <= == 三个等于=== !=:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// * 比较运算符
// > < >= <= == === !=:
var v = NaN;
//NaN 参与比较运算，结果都是false 除了 !=
var b = v == NaN;
alert(b);
alert(NaN != NaN) //true
//字符串比较：比较两个字符串字面上的值，是否相等，用 == 号来比较
var str = "abc";
var str2 = "heheheh";
alert(str == str2)
var e="100";
var f=100;
// == 会转换数据类型，但是有的时候，我不希望这种效果，如果数据类型不一致，就不要去比，就直接false
var bb=e==f;
alert(bb);
// === 全等于 先比较数据类型，如果数据类型不一致，直接false,无需在比
var bb2=e===f;
alert(bb2);
</script>
</head>
<body>
</body>
</html>
9. 逻辑运算符 && || !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// * 逻辑运算符
// && || !
//字符串转换布尔类型： 非空串，转换成true 空串转换成false
//数字类型转换布尔： 0转换成false 非0 转换成ture
//NaN 和 undefined 转换boolean类型，转换成false
var str="abc";
// var flag=!str;
// alert(flag);
//数字类型转换布尔： 0转换成false 非0 转换成ture
var num=10;
//NaN 和 undefined 转换boolean类型，转换成false
//var vv;
//null 转换布尔类型，转换成false 如果对象不为null转换成true
var vv=null;
vv=new Object();
if(vv){
alert("真")
}else{
alert("假的");
}
/* while(str){
} */
</script>
</head>
<body>
</body>
</html>
10. 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
函数：类似于我们Java中的方法，封装一段功能逻辑，以实现重复调用
//JS中定义函数的语法
*/
//方式1:* var fun = new Function("参数列表","方法体"); 了解
//var fun = new Function("a,b","alert(a+b)");
//fun(10,20);
//方式2：注意形参不需要写数据类型
function add(a,b){
var sum=a+b;
return sum; //如果想返回数据，使用return返回即可
}
//调用
var r=add(20,30);
console.log(r);
//匿名函数，匿名函数可以作为参数传递
/*
function(a,b){
var sum=a+b;
return sum;
}
*/
//方式3：
var show=function(a,b){
var sum=a+b;
return sum;
}
var vv=show(36,69);
alert(vv);
</script>
</head>
<body>
</body>
</html>
函数的注意事项：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1.函数的形参，不需要写数据类型
function add(a, b) { //形参如果没有接收到值就是 undefined
console.log(a);
console.log(b);
return a + b;
}
//2.调用函数时，你可以传参，也可以不传参，传多，传少都可以
var v = add(10, 20, 30, 250);
alert(v);
//3.函数有一个length属性，可以获取形参的个数
var len=add.length;
alert(len);
//4.函数有一个内置对象，arguments 是一个伪数组，他可以接收所有的实参
function show(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var ss=show(20,30,52,30,85);
console.log("结果",ss);
</script>
</head>
<body>
</body>
</html>
11. 自定义函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
function add(a,b){
return a+b;
}
var sum=add(10,20)
*/
//自调用函数
// (function (形参) { /* code */ } (实参));
var sum = (function(a, b) {
return a + b;
}(20, 63));
alert(sum);
</script>
</head>
<body>
</body>
</html>
12. void运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<a href="javascript:window.open('about:blank')">Click me</a>
<!-- void(函数) void会拦截函数的返回值 -->
<a href="javascript:void(window.open('about:blank'))">Click me</a>
</body>
</html>
只想让 a可以点，但是不要跳页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
alert("show 函数")
}
</script>
</head>
<body>
<a href="index.html">一个链接</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="#">一个链接</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:void(0)">一个链接www.163.com</a>
<!-- 只想让 a可以点，但是不要跳页面 -->
<a href="javascript:;;">一个链接www.163.com</a>
<!-- 不跳转页面，还会调用我传入的函数，把他当成一个按钮来用，来触发一个函数 -->
<a href="javascript:void(show())">一个按钮</a>
</body>
</html>
13. const和let关键词
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//es6引入的一个关键字 const 用来定义常量的
const num = 200; //常量
//num=500; //常量不能再赋值
{
//代码块
var a = 1000;
//let 用来定义块级变量
let b = 500;
}
alert(a);
//alert(b); b是块级变量，所以访问不到了
if(true){
//块级作用域
//var c=20;
//let 用来定义块级变量
let c = 500;
}
//alert(c);
/*
for(var i=1;i<=10;i++){
alert(i);
}
alert(i);
*/
// let 用来定义块级变量
for(let i=1;i<=10;i++){
alert(i);
}
// alert(i);
</script>
</head>
<body>
</body>
</html>
14. 局部变量和全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//es6引入的一个关键字 const 用来定义常量的
const num = 200; //常量
//num=500; //常量不能再赋值
{
//代码块
var a = 1000;
//let 用来定义块级变量
let b = 500;
}
alert(a);
//alert(b); b是块级变量，所以访问不到了
if(true){
//块级作用域
//var c=20;
//let 用来定义块级变量
let c = 500;
}
//alert(c);
/*
for(var i=1;i<=10;i++){
alert(i);
}
alert(i);
*/
// let 用来定义块级变量
for(let i=1;i<=10;i++){
alert(i);
}
// alert(i);
</script>
</head>
<body>
</body>
</html>
JS 提供的常用几个内置对象
ES5之前没有类这个概念，只是对象这个概念
ES6之后有了类这个概念
15. String对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// String 对象
// String 对象用于处理文本（字符串）。
//创建的对象的方式
//方式1
//当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
var str=new String("hello");
//方式2
//当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
var s=String("abc");
//方式3
var ss="abc"
// instanceof 判断一个引用是不是该类型的一个引用
alert(str instanceof String); //true
alert(s instanceof String); //false
//查看原始数据类型
alert(typeof str); //object
alert(typeof s); //string
/* 3 方法：
charAt() 返回在指定位置的字符。
例子：var v="abcd";
var a=v.charAt(2);
concat() 连接字符串。
例子：var v="ab"; var a="cd";
var z=v.concat(a);
indexOf() 根据字符检索此符在字符串中的索引。
例子：var v="abcde";
var z=v.indexOf("c");
lastIndexOf() 从后向前搜索字符串。
substring() 提取字符串中两个指定的索引号之间的字符。
var v="abcde";
var z=v.substring(0,3); 含头不含尾
toLowerCase() 把字符串转换为小写。
例子：
var str = "Hello World!";
document.write(str.toLocaleLowerCase());
toUpperCase() 把字符串转换为大写。
replace() 替换字符串。
例子：
var v="abceaaaa";
var z=v.replace("a","h"); 参1：被替换的字符/或字符串 参数2：替换成哪个字符/或字符串
split() 把字符串分割为字符串数组。
例子：
var v="a#b#c#d";
var z=v.split("#");
* trim():去除字符串两端的空格
例子：
var v=" abcd ";
var z=v.trim();
*/
</script>
</head>
<body>
</body>
</html>
16. Number对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Number 对象
//Number 对象是原始数值的包装对象。
//类似于Java中的 Integer Double 包装类
//创建 Number 对象的语法：
//当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象
var myNum=new Number(1000);
//如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。
var myNum2=Number("3.25");
alert(myNum instanceof Number); //true
alert(myNum2 instanceof Number); //false
alert(typeof myNum); //object
alert(typeof myNum2); //number
//静态属性
//MAX_VALUE 可表示的最大的数。 、
//MIN_VALUE 可表示的最小的数。
var max=Number.MAX_VALUE;
var min=Number.MIN_VALUE;
//方法
var v=new Number(3.58585858585);
//保留有效的五位数字，包含整数部分在内,返回的是 字符串类型的数字
//var strNum=v.toPrecision(5);
//alert(strNum);
//toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
var ss=v.toFixed(5);
alert(ss);
//把字符串的数字，转成数字
var yy="100";
var n=yy*1;
var n2=+yy;
var n3=Number(yy);
</script>
</head>
<body>
</body>
</html>
17. Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Math 对象不用new 直接使用对象名Math来调用方法接口
/* Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整 */
//
// Math.random();
// 生成 1-100 之间的随机整数
//生成 6位随机验证码
var n=Math.round(Math.random()*100)
alert(n)
</script>
</head>
<body>
</body>
</html>
练习：验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//生成 1--100之间的整数
for(let i=0;i<1000;i++){
var num=Math.ceil(Math.random()*100);
if(num==1||num==100){
console.log(num);
}
}
//生成四位随机数可以包含字母数字
var str="0123456789abcdefghjklABCDEFGHJKLZXY";
//生成四个随机索引
var a=Math.floor(Math.random()*str.length);
var b=Math.floor(Math.random()*str.length);
var c=Math.floor(Math.random()*str.length);
var d=Math.floor(Math.random()*str.length);
var code=str.charAt(a).concat(str.charAt(b)).concat(str.charAt(c)).concat(str.charAt(d));
alert(code);
//生成6位的随机验证码，数字组成的。
var strCode='';
for(let i=1;i<=6;i++){
var v=Math.ceil(Math.random()*9);
strCode+=v
}
alert(strCode);
</script>
</head>
<body>
</body>
</html>
18. 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();
//从0开始数月份
var month=myDate.getMonth();
//获取的是星期
var day=myDate.getDay();
//获取日
var d=myDate.getDate();
//获取时
var hour=myDate.getHours()
var minu=myDate.getMinutes();
var sec=myDate.getSeconds();
//getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
var time=myDate.getTime();
alert(year)
alert(month);
alert(day)
alert(d)
alert(hour);
alert(minu);
alert(sec)
alert(time)
// 2022-01-05 10:27:30 自己单独获取出来拼接成自己要的的格式
//获取当前日期字符串 2022/1/5 上午10:32:30
var localTime=myDate.toLocaleString();
document.write(localTime);
//alert(localTime);
</script>
</head>
<body>
</body>
</html>
19. 使用第三方的工具类来处理日期----moment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入这个工具类 -->
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//格式化现在的日期
var dateStr = moment().format('YYYY-MM-DD HH:mm:ss');
alert(dateStr);
//把指定的毫秒值毫秒值，格式化成日期字符串。
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>
20.全局函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//全局函数，直接使用
//==判别不出来NaN
//判断是不是NaN用方法判断
var b=isNaN(NaN);
alert(b);
var b1=isNaN("abc"*1);
alert(b1);
//把字符串的数字转换成数字
//把字符串的数字，转成数字
var yy="100";
var n=yy*1;
var n2=+yy;
var n3=Number(yy);
//使用全局函数来转换
//从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
var num=parseInt("100abc");
alert(num);
var num2=parseFloat("3.25abc");
alert(num2);
</script>
</head>
<body>
</body>
</html>
21. 数组对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//Array 对象
//Array 对象用于在单个的变量中存储多个值。类似于我们Java中的ArrayList
//创建 Array 对象的语法：
//new Array();
//new Array(size);
//new Array(element0, element1, ..., elementn);
//1. JS中的数组对象，他的长度是可变，没有角标越界的异常。
//2.JS中的数组，可以存储多种数据类型的元素。
var arr=new Array();
//通过角标来存元素
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
arr[4]=50;
var ele=arr[arr.length-1];
alert(ele);
//获取不到就是 undefined 不会报角标越界
var ele2=arr[10];
alert(ele2);
//定义数组的方式2 可以定义数组的长度，但是你超过了也不报错
var arr2=new Array(3);
arr2[0]=20;
arr2[1]=30;
arr2[2]=40;
arr2[3]=200;
alert(arr2[3]);
//方式3：定义数组的时候，直接存储元素
var arr3=new Array(10,false,"abc",304,3.25);
//方式4：简写方式 注意是中括号
var arr4=[10,false,"abc",304,3.25];
//数组的遍历
for(let i=0;i<arr4.length;i++){
console.log(arr4[i])
}
</script>
</head>
<body>
</body>
</html>
22. 数组对象常用的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[10,20,30,40,50,60];
var arr2=[100,200,300,400,500,600];
//concat() 连接两个或更多的数组，并返回连接好的新数组。
var newArr=arr.concat(arr2,arr2);
console.log(newArr);
//join() 把数组的所有元素拼接成一个字符串。"10-20-30"
var str=arr.join("-"); //10-20-30-40-50-60
console.log(str);
//不要分隔符，就给个空串
var str2=arr.join("");
console.log(str2);
//pop() 删除并返回数组的最后一个元素
var arr3=[100,200,300,400,500,600];
var ele=arr3.pop();
ele=arr3.pop();
ele=arr3.pop();
ele=arr3.pop();
console.log(arr3);
console.log(ele);
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var arr4=[]; //定义一个空数组
arr[0]=10; //使用角标存元素
arr4.push(20);
arr4.push(100,200,300);
console.log(arr4);
//reverse() 颠倒数组中元素的顺序。
console.log(arr4.reverse());
// shift() 删除并返回数组的第一个元素
var arr5=[100,200,300,400,500,600];
var ele2=arr5.shift();
ele2=arr5.shift();
ele2=arr5.shift();
console.log(ele2);
console.log(arr5);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//pop() 删除并返回数组的最后一个元素
//shift() 删除并返回数组的第一个元素
//splice() 删除元素，并向数组添加新元素。
var arr = [100, 200, 300, 400, 500, 600];
//从2索引处开始，删除1个元素
arr.splice(2,1);
console.log(arr);
var arr2 = [100, 200, 300, 400, 500, 600];
//从2索引处开始，删除2个元素
arr2.splice(2,2);
console.log(arr2);
//替换功能
var arr3 = [100, 200, 300, 400, 500, 600];
//从2索引开始删除一个元素，在插入进去一个i7000
arr3.splice(2,1,7000);
console.log(arr3)
//替换功能
var arr4 = [100, 200, 300, 400, 500, 600];
//从2索引开始删除一个元素，在插入进去多个 元素 7000 8000 9000
arr4.splice(2,1,7000,8000,9000);
console.log(arr4)
</script>
</head>
<body>
</body>
</html>
23. 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, 50, 50];
var b = arr.every(function(ele) {
return ele % 2 == 0;
});
alert(b);
//filter() 检测数值元素，并返回符合条件所有元素的数组。
//把数组中所有的偶数过滤出来,放到新数组中
var arr2 = [10, 20, 30, 50, 60, 4, 3, 1, 7, 8, 11, 13, 52];
var newArr=arr2.filter(function(ele){
return ele%2==0; //true 表示符合条件，false表示不符合
});
alert(newArr);
//find() 返回符合传入测试（函数）条件的数组元素。
//findIndex() 返回符合传入测试（函数）条件的数组元素索引。
//获取数组中第一个符合条件的元素
var arr3 = ["张三","李四","王五","王老虎","王百万"];
//获取数组中王开头的第一个元素
var name=arr3.find(function(ele){
return ele.startsWith('王');
});
alert(name);
//遍历数组
//forEach() 数组每个元素都执行一次回调函数。
arr2.forEach(function(ele,index){
console.log(index,ele);
})
//indexOf() 搜索数组中的元素，并返回它所在的位置。
var arr3 = [10, 10,20, 30, 50, 50];
//查找该元素第一次出现的索引，如果找不到返回 -1
var index=arr3.indexOf(100);
alert(index);
</script>
</head>
<body>
</body>
</html>
24. ES6中数组新增的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr = [10, 10,20, 30, 50, 50];
//判断是不是数组对象
var b=Array.isArray(arr);
alert(b);
alert(arr instanceof Array);
//map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
var arr2 = ["abc","hello","index","hehe","haha"];
//把数组中的元素变为大写,放到一个新数组中
var newArr=arr2.map(function(ele){
return ele.toUpperCase();
});
console.log(newArr);
var numbers = [65, 44, 12, 4,10];
//把数组中的元素累加起来 total 上次累加的结果，num 数组的元素
var sum=numbers.reduce(function(total, num,index,arr) {
console.log("元素索引",index)
return total + num;
},10);
alert(sum);
</script>
</head>
<body>
</body>
</html>
25. 正则表达式对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// RegExp 对象
// RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
//1.直接量语法
// /pattern/attributes
//2.创建 RegExp 对象的语法：
// new RegExp(pattern, attributes);
//创建 RegExp 对象的语法： "i" 可选参数，表示不区分大小写
var regx=new RegExp("[a-b]+","i");
//匹配的方法
var flag=regx.test("ABC");
alert(flag);
//1.直接量语法，定义正则表达式对象 常用 /正则表达式/可选模式
var regx2=/[a-b]+/i ;
var flag2=regx2.test("ABC");
alert(flag2);
</script>
</head>
<body>
</body>
</html>
26. Js中正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str = "hello123";
//^开头 $结尾 这里要加上 开头和结尾，防止部分匹配
var reg = /^[A-Z0-9]+$/;
alert("匹配吗？" + reg.test(str));
</script>
</head>
<body>
</body>
</html>
27. 根据正则截取字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// exec() 根据正则表达式去查找字符串符合规则的内容。
//查找出三个字符组成的单词。
var str = "da jia YAO hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi; //g 全文匹配，i 不区分大小写
var s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
s = reg.exec(str); //用来截取符合正则的字符串
alert(s);
/* var line = "";
while ((line = reg.exec(str)) != null) {
document.write(line + "<br/>")
} */
</script>
</head>
<body>
</body>
</html>
28. 字符串对象关于正则的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var str="aaa=bbb=ccc=ddd=eee=AAA";//aaabbbccc
//g 全文匹配
var newStr=str.replace(/=/g,""); //根据正则替换，注意全文匹配
alert(newStr);
</script>
</head>
<body>
</body>
</html>
29. Boolean对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* Boolean 对象
Boolean 对象表示两个值："true" 或 "false"。
创建 Boolean 对象的语法：
new Boolean(value); //构造函数
Boolean(value); */
var flag=Boolean("true");
if(flag){
alert(flag);
}
</script>
</head>
<body>
</body>
</html>
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
