web前端 js基础

超级闪电侠fff

已于 2024-05-22 23:23:32 修改

阅读量190

点赞数

文章标签： javascript 前端

于 2023-05-03 14:58:45 首次发布

本文链接：https://blog.csdn.net/S788977SS/article/details/130447788

版权

web前端 js基础

toString()

创建一个Person实例，当我们直接在页面中打印一个对象时，事实上是输出对象的toString()方法的返回值
如果我们不想在输出对象时输出[object,object],可以为对象添加一个toString（）方法
加前：

function person(a,b){
this.name=a;
this.age=b;
}
var per=new person("孙悟空",3)
var result=per.toString()
console.log("result="+result)

在这里插入图片描述
加后

function person(a,b){
this.name=a;
this.age=b;
}
var per=new person("孙悟空",3)
per.toString=function(){
   return "Person[name="+this.name+",age="+this.age+"]";
}
var result=per.toString()
console.log("result="+result)

在这里插入图片描述

垃圾回收

程序久了会产生垃圾，垃圾积累过多会导致程序运行的速度过慢，所以需要一个垃圾回收的机制来处理程序运行过程中产生的垃圾
当一个对象没有任何变量对他进行引用此时我们将无法再操作该对象，此时这个对象就是一个垃圾，当这种对象过多会占用大量内存空间，导致程序运行过慢。所以必须清理。在JS中拥有自动的垃圾回收机制。会自动讲这些垃圾从内存中销毁，我们不需要也不能进行垃圾回收操作，只需要将不再使用的对象设置成null
在这里插入图片描述

数组简介

数组也是一个对象
它和我们普通对象功能类似，也是用来储存一些值。不同的是普通对象是使用字符串作为属性名的，而数组使用数字来作为索引来操作元素
索引（index）：从0开始的一个整数
数组存储性能比普通对象好，在开发中经常使用数组来储存数据

var arr=new Array()//创建一个数组
arr[0]=12;
arr[1]=22;
arr[2]=33;
console.log(arr[1])//读取数组中的元素，读取到不存在的索引会返回undefind

在这里插入图片描述
获取数组长度
可以使用length属性来获取数组长度（元素个数）
语法：数组.length
对于连续的数组，使用length可以获取数组的长度（元素个数）
对于非连续的数组，使用length会获取到数组的最大引索加1，尽量不要创建非连续数组（中间部分会空出来占地址）

var arr=new Array()//创建一个数组
arr[0]=12;
arr[1]=22;
arr[2]=33;
arr.length=2//修改了length的长度，如果修改后的length大于原长度，多余部分会空出来。length小于原长则多出元素会被删除
console.log(arr)
console.log(arr.length)

在这里插入图片描述
向数组最后一个位置添加元素

var arr=new Array()
arr[0]=12;
arr[1]=22;
arr[2]=33;
arr[arr.length]=70;//向数组最后一位添加元素方法
console.log(arr)
console.log(arr.length)

在这里插入图片描述

数组字面量

使用数组字面量创建数组时，可以在创建时就指定数组中的元素

var arr =[1,2,3,4,5];//方法
console.log(arr)

在这里插入图片描述
使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递。元素之间用逗号隔开

var arr2=new Array(10,20,30);//方法
console.log(arr2)

在这里插入图片描述
区别：

arr=[12]//创建一个数组数组中只有一个元素12
console.log(arr[0]);
arr2=new Array(10);//创建一个长度为10的数组
console.log(arr2)

在这里插入图片描述
数组中的元素可以是任何值也可以是对象

var obj={name:"速度"};
var arr=new Array();
arr[0]=11;
arr[1]=22;
arr[arr.length]=obj;//以对象为元素
console.log(arr);
console.log(arr.length)

在这里插入图片描述

可以是函数

arr=[function(){alert(1)},function(){alert(2)}];
console.log(arr);
arr[0]();

在这里插入图片描述

可以是数组，这种数组我们称为二维数组

arr=[[1,2,3],[4,5,6]]
console.log(arr);
console.log(arr.length)

在这里插入图片描述

数组的四个方法

push()
该方法可以向数组末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组末尾

var arr=[1,2,3]
var result=arr.push(4,5,"场地")
console.log(arr)
console.log("result="+result)

在这里插入图片描述

pop():删除数组的最后一个元素，并将删除的元素返回

var arr=[1,2,3]
result=arr.pop()
console.log(arr)
console.log("result="+result)

在这里插入图片描述

unshift():向数组开头开头添加一个或多个元素，并返回新的数组长度，向前插入元素后，其他的元素引索会依次调整

