-2. JavaScript Methods

程序员文章站 2024-01-28 12:17:04

...

JavaScript Methods Favorite

1.基础知识练习

1.数据类型和运算符号

//存储一个数字10
var number = 10;
//存储一个5
var number2 = 5;
//存储一个人的名字
var name = "小黑";
//存储真(true)
var flag = true;
//存储一个null-相当于是空
var nll = null;
//存储一个对象
var obj = new Object();

//变量的交换的第一个思路:使用第三方的变量进行交换
   var num1=10;
   var num2=20;
//把num1这个变量的值取出来放在temp变量中
   var temp=num1;
//把num2这个变量的值取出来放在num1变量中
   num1=num2;
//把temp变量的值取出来放在num2变量中
   num2=temp;
   console.log(num1);//20
   console.log(num2);//10

//第二种方式交换:一般适用于数字的交换
  var num1 = 10;
  var num2 = 20;
//把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
  num1 = num1 + num2;//30
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
  num2 = num1 - num2;//10
//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
  num1 = num1 - num2;//20
  console.log(num1, num2);   

//求6的阶乘:
  var ji = 1;//存储最终的阶乘的结果
  var i = 1;//开始的数字
  while (i <= 6) {
    ji *= i;
    i++;
  }
  console.log(ji);

//求1-100之间所有的偶数的和
   var i=1;//计数器
   var sum=0;//存储所有数字的和
   while(i<=100){
     //判断这个数字是不是偶数,如果是偶数则相加,把结果存放在sum变量中
     if(i%2==0){
       sum+=i;
     }
     i++;//为了不变成死循环
   }
   console.log("和为:"+sum);
 
//求1-100之间所有的奇数的和
 var i = 1;//计数器
 var sum = 0;//存储和的
 while (i <= 100) {
   if (i % 2 != 0) {
     sum += i;
   }
   i++;
 }
 console.log(sum);

//请输出1-100之间所有能够被7整除的数字
 var i=1;
 while(i<=100){
   //判断这个数字是否能够被7整除
   if(i%7==0){
     console.log(i);
   }
   i++;
 }

//求帐号和密码是否一致,登录的效果实现
//提示用户输入帐号
//提示用户输入密码
//如果帐号或者密码不对,则一直提示用户输入帐号和密码
//帐号--admin
//密码--123---字符串类型
var userName=prompt("请您输入帐号");//存储帐号的
var userPwd=prompt("请您输入密码");//存储密码
while(userName!="admin"||userPwd!="123"){
  //变量的重新赋值
   userName=prompt("请您输入帐号");//存储帐号的
   userPwd=prompt("请您输入密码");//存储密码
}
console.log("登录成功");

//求1-100之间所有偶数的和
  var sum1=0;
  for(var i=1;i<=100;i++){
    //判断i与2取余是0---->偶数
    if(i%2==0){
      sum1+=i;
    }
  }
  console.log(sum1);//2550

//求1-100之间所有奇数的和
var sum2=0;
for(var i=1;i<=100;i++){
  if(i%2!=0){
    //奇数
    sum2+=i;
  }
}
console.log("和为:"+sum2);

//求1-100之间所有能被3整除的数字的和
var sum3=0;
for(var i=1;i<=100;i++){
  if(i%3==0){
    sum3+=i;
  }
}
console.log(sum3);

//求1-100之间所有能被7整
var sum4=0;
for(var i=1;i<=100;i++)
  if(i%7==0){
    sum4+=i;
  }
}
console.log(sum4);

//画星星，控制行数的---正方形的
for (var i = 0; i <= 5; i++) {
  //控制每一行有几个星星
  for (var j = 0; j <= 5; j++) {
    document.write("★");
  }
  document.write("<br/>");
}

//三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星
for (var i = 0; i <= 5; i++) {
  //控制每一行有几个星星
  for (var j = 0; j <= i; j++) {
    document.write("★");
  }
  document.write("<br/>");
}

//控制行数 
   for(var i=1;i<=9;i++){
     //控制每一行有多少个表达式
     for(var j=1;j<=9;j++){
       document.write(j+"*"+i+"="+i*j);
     }
     document.write("<br/>");
   }

//掌握------必须要写出来的
   for(var i=1;i<=9;i++){
     //控制每一行有多少个表达式
     for(var j=1;j<=i;j++){
       document.write(i+"*"+j+"="+i*j);
     }
     document.write("<br/>");
   }

//表格版本的-------能够理解,如果写出来更好
//document.write("<a href='http://www.baidu.com'>百度</a>");
document.write("<table border='1' cellpadding='0' cellspacing='0'>");
for (var i = 1; i <= 9; i++) {//控制的行数
  document.write("<tr>");
  for (var j = 1; j <= i; j++) {
    document.write("<td>");
    document.write(i + "*" + j + "=" + i * j);
    document.write("</td>");
  }
  document.write("</tr>");
}
document.write("</table>");

//案例:求100-200之间所有的奇数的和（用continue）
 var sum=0;
 var i=100;
 while(i<=200){
   //判断是不是偶数
   if(i%2==0){
    //如果是偶数----->跳过这个数字
     i++;//102
     continue;
   }
   sum+=i;
   i++;
 }
 console.log(sum);

//案例:求整数100～200的累加值，但要求跳过所有个位为3的数
var sum=0;
var i=100;
while(i<=200){
  if(i%10==3){
    //个位数是3,不要
    i++;
    continue;
  }
  sum+=i;
  i++;
}
console.log(sum);

2.数组

* 1. 通过构造函数创建数组
    * 语法:
    * var 数组名=new Array();
    * var array=new Array();//定义了一个数组

* 2. 通过字面量的方式创建数组
    * var 数组名=[];//空数组
    * var array=[];    

var arr3=new Array(10,20,1000,40,50,60);
console.log(arr3);   

var arr=[10,20,30,40,50,60,70,80,10,20,3043,5];//空数组
console.log(arr.length);

var arr=[10,"哈哈",true,null,undefined,new Object()];
console.log(arr);

arr[0]=10;
arr[1]=20;
console.log(arr.length);
//获取元素的值,通过索引的方式
console.log(arr[2]);

 //案例1:求数组中所有元素的和
 var arr1 = [10, 20, 30, 40, 50];
 var sum = 0;
 for (var i = 0; i < arr1.length; i++) {
   sum += arr1[i];
 }
 console.log(sum);

//案例2:求数组中所有元素的平均值
var arr2 = [1, 2, 3, 4, 5];
var sum2 = 0;
for (var i = 0; i < arr2.length; i++) {
  sum2 += arr2[i];
}
console.log(sum2 / arr2.length);

//案例3:求数组中所有元素中的最大值
var arr3 = [1, 3, 2, 5, 10, 100, 50];
//假设max变量中存储的是最大值
var max = arr3[0];
for (var i = 0; i < arr3.length; i++) {
  //判断这个变量的值和数组中每个元素的值是不是最大值
  if (max < arr3[i]) {
    max = arr3[i];
  }
}
console.log("最大值:" + max);

   var arr3=[1,3,2,5,10,100,50];
   //假设max变量中存储的是最大值
   var max=Number.MIN_VALUE;//假设变量是最大的,但是实际上存储的
   for(var i=0;i<arr3.length;i++){
     //判断这个变量的值和数组中每个元素的值是不是最大值
     if(max<arr3[i]){
       max=arr3[i];
     }
   }
   console.log("最大值:"+max);

