作者声明：本博客中所写的文章，都是博主自学过程的笔记，参考了很多的学习资料，学习资料和笔记会注明出处，所有的内容都以交流学习为主。有不正确的地方，欢迎批评指正。
本节课学习视频来源：https://www.bilibili.com/video/av26083462
JavaScript基础
1.1 认识JavaScript
什么JavaScript
JavaScript 历史
JavaScript 组成
1.2 引入JavaScript
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>演示js的三种引用方式</title> </head> <body> <!-- 第一种方式 :行内的js脚本 --> <h1 onclick="alert('我是第一种引入方式，行内的js脚本')">标题标签</h1> <input type="button" value="按钮"> <script> // 第二种:嵌入的js脚本，一般会在body之前。 alert('我是第二种引入方式，嵌入的js脚本'); </script> <!-- 第三种：外部引入的js脚本 --> <script src="./js/01.js"></script> </body> </html>
Script标签的属性
Script标签放置位置
1.3 JavaScript语法
JavaScript语法
直接量
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js基础语法</title> </head> <body> <script> // 直接量: // 数值 // 字符串 // 布尔值 console.log('123456'); // 单行注释 /*多行 注释*/ </script> </body> </html>
JavaScript语句
关键字和保留字
数据类型详解
type 取数据类型
Number数值类型
数据的表示范围
NaN
算数运算符
算数运算符综合练习
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>算数运算符综合练习</title>
</head>
<body>
<script>
var a , b , c, d;
a = 10;
b = 8;
c = 9;
d = a + b;
c = d * a;
c = 2 * c;
var f = a + b + c + d;
console.log(f);
</script>
</body>
</html>
boolean类型
字符串类型
字面量转义符
undefined类型
null
object 和 function
1.3 运算符
乘法运算符
除法的特殊情况
求余运算的特殊情况
自增自减运算符
加法运算的二义性与一元加法
在变量前加 + 转换为数字
关系运算符
关系运算符规则
减法运算符
Boolean 操作符
相等运算符
全等和不全等
条件运算符
赋值运算符
逗号运算符
运算符的综合练习
运算符的优先级
1.4 类型转换
显式的类型转换
Number() 函数转换
parseInt 转换数字
String 方法转换
Boolean 函数转换
隐式的类型转换
逻辑运算符补充
1.5 循环分支语句
空语句及复合语句
声明语句
if 语句
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if语句</title>
</head>
<body>
<script>
//第一种写法：if语句
if( 4 > 2 ) console.log("4 > 2为真");
//if语句，如果满足（表达式的值为真） 那么就执行后面的 语句
//第二种写法：if语句
if( 3 < 9 )
console.log(222);
//第三种写法：如果我想要在满足 条件的时候，执行多条语句。
if(0 == false ) {
console.log("1");
console.log("2");
console.log("3");
}//语句块的结尾不要加分号 右花括号代表if分支语句的结束
console.log("if 结束后");
var a;//如果一个变量声明以后没有赋出事值，那么么就为undefined。
if( !a ){
console.log(a);
} //即使if只有一行代码，可要写上花括号。
</script>
</body>
</html>
if else 语句
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if语句</title>
</head>
<body>
<script>
//第一种写法：if语句
if( 4 > 2 ) console.log("4 > 2为真");
//if语句，如果满足（表达式的值为真） 那么就执行后面的 语句
//第二种写法：if语句
if( 3 < 9 )
console.log(222);
//第三种写法：如果我想要在满足 条件的时候，执行多条语句。
if(0 == false ) {
console.log("1");
console.log("2");
console.log("3");
}//语句块的结尾不要加分号 右花括号代表if分支语句的结束
console.log("if 结束后");
var a;//如果一个变量声明以后没有赋出事值，那么么就为undefined。
if( !a ){
console.log(a);
} //即使if只有一行代码，可要写上花括号。
</script>
</body>
</html>
if else if语句
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ifelseif语句</title>
</head>
<body>
<script>
var num = 5;
if( num == 1){
console.log('星期一');
}else if (num == 2){
console.log('星期二');
}else if (num == 3){
console.log('星期三');
}else if( num == 4){
console.log('星期四');
}else if( num == 5){
console.log('星期五');
} else if(num == 6){
console.log("星期六");
}else{
console.log("星期日");
}
</script>
</body>
</html>
if语句的嵌套
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if嵌套</title>
</head>
<body>
<script>
//如果a是数字类型，那么判断是否大于9，如果大于9则输出“大于9”，否则输出“非法类型”
//第一步:判断变量a是否是数字
var a = 11;
//判断变量a的类型，使用typeof可以获取它的类型
if( typeof(a) === "number" ){
//判断a是否大于9
if( a > 9 ){
console.log('大于9');
}else{
console.log("非法类型");
}
}
</script>
</body>
</html>
if语句练习 
例题1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if练习</title>
</head>
<body>
<script>
//声明两个变量
var a , b;
a = Math.random();
b = Math.random();
if( a > b){
console.log( a );
}else if ( a == b ){
console.log( "=" );
}else{
console.log( "老马" );
}
</script>
</body>
</html>
例题2：例题3：例题4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if练习</title>
</head>
<body>
<script>
var a = 7;
//1-5 输出工作日 6-7 输出周末
if( a == 6 || a == 7 ){
console.log("周末");
}else{
console.log('工作日');
}
//判断用户名是否为空
var userName = null;
if ( userName == null || userName == "" || userName.length == 0){
console.log("空");
}
//
var t = "sss";
if( typeof( t ) == "string" ){
console.log( Number( t ) );
}else {
console.log( !!t );
}
</script>
</body>
</html>
while 语句
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>循环语句</title>
</head>
<body>
<script>
//计算 1 到 100 的和
var i = 0;
var t = 0;
//当满足这个 判断表达式 为真的时候 不断进行循环执行语句块
while( i <= 100 ){
//循环体语句块
t += i;
i++;
}
console.log( t );
//第一步，判断，判断表达式是否为真值 （1 true 非空字符串）
//第二步，如果是真值，那么执行while语句块 否者结束while语句的循环 继续执行后面的语句块
//继续重复第一步和第二步
</script>
</body>
</html>
do while语句
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>do while语句</title>
</head>
<body>
<script>
var i = 0;
do {
console.log( Math.random() * 100 );
i++;
}while( i < 10 )
console.log( "循环执行完毕" );
</script>
</body>
</html>
for 循环语句
for ( var j = 1; j <= 10; j++ ){ console.log( Math.random() ); }
示例代码
<script>
//求1-100的和
var result = 0;
for ( var i = 1; i <= 100; i++ ){
result += i;
}
console.log( result );
//求 10 阶乘
var result2 = 1;
for ( var k = 1; k <= 10; k++ ){
result2 *= k;
}
console.log( result2 );
</script>
示例代码：
<script>
//斐波那切数列
var a = [];
a[0] = 0;
a[1] = 1;
console.log("a[0] = 0");
console.log("a[1] = 1");
for ( var i = 2; i <= 100; i++ ){
a[i] = a[i-1] + a[i-2]
console.log( "a[" + i + "] = " + a[i] );
}
</script>
示例代码：优化
var fn0 = 0,fn1 = 1,result = 0; for ( var j = 2; j <= 100; j++ ){ result = fn1 + fn0; fn0 = fn1; fn1 = result; console.log( result ); }
示例代码
<script>
var count = 0;
for ( var i = 1; i < 100;i++ ){
if( i%3 == 0 ){
count++;
}
}
console.log( count );
</script>
continue语句
示例代码
<script>
//求1-100的和 除了 对3取余为0的数
var result = 0;
for ( var i = 1;i <=100;i++ ){
if ( i%3 == 0 ){
continue;
}
result += i;
}
console.log( result );
</script>
break语句
示例代码
<script>
for ( var i = 1;i <= 10 ;i++ ){
console.log( i );
if( i == 7 ){
break;
}
}
</script>
switch语句
示例代码
<script>
var num = 2;
switch (num) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("错误");
}
</script>
示例代码：
<script>
var num = 53;
for (var i = 2; i < num; i++) {
if (num % i == 0) {
console.log("不是质数");
break;
}
}
if (i == num) {
console.log("是质数");
}
</script>
求1-100之间的质数
示例代码：
<script>
var i = 0;
var j = 0;
var flag = true;
for( i = 2;i <= 100; i++ ){
flag = true;
for( j = 2;j <= Math.sqrt(i) ; j++ ){
if( i % j == 0 ){
flag = false;
break;
}
}
if( flag == true){
console.log( i );
}
}
</script>
1.6 函数
示例代码
<script>
//函数定义可以放在函数调用之前和之后 都可以
//函数的关键字 function
function add(){
//函数体
console.log( "my first function!" );
}
//函数的调用
add();
</script>
示例代码
//第二：带参数的函数 //定义一个函数，实现求两个数的乘积 function mult( a , b ) { //a b 形参 // a * b return a * b;// 把a 和 b的乘积结果返回 到函数调用者的地方 } //函数返回的结果：直接赋值给变量t //2 4 是实际传递的参数 实参 var t = mult( 2,4 ); //执行mult函数 给函数体传递2 和4 两个参数 console.log( t );
函数的封装
计算1-n的和
示例代码：
<script>
//实现1 到 n 的和
function sum( n ){
//实现1 - n的计算
//如果是负数 0 字符串 null undefined false等 不能继续
// 如果用户传来的数据不是数字 则返回NaN
//如果用户穿过来的数据不是大于1的数字：返回0
if( typeof( n ) != "number" ){
return NaN;//直接但会NaN 如果函数中执行遇到了return 语句 函数立即结束
}
if ( n < 1 ){
return 0;
}
//在大于1的情况下
var i = 1,result = 0;
while( i <= n ){
result += i;
i++;
}
return result;//把计算结果返回
}
var t = sum(7);
console.log( t );
</script>
return 子句
函数的参数
1 示例代码
<script>
//给一个数字，返回星期
//
//getWeekName();
function getWeekName(n) {
// 第一步：判断n的数据类型
if (typeof (n) != "number" || n > 7 || n < 1) {
return "不是正常的日期格式";
}
var t = "";
//第二步 根据n 返回对应的日期
switch (n) {
case 1:
t = "星期一";
break;
case 2:
t = "星期二";
break;
case 3:
t = "星期三";
break;
case 4:
t = "星期四";
break;
case 5:
t = "星期五";
break;
case 6:
t = "星期六";
break;
default:
t = "星期日";
break;
}
return t;
}
console.log( getWeekName(1) );
console.log( getWeekName(0) );
console.log( getWeekName("3") );
console.log( getWeekName(null) );
</script>
匿名函数
<script>
//匿名函数
var f = function( a ){
return a * a;
};//要加分号
//因为用var声明的一个变量f，f的类型就是function
//f 变量跟其他 变量一样使用 可以作为其他 函数的参数使用
console.log( typeof(f) );
console.log( f(3) );
console.log( typeof(f2) );
console.log( f2(9) );
//函数声明
function f2( a ){
return a*a;
}
</script>
1.7 对象类型
对象
object对象创建方式
示例代码：
<script>
//创建Object对象
//第一种：使用new操作符创建对象
var t = new Object(); //创建了一个Object对象t
//new 会创建一个对象，然后对象执行Object函数，最后返回
//js是一个动态的语言 可以随时添加属性和方法
t.age = 19;
t.name = "jack";
t.run = function () {
console.log("奔跑....");
}
t["demo"] = "demo";
//对象怎么使用自己的属性和方法
//第一种方法： 使用点的方式
console.log(t.age);
// 第二种方法：使用中括号 内字符串的方式
console.log(t["name"]);
</script>
代码示例
<script>
//创建对象的第二种方式 字面量的方式
//也成为JSON对象的方式
var t = {
age:19,
name:"laoma",
run:function(){
console.log("老马跑路了");
}
};//分号别忘
t.color = "yellow";
console.log( t.age );
t.run();//执行t对象中的run方法，如果一个对象的属性是函数，我们就成为方法
t.age = 10;
console.log( t.age );
</script>
对象的动态添加属性及方法
引用类型
示例代码：
<script>
var t = {};// t = new Object();
t.age = 19;
console.log( t.age );
//通过delete操作符 删除属性
delete t.age;//删除t的自定义age属性
console.log( t.age );
//通过 in 运算符，可以检查属性是否属于对象的自定义属性，返回的结果是true或者false
t.name = "123";
console.log( "name" in t );
delete t["name"];
console.log( "name" in t );
</script>
枚举对象的属性
示例代码：
<script>
var t = {};
t.name = "123";
t.age = 19;
t.run = function(){
console.log("ss");
}
for( var k in t ){
//k 相当于属性的名字的变量
//第一次循环的时候，k等于t变量的第一个属性名
//第二次循环的时候，k等于t变量的第二个属性名
//以此类推
console.log( k );
//t.k不可以使用 k相当于一个变量，相当于一个字符串
if( typeof(t[k]) == "number" ){
console.log( t[k] );
}
}
</script>
对象的原型与构造函数
对象练习
示例代码
<script>
//封装一个猫对象
//var cat = new Object();
var cat = {
color:"red",
weight:20,
name:"kimi",
ID:124,
run:function(){
//this就相当于cat对象，在对象的方法中使用this代表当前对象
console.log( this.name + " 奔跑方法" );
},
jump:function(){
console.log( this.name + " 跳的方法" );
}
};
cat.run();
//输出猫所有的自定义属性
for( var k in cat ){
console.log( k );
}
</script>
示例代码
<script>
var myMath = {
PI:3.1415926,
sum:function( n ){
var result = 0;
//实现1-n的和
for ( var i = 1;i <= n; i++ ){
result += i;
}
return result;
},
factorial:function( n ){
var result = 1;
//求 1-n的阶乘
for( var i = 1;i <= n;i++ ){
result *= i;
}
return result;
}
}
console.log( myMath.PI );
console.log( myMath.sum( 100 ) );
console.log( myMath.factorial( 10 ) );
</script>
1.8 Array 类型
创建数组
示例代码
<script>
var arr = new Array();//创建一个空数组 var arr = [];
//console.log( arr.toString() );
arr[0] = 1; //length = 1
arr[1] = 2; //length = 2
arr[2] = 3; //length = 3
console.log( arr );
console.log( "length ="+arr.length );
</script>
示例代码
//构造函数创建数组传递参数 var arr2 = new Array( 4 );//给构造函数传递数值类型，那么它认为是创建容量为数值的数组 arr2[0] = "sss"; arr2[1] = 0; arr2[2] = 0; arr2[3] = 0; arr2[4] = 0; console.log( arr2 ); //创建数组的 时候，顺便进行初始化数组内容 var arr3 = new Array( 1,2,3,"ssd","ew",true,[22,33] ); console.log( arr3 ); //length = 7 //如果减小length值 就相当于阶段数组 // arr3.length = 2; // console.log( arr3 ); // => [ 1,2 ]
数组字面量创建数组
示例代码：
<script>
var a1 = [];//创建空数组
var a2 = [ 1,2,"sss",true,{age:19},null,undefined ];
console.log( a2 );
var a3 = [ 1,,3 ];
console.log( a2[0] );//索引从0开始
</script>
遍历数组
<script>
//如果是连续的数组，可以使用length代表数组中的元素个数
var a = [1,2,3,89,"slj",true]; //length = 6
console.log( "length = " + a.length );
//输出数组中的所有元素
for(var i = 0; i < a.length;i++){
console.log( a[i] );
}
//另外我们还可以用 for in 的方式来遍历数据，也可以把继承自原型的属性也进行遍历
//for in 遍历对象 拿到的是对象的属性名 而不是属性值
for( var k in a ){
console.log( a[k] );//ke是索引编号不是数组的元素值
}
</script>
示例代码
<script>
//案例 一个数组，合法值为1 2 3 其余为不合法 统计合法 和不合法的个数
var t = [ 1,4,9,"sss", 3 ,"2",2,3,2,1];
var rightfulNum =0, //定义合法数字个数
illNum = 0; //定义非法数字个数
//遍历数组中的每个元素，判断是否合法，如果合法则rightfulNum +=1
//第一种方法：
for( var i = 0;i < t.length;i++ ){
if(t[i]===1||t[i]===2||t[i]===3 ){
rightfulNum += 1;
}else{
illNum += 1;
}
}
console.log( "合法：" + rightfulNum );
console.log( "非法：" + illNum );
//第二种方法：
rightfulNum =0,
illNum = 0;
for( var i = 0;i < t.length;i++ ){
if(t[i]===1||t[i]===2||t[i]===3 ){
rightfulNum += 1;
}
}
illNum = t.length - rightfulNum;
console.log( "合法：" + rightfulNum );
console.log( "非法：" + illNum );
//第三种方法
rightfulNum =0,
illNum = 0;
for( var k in t ){
switch (t[k]){
case 1:
rightfulNum += 1;
break;
case 2:
rightfulNum += 1;
break;
case 3:
rightfulNum += 1;
break;
default:
illNum +=1;
}
}
console.log( "合法：" + rightfulNum );
console.log( "非法：" + illNum );
//第四种方法：
rightfulNum =0,
illNum = 0;
for( var k in t ){
switch (t[k]){
case 1:
case 2:
case 3:
rightfulNum += 1;
break;
default:
illNum +=1;
}
}
console.log( "合法：" + rightfulNum );
console.log( "非法：" + illNum );
</script>
稀疏数组
示例代码
<script>
var t = [1,2];
t[100] = "ssj";//索引到了100 length = 101
console.log(t);
console.log(t[10]);//undefined
//for in 循环会越过稀疏数组中的undefined空值
for( var k in t ){
if( !t.hasOwnProperty(k) ){
continue;
}
console.log(t[k]);
}
//1 length和数组的元素的个数不一定相等
//2 数组不一定是连续的
//3 使用for in循环可以对稀疏数组的空值undefined进行过滤
//4 不要使用稀疏数组
</script>
数组方法-栈队列和排序
代码示例
<script>
//数组可以通过 push pop两个方法形成栈数据结构
var t = ["a","b","c","d","e","f"];
console.log( t.length );
console.log( t );
//从数组的末尾弹出一个元素，并返回弹出的数组元素，数组长度减1
t.pop();
console.log(t);
t.pop();
console.log(t);
//压入一个元素
var r = t.push(3);
//最新的一个长度
console.log(r);
console.log(t);
</script>
队列
示例代码
<script>
//用数组模拟队列的数据结构
var t = [];
//往队列里面放入1 2 3 三个元素
t.push( 1 );
t.push( 2 );
t.push( 3 );
console.log( t );
//出队一个元素
//t.shiift()返回数列出队的第一个元素
console.log( t.shift() );
console.log( t );
//再出队一个元素
console.log( t.shift() );
console.log( t );
//队列的特点就是先进先出
</script>
示例代码
<script>
//对数组进行排序
var t = [ "c" ,"b","a","f","e" ];
console.log( t );
t.sort(); //对数组中的元素进行排序
console.log( t );
//如果是数组进行排序
var arr = [33,10,1,22,12,222,30];
console.log( arr );
//sort方法是按照字符串进行比较大小规则计算排序的。
//如果数组中的元素不是字符串类型，会转成字符串后进行比较
arr.sort();
console.log( arr );
</script>
函数作为参数进行传递
示例代码
<script>
//此函数接收两个参数，要求返回值为：负数 0 正数。
//如果返回负数，代表第一个参数小鱼第二个参数 0 为 相等 正数则大于
//定义一个变量，变量的类型为function
var compareFun = function( a,b ){
return a - b;
};
var m = [ 2,20,10,9,11,12 ];
console.log( m );
//默认是转成字符串后比较大小
m.sort();
console.log( m );
//利用函数式编程，sort方法 可以接受一个 比较大小的函数，例如数值比较大小的发昂发排序
m.sort( compareFun );
console.log( m );
//进一步优化，由于匿名函数只用一次，没有必要创建一个变量。
//可以直接把匿名函数传递到sort函数里去就行
m.sort(function( a,b ){
return a - b;
});
console.log( m );
</script>
数组的方法-连接方法
示例代码
<script>
var t = [ 1,2,3 ];
console.log( t );
//调用数组的连接方法，不会影响原来的数组
//函数会返回一个新的拼接数组
var newArr = t.concat( "ss",true,222 );
console.log( t ); // =>[ 1,2,3 ]
console.log( newArr );
var newArr2 = t.concat( ["laoma","beijing",999] );
console.log( newArr2 );
</script>
示例代码
<script>
var t = [ 1,2,3 ];
//tostring方法会把数组转化为字符，重写了原型的方法
//把数组中的元素都转成字符串后，用逗号分隔不同的元素
console.log( t.toString() );
//join方法也可以将数组成字符串，默认跟tostring一样
console.log( t.join() );
//join方法可以传一个参数，用来分隔数组中的元素
console.log( t.join('-') );
console.log( t.join( '|' ) );
</script>
数组的方法-获取切片的方法
示例代码
<script>
var t = [ 0,1,2,3,4,5 ];
console.log( t );
//slice:赋值数组的一部分
//传一个参数的时候，是从参数的索引为值开始截取到数组最后
var a1 = t.slice( 2 );//从索引位置2开始截取到数组的最后
// a1 = [2,3,4,5];
console.log( a1 );
//传两个参数:从第一个参数作为索引位置开始，到第二个参数作为索引前面的那个元素结束
//截取数组切片，对原数组没有任何影响
var a2 = t.slice( 2,5 );
console.log( a2 );
console.log( t );//对原来数组没影响
//如果传递的是负数，那么从数组结尾开始计算，但是不要用
var a3 = t.slice( -3,-1 );
console.log( a3 );
//slice方法只能往后截取，如果往前截取返回[]
var a4 = t.slice( -3,-4 );
console.log( a4 );
</script>
数组的方法-切片方法
示例代码：
<script>
var t = [0,1,2,3,4,5];
//splice方法如果只传入一个参数，那么就从这个参数开始删除到数组的结尾
//对原数组有影响
var a1 = t.splice( 3 );
//对原数组有影响 t = [0,1,2];
console.log( t );
//返回删除的部分 a1 = [3,4,5];
console.log( a1 );
//传递两个参数:第一个参数是要删除的其实索引start
// 第二个参数是要删除元素的个数
t = [0,1,2,3,4,5];
var a2 = t.splice( 3,1 );
console.log( t );
console.log( a2 );
//如果传递：两个以上的参数
//第一个：start
//第二个：删除数据的个数
//第三个及后面的参数都是要查到start索引位置的元素
t = [0,1,2,3,4,5];
var a3 = t.splice( 3,2,"ass","vss","css" );
console.log( a3 );
console.log( t );
//splice的应用，给数组任意位置插入元素
t = [0,1,2,3,4,5];
t.splice( 3,0,"a" );
console.log( t );
</script>
数组案例
示例代码：
<script>
var arr = [90,8,34,2,39,87,22,10];
//1 将数组内容进行反序
arr.reverse( arr );
console.log( arr );
//第二种方法：创建一个新数组，逆序之间存放 原数组的数据内容
arr = [90,8,34,2,39,87,22,10];
var arrt = [arr.length];
for(var i = arr.length - 1, k = 0;i >= 0;i--,k++){
arrt[k] = arr[i];
}
console.log(arrt);
//第三种方法
for(var i=0;i<arr.length;i++){
arrt[arr.length-1-i] = arr[i];
}
console.log( arrt );
//第四种方法:前后交换
for(var i= 0;i<arr.length/2;i++){
var te = arr[i];
arr[i] = arr[arr.length-1-i];
arr[arr.length-1-i] = te;
}
console.log(arr);
arr = [90,8,34,2,39,87,22,10];
//2 求一个数据数组中的最小值及它的索引
var minvalue = arr[0];//默认初始值
var minindex = 0;//默认初始值
for( var k in arr ){
//如果遍历到的值小于初始值，则将遍历的到的值赋值给最小值，并记录索引
if(arr[k] < minvalue ){
minvalue = arr[k]
minindex = k;
}
}
console.log( "最小值是：" + minvalue );
console.log( "最小值索引是：" + minindex );
arr = [90,8,34,2,39,87,22,10];
//3 求一个数组中的数据的平均值 最大值 和
var maxvalue = arr[0],
avgvalue = 0,
sumvalue = 0;
for( var i = 0;i < arr.length;i++ ){
//如果遍历到的值大于初始值，则将遍历到的值赋值给最小值
if( arr[i] > maxvalue ){
maxvalue = arr[i];
}
//求和
sumvalue += arr[i];
}
//求平均值
avgvalue = sumvalue/arr.length;
//输出数据
console.log( "平均值是：" + avgvalue );
console.log( "最大值是：" + maxvalue );
console.log( "和是：" + sumvalue );
arr = [90,8,34,2,39,87,22,10];
//4 数组的数据进行排序
arr.sort( function(a,b){
return a - b;
} );
console.log( arr );
arr = [90,8,34,2,39,87,22,10];
//5 逐个比较排序算法
var temp = 0;
for( var i = 0; i < arr.length-1;i++ ){
for(var j = i+1; j < arr.length;j++){
if( arr[i] > arr[j] ){
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
//输出结果
console.log( "逐个比较"+arr );
//冒泡法
//第一个循环控制趟数
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] ){
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log( "冒泡法："+arr );
arr = [90,8,34,2,39,87,22,10,10,2,39,8,90,2,2,2,2,10];
//6 给定一个数组，请去掉数组中的重复数据
//定义另一个数组，并且赋初值为arr[0]
//将数组与另一个数组的所有数字进行比较 假设不存在未false
//如果另一数组存在 那么就是true
//将数组arr中的数 一次跟arrtemp中的数字进行比较
//如果存在，那么就跳过
//如果不存在，就push
var arrtemp = [];
//原数组的第一个元素插入新数组
arrtemp[0] = arr[0];
//把后续的原数组中的元素插入到新数组中，插入前判断新数组中是否存在元素
//如果存在继续下一次循环，如果不存在就把元素插入到新数组中。
for( var i = 0 ;i < arr.length; i++ ){//遍历原数组中的元素
//有一种indexOf的方法,ie8不能用
// if( arrtemp.indexOf(arr[i]) == -1 ){
// arr.push( arr[i] );
// }
//假设在 另一个数组里不存在
for( var j = 0;j < arrtemp.length;j++ ){
if( arr[i] == arr[j] ){
//在另一个数组存在，不插入
break;
}
}
if( j == arrtemp.length ){
//如果另一个数组不存在该数，就在另一个数组中加入该数
arrtemp.push( arr[i] );
}
}
console.log( arrtemp );
//另一种方法 哈希
arr = [90,8,34,2,39,87,22,10,10,2,39,8,90,2,2,2,2,10];
var h ={};
for( var k in arr ){
var str = arr[k].toString();//把数组中的元素赋值给str
h[str] = arr[k]; //把数组中的元素只设置给对象的属性，并给属性值赋值为数组的水元素
//我们利用了：对象的属性不能重复，如果重复定义后面的会覆盖前面的定义。
}
var t =[];
for( var k in h ){
t.push(h[k]);
}
console.log( t );
</script>
1.9 基本包装类型
基本包装类型概述
Number包装类型
字符串类型
split
字符串的indexOf方法
字符串的练习
示例代码
<script>
//截取字符串abcdefg的efg
var t = "abcdefg";
//开始的位置
var m0 = t.slice(4);
//开始的位置 结束的位置
var m1 = t.substring(4,7);
//开始的位置 截取的长度
var m2 = t.substring(4,3);
console.log(m0);
console.log(m1);
console.log(m2);
</script>
示例代码
<script>
//字符串逆序
//第一种方法：使用数组的reverse方法就可以记性低数组逆序 然后实现字符串逆序
var t = "123456";
//将字符串转为数组
var arr = t.split("");
//将数组逆序
arr.reverse();
console.log(arr);
//将数组连接成字符串，可以指定链接符号
var result = arr.join("");
console.log(result);
//链式编程 上面的过程综合起来 推荐
var result1 = t.split("").reverse().join("");
console.log(result1);
//第二种逆序的方法：从后往前遍历，然后用空字符串去累加
t = "123456";
var result2 = "";
for( var i = t.length-1;i >= 0;i-- ){
result2 += t[i];
}
console.log(result2);
</script>
示例代码：
<script>
//判断一个字符串中出现次数最多的字符，统计这个次数
t = "abcdabkddabda";
//遍历字符串中的字符，然后把字符当做对象的属性，然后给对象添加属性
//添加属性前，先判断是否存在属性，如果存在，那么久让属性的 属性值+1，不村子那么属性值等于1
var h = {};
for (var i = 0; i < t.length; i++) {
var charStr = t[i];
if (charStr in h) {
h[charStr] += 1;
} else {
h[charStr] = 1;
}
}
console.log(h);
//另一种方法
h = {};
for (var i = 0; i < t.length; i++) {
h[t[i]] = h[t[i]] + 1 || 1;
}
console.log(h);
//找到数组中属性的值最大的那个属性
var max = 0, maxChar;
for (var k in h) {
if (h[k] > max) {
max = h[k];
maxChar = k;
}
}
console.log(max + " " + maxChar);
</script>
示例代码
<script>
//输入两个字符串，从第一个字符串中删除第二个字符串中的所有字符，不可用replace
//They are student aeiou
//删除之后变成第一个字符串 Thy r stdnts
var str1 = "They are students",
str2 = "aeiou",
res = "";
//思路
//判断一个字符串在另一个字符串中 用indexOf() 返回索引或者-1
//遍历str1中的所有字符，然后判断是否在str2中 如果在就舍弃 不在就加到res中
for (var i = 0; i < str1.length; i++) {
if (str2.indexOf(str1[i]) < 0) {
res += str1[i];
}
}
console.log(res);
</script>
1.9 单体对象与日期对象
日期对象
日期的方法
Math对象
Math对象的常用方法
全局对象
接下来JavaScript高级
未完待续