var arr=[1,2,3]
result=arr.unshift("时代",3)
console.log(arr)
console.log("result="+result)

在这里插入图片描述

shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回

数组的遍历

所谓遍历数组就是将数组中的所有的元素都取出来

var arr=[1,2,3,4];
for(var i=0;i<arr.length;i++){
   console.log(arr[i])
}

在这里插入图片描述
练习：

function Person(a,b){
   this.name=a;
   this.age=b;
}
Person.toString=function(){
   return "Person[name="+this.name+",age="+this.age+"]"
}
var per=new Person("尾声",21)
var per2=new Person("当时",12)
var per3=new Person("二分",7)
var per4=new Person("忽然",22)
var per5=new Person("算法",3)
var perDig=[per,per2,per3,per4,per5];
//创建一个函数，可以将perArr中的大于12的数提出，然后封装到一个新的数组中并返回(arr形参，要提取信息的数组)
function getDig(arr){
var newArr=[];
for(var i=0;i<arr.length;i++){
   var p=arr[i];//代表遍历的每一个数组
   if(p.age>=12){
   newArr.push(p);//将满足条件的对象添加到newarr数组中
   }
}
return newArr;
}
var result=getDig(perDig);
console.log(result);

在这里插入图片描述

forEach

一般用for循环去遍历数组，js中还为我们提供了一个方法遍历数组。forEach()
它需要一个函数作为参数

var arr=[1,2,3,4];

arr.forEach(function(a,b,c){
   console.log("a="+a)
})//这里的函数由我们创建，却不由我们调用称为回调函数。在这里数组中有几个元素函数就会执行几次，每次执行浏览器会将遍历到的元素以实参的形式传递进来，我们可以定义形参来读取这些内容

这个方法只支持IE8以上的浏览器
浏览器会在回调函数中传递三个参数；
第一个参数，就是当前正在遍历的元素
第二个参数就是当前正在遍历函数的索引
第三个函数就是当前正在遍历的数组

slice和splice

slice():从某个已有的数组返回选定的元数

该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回

var arr=[1,2,3,4,5];
var result=arr.slice(0,2);
console.log("result="+arr)

在这里插入图片描述

需要两个参数：截取开始的位置索引和截取结束的位置索引（包含开始索引不包含结束索引，第二个参数省略不写时会截取从开始索引往后的所有元素）

var arr=[1,2,3,4,5];
var result=arr.slice(0,2);
console.log("result="+result)

在这里插入图片描述

索引可传递一个负值，如果传递一个负值则从后往前计算（-1倒数第一个，-2倒数第二个）

var arr=[1,2,3,4,5];
var result=arr.slice(1,-2);
console.log("result="+result)

在这里插入图片描述

splice():删除元素，并向数组添加新元素

使用splice（）会影响到原函数，会将指定元素从原数组中删除。并将被删除的元素作为返回值返回

var arr=[1,2,3,4,5];
var result=arr.splice(0,2,6);
console.log("result="+arr)

在这里插入图片描述

var arr=[1,2,3,4,5];
var result=arr.splice(1,2);
console.log("result="+result)

在这里插入图片描述

参数：第一个，表示开始位置的索引。第二个表示删除的数量。第三个及以后可以传递一些新的元素，这些元素会自动插入到开始位置索引前面
练习：
去处数组中重复的数字

var arr=[1,2,3,4,5,4,2,7,4,2];
for(var i=0;i<arr.length;i++){
   for(var j=i+1;j<arr.length;j++){
      if(arr[i]==arr[j]){
         arr.splice(j,1);
      }
   }
}
console.log(arr);

在这里插入图片描述
以上程序有问题，当有两个相同数挨在一起时不能全删除。因为删除了上一位相同的元素后，后面的元素会自动补位，此时不会再比较这个元素了，所以我们需要再比较一次j所在位置的元素，就要使j自减一。改进如下：

var arr=[1,2,3,4,5,4,2,2,7,4,2];
for(var i=0;i<arr.length;i++){
   for(var j=i+1;j<arr.length;j++){
      if(arr[i]==arr[j]){
         arr.splice(j,1);
         j--;//注意不要把j--写到if循环外面了
      }
   }
}
console.log(arr);

在这里插入图片描述

数组的剩余方法

concat()可以连接两个或多个数组，并将新的数组返回。该方法不会对原数组产生影响

var arr=[1,2,3];
var arr2=[4,5,6];
var result=arr.concat(arr2);
console.log(result);

在这里插入图片描述
注意var result=arr.concat(arr2);这里有几个需要连接就写进去，也可以传单个元素如var result=arr.concat(arr2,arr3,6,7);