//案例4:求数组中所有元素的最小值
var arr4 = [100, 10, 20, 30, 40, 50];
var min = arr4[0];//假设min里存储的就是最小值
for (var i = 0; i < arr4.length; i++) {
  if (min > arr4[i]) {
    min = arr4[i];
  }
}
console.log("最小值:" + min);

//案例5:倒序遍历数组
var arr5 = [10, 20, 30, 40, 50, 100];
//正序
for (var i = 0; i < arr5.length; i++) {
 console.log(arr5[i]);
//倒序
for(var i=arr5.length-1;i>=0;i--){
  console.log(arr5[i]);
}      
    
//案例6:把数组中每个元素用|拼接到一起产生一个字符串并输出
   var names=["卡卡西","佐助","鸣人","大蛇丸","雏田","小苏","
   var str="";//空的字符串
   for(var i=0;i<names.length-1;i++){
     str+=names[i]+"|";
   }
   console.log(str+names[names.length-1]);
    
   var names=["卡卡西","佐助","鸣人","大蛇丸","雏田","小苏","
   var str="";//空的字符串
   for(var i=1;i<names.length;i++){
     str+="|"+names[i];
   }
   console.log(names[0]+str);
    
//案例7:去掉数组中重复的0，把其他的数据放在一个新的数组中
   var arr = [10, 0, 20, 0, 30, 0, 50];
   var newArr=[];//新数组,用来存放第一个数组中所有非0的数字
   for(var i=0;i<arr.length;i++){
     if(arr[i]!=0){
       newArr[newArr.length]=arr[i];
     }
   }
   //把新数组的长度作为下标使用,数组的长度是可以改变的
   console.log(newArr);
  //  123456
  //  012345
  //长度与索引转换 
    
//案例8:反转数组---把数组中的数据的位置调换
   var array = [10, 20, 30, 40, 50];
   //循环的目的是控制交换的次数
   for (var i = 0; i < array.length / 2; i++) {
     //先把第一个元素的值放在第三方变量中
     var temp = array[i];
     array[i] = array[array.length - 1 - i];
     array[array.length - 1 - i] = temp;
   }
   console.log(array);
    
   //
   for(var i=array.length-1;i>=0;i--){
     console.log(array[i]); //50 40 30 20 10
   }
   console.log(array); /[10, 20, 30, 40, 50];
    
///案例9:提示用户输入班级人数,求总成绩,平均值,最高分,最低分---扩
//提示用户输入人数,并转成数字类型
var perCount = parseInt(prompt("请输入班级人数"));
//定义数组存储班级的每个人的成绩
var perScores = [];
//循环的方式录入每个人的成绩
for (var i = 0; i < perCount; i++) {
  //把每个人的成绩存储到数组中
  perScores[perScores.length] = parseInt(prompt("请输入第" +
}
console.log(perScores);
//求总成绩
var sum = 0;
var avg = 0;//平均值
var max=perScores[0];//最大值
var min=perScores[0];//最小值
for (var i = 0; i < perScores.length; i++) {
  sum += perScores[i];//求和
  //求最大值
  if(max<perScores[i]){
    max=perScores[i];
  }
  //求最小值
  if(min>perScores[i]){
    min=perScores[i];
  }
}
//平均值
avg = sum / perScores.length;
console.log("和为:"+sum);
console.log("平均值:"+avg);
console.log("最大值:"+max);
console.log("最小值:"+min);    
    
//冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
var arr = [10, 0, 100, 20, 60, 30];
//循环控制比较的轮数
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); //[100,60,30,20,10,0]

3.函数基础

//求两个数字的和
    function consoleSum() {//函数定义
      var num1 = 100;
      var num2 = 200;
      var sum = num1 + num2;
      console.log(sum);
    }
    //调用
    consoleSum();

//求两个数字的最大值
function consoleMax() {
  var x = 10;
  var y = 20;
  console.log(x > y ? x : y);
}
consoleMax();

//求三个数字的最大值
function consoleMax2() {
  var x = 10;
  var y = 20;
  var z = 30;
  var max = x > y ? (x > z ? x : z) : (y > z ? y : z);//嵌套的
  console.log(max);
}
consoleMax2();

//求1-100之间所有数字的和
function everySum() {
  var sum=0;
  for(var i=1;i<=100;i++){
    sum+=i;
  }
  console.log(sum);
}
everySum();

//求1-100之间所有偶数的和
function everyEvenSum() {
  var sum=0;
  for(var i=1;i<=100;i++){
    if(i%2==0){
      sum+=i;
    }
  }
  console.log(sum);
}
everyEvenSum();

//求一个数组的和
function consoleArraySum() {
  var sum=0;
  var arr=[10,20,30,40,50];
  for(var i=0;i<arr.length;i++){
    sum+=arr[i];
  }
  console.log(sum);
}
consoleArraySum();

//函数定义
function consoleSum(x, y) {
  var sum = x + y;//计算和----功能
  console.log(sum);//输出和---第二个功能
}

//函数调用
   var num1=parseInt(prompt("输入第一个数字"));
   var num2=parseInt(prompt("输入第二个数字"));
   consoleSum(num1, num2);

//求1-100之间所有的数字的和
   function geteverySum() {
     var sum=0;
     for(var i=1;i<=100;i++){
       sum+=i;
     }
     return sum;
   }
   console.log(geteverySum());

//- 求1-n之间所有数的和
function geteverySum(n) {
  var sum = 0;
  for (var i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}
console.log(geteverySum(10));

// - 求n-m之间所有数的和
function geteverySum2(n, m) {
  var sum = 0;
  for (var i = n; i <= m; i++) {
    sum += i;
  }
  return sum;
}
console.log(geteverySum2(1, 100));

//求圆的面积
function getS(r) {
  return Math.PI * r * r;
}
console.log(getS(5));

// 求2个数中的最大值
 function getMax(num1, num2) {
   return num1 > num2 ? num1 : num2;
 }
 var num1=10;
 var num2=20;
 
//函数外面的num1和函数的形参num1不是同一个变量
 var result=getMax(num1,num2);
 console.log(result);
 console.log(getMax);//函数的代码

 // 求3个数中的最大值
 function getThreeMax(x, y, z) {
   return x > y ? (x > z ? x : z) : (y > z ? y : z);
 }
 console.log(getThreeMax(10,2,24));

//    - 判断一个数是否是素数(质数),只能被1和自身整除，质数是从2开始
//用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)
function isPrimeNumber(num) {
  for(var i=2;i<num;i++){
    if(num%i==0){
      //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验
      return false;
    }
  }
  return true;
}
console.log(isPrimeNumber(8)?"是质数":"不是质数");

 //求两个数字的差
function getSub(x, y) {
  return x - y;
}
console.log(getSub(10, 20));

//求一组数字中的最大值
function getArrayMax(array) {
  //定义变量假设这个变量中存储的是最大值
  var max = array[0];
  for (var i = 0; i < array.length; i++) {
    if (max < array[i]) {
      max = array[i];
    }
  }
  return max;
}

//求一组数字中的最小值
function getArrayMin(array) {
  //假设这个变量里存储的是最小值
  var min = array[0];
  for (var i = 0; i < array.length; i++) {
    if (min > array[i]) {
      min = array[i];
    }
  }
  return min;
}

//测试----调用函数并传入一个数组,把数组中的最小值直接显示
console.log(getArrayMin([10, 20, 30, 40, 1]));

//求一组数字的和
function getArraySum(array) {
  var sum = 0;
  for (var i = 0; i < array.length; i++) {
    sum += array[i];
  }
  return sum;
}
console.log(getArraySum([1, 2, 3, 4, 5, 6]));

//求一个数组中的最大值和最小值还有和
/**
 *  给我一个数组,我返回一个数组(最大值,最小值,和)
 * @param array参数是一个数组
 * @returns {*[]}返回值是一个数组,第一个元素值是最大值,第二个元素值是最小值,
 */
function getArrayMaxAndMinAndSum(array) {
  var min = array[0];//最小值
  var max = array[0];//最大值
  var sum = 0;//和
  for (var i = 0; i < array.length; i++) {
    sum += array[i];//和
    //最大值
    if (max < array[i]) {
      max = array[i];
    }// end if
    //最小值
    if (min > array[i]) {
      min = array[i];
    }// end if
  }// end for
  var arr = [max, min, sum];
  return arr;
}

//测试
var resultArray = getArrayMaxAndMinAndSum([1, 2, 3, 4, 5, 6, 7]);
console.log("最大值:" + resultArray[0]);//7
console.log("最小值:" + resultArray[1]);//1
console.log("和:" + resultArray[2]);//28

//通过函数实现数组反转
function reverseArray(arr) {
  for (var i = 0; i < arr.length / 2; i++) {
    var temp = arr[i];
    arr[i] = arr[arr.length - 1 - i];
    arr[arr.length - 1 - i] = temp;
  }
  return arr;
}
console.log(reverseArray([1, 2, 3, 4, 5]));

//通过函数实现冒泡排序
function sortArray(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]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }//end if
    }//end for
  }//end for
  return arr;
}
console.log(sortArray([0, 19, 34, 10, 100, 2]));

//求一个数字的阶乘
function getJieCheng(num) {
  var result = 1;
  for (var i = 1; i <= num; i++) {
    result *= i;
  }
  return result;
}
console.log(getJieCheng(5));//1*2*3*4*5

//求一个数字的阶乘和  5  5的阶乘+4的阶乘+3的阶乘+2的阶乘+1的阶乘
function getJieChengSum(num) {//5
  var sum=0;//和
  for(var i=1;i<=num;i++){
    sum+=getJieCheng(i);
  }
  return sum;
}
console.log(getJieChengSum(5));
//1 +2+ 6+ 24+120
数内部可以调用其他的函数

 //求斐波那契数列,12---144
//1 1 2 3 5 8 13 21 34 55 89 144
function getFib(num) {
  var num1=1;
  var num2=1;
  var sum=0;
  for(var i=3;i<=num;i++){
    sum=num1+num2;
    num1=num2;
    num2=sum;
  }
  return sum;
}
console.log(getFib(12));

 //输入,年月日,获取这个日期是这一年的第多少天
//判断这个年份是不是闰年
function isLeapYear(year) {
  return year%4==0&&year%100!=0||year%400==0;
}
//年---月---日:2017年4月28日
function getDays(year, month, day) {
  //定义变量存储对应的天数
  var days = day;
  //如果用户输入的是一月份,没必要向后算天数,直接返回天数
  if (month == 1) {
    return days;
  }
  //代码执行到这里-----说明用户输入的不是1月份
  //用户输入的是7月份23日----1，2，3  +23
  //定义一个数组,存储每个月份的天数
  var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  //小于的是输入的月份-1
  for (var i = 0; i < month - 1; i++) {
    days += months[i];
  }
  //需要判断这个年份是不是闰年
  if(isLeapYear(year)&&month>2){
    days++;
  }
  return days;
}
 console.log(getDays(2000,3,2));

 function f1() {
   //arguments----->数组使用------伪数组---
   var sum=0;
   for(var i=0;i<arguments.length;i++){
     sum+=arguments[i];
   }
   return sum;
 }

4.面向对象

//创建对象
-1. 调用构造函数创建对象
-2. 自定义构造函数创建对象
-3. 字面量创建对象

//1 调用构造函数创建对象
   var person=new Object();
       person.name="小白";
       person.age=10;
       person.sayHi=function () {
         //在当前这个对象的方法中是可以访问当前这个对象的属性的值
           console.log("您好,吃了没您,我叫:"+this.name);
       };

   var per2=new Object();
   per2.name="大蛇丸";
   per2.age=30;
   per2.sex="男";
   per2.eat=function () {
     console.log("吃榴莲");
   };
   per2.play=function () {
     console.log("这个小蛇真好玩");
   };

//2. 自定义构造函数创建对象
//自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象
//函数和构造函数的区别；名字是不是大写(首字母是大写)
function Person(name,age) {
  this.name=name;
  this.age=age;
  this.sayHi=function () {
    console.log("我叫:"+this.name+",年龄是:"+this.age);
  };
}

function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.play=function () {
        console.log("天天打游戏");
      };
    }
    var per=new Person("雏田",18,"女");
    console.log(per instanceof Person);

