侧边栏壁纸
  • 累计撰写 121 篇文章
  • 累计创建 0 个标签
  • 累计收到 51 条评论

目 录CONTENT

文章目录
ES5

ES5.md

江子辰
2022-03-08 / 0 评论 / 0 点赞 / 86 阅读 / 10,952 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告
方法说明
charAt()返回指定索引位置的字符
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串,返回连接后的字符串
fromCharCode()将 Unicode 转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断,并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值
字符方法charAt()和charCodeAt()
var str='Hello World';//创建字符串
//1:测试charAt()方法
console.log(str.charAt(1));//返回e
 //2:测试charCodeAt()方法
console.log(str.charCodeAt(1));//返回101(ASCII编码)
console.log(str[1]);//返回e           
字符串操作方法concat()、slice()、substr()、substring()
 //1:测试concat()方法
var str1='Hello ';
var result=str1.concat('World');
console.log(str1);    //Hello
console.log(result);//Hello World
            
//2:测试slice(startIndex,[lastIndex])方法
//参数:开始下标,结束下标(可选)
var stringValue='hello world';
console.log(stringValue.slice(3));//lo world
console.log(stringValue.slice(3,7));//lo w
            
//3:测试substr(startIndex,[lastIndex])方法
//参数:开始下标,结束下标(可选)
console.log(stringValue.substr(3));//lo world
console.log(stringValue.substr(3,7));// lo worl
//4:测试substring(startIndex,[lastIndex])方法
//参数:开始下标,结束下标(可选)
console.log(stringValue.substring(3));//lo world
console.log(stringValue.substring(3,7));//lo w
            
var item='hello world';
console.log(item.slice(-3));//rld
console.log(item.substr(-3));//rld
console.log(item.substring(-3));//hello world
console.log(item.slice(3,-4));//lo w
console.log(item.substr(3,-4));//''空字符串
console.log(item.substring(3,-4));//hel 

这三个方法都返回被操作字符串的一个字符串,而且也接受一个或两个参数,当接受两个参数时,不包含结束下标,第一个参数指定字符串的起始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束,具体来说,slice()和substring()的第二个参数指定的是字符串最后一个字符后面的位置,而substr()的第二个参数指定的则是返回的字符个数。如果没有给这些方法指定第二个参数,则将字符串的末尾作为结束位置。

在传递这些方法的参数是负值的情况下,它们的行为就不尽相同了,其中slice()方法会将传入的负值与字符串长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。最后,substring()方法会将所有负值参数转换为0。

字符串位置方法indexOf()和lastIndexOf()
var stringValue='hello world';
//1:测试inexOf()方法
console.log(stringValue.indexOf('o'));//4
console.log(stringValue.indexOf('o',6));//7
//2:测试lastIndexOf()方法
console.log(stringValue.lastIndexOf('o'));//7
console.log(stringValue.lastIndexOf('o',6));//4
            
var item='Lorem ipsum dolor sit amet, consectetur adipisicing elit';
var positions=new Array();
var pos=item.indexOf('e');
while(pos>1){
    positions.push(pos);
    pos=item.indexOf('e',pos+1);
}
console.log(positions);//3,24,32,35,52;
trim()方法
var str='         hello world        ';
var trimStr=str.trim();
console.log(str);//         hello world      
console.log(trimStr);//hello world
字符串大小写转换方法toLowerCase()和toUpperCase()
var str='Hello World';
console.log(str.toLowerCase());    //hello world
console.log(str.toUpperCase());//HELLO WORLD
console.log(str.toLocaleLowerCase());//hello world
console.log(str.toLocaleUpperCase());//HELLO WORLD
字符串的模式匹配方法split()、match()、replace()、search()
//1:测试match()方法
var text1='cat, bat, sat, fat';
var pattern=/.at/;
var matches=text1.match(pattern);
console.log(matches.index);//0
console.log(matches[0]);//cat
console.log(pattern.lastIndex);//0
            
//2:测试search()方法
var text2='cat bat, sat, fat';
var pos=text2.search(/at/);
console.log(pos);//1
            
//3:测试replace()方法
var text3='cat, bat, sat, fat';
var result=text3.replace('at','ond');
console.log(result);//cond,bat,sat,fat
result =text3.replace(/at/g,'ond');
console.log(result);//cond,bond,sond,fond
            
