这篇博客深入探讨了JavaScript中的方法，包括基础知识如数据类型、数组、函数和面向对象，以及Math、Date、String和Array对象的方法。此外，还介绍了如何生成随机颜色、冒泡排序、求最大值、自定义排序、格式化日期和计算时间差等实用技巧。最后，文章展示了类的继承和构造函数的相关概念。
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 ( t a g N a m e ) r e t u r n d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( t a g N a m e ) ; / / 闭 包 缓 存 数 据 f u n c t i o n g e t V a l u e ( ) v a r v a l u e = 2 ; r e t u r n f u n c t i o n ( ) / / 每 一 次 点 击 的 时 候 , 都 应 该 改 变 当 前 点 击 按 钮 的 v a l u e 值 t h i s . v a l u e = " 赞 ( " + ( v a l u e + + ) + " ) " ; / / 获 取 所 有 的 按 钮 v a r b t n O b j s = m y (tagName) { return document.getElementsByTagName(tagName); } //闭包缓存数据 function getValue() { var value=2; return function () { //每一次点击的时候,都应该改变当前点击按钮的value值 this.value="赞("+(value++)+")"; } } //获取所有的按钮 var btnObjs=my (tagName)returndocument.getElementsByTagName(tagName);//闭包缓存数据functiongetValue()varvalue=2;returnfunction()//每一次点击的时候,都应该改变当前点击按钮的value值this.value="赞("+(value++)+")";//获取所有的按钮varbtnObjs=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="shuaiyangtaishuaile@itcast.com.cn";
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.手写代码实例
扫一扫
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