//创建对象----实例化一个对象,并初始化
    var per=new Person("小明",20);
    per.name="张三";
	
	//区别与 .语法
   obj["name"]="佐助";
    console.log(obj["name"]);
    obj.play();
    obj["play"]();   

//工厂模式创建对象
function createObject(name,age) {
  var obj = new Object();//创建对象
  //添加属性
  obj.name = name;
  obj.age = age;
  //添加方法
  obj.sayHi = function () {
    console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
  };
  return obj;
}

//3. 字面量创建对象
//字面量创建对象的缺陷: 一次性的对象

       var obj={
         name:"小明",
         age:38,
         sex:"女"
       };
       obj.name="小三";
       console.log(obj.name);

//字面量的方式
   var per1={
     name:"卡卡西",
     age:20,
     sex:"男",
     eat:function () {
       console.log("吃臭豆腐");
     },
     readBook:function () {
       console.log("this is a function!");
     }
   };

//JSON格式的数据:一般都是成对的,是键值对,
var json = {
  "name": "小明",
  "age": "10",
  "sex": "男"
};


//遍历对象,是不能通过for循环遍历,无序
//key是一个变量,这个变量中存储的是该对象的所有的属性的名字
for (var key in json) {
  console.log(key + "===========" + json[key]);
}

  var key="name";
  console.log(json[key]);
 