//4:测试split()方法
var text4='red,blue,green,yellow';
var colors1=text4.split(',');
var colors2=text4.split(',',2);
console.log(colors1);//['red','blue','green','yellow'];
console.log(colors2);//['red','blue'];

match()方法本质上与调用RegExp的exec()方法相同,match()方法只接受一个参数,要么是一个正则表达式,要么是一个RegExp对象。

search()方法与match()方法的参数相同,有字符串或RegExp对象指定的一个正则表达式,search()方法返回字符串中第一个匹配项的索引,如果没有找到匹配项,则返回-1,而且,search()方法始终从字符串开头向后匹配查找模式。

replace()方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以可以是一个字符串或者一个函数。如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的方法就是提供一个正则表达式,而且要指定全局(g)标志。

split()方法可以基于指定的分隔符将一个字符串分割成多少个字符串,并将结果放在数组中。分隔符可以是字符串,也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式)。split()方法可以接受可选的第二个参数,用于指定数组的大小,以确保返回的数组不会超过既定大小。

解析 URL Params 为对象

"https://www.baidu.com/v2/api?username=wangkai&age=2&sex=nv"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>将URL的参数解析为一个对象</title>
</head>

<body>
<script type="text/javascript">
function queryURL(url){
    var arr1 = url.split("?");//["https://www.baidu.com/v2/api","username=wangkai&age=2&sex=nv"]
    var params = arr1[1].split("&");["username=wangkai","age=2","sex=nv"]
    var obj = {};//声明对象
    for(var i=0;i<params.length;i++){
        var param = params[i].split("=");[username,wangkai]
        obj[param[0]] = param[1];//为对象赋值
    }

    return obj;
}
var a = queryURL("http://www.baidu.com?name=javascript&keyword=word");
alert(a.name);
</script>
</body>
</html>

转为驼峰

传传统方法

1.转大写,需要用到字符串的toUpperCase()方法

2.去掉-,需要用到字符串方法split(),这样就转成数组了,但数组中的每一个元素依然是字符串,所以可以用循环的方法取到第一个后面的元素

3.取第一个后面的元素的第一个字符,需要用到字符串的charAt()方法

4.第一个字符后面的字符,可以通过字符串截取方法substring()获得,这时把两个拼接再赋回给原数组。即完成了转换

5.用join()方法把数组的逗号去掉,拼接成字符串

var str="border-bottom-color";
function tf(){
  var arr=str.split("-");
  for(var i=1;i<arr.length;i++){
    arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  }
  return arr.join("");
};
tf(str);
正则的方法

分析:

1.正则为-字符,即var re=/-\w/g;匹配到-字符

2.用正则的replace()方法替换这个规范为去掉-以及字符大写,通过回调函数第一个参数直接转大写

var str="border-bottom-color";
function tf(){
  var re=/-(\w)/g;
  str=str.replace(re,function($0,$1){
    return $1.toUpperCase();
  });
  alert(str)
};
tf(str);

查找字符串中出现最多的字符和个数

var str = "nininihaoa";
 var object = {
   n:2,
   i:2
 }; 

 for (var i = 0, length = str.length; i < length; i++) {
  var char = str.charAt(i);
  
  if (object[char]) {
    //object[key]
   object[char]++; //次数加1
  } else {
   object[char] = 1; //若第一次出现,次数记为1
  }
 }
 console.log(o); //输出的是完整的对象,记录着每一个字符及其出现的次数
 //遍历对象,找到出现次数最多的字符的次数
 {
     n:3,
     i:3,
     h:1,
     a:2,
     o:1
   }
  
 var max = 0;
 for (var key in object) {
  if (max < object[key]) {//3
   max = object[key]; //max始终储存次数最大的那个3
  }
 }
 for (var key in o) {
  if (o[key] == max) {
   //console.log(key);
   console.log("最多的字符是" + key);
   console.log("出现的次数是" + max);
  }
 }

统计次数

function countInstances(mainStr, subStr)
  {
    var count = 0;
    var offset = 0;
    do
    {
      offset = mainStr.indexOf(subStr, offset);
      if(offset != -1)
      {
        count++;
        offset += subStr.length;
      }
    }while(offset != -1)
    return count;
  }