join():该方法可以将数组转化为字符串
该方法不会对原数组产生影响，而是将转化后的字符串作为结果返回
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符。如果不指定连接符则默认使用逗号作为连接符（不要连接符则传一个空串）

var arr=[1,2,3,4];
var result= arr.join("w");
console.log(result)

在这里插入图片描述

reverse():该方法用来反转数组（前面的去后面，后面的去前面）
该方法会直接修改原数组
sort():可以用来对数组中的元素进行排序
也会影响原数组，默认按照Unicode编码进行排序，即使对于纯数字进行排序也会按照Unicode编码来排序，所以会得到错误结果

var arr=[2,1,3,4,11];
arr.sort();
console.log(arr)

在这里插入图片描述
我们可以自己指定排序的规则，在sort()添加一个回调函数，来指定排序规则。
回调函数中需要定义两个形参，浏览器会将会分别使用数组中的元素作为实参去调用回调函数。
使用哪个函数调用不确定，但肯定的是在数组中a一定在b的前面
浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，元素的位置交换。
如果返回一个等于0的值，元素的位置不交换
如果返回一个小于0的值，元素的位置不变
方法如下：

var arr=[1,3,2,6,4,5,7];
arr.sort(function(a,b){
   if(a>b){
      return 1;
   }else if(a<b){
      return -1;
   }else{
      return 0;
   }
})
console.log(arr)

在这里插入图片描述
如下方法和上面效果同
升序：return a-b
降序：return b-a

 var arr=[1,2,4,3,14,5,24,13];
arr.sort(function(a,b){
return a-b
})
console.log(arr)

在这里插入图片描述

函数的方法

call()和apply()
都是函数对象的方法，需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行

function fun(){
   alert("sdj");
}
//fun.call();
fun.apply()

在这里插入图片描述
在调用call()和apply()时可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行的this

function fun(){
   console.log(this.name);
}
var arr={
   name:"缩写",
   sayName:function(){alert(this.name)}
}
var arr2={
   name:"实参"
}
//fun.call();
fun.call(arr);
arr.sayName.apply(arr2)

在这里插入图片描述
call（）方法可以将实参在对象之后传递，apply()需要将实参封装到一个数组中统一传递

function fun(a,b){
  console.log("a="+a);
  console.log("b="+b);
   console.log(this.name);
}
var arr={
   name:"缩写",
   sayName:function(){alert(this.name)}
}
fun.call(arr,1,2)//用apply()则需要写成fun.call(arr,[1,2])

在这里插入图片描述