//可以通过for-in循环
for(var key in json){
//console.log(key);//json对象中的属性的名字
console.log(json[key]);

      
 //例子:自己定义一个对象,实现系统的max的方法      
 function MyMath() {
   //添加了一个方法
   this.getMax=function () {
     //所有数字中的最大值
     var max=arguments[0];
     for(var i=0;i<arguments.length;i++){
       if(max<arguments[i]){
         max=arguments[i];
       }
     }
     return max;
   }
 }
 //实例对象
 var mt=new MyMath();
 var result=mt.getMax(10,20,30,40,100,3);
 console.log(result);

5.内置对象方法

数学与日期对象
String对象
Array对象
对象方法

5.1数学与日期对象

//实例对象:通过构造函数创建出来,实例化的对象
//静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,
//实例方法必须通过实例对象调用
//静态方法必须通过大写的对象调用

Math.PI----π---
Math.E----常数的底数
Math.abs(值)-----绝对值
Math.ceil(值)----向上取整
Math.floor(值)---向下取整

console.log( Math.abs('-1'));//1
console.log(Math.abs(null));//---------0  重点
console.log(Math.abs("string"));//NaN

console.log(Math.ceil(12.3)); //13
console.log(Math.ceil(12.9));  //13

console.log(Math.floor(12.3));//12
console.log(Math.floor(12.9));//12

console.log(Math.max(10,1,9,100,200,45,78));
console.log(Math.min(10,1,9,100,200,45,78));
console.log(Math.pow(2,4));
console.log(Math.sqrt(16));

console.log(parseInt(Math.random()*5)+1); //0~1 没有1
console.log(parseInt(Math.random()*100)+1);

var dt = new Date();//获取年份
console.log(dt.getFullYear());//获取月份
console.log(dt.getMonth()+1);//是0开始的 真实的月份是需要加1的//获取日期
console.log(dt.getDate());//获取小时
console.log(dt.getHours());//获取分钟
console.log(dt.getMinutes());//获取秒
console.log(dt.getSeconds());//获取星期
console.log(dt.getDay());//星期从0开始的

dt.getFullYear();//年
dt.getMonth();//月---从0开始
dt.getDate();//日
dt.getHours();//小时
dt.getMinutes();//分钟
dt.getSeconds();//秒
dt.getDay();//星期---从0开始
dt.toDateString();//日期
dt.toLocaleDateString();//日期
dt.toTimeString();//时间
dt.toLocaleTimeString();//时间
dt.valueOf();//毫秒

5.2 String对象

var str="12345";
console.log(str.length);//5  //字符串的长度

var str="whatareyounoshalei";
var result=str.charAt(3); 
console.log(result); //t

var str=String.fromCharCode(107,108,109);//返回的是ASCII码对应的值
console.log(str); /klm

var str="字符串0";
console.log(str.concat("字符串1","字符串2","字符串3","字符串4"));

var str="这是一段字符串";
var index=str.indexOf("是",3); //(要找的字符串,从某个位置开始的索引)
console.log(index);

var str="helo amen";
var index=str.lastIndexOf("Y"); //(要找的字符串)
console.log(index);

var str="这是一段字符串";
if(str.indexOf("好") != -1){ //找不到则返回-1，!=-1 是找到了,true
    
  str=str.replace("是","不是"); //("原来的字符串","新的字符串")
}else{
  console.log("不存在");
}
console.log(str);

//提取字符串
var str = "这是一段字符串，这是一段字符串";
//从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
str = str.slice(5, 10);  //(开始的索引,结束的索引)
console.log(str);

//切割字符串
var str="乔峰|慕容|凤姐|梅超风|小苏|大蛇丸";
var arr=str.split("|"); 
for(var i=0;i<arr.length;i++){
  console.log(arr[i]);
}

//返回的是截取后的新的字符串
var str="哈哈,小苏真的是好帅哦";
str=str.substr(5,5); //(开始的位置,个数) ---常用
console.log(str);

var str="哈哈,小苏真的是好帅哦";
str=str.substring(5,9); //(开始的索引,结束的索引)
console.log(str);

//转小写
var str="HELLO";
str=str.toLowerCase();
console.log(str);

//转大写
var str="hello";
str=str.toLocaleUpperCase();
//str=str.toUpperCase();
console.log(str);

//干掉字符串两端的空格
 var str="   哦,这    是一个神奇的一天   ";
 str=str.trim();
 console.log("===="+str+"====");
 
//案例1:
 var str = "我爱最帅的杨哥,太帅了";
 var key = "杨哥";
 var index = str.indexOf(key);//先获取要截取的字符串的索引的位置
 str = str.substr(index, 2);//从指定的位置开始截取,截取两个即可
 console.log(str); //杨哥

//案例2:找到这个字符串中所有的 o 出现的位置
 var str2 = "hello wod odd ott fbo nhyo";
 var index = 0;//开始的位置
 var key = "o";//要找的字符串
 while ((index = str2.indexOf(key, index)) != -1) {//如果是-1情况,说明找完了
   console.log(index);
   index += key.length;
 }

 //案例3:找到这个字符串中每个字符串出现了多少次
 var str3 = "whatOareYyouYnoYshaHleiHoHmyHgod";
 //第一步:把所有的字母全部变成小写
 str3 = str3.toLocaleLowerCase();
 //第二步:创建一个空对象,目的:把字母作为键,次数作为值
 var obj = {};
 //第三步,遍历字符串,获取每个字母
 for (var i = 0; i < str3.length; i++) {
   //判断obj这个对象中有没有这个字母(字母---键)
   var key = str3[i];//每个字母
   if (obj[key]) {//判断obj中有没有这个键
     //对象中有这个字母了
     obj[key]++;
   } else {
     //对象中没有这个字母,那就把字母加到对象中,并且给这个字母一个出现的次数,默认
     obj[key] = 1;
   }
 }
 //遍历对象,显示每个字母的次数
 for(var key in obj){
   console.log(key+"这个字母出现了"+obj[key]+"次");
 }

 // 创建新的对象---空对象---没有属性,也没有方法
    var obj={
      "sex":"男"
    };
 // 我想知道这个obj对象中有没有sex这个属性
 // 把对象["属性名字"]--->放在if的判断中即可----判断对象中有没有这个属性
 // if的判断的结果是true,则有这个属性,否则没有这个属性

    if(obj["age"]){
      console.log("有");
    }else{
      console.log("没有");
    }

5.3 Array对象

//Array

arr.every(function(ele,index) {}); 遍历判断
arr.filter(function(ele,index) {}); 遍历过滤
arr.forEach(function(ele,index) {});
arr.map(function() {});

var obj=[];
console.log(Array.isArray(obj));
console.log(obj instanceof Array);  // instanceof判断是否是数组

var arr=["a","b","c"];
var newArr=Array.from(arr);
console.log(newArr);

//拼接数组
var arr1=[10,20,30];
var arr2=[40,50,60];
console.log(arr1.concat(arr2));

//.every(函数)--返回值是布尔类型
var arr=[1000,2000,3000];
//a----: 元素的值，b----: 索引的值，c----:谁调用了这个方法,那么c就是谁---->arr

var flag= arr.every(function (a,b) {
  return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
}
                    
var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
var flag=arr.every(function (ele,index) {
   return ele.length>4; //数组中的每个元素的长度是不是大于4
 });

//.filter(函数);返回的是数组中每一个元素都复合条件的元素
var arr=[10,20,30,40,50,60,70,80];
var newArr=arr.filter(function (ele){ //ele---每个元素
    return ele>40;
});
console.log(newArr)

var arr=[10,0,20,0,40,0,60,100];
var newArr=arr.filter(function (ele) {
      return ele!=0;
    });
  console.log(newArr);

var arr=[10,20,30,40,50];
var result=arr.unshift(100);
console.log(result);
console.log(arr);

//forEach(函数)方法---遍历数组用---相当于for循环
   var arr = [10, 20, 30, 40];
   arr.forEach(function (ele,index) {
     console.log(ele+'======'+index);
   });

//返回的是索引,没有则是-1
   var arr=[10,20,30,40];
   var index=arr.indexOf(300);
   console.log(index);


   var arr=["小白","小黑","小红","小芳","小绿","小苏"];
   var str=arr.join("|");
   console.log(str);

//.map(函数)，数组中的每个元素都要执行这个函数
   var numbers = [1, 4, 9];
   var roots = numbers.map(Math.sqrt);
   console.log(roots);

//反转数组
   var arr=[10,20,30,40,50];
   arr.reverse();//反转
   console.log(arr);

//排序
   var arr=[1,40,20,10,100];
   //a---arr[j]
   //b---arr[j+1]
   arr.sort(function (a,b) {
     if(a>b){
       return 1;
     }else if(a==b){
       return 0;
     }else{
       return -1;
     }
   });
   console.log(arr);

//arr.slice(开始的索引,结束的索引)
var arr=[10,20,30,40,50,60,70,80,90,100];
var newArr= arr.slice(3,7);
console.log(newArr);
//splice作用: 删除元素/插入元素/替换元素
 删除 this.letters.splice(1, 3) //两个参数是删除
 替换 this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
 插入 this.letters.splice(1, 0, 'x', 'y', 'z')
 修改 this.letters.splice(0, 1, 'bbbbbb')

//.splice(开始的位置,要删除的个数,替换的元素的值)
 var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）//两个参数是删除
 console.log(myFish);
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]    

 myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum' //    
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]