var str = "zhaochucichuzuiduodezifu";
    var o = {};
    //遍历str,统计每个字符出现的次数
    for (var i = 0, length = str.length; i < length; i++) {
	    //当前第i个字符
        var char = str.charAt(i);
        //char就是对象o的一个属性,o[char]是属性值,存储出现的次数
        if (o[char]) {  //如果char属性存在,属性值+1 
            o[char]++;  //次数加1
        } else {        //char属性不存在为1(即字符第一次出现) 
            o[char] = 1;    //若第一次出现,次数记为1
        }
    }
    //输出的是完整的对象,记录着每一个字符及其出现的次数
    //输出{a:1, c:3, d:2, e:1, f:1, h:3, i:3, o:2, u:5, z:3}
    console.log(o);   
    //遍历对象,找到出现次数最多的字符和次数
    var max = 0;        //存储出现次数最多的次数
    var maxChar = null; //存储出现次数最多的字符
    for (var key in o) {
        if (max < o[key]) {
            max = o[key];   //max始终储存次数最大的那个
            maxChar = key;  //那么对应的字符就是当前的key
        }
    }
    console.log("最多的字符是" + maxChar);
    console.log("出现的次数是" + max);


字符串加千分符


var str = '23598445646544'; 
var iNum = 10;
function test3(str) { 
  var iNum = str.length%3; //余数 2
  var prev = ''; 
  var arr = [23,598,445,646,544]; 
  var iNow = 0; 
  var tmp = ''; 
if(iNum !=0) { 
  prev = str.substring(0,iNum); //将余数截取出来 2
  arr.push(prev); 
} 
str = str.substring(iNum); 
for(var i=0;i<str.length;i++) { 
  iNow++; 
  tmp +=str[i]; 
  if(iNow ==3 && tmp) { 
    arr.push(tmp); 
    tmp = ''; 
    iNow = 0; 
  } 
} 
return arr.join(','); 
} 
alert(test3(str)); 
 

函数

函数声明和函数表达式区别

javascript中声明函数的方法有两种:函数声明式和函数表达式

区别如下:

  • 以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的。

  • 以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用。

function boo(){
  
};  
var bar = function(){
  
};

class 关键字
class Student{
  
}

var student = new Student();

在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明。对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略。说到这里,答案就不言而喻了(前一个是函数声明,后一个是函数表达式)。

函数声明: 
function 函数名称 (参数:可选){ 函数体 } 
函数表达式: 
var func = function 函数名称(可选)(参数:可选){ 函数体 } 

JavaScript中callee和caller的作用

callee

runtime

callee是对象的一个属性,该属性是一个指针,指向参数arguments对象的函数

作用:就是用来指向当前对象

返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.
callee是arguments 的一个属性成员,它表示对函数对象本身的引用,这有利于匿名
函数的递归或者保证函数的封装性。 下面一段代码先说明callee的用法,实例代码摘自网上 :

function calleeLengthDemo(arg1, arg2) {
  alert(arguments.callee.toString());
  if (arguments.length == arguments.callee.length) {
    window.alert("验证形参和实参长度正确!");
    return;
   } else {
    alert("实参长度:" + arguments.length);
    alert("形参长度: " + arguments.callee.length);
  }
}
calleeLengthDemo(1); 

func1().func2().func3.func4()

第一个消息框弹出calleeLengthDemo函数本身,这说明callee就是函数本身对象的引用。

callee还有个非常有用的应用就是用来判断实际参数跟行参是否一致。上面的代码第一个消息框会弹出实际参数的长度为1,形式参数也就是函数本身的参数长度为2.

caller

caller是函数对象的一个属性,该属性保存着调用当前函数的函数的引用(指向当前函数的直接父函数)

返回一个对函数的引用,该函数调用了当前函数。

functionName.caller,functionName 对象是所执行函数的名称。

注意:

对于函数来说,caller 属性只有在函数执行时才有定义。 如果函数是由 Javascript 程序的顶层调用的,那么 caller 包含的就是 null 。

 function caller() {
  if (caller.caller) {
    alert(caller.caller.toString());
  } else {
     alert("函数直接执行");
  }
}
function handleCaller() {//caller ====> handle
  caller();
}