arguments(）
在调用函数时，浏览器每次都会传递两个隐含的参数：1.this，2.封装实参的对象arguments
arguments是一个类数组对象，也可以通过索引来操作数据，也可以获取长度
调用函数时，我们所传递的实参都会在arguments中保存
可以不定义形参，通过arguments来使用实参，但比较麻烦
arguments[0]表示第一个实参，以此类推
它有一个属性callee,这个属性对应一个函数对象，就是当前正在执行的函数的对象

function fun(){
   console.log(arguments instanceof Array);//判断arguments是否属于数组
   console.log("b="+arguments[0]);
  console.log("a="+arguments[1]);
  console.log(arguments.length);//获取实参个数
  console.log(arguments.callee==fun);
}
  fun(2,3);

在这里插入图片描述

Date对象

在js中表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装当前代码执行时间

 var d=new Date();
  console.log(d);

在这里插入图片描述
如果像创建一个指定的时间对象需要在构造函数中传递一个表示时间的字符串作为参数

var d=new Date("12/11/2014 11:10:11");//格式为：月份/日/年 具体时间
  console.log(d);

在这里插入图片描述
方法：

getDate 获取当前对象中封装的日期是几日
getDay 获取当前对象封装的对象日期是周几，会返回一个0~6的值，0代表星期日
getMonth 获取当前时间对象的月份，会返回0~11的值

 var d=new Date("12/11/2014 11:10:11");//格式为：月份/日/年 具体时间
  var d1=d.getMonth();
  console.log(d1);

在这里插入图片描述

getFullyear 获取当前日期对象的年份
getHours获取当前日期对象的小时返回0 ~23，依次可知获取分，秒，毫秒分别为getMinutes（0 ~ 59）,getSeconds（0 ~59）,getMilliseconds(0 ~999)
getTime 获取当前日期对象的一个时间戳，即从格林威志标准时间的1970年1月1日，0时0分0秒到当前日期所花的毫秒数（1秒=1000毫秒）

  var d=new Date("1/1/1970 0:0:0");//这里的时间是北京时间，和标准时间中间相差了8小时，所以会出现下面的结果
  var d1=d.getTime();
  console.log(d1);

在这里插入图片描述
计算机底层在保存时间时使用的都是时间戳
获取当前时间戳Date.now
可获取当前代码执行的时间戳，并利用这个测试代码的执行的性能

 var star=Date.now();
  for(i=0;i<100;i++){console.log(i)}
  var end=Date.now();
  console.log("执行了"+(end-star)+"毫秒");

在这里插入图片描述

Math对象

Math和其他的对象不同，它不是一个构造函数。它属于工具类不用创造对象，它里面封装了数学算法相关的属性和办法
属性：
Math.PI表示圆周率3.1415…,Math.E表示
方法：

abs()可以计算一个数的绝对值
直接使用如： console.log(Math.abs(-2))
ceil() 可以用来对一个数进行向上取整，小数位有值就会自动进一
floor() 可以用来对一个数进行向下取整，小数部分会被舍掉

console.log(Math.ceil(1.1))

在这里插入图片描述

round() 对一个数进行四舍五入取整
random()可以生成一个0~1的随机数
生成一个0-x之间的随机数：Math.round(Math.random() * x)
生成一个x到y之间的随机数：Math.round(Math.random()* (y-x)+x)
如：

console.log( Math.round(Math.random()*20+1))

max() 获取多个数之间的最大值，Min()获取多个数之间的最小值
pow(x,y)返回x的y次幂
sqrt()对一个数开方

包装类

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的对象转换为对象
String():可以将基本数据类型字符转换为String对象
Number()：可以将基本数据类型的数字转换为Number对象
Boolean()：可以将基本数据类型的布尔值转换为Boolean对象
但是实际应用中不会使用基本数据类型的对象，如果使用了，在作一些比较时可能会带来一些不可预期的结果
方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转化为对象，然后在调用对象的属性和方法，调用完后，再将其转化为基本数据数据类型

字符串的方法

在底层字符串是以字符数组的形式保存的

length属性用来获取字符串的长度
charAt()可以用来返回字符串中指定位置的字符（根据索引获取），不会对原字符串产生影响

 str="Hello Atguigu";
  var result=str.charAt(0);
  console.log(result)

在这里插入图片描述
效果与var result=str[0]一样

charCodeAt()获取指定位置字符的字符编码（Unicode编码)
String.formCharCode() 根据字符编码去获取字符
concat() 可以用来连接两个或多个字符串，对原字符串不产生影响
如：

result=str.concat("full","guu")

indexof() 该方法用来检索一个字符串中是否含有指定内容，如果有则会返回，则会返回其第一次出现的索引，如果没有则会返回-1
可以指定一个第二个参数，指定开始查找的位置
lastIndexof()该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndex是从后往前找
slice()可以从字符串中截取指定内容，不会影响原字符串。两个参数：第一个开始位置的索引（包括开始位置），第二个结束位置的索引（不包括结束位置，如果省略第二个参数则会截取到后面所有的，也可以传递一个负数作为参数，传负数后就会从后面计算）
subString()也可以用来截取一个字符串，和slice()类似。不同的是这个方法不能接受负值作为参数，如果传递了一个负值则默认使用0，如果第二个参数小于第一个，他会自动调整参数位置把两个交换
substr()用来截取字符串；两个参数：第一个是开始位置的索引（包括开始位置），第二个是截取长度（注意：ECMAscript没有对该方法进行标准化，因此反对使用）
split()可以将一个字符串拆分成一个数组参数：需要一个字符串作为参数，将会根据字符串去拆分数组

 var str="Hel,loA,tgu,igu";
  result=str.split(",")//根据逗号来拆
  console.log(result)
  console.log(result.length)
  //根据A来拆
  result=str.split("A")
  console.log(result)
  console.log(result.length)

在这里插入图片描述

toUpperCase()将一个字符串转化为大写，toLowerCase()将一个字符串转化为小写，二者均不会影响原字符串

超级闪电侠fff

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端 js基础

数组也是一个对象它和我们普通对象功能类似，也是用来储存一些值。不同的是普通对象是使用字符串作为属性名的，而数组使用数字来作为索引来操作元素索引（index）：从0开始的一个整数数组存储性能比普通对象好，在开发中经常使用数组来储存数据var arr=new Array()//创建一个数组arr[0]=12;arr[1]=22;arr[2]=33;console.log(arr[1])//读取数组中的元素，读取到不存在的索引会返回undefind获取数组长度。
复制链接

扫一扫