5.4 Array对象ES5新增

1.遍历迭代方法
forEach()  -遍历操作元素,类似于for循环，return不会终止迭代循环
some()     -遍历操作元素,类似于for循环，return true 会终止迭代循环
map()
filter()  -遍历筛选数组，返回一个新的数组，return不会终止迭代循环
every()

//参数示例
array.forEach(function(currentValue, index, arr))  
-currentValue  数组当前项的值 
-index  数组当前项的索引 
-arr  数组对象本身

// forEach累加              
var arr=[1,2,3];
var sum = 0;
arr.forEach(function(value,index,array){
    sum += value
})

// filter示例
var arr = [12,33,65,454];
var newArr = arr.filter(function(value,index){
    return value >= 20;
});
console.log(newArr);

5.5 对象方法

1. Object.keys() 用于获取对象自身所有的属性,返回一个由属性名组成的数组
Object.keys(obj)

2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj,prop,descriptor)
-obj: required,目标对象
-prop: required,需定义或修改的属性的名字
-descriptor: required, 目标属性所拥有的特性
   -descriptor {value: 设置属性的值，writable: 值是否可以重写
   				enumerable: 目标属性是否可以被枚举，默认flase，configurable: 目标属性是否可以被删除或是否可以再次修改特性，默认flase }


//实例代码
var obj = {
    id: 1,
    pname: 'mi',
    price: 1999,
    num: 2000
};
var arr = Object.keys(obj);
console.log(arr);  //['id','pname','price','num']
arr.forEach(function(value){
    console,log(value) // id pname price num
})

Object.defineProperty(obj, 'num',{
    value: 1000    //有则修改，无则添加
});
Object.defineProperty(obj, 'id',{
    writable: false    //不允许修改该属性值
});
Object.defineProperty(obj, 'id',{
    writable: false;    //不允许修改该属性值
    enumerable: false;  //值为false 则不允许遍历，默认不允许遍历
});

5.6 案例代码

// 按价格/名称筛选商品

<body>
  <div class="search">
    按照价格查询：<input type="text" class="start"> - <input type="text" class="end">
    <button class="search-price">搜索</button> 按照商品名称查询<input type="text" class="product"> <button
      class="search-pro">查询</button>
  </div>
  <table border>
    <thead>
      <tr>
        <th>id</th>
        <th>产品价格</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0</td>
        <td>小米</td>
        <td>1999</td>
      </tr>
    </tbody>
  </table>
</body>
<script>
  var data = [
    {
      id: 1,
      pname: 'mi',
      price: 3999
    },
    {
      id: 2,
      pname: 'huawei',
      price: 500
    },
    {
      id: 3,
      pname: 'TCL',
      price: 800
    },
    {
      id: 4,
      pname: 'opo',
      price: 9000
    }];

  //1. 获取相应元素
  var tbody = document.querySelector('tbody');
  var search_price = document.querySelector('.search-price');
  var start = document.querySelector('.start');
  var end = document.querySelector('.end');
  var product = document.querySelector('.product');
  var search_pro = document.querySelector('.search-pro');
  setDate(data);

  // 2. 把数据渲染到页面中
  // data.forEach(function (value) {
  //   var tr = document.createElement('tr');
  //   tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
  //   tbody.appendChild(tr);
  // })
  //提升为一个函数
  function setDate(mydata) {
    //先清空，再遍历
    tbody.innerHTML = '';
    mydata.forEach(function (value) {
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
      tbody.appendChild(tr);
    })
  }

  //3. 根据价格查询商品
  //当点击了按钮，根据商品价格去筛选数组里面的对象
  search_price.addEventListener('click', function () {
    var newDate = data.filter(function (value) {
      return value.price >= start.value && value.price <= end.value;
    });
    // 把筛选完之后的对象渲染到页面
    setDate(newDate);
  })

  //4. 根据名称查询商品
  // 查询数组中的唯一元素，用some更合适，找到了就不再循环
  search_pro.addEventListener('click', function () {
    var arr = [];
    data.some(function (value) {
      if (value.pname === product.value) {
        arr.push(value);
        return true;  //return 后面必须写true
      }
    });
    // 把拿到的数据渲染到页面当中
    setDate(arr);
  })

</script>

6.函数方法汇总

随机产生一个十六进制的颜色值
冒泡排序
求2个数中的最大值
自定义排序
格式化日期对象
计算时间差

//随机产生一个十六进制的颜色值
console.log(parseInt(Math.random() * 5));

function getColor() {
var str = “#”;
//一个十六进制的值的数组
var arr = [“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “a”, “b”, “c”, “d”, “e”, “f”];
for (var i = 0; i < 6; i++) {
//产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
var num = parseInt(Math.random() * 16); //
str += arr[num];
}
return str;
}
//页面记载的事件
window.onload = function () {
//在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色
document.getElementById(“dv”).style.backgroundColor = getColor();

function getRandomColor () {
let rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? ‘0’ + color : color
rgb.push(color)
}
return ‘#’ + rgb.join(’’)
}

//通过函数实现冒泡排序,泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)
function sortArray(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]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}//end if
}//end for
}//end for
return arr;
}
console.log(sortArray([0, 19, 34, 10, 100, 2]));

// 求2个数中的最大值
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}

//获取某个对象的类型是不是你传入的类型
//[10,20,30] 是不是"[object Array]"
//type—是变量----是参数----"[object Array]"
//obj—是变量-----是参数----[10,20,30];
//判断这个对象和传入的类型是不是同一个类型
function getFunc(type) {
return function (obj) {
return Object.prototype.toString.call(obj) === type;
}
}
var ff = getFunc("[object Array]");
var result = ff([10, 20, 30]);
console.log(result);
var ff1 = getFunc("[object Object]");
var dt = new Date();
var result1 = ff1(dt);

//排序,每个文件都有名字，大小,时间,都可以按照某个属性的值进行排序
//三部电影,电影有名字,大小,上映时间
function File(name, size, time) {
this.name = name;//电影名字
this.size = size;//电影大小
this.time = time;//电影的上映时间
}

var f1 = new File(“jack.avi”, “400M”, “1997-12-12”);
var f2 = new File(“tom.avi”, “200M”, “2017-12-12”);
var f3 = new File(“xiaosu.avi”, “800M”, “2010-12-12”);
var arr = [f1, f2, f3];