function handle(){
  handleCaller()
}

handleCaller();
caller();

第一个alert会弹出调用caller函数的调用者handleCaller,而第二个alert由于没有在其他函数体内调用,所以caller为null,就执行了 alert("函数直接执行");

应用场景:
callee的应用场景一般用于匿名函数

 var fn=function(n){ 
  if(n>0) return n+fn(n-1); 
  return 0; 
} 
alert(fn(10)) 

函数内部包含了对自身的引用,函数名仅仅是一个变量名,在函数内部调用即相当于调用
一个全局变量,不能很好的体现出是调用自身,这时使用callee会是一个比较好的方法

var fn=(function(n){ 
if(n>0) return n+arguments.callee(n-1); 
  return 0; 
})(10); 
alert(fn) 

这样就让代码更加简练。又防止了全局变量的污染。 caller的应用场景 主要用于察看函数本身被哪个函数调用。

bind、call、apply区别

在JS中,这三者都是用来改变函数的this对象的指向的
总结三者的相似之处:

  • 都是用来改变函数的this对象的指向的
  • 第一个参数都是this要指向的对象
  • 都可以利用后续参数传参
call

继承,把父类私有属性和方法,克隆一份一模一样的,作为子类私有的属性和方法。

function A() { // 一个函数有三种角色:1、普通函数(私有作用域)2、类(new)3、普通对象(__proto__)
    this.x = 100;
    this.y = 200;
    this.a = function () {
        console.log(this.x);
    }
}
A.prototype.getX = function () {
    console.log(this.x);
};
function B() {
    this.y = 100;
    // this->b
  //A()
    A.call(this,aa,bb);// ->A.call(b) 把A执行,让A中的this变为了B
    this.A(aa,bb)
    //此时的A.prototype对B类来说是没用的,因为B没有继承A
}
var b = new B;
console.log(b.x); // ->100
b.a(); // ->100
console.log(b.y); // ->200
apply

apply和call方法的作用是一模一样的,都是用来改变方法中this关键字并且将方法执行,跟call唯一的的区别就是语法的区别:

//call传递参数是用逗号分隔,一个一个传进去
fn.call(obj, arg1,arg2,arg3.....)
//apply传递参数是用一个数组
fn.apply(obj, [arg1,arg2,arg3....])
bind

这个方法在IE6-IE8下不兼容。bind也是改变this的指向,但是对象在bind之后不会直接执行,需再次调用。

var obj = {num:1};
function fn(num1, num2) {
    console.log(num1+num2);
}
fn(200,300)
fn.call(obj, 100, 200);//->输出300

fn.bind(obj, 100, 200);  // 只是改变了fn中的this为obj,并且给fn传递了两个参数值,但是此时并没有执行fn这个函数。
 
//要让fn这个函数执行,下面的写法就行。
var myFn = fn.bind(obj, 100, 200);
newFn<====obj.fn(100,200)  
newFn()
// obj={
	//newfn:fn
//}
myFn();
//这是因为执行bind会有一个返回值,这个返回值myFn就是我们把fn的this改变后的那个结果!

区别:

call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以

call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

作用域链

简单来讲,作用域(scope)就是变量访问规则的有效范围

  • 作用域外,无法引用作用域内的变量;
  • 离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器
  • 作用域与执行上下文是完全不同的两个概念

JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。编译阶段由编译器完成,将代码翻译成可执行代码,这个阶段作用域规则会确定。执行阶段由引擎完成,主要任务是执行可执行代码,执行上下文在这个阶段创建。

作用域链

在JS引擎中,通过标识符查找标识符的值,会从当前作用域向上查找,直到作用域找到第一个匹配的标识符位置。就是JS的作用域链。

什么是IIFE?有什么好处

IIFE就是立即执行函数表达式(Immediately-Invoked Function Expression)

1.创建块级(私有)作用域,避免了向全局作用域中添加变量和函数,因此也避免了多人开发中全局变量和函数的命名冲突;
2.IIFE中定义的任何变量和函数,都会在执行结束时被销毁。这种做法可以减少闭包占用的内存问题,因为没有指向匿名函数的引用。只要函数执行完毕,就可以立即销毁其作用域链了;

0
广告 广告

评论区