function fn(attr) {
//函数作为返回值
return function getSort(obj1, obj2) {
if (obj1[attr] > obj2[attr]) {
return 1;
} else if (obj1[attr] == obj2[attr]) {
return 0;
} else {
return -1;
}
}
}

var ff = fn(“name”);

//函数作为参数
arr.sort(ff);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].name + “==>" + arr[i].size + "=>” + arr[i].time
);
}

//写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {

//如果date不是日期对象，返回
if (!date instanceof Date) {
return;
}
var year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();

month = month < 10 ? ‘0’ + month : month;
date = date < 10 ? ‘0’ + date : date;
hour = hour < 10 ? ‘0’ + hour : hour;
minute = minute < 10 ? ‘0’ + minute:minute;
second = second < 10 ? ‘0’ + second:second;
return year + ‘-’ + month + ‘-’ + date + ’ ’ + hour + ‘:’ + minute + ‘:’ + second;
}

//计算时间差，返回相差的天/时/分/秒
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 /60 / 24);
hour = Math.round(interval / 60 /60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}

7.JavaScript高级1*

组合继承
//组合继承
//原型实现继承
//借用构造函数实现继承
//组合继承:原型继承+借用构造函数继承
function Person(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
Person.prototype.sayHi=function () {
console.log(“阿涅哈斯诶呦”);
};
function Student(name,age,sex,score) {
//借用构造函数:属性值重复的问题,继承原有属性，添加新属性
Person.call(this,name,age,sex); //拥有者.call(借方对象，借方参数)
this.score=score;
}
//改变原型指向----继承，继承原有方法，添加新方法
Student.prototype=new Person();//不传值
Student.prototype.eat=function () {
console.log(“吃东西”);
};
```
////属性和方法都被继承了
var stu=new Student("小黑",20,"男","100分");
console.log(stu.name,stu.age,stu.sex,stu.score);
stu.sayHi();
stu.eat();
var stu2=new Student("小黑黑",200,"男人","1010分");
console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
stu2.sayHi();
stu2.eat();
```

拷贝继承
//拷贝继承；把一个对象中的属性或者方法直接复制到另一个对象中
var obj1={
name:“小糊涂”,
age:20,
sleep:function () {
console.log(“睡觉了”);
}
};

var obj2={};
for(var key in obj1){
  obj2[key]=obj1[key];
}
console.log(obj2.name);


function Person() {
}
Person.prototype.age=10;
Person.prototype.sex="男";
Person.prototype.height=100;
Person.prototype.play=function () {
  console.log("玩的好开心");
};

var obj2={};
//Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,heig
//ht,play都是该对象中的属性或者方法
for(var key in Person.prototype){
  obj2[key]=Person.prototype[key];
}
console.dir(obj2);
obj2.play();

闭包点赞应用案例
//闭包点赞应用案例
//获取所有的按钮，根据标签名字获取元素
function my $(tagName) { return document.getElementsByTagName(tagName); } //闭包缓存数据 function getValue() { var value=2; return function () { //每一次点击的时候,都应该改变当前点击按钮的value值 this.value="赞("+(value++)+")"; } } //获取所有的按钮 var btnObjs=my$ (“input”);
//循环遍历每个按钮,注册点击事件
for(var i=0;i<btnObjs.length;i++){
//注册事件
btnObjs[i].οnclick=getValue();
}

浅拷贝与深拷贝
//浅拷贝
var obj1={
age:10,
sex:“男”,
car:[“奔驰”,“宝马”,“特斯拉”,“奥拓”]
};
//另一个对象
var obj2={};
//写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
//把a对象中的所有的属性复制到对象b中
function extend(a,b) {
for(var key in a){
b[key]=a[key];
}
}
extend(obj1,obj2);
console.dir(obj2);//开始的时候这个对象是空对象
console.dir(obj1);//有属性

//深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在
//另一个对象中开辟相应的空间,一个一个的存储到另一个对象中
var obj1={
  age:10,
  sex:"男",
  car:["奔驰","宝马","特斯拉","奥拓"],
  dog:{
    name:"大黄",
    age:5,
    color:"黑白色"
  }
};
var obj2={};//空对象
//通过函数实现,把对象a中的所有的数据深拷贝到对象b中
function extend(a,b) {
  for(var key in a){
    //先获取a对象中每个属性的值
    var item=a[key];
    //判断这个属性的值是不是数组
    if(item instanceof Array){
      //如果是数组,那么在b对象中添加一个新的属性,并且这个属性值也是数组
      b[key]=[];
      //调用这个方法，把a对象中这个数组的属性值一个一个的复制到b对象的这个数组
属性中
      extend(item,b[key]);
    }else if(item instanceof Object){//判断这个值是不是对象类型的
 //如果是对象类型的,那么在b对象中添加一个属性,是一个空对象
      b[key]={};
      //再次调用这个函数,把a对象中的属性对象的值一个一个的复制到b对象的这个属
性对象中
      extend(item,b[key]);
    }else{
      //如果值是普通的数据,直接复制到b对象的这个属性中
      b[key]=item;
    }
  }
}
extend(obj1,obj2);
console.dir(obj1);
console.dir(obj2);

遍历DOM树
//遍历DOM树
//获取页面中的根节点–根标签
var root=document.documentElement;//html
//函数遍历DOM树，节点:nodeName,nodeType,nodeValue
//根据根节点,调用fn的函数,显示的是根节点的名字

function forDOM(root1) {
  //调用f1,显示的是节点的名字
  f1(root1);
  //获取根节点中所有的子节点
  var children=root1.children;
  //调用遍历所有子节点的函数
  forChildren(children);
}

function f1(node) {
  console.log("节点的名字:"+node.nodeName);
}

//给我所有的子节点,我把这个子节点中的所有的子节点显示出来
function forChildren(children) {
  //遍历所有的子节点
  for(var i=0;i<children.length;i++){
    //每个子节点
    var child=children[i];
    //显示每个子节点的名字
    f1(child);
    //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
    child.children&&forDOM(child);
  }
}

//函数调用,传入根节点
forDOM(root);

7.JavaScript高级2

7.1 面向对象和类的继承

--在 Javascript中，对象是一组无序的相关属性和方法的集合，所有事物都是对象。
--类抽象了对象的公共部分，泛指某一大类
--对象特指某一个，通过类实例化的一个具体对象
--思维特点，抽取对象共有的属性和行为组织(封装)成一个类(模板)。对类进行实例化，获取类的对象

--constructor()方法是类的构造函数，用于传递参数，返回实例对象，通过new命令生成对象实例，自动调用该方法。如果没有定义，类内部会自动创建一个 constryctor()
--super 关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数
--super 子类在构造函数中使用super，必须放到 this 前面，必须先调用父类的构造方法，再使用子类 的构造方法
--注意点：1. 在ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
		 2. 类里边的共有属性和方法一定要加 this 使用
		 3. 类中 this 的指向问题， constructor 里面的 this 指向的是 创建的实例对象
         						方法里面的 this 指向这个方法的调用者
         4. 解决办法： 在constructor里把 this 赋值给一个类外的全局变量 that，就可以在					 方法中用 that 调用 constructor 中的属性                  
                                                            
//创建一个类
class Star {
    constructor(uname, age){
        this.uname = uname;
        this.age = age;
    }
    sing(song){
        console.log(this.uname + song);
    }
}

var one = new Star('Tom', 26);
consoel.log(one.uname);
one.sing('Yesterday');

//类的继承
class Father {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
    constructor(x,y){
     super(x,y); //调用了父类中的构造函数,把子constructor中的数据传给父constructor
    }
}

var son = new Son(1,2);
son.sum();

//子类继承父类加法方法，同时扩展减法方法
class Father {
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
    constructor(x,y) {
        super(x, y)  //super必须在子类this之前调用
        this.x = x;
        this.y = y;
    }
    subtract(){
        console.log(this.x - this.y);
    }
}

var son = new Son(5,3);
son.subtract();
son.sum();

实例代码

//tab栏切换
功能需求：

点击 tab 栏，可以切换效果
点击 + 号，可以添加 tab 项和内容项
点击ｘ　号，可以删除当前的tab项和内容项
双击 tab 项文字或者内容项文字，可以修改里边的文字内容

测试1

测试2

测试3

var that;
class Tab {
constructor(id) {
// 获取元素
that = this;
this.main = document.querySelector(id);
// 获取 li，动态添加后需要重新获取，抽离出去成为方法
// this.lis = this.main.querySelectorAll(‘li’);
// this.sections = this.main.querySelectorAll(‘section’);
//this.remove = this.main.querySelectorAll(‘icon-guanbi’);

  this.add = this.main.querySelector('.tabadd');

  // li 的父元素
  this.ul = this.main.querySelector('.firstnav ul:first-child');
  // section 的父元素
  this.fsection = this.main.querySelector('tabscon');

  // 初始化，实例对象调用方法
  this.init();
}

init() {
  // 重新获取更新的node
  this.updateNode();
  // init 初始化操作让相关的元素绑定事件
  this.add.onclick = this.addTab;
  for (var i = 0; i < this.lis.length; i++) {
    // 给每个小li添加一个index属性
    this.lis[i].index = i;
    // toggleTab不加括号表示点击时调用
    this.lis[i].onclick = this.toggleTab;
    this.remove[i].onclick = this.removeTab;
    this.spans[i].ondblclick = this.editTab;
    this.sections[i].ondblclick = this.editTab;

  }
}

// 获取所有的小li和 section
updateNode() {
  this.lis = this.main.querySelectorAll('li');
  this.sections = this.main.querySelectorAll('section');
  // 动态添加元素，需要重新获取对应的元素
  this.remove = this.main.querySelectorAll('icon-guanbi');
  this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
}

//1. 切换功能
toggleTab() {
  // console.log(this.index)
  that.clearClass(); //实例对象调用
  this.className = 'liactive';  //点击 li 
  that.sections[this.index].className = 'conactive';  // 对应显示 section
}
// 清除类样式
clearClass() {
  for (var i = 0; i < this.lis.lengt; i++) {
    this.lis[i].className = '';
    this.sections[i].className = '';
  }
}

//2. 添加功能
addTab() {
  that.clearClass();

  //创建新的选项卡li 和内容 section
  var li = ' <li><span>标签1</span><span class="iconfont icon-guanbi"></span></li>';
  var section = '<section class="conactive">测试1</section>';

  //把创建的两个元素追加到对应的父元素中
  //利用 insertAdjacentHTML() 直接把字符串格式的元素添加到父元素中
  that.ul.insertAdjacentHTML('beforeend', li);
  that.fsection.insertAdjacentHTML('beforeend', section);
  that.init();
}

//3. 删除功能
//点击x号可以删除这个索引号对应的li和section
removetab(e) {
  // 阻止冒泡，防止触发 li 的切换
  e.stopPropagation();
  var index = this.parentNode.index;
  that.lis[index].remove();
  that.sections[index].remove();
  that.init();
  // 当删除的不是选中状态的li 的时候，原来的选中状态li 保持不变
  // 如果删除后页面有这个类
  if (document.querySelector('.liactive')) return;
  // 当删除了选中状态的li的时候，让它的前一个 li 处于选中状态
  index--;
  // 手动调用点击事件
  that.lis[index] && that.lis[index].click(); //and，前面为true，才执行后边
}

//4. 修改功能
// 双击选项卡li 或者 section 里面的文字，实现修改功能
// 双击文字时，在里面生成一个文本框，当失去焦点或者按下回车后把文本框输入的值还给原先的元素
editTab() {
  var str = this.innerHTML;
  // 双击禁止选定文字
  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  this.innerHTML = '<input type="text" />';
  var input = this.children[0];
  input.value = str;
  input.select();  //让文本框处于选中状态
  // 当离开文本框就把文本框里面的值给 span
  input.onblur = function () {
    this.parentNode.innerHTML = this.value;
  }
  //按下回车时也可以把文本框里面的值给 span
  input.onkeyup = function (e) {
    if (e.keyCode === 13) {
      //手动调用表单失去焦点事件
      this.blur();
    }
  }
}

}

//实例对象，Tab
new Tab(’#tab’);

7.2 构造函数和原型

构造函数用于创建某一类对象，其首字母要大写
构造函数要和new 一起使用才有意义

7.3 函数进阶

7.4 正则表达式

7.5 ES6

1. let
-声明变量，优化取代 var
-let 声明的变量只在所处的块级有效(在{}内有效)，具有块级作用域。不存在变量提升
-防止循环变量变成全局变量，用于 for 循环中。
-在 for 循环中，每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的。

2. const
-声明常量，常量就是值(内存地址)不能变化的量
-具有块级作用域，声明常量时必须赋值
-声明对象为基本数据类型时，值不可以更改。对象为复杂数据类型时，数据结构内容的值可以更改，数据值本身不可以更改
    
const ary = [100,200];
ary[0] = 123; //可以更改
ary = [1,2]  //不可以更改

3. 区别
-使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
-使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
-使用 const 声明的时常量，在后面出现的代码中不能再修改该常量的值

4. 解构赋值
-ES6中允许从数组中提取值，按照对应的位置对变量赋值。对象也可以实现解构

//数组解构
let ary = [1,2,3]
let [a,b,c] = ary;
 
//对象解构
let person = { name: 'Tom',age: 20 };
let { name, age } = person;

let {name: myName, age: myAge} = person; //myName,myAge属于别名
console.log(myName);
consoel.log(myAge);


5. 箭头函数
-箭头函数是用来简化函数定义语法的
-箭头函数不绑定 this 关键字，箭头函数中的this，指向的是函数定义位置的上下文this
    
() => {}
const fn = () => {}

//实例
const fn(){
    console.log(123)
}

const fn = () => {
    console.log(123)
}
fn();

//函数体只有一句代码，且代码的执行结果就是返回值的，可以省略大括号
function sum(num1,num2){
    return num1 + num2;
}

const sum = (num1,num2) => num1 + num2;

//如果形参只有一个，可以省略小括号
function fn(v){
    return v;
}
const fn = v => v;

//实例
//对象不能产生作用域，say方法被定义在了全局作用域下，say方法中的this指向了window
var age = 100;
var obj = {
    age: 20,
    say: () => {
        alert(this.age)
    }
}

obj.say();  // 100;

6. 剩余参数
- 剩余参数语法允许我们将一个不定数量的参数表示为一个数组

//实例
function sum (first, ...args){
    console.log(first);   // 10
    console.log(args);   // [20,30]
}
sum(10,20,30)

//实例
const sum = (...args) => {
    let total = 0;
    args.forEach(item => {
        total += item;
    })
    return total;
}

console.log(10,20);  //30
console.log(10,20,30);  //60

//实例，和解构配合使用
let students = ['A1','A2','A3'];
let [s1, ...s2] = students;
console.log(s1);  'A1'
console.log(s2);  ['A2','A3']

7. Array 的扩展方法
-扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
-扩展运算符可以用于合并数组
-将伪(类)数组转换为真正的数组
-Array.from()
-find()  用于找出第一个符合条件的数组成员，没有则返回 undefined
-findIndex() 用于找出第一个符合条件的数组成员的位置，没有则返回-1
-includes() 表示某个数组是否包含给定的值，返回布尔值

//实例
let ary = [1,2,3];
let ary2 = ["a","b","c"];
...ary   // 1,2,3
...ary2  // "a","b","c"
console.log(...ary)   // 1 2 3

//实例,数组合并
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1, ...ary2];  //[1,2.3,4,5,6]
ary1.push(...ary2);

//转换伪数组
let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

//转换伪数组
let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length: 3
};

let arr2 = Array.from(arrayLike);  // ['a','b','c']
let newAry = Array.from(aryLike, item => item*2); //['2,'4']

//实例方法，find()方法，找到数组ary中，id为2的数组成员
let target = ary.find((item,index) => item.id == 2);

//实例方法，findIndex()方法
let ary = [1,5,10,15];
let index = ary.findIndex((value,index) => value >9);
console.log();  //2

//实例方法
[1,2,3].includes(2) //true
[1,2,3].includes(4) //false


8.模板字符串
-创建字符串的一种方法，使用反引号定义
-模板字符串可以解析变量
-模板字符串可以调用函数

//实例
let name = `Tom`;
let sayHello = `hello,my name is ${name}`; 

const sayHello = function(){
    return 'abc';
}
let greet = `${sayHello()}`;


9.String的扩展方法
-startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值
-endsWith(): 表示参数字符串是否在原字符串的尾部，返回布尔值
-reprat(): 表示将原字符串重复n次，返回一个新字符串

//实例
let str = 'Hello World!';
str.startsWith('Hello')   //true
str.endsWith('!')   //true

'X'.repeat(3)   // 'XXX'
'hello'.repeat(2)  // "hellohello"


10.Set数据结构
-ES6提供了新的数据结构 Set， 类似于数组，但是成员值唯一，无重复值
-Set本身是一个构造函数，用来生成 Set 数据结构
-Set函数可以接受一个数组作为参数，用来初始化

-add(value): 添加某个值，返回Set解构本身
-delete(value): 删除某个值，返回一个布尔值，表示删除是否成功
-has(value): 返回一个布尔值，表示该值是否为Set的成员
-clear() : 清除所有成员，没有返回值

-也拥有 forEach()方法，用于对每个成员执行某种操作，没有返回值

//示例
const s = new Set();
const set = new Set([1,2,3,4,4]);   //

const s1 = new Set();
const s2 = new Set(['a','b,'c']);
console.log(s2.size);    //3

//数组去重
const s3 = new Set(['a','b,'c','b','a']);
console.log(s3.size);  //3

//实例方法
const s = new Set();
s.add(1).add(2).add(3);  //向 set 结构中添加值
s.delete(2);	// 删除 set 结构中的2
s.has(1);		// 表示 set 结构中是否有1这个值 返回布尔值
s.clear();		// 清除 set 解构中的所有值

const s5 = new Set(['a','b','c']);
s5.forEach(value => {
    console.log(value);
}

8.正则表达式

//验证密码强度
//获取文本框注册键盘抬起事件
my$("pwd").onkeyup=function () {
    
//    if(this.value.length>=6){
//     var lvl= getLvl(this.value);
//      my$("strengthLevel").className="strengthLv"+lvl;
//    }else{
//      my$("strengthLevel").className="strengthLv0";
//    }
    
    my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);
  };

//给函数密码,返回对应的级别
function getLvl(pwd) {
  var lvl=0;//默认是0级
  //密码中是否有数字,或者是字母,或者是特殊符号
  if(/[0-9]/.test(pwd)){
    lvl++;
  }
  //判断密码中有没有字母
  if(/[a-zA-Z]/.test(pwd)){
    lvl++;
  }
  //判断密码中有没有特殊符号
  if(/[^0-9a-zA-Z_]/.test(pwd)){
    lvl++;
  }
  return lvl;//最小的值是1,最大值是3
}

//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
//获取文本框,注册失去焦点的事件
 document.getElementById("email").onblur = function () {
   //判断这个文本框中输入的是不是邮箱
   var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
   if (reg.test(this.value)) {
     this.style.backgroundColor = "green";
   } else {
     this.style.backgroundColor = "red";
   }
 };

//是中文名字,则绿色,否则红色
 document.getElementById("userName").onblur=function () {
   var reg=/^[\u4e00-\u9fa5]{2,6}$/;
   if(reg.test(this.value)){
     this.style.backgroundColor="green";
   }else{
     this.style.backgroundColor="pink";
   }
 };

//封装函数进行表单输入内容的正则验证
//qq的
checkInput(my$("qq"),/^\d{5,11}$/);
//手机
checkInput(my$("phone"),/^\d{11}$/);
//邮箱
checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+)
{1,2}$/);
//座机号码
checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkInput(input,reg) {
  //文本框注册失去焦点的事件
  input.onblur=function () {
    if(reg.test(this.value)){
      this.nextElementSibling.innerText="正确了";
      this.nextElementSibling.style.color="green";
    }else{
      this.nextElementSibling.innerText="让你得瑟,错了吧";
      this.nextElementSibling.style.color="red";
    }
  };
}

//把里面所有的数字全部显示出来,
var str="中国移动:10086,中国联通:10010,中国电信:10000";
var array=str.match(/\d{5}/g);
console.log(array);

// exec(str)方法用于检索字符串中的正则表达式的匹配
var str = "中国移动:10086,中国联通:10010,中国电信:10000";
var reg=/\d{5}/g;
//通过正则表达式匹配这个字符串
var array=reg.exec(str);
while (array!=null){
  //输出匹配的内容
  console.log(array[0]);
  array=reg.exec(str);
}

//提取这里的日
var str="2017-11-12";
var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
//console.log(array);
// 正则表达式对象.$3
console.log(RegExp.$3);

//分别提取邮箱信息
var email="[email protected]";
email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
console.log(RegExp.$1);//用户名
console.log(RegExp.$2);//126
console.log(RegExp.$3);//域名

//替换字
var str="内事问百度";
str=str.replace(/百度/g,"谷歌");
console.log(str);

//所有的h都替换成S，g 表示的是全局模式匹配,i 表示的是忽略大小写
var str="HhpphH";//SSppSS
var reg = new RegExp(/[h]/gi);
str=str.replace(reg,"S");
console.log(str);

2.手写代码实例

相关标签：专题总结 HTML/CSS 大前端基础

上一篇：日期和时间类函数

下一篇： Spring RestTemplate请求第三方接口

-2. JavaScript Methods

使用php转义输出HTML到JavaScript_PHP

WordPress.com 开源，弃 PHP 改用 JavaScript_PHP教程_编程技术

javascript中的正则表达式使用指南_javascript技巧

C#和JavaScript实现交互的方法

-2. JavaScript Methods

2. 解构赋值

使用AmplifyJS组件配合JavaScript进行编程的指南

2.理解JavaScript的浮点数

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载_javascript技巧

javascript - php如何模拟登录http://www.19lou.com/login, curl无法登陆成功