20181009 前端开采日报美高梅4858官方网站

作者:编程技术

JavaScript字符串操作方法大全,包含ES6方法;Vue 常见面试问题;巧用 TypeScript ;

1)Global对象

var str="ABC def!"console.log(str.toUpperCase//ABC DEF!

JavaScript字符串操作方法大全,包含ES6方法一、charAt() 返回在指定位置的字符。 {代码...} 二、charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 {代码...} 三、concat() 连接字符串。 {代码...} 四、indexOf() 检索字符串。indexOf() 方法对大小写...Vue 常见面试问题GitHub 地址,后面继续补充,star不迷路。 计算属性、方法和侦听属性的区别与使用场景 Vue 生命周期的理解 Vue 双向绑定,为什么不能通过修改下标来通知视图发生变化 简述 Vue ...巧用 TypeScript 以下问题来自于与公司小伙伴以及网友的讨论,整理成章,希望提供另一种思路解决问题。 函数重载 TypeScript 提供函数重载的功能,用来处理因函数参数不同而返回类型不同的使用场景,使用时,只需为同一个函数定义多个类型即可,简单使用如下所示: d

2)函数声明与函数表达式

在代码开始执行之前,解释器通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。
函数表达式,则必须等到解释器执行到它所在的代码行才会被解释执行。

美高梅4858官方网站 1

函数声明:能够正确运行

美高梅4858官方网站 2

函数表达式:执行出错

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。

3)String类型

let s='abc';
let s='abc';
console.log(s.length);//3

方法

  • 字符方法:
    charAt():根据索引获取字符串中的字符
    charCodeAt():根据索引获取字符串的字符的编码
    ES5中可以使用[ index]来访问特定字符
let s='abc';
console.log(s.length);//3
console.log(s.charAt(1));//b
  • 字符串操作方法(并不会改变原字符串)
    concat()方法:拼接字符串
let s1=s.concat('bcd');
console.log(s1);//abcbcd

substr()、slice()、substring()
当传入的参数是负数的时候,substr()、slice()会从最后往前数,substring会返回0

console.log(s1.substr(-1));//s.length-1
console.log(s1.slice(-1));//s.length-1
console.log(s1.substring(-1));//0

美高梅4858官方网站 3

  • splite方法(将字符串按照一定条件分割成数组)
/*字符串转数组*/
       let s1='abcdbd';
        let arr=s1.split('');
        console.log(arr);

美高梅4858官方网站 4

  • trim()方法:
 /*去掉空格*/
        let s2=' 你好 ';
        console.log(s2.trim());
  • 字符串位置方法
    indexOf(),lastIndexOf(),返回字符串的索引
![](https://upload-images.jianshu.io/upload_images/8521343-0b95f38b5a6729dd.png)
  • 字符串的模式匹配方法
    match()
 let matches=text.match(/.at/);
console.log(matches.index);//返回索引 0
console.log(matches[0]);//返回第一个元素 //cat

search():返回字符串中第一个匹配项的索引,没找到就返回-1

 /*返回第一个匹配项的索引*/
        let pos=text.search(/at/);//1
        console.log(pos);
  • replace()方法
    如果第一个参数是字符串,那么只会替换第一个。
    如果要替换所有的字符串,需要提供一个正则表达式,并指定全局标志。
 /*字符串替换*/
        let text='cat,bat,sat,fat';
        //只会替换第一个
        let result=text.replace('at','ond');
        console.log(result);


        //要替换所有字符,需要正则表达式
        result=text.replace(/at/g,'ond');
        console.log(result);
'x'.padStart // ' x''x'.padEnd // 'x '

1)Boolean类型

Boolean类型是与布尔值对应的引用类型。创建Boolean对象:

美高梅4858官方网站 5

美高梅4858官方网站 6

  • 前三行代码创建了一个Boolean对象falseObject,在布尔运算时,所有的对象都会被转换成true,这里是对falseObject而不是对它的值(false)进行求值。所以结果为true
let s = 'Hello world!'; s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false

4)函数的内部属性

在函数内部有两个特殊的对象:

  • arguments
    它是一个类数组对象,包含传入函数中的所有参数。
    虽然arguments的主要用途是保存函数参数,但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。
![](https://upload-images.jianshu.io/upload_images/8521343-2574d1adc86290cd.png)

阶乘



![](https://upload-images.jianshu.io/upload_images/8521343-89b8c44eb8fca6af.png)

阶乘改写后不存在函数名耦合



![](https://upload-images.jianshu.io/upload_images/8521343-66180a791a262e5b.png)
  • this,表示当前执行的环境对象(当在全局作用域中调用函数时,this对象的引用就是window)
![](https://upload-images.jianshu.io/upload_images/8521343-e87f3e35e1207b9d.png)



![](https://upload-images.jianshu.io/upload_images/8521343-c83d2d79021c6bdd.png)
  • caller
![](https://upload-images.jianshu.io/upload_images/8521343-21107c2554c07462.png)



以上函数回显示调用inner函数(也就是outer()函数)的源代码



![](https://upload-images.jianshu.io/upload_images/8521343-a59a08f79d6bee66.png)

改进耦合


注意:当函数在严格模式下,访问arguments.callee会导致错误。  
也不能为函数的caller属性赋值。

连接字符串。

2)Number类型

Number是与数字值对应的引用类型。

let num=10;
  • toString()方法 参数可以用来表示是几进制
 <script>
        let num=100200030040505;

        console.log(num.toString());
        console.log(num.toString(2));
    </script>

美高梅4858官方网站 7

  • toFixed()方法:将数值格式化为指定小数的字符串。
let num=100.005;
console.log(num.toFixed(2));//能够自动四舍五入100.00
  • toExponential():指数表示法
![](https://upload-images.jianshu.io/upload_images/8521343-fed869cced85e345.png)
var str="ABC def!"console.log(str.toLocaleUpperCase//ABC DEF!

2.Array类型

和其他语言相同点:都是有序列表
不同点:可以保存不同的类型
ES数组大小可以动态调整。

  • 创建数组
    var colors=new Array();
    //传入数字,会构建大小为20的数组
    var colors=new Array(20);
    //直接传递要包含的项
    var colors=new Array(“red”,"blue","green");
    可以省略new
    var colors=Array();
    var colors=Array(20);
    var colors=Array(“red”,"blue","green");

使用数组字面量表示法:
var colors=["red","blue","green"];
//创建一个空数组
var name=[];

美高梅4858官方网站 8

  • 读取数组值
    alert(colors[0]);
    colors[2] = "black";
  • 利用length属性可以删除元素和添加元素
![](https://upload-images.jianshu.io/upload_images/8521343-04f9a3ee52032bee.png)

length属性设置为2,会移除最后一项

美高梅4858官方网站 9

length值大于数组项的值,为定义的对应索引项为undefined

美高梅4858官方网站 10

美高梅4858官方网站 11

中间位置3到位置98都是不存在的,所以都是undefined

at方法可以识别Unicode 编号大于0xFFFF的字符,返回正确的字符。·

2)转换方法

toString(),toLocaleString(),valueOf()方法,join()方法

    let arr=[[1,2],[2,3],[3,4]];
    console.log(arr.toString());//转换成1,2,2,3,3,4
    console.log(arr.valueOf()); //转出来还是数组
    console.log(arr.join('||'));//1,2||2,3||3,4

美高梅4858官方网站 12

'xxx'.padStart // 'xxx''xxx'.padEnd // 'xxx'

1)没有重载

美高梅4858官方网站 13

var str="abc def ghi jkl" console.log(str.split//["abc", "def", "ghi", "jkl"]console.log(str.split//["a", "b", "c", " ", "d", "e", "f", " ", "g", "h", "i", " ", "j", "k", "l"]console.log(str.split//["abc", "def", "ghi"]

7)位置方法

  • indexOf(),lastIndexOf()
    两个参数:要查找的项,查找的起始索引位置(可选)
    indexOf()从位置0或者索引参数开始向后查找。
    lastIndexOf()从数组的末尾开始向前查找。
![](https://upload-images.jianshu.io/upload_images/8521343-0620a24337c0eff2.png)



![](https://upload-images.jianshu.io/upload_images/8521343-9aa0581f22c6f509.png)
 var a = "abc"; var b = "def"; var c = a.concat; console.log;//abcdef

2)Math对象

  • min()和max()
![](https://upload-images.jianshu.io/upload_images/8521343-bef585d11ff6015f.png)
  • 舍入方法
![](https://upload-images.jianshu.io/upload_images/8521343-1bf7180d2b9f0429.png)



![](https://upload-images.jianshu.io/upload_images/8521343-9c8d7cab2dc2ad14.png)
  • random()方法
    返回介于0到1之间的一个随机数,不包括0和1
![](https://upload-images.jianshu.io/upload_images/8521343-20726e0954218d63.png)

padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

5)函数的属性和方法

每个函数包括两个属性:length和prototype
length:表示函数希望接收的命令参数的个数。

美高梅4858官方网站 14

  • prototype属性:保存所有引用类型的实例方法(具体下一章介绍)
    重要

每个函数包含两个非继承方法apply()和call()。这两个方法的用途都是在特定的作用域中调用函数。

  • apply()方法接收两个参数:一个是运行函数的作用域,一个是参数数组
![](https://upload-images.jianshu.io/upload_images/8521343-8b227b2e992a39ee.png)
  • call()方法与apply()方法作用相同,区别仅在于接收参数的方式不同
![](https://upload-images.jianshu.io/upload_images/8521343-cb7ff586099bd75f.png)
  • call()方法和apply()方法真正的用武之地是在扩充函数作用域
![](https://upload-images.jianshu.io/upload_images/8521343-333bb2d7fc7bdc6c.png)



![](https://upload-images.jianshu.io/upload_images/8521343-e64db0bf6677ab9c.png)
  • bind()方法
![](https://upload-images.jianshu.io/upload_images/8521343-d2bd8b9a0edb283c.png)



![](https://upload-images.jianshu.io/upload_images/8521343-f20f66dff07a6db7.png)

对于JavaScript字符串操作方法,你真的全部掌握了吗?来看看这篇面试中常考的字符串操作大全,包含最新的ES6字符串操作方法,值得收藏哦。

3.Date类型

var now=new Date();//不传参数会自动获取当前时间
根据特定的时间获取Date变量
var someDate=new Date(Date.parse("May 25,2004 "));
var someDate=new Date("May 25,2004 ");//传递字符串会默认调用Date.parse().
//2005年5月5日下午17点55分55秒
var someDate=new Date(Date.UTC(2005,4,5,17,55,55))
ES5添加了Date.now()方法

美高梅4858官方网站 15

**includes()**:返回布尔值,表示是否找到了参数字符串。**startsWith()**:返回布尔值,表示参数字符串是否在原字符串的头部。**endsWith()**:返回布尔值,表示参数字符串是否在原字符串的尾部。let s = 'Hello world!'; s.startsWith // trues.endsWith // trues.includes // true

1)检测数组

  • 方法一:
    if(value instanceof Array){
    }
    instanceof操作符的问题在于,它假定单一的全局执行环境。
    如果网页中包含多个框架,就会存在两个以上不同全局执行环境。
  • 方法二:
    if(Array.isArray(value)){
    }
    这个方法解决了上述问题,能够确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的

模板字符串(template string)是增强版的字符串,用反引号标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。-----字符串模板,工作中用到比较多。

6.基本的包装类型

var str="abc DEF!"console.log(str.search//4

8)迭代方法

  • foreach
/*数组遍历*/
    let arr=['a','b','c'];
    arr.forEach((item,index)=>{
        console.log(index,item);
    })

美高梅4858官方网站 16

  • every
/*判断所有元素都符合条件*/
    let arr2=[1,2,3];
    let result=arr2.every((item,index)=>{
        if(item<4)
            return true;
    });
    console.log(result);

美高梅4858官方网站 17

  • some
let arr2=[1,2,3];
/*只要有一个元素满足条件*/
    let result2=arr2.some((item,index)=>{
        if(item<2)
            return true;
    });
    console.log(result2);

美高梅4858官方网站 18

  • sort
 /*sort排序*/
    let arr3=[1,3,2,5,4];
    let sortArr=arr3.sort((a,b)=>{
        //从小到大
        return a-b;
        //从大到小
        //return b-a;

    });
    console.log(sortArr);

美高梅4858官方网站 19

  • map
   let arr2=[1,2,3];  /*map对元素重新组合*/
    let maparr=arr2.map((item,index)=>{
        return "<b>" item "<b>"
    });
    console.log(maparr);

美高梅4858官方网站 20

  • filter过滤
    let arr3=[1,3,2,5,4]; /*filter过滤*/
    let filarr=arr3.filter((item,index)=>{
        if(item>=3)
            return true;
    });
    console.log(filarr);

美高梅4858官方网站 21

把字符串分割为字符串数组。

3)作为值的函数

因为函数名本身就是变量,所以函数也可以作为值来使用。也就是说可以像传递参数一样把一个函数传递给另一个函数,也可以将一个函数作为另一个函数的返回值。

美高梅4858官方网站 22

函数作为参数传递

美高梅4858官方网站 23

函数作为返回值返回

美高梅4858官方网站 24

另一个用途是提示字符串格式。

1)RegExp实例方法
  • exec();
    接收一个参数,要应用模式的字符串,然后返回包含第一个匹配信息的数组。还包含两个额外的属性:index,input。
![](https://upload-images.jianshu.io/upload_images/8521343-7810451c4e60fac2.png)



对于exec()方法而言,每次只会返回一个匹配项。在没有设置全局变量的情况下,在同一个字符串上多次调用exec()将始终返回第一个匹配项。在设置全局变量的情况下,每次调用exec()方法则会在字符串中继续查找新的匹配项。



![](https://upload-images.jianshu.io/upload_images/8521343-d8f5a23ccaf4fa6d.png)



![](https://upload-images.jianshu.io/upload_images/8521343-e7a1f3962ca70cc4.png)
  • test()方法
    接收一个字符串参数,在模式与该参数匹配的情况下返回true;否则返回false。
![](https://upload-images.jianshu.io/upload_images/8521343-c2fa1ffbf29549df.png)
'na'.repeat // "nana"

5)操作方法

  • concat()方法
    没有传递参数,就会复制当前数组并返回给副本。
    如果传递给concat()方法的是一个或多个数组,则该方法会将这些数组中每一项添加到结果数组中。
    如果传递的值不是数组,这些值会被简单的添加到结果数组的末尾。
/*数组操作的方法*/
    let arr6=arr5.concat();//[3,2,1]
    console.log(arr6);
    arr6=arr5.concat([1,2,3]);//[3,2,1,1,2,3]
    console.log(arr6);
  • slice()方法
    能够接收一个或两个参数,截取数组。slice()方法不会影响原始数组。包括左边不包括右边
arr6=arr5.slice(0,1);//arr5=[3,2,1]
    console.log(arr6);//[3]
  • splice方法
    删除:splice(0,2)指定两个参数,起始位置和要删除的项数。
    插入替换:splice(2,0,“red”,“green”),指定3个参数,起始位置、要删除的项数、要插入的项。会从当前数组的位置2插入字符串。
    splice()方法始终都会返回一个数组,该数组中包含了从原始数组中删除的项。
![](https://upload-images.jianshu.io/upload_images/8521343-577ddad465a225aa.png)
function authorize(user, action) { if (!user.hasPrivilege { throw new Error( // 传统写法为 // 'User ' //   user.name //   ' is not authorized to do ' //   action //   '.' `User ${user.name} is not authorized to do ${action}.`); }}
3)正则表达式
  • 【abc】:方括号表示查找任何在方括号内的字符

美高梅4858官方网站 25

返回符合a-h的数组

【0-9】查找任何从0至9的数字
【a-z】查找从小写a到小写z的字符
【A-Z】查找从大写A到大写Z的字符
【^abc】查找任何不在方括号内的字符
|:表示或

美高梅4858官方网站 26

.匹配代表任意字符 /h.t/

美高梅4858官方网站 27

美高梅4858官方网站 28

  • w查找字符(字母、数字、下划线)
![](https://upload-images.jianshu.io/upload_images/8521343-f20534fe11d4287b.png)



\W查找非字符  
\d查找数字  
\D查找非数字字符  
\s查找空白字符  
\S查找非空白字符  
\b匹配单词边界  
\B匹配非单词边界



![](https://upload-images.jianshu.io/upload_images/8521343-2e373293877a4684.png)
  • p* 模式p的0或多次出现
    p 模式p的1或多次出现
    p? 模式p的0或1次出现
![](https://upload-images.jianshu.io/upload_images/8521343-11aff0122a7ffa6e.png)
  • p{n} 模式p正好n次出现
    p{n,}模式p至少n次出现
    p{n,m}模式p出现次数位于n和m间(不包括m)

    美高梅4858官方网站 29

正则表达式网站:  
[www.w3cfuns.com](https://link.jianshu.com?t=http://www.w3cfuns.com)

matchAll方法返回一个正则表达式在当前字符串的所有匹配。

3)push(),pop(),shift(),unshift()

/*栈方法*/
    let arr5=[1,2,3];
    arr5.push(4);
    console.log(arr5);//[1,2,3,4]
    arr5.pop();
    console.log(arr5);//[1,2,3]
    arr5.unshift(0);
    console.log(arr5);//[0,1,2,3]
    arr5.shift();
    console.log(arr5);//[1,2,3]
// 普通字符串`In JavaScript 'n' is a line-feed.`// 多行字符串`In JavaScript this is not legal.`console.log(`string text line 1string text line 2`);// 字符串中嵌入变量let name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`

1)创建Object实例的方式:

  • 使用字面量创建
let myinstance={name:'abc',age:20}

美高梅4858官方网站 30

  • 使用Object创建
let myinstance2=new Object({name:'abc',age:21})

美高梅4858官方网站 31

  • 使用构造函数创建
function Person(name,age)
{
    this.name=name;
    this.age=age;
}
let p=new Person('abc','20');

美高梅4858官方网站 32

  • 使用Object.create创建
let o={name:'abc',age:'20'};
let o2=Object.create(o);

美高梅4858官方网站 33

var str="abc Def!"console.log(str.replace(/abc/, "CBA"))//CBA Def!

9)缩小方法

四个参数:前一项值,当前值,索引,数组

  • reduce()从数组的第一项开始,遍历到最后
![](https://upload-images.jianshu.io/upload_images/8521343-4a208fc3a31cbb5e.png)



第一次:prev=1,cur=2  
第二次:prev=3(1 2),cur=3  
...
  • reduceRight()从数组的最后一项开始,遍历到第一项
![](https://upload-images.jianshu.io/upload_images/8521343-dd23891943f340e8.png)
var str="abc" console.log(str.charCodeAt//98

4)重排序方法

reverse()和sort()

  /*逆序*/
    let arr5=[1,2,3];
    arr5.reverse();
    console.log(arr5);//[3,2,1]

sort()方法会调用每个数组项的toString()方法,即使数组中每一项都是数值,它比较的都是字符串。

美高梅4858官方网站 34

sort

sort方法为了解决如上问题,它能够接收一个比较函数作为参数。

/*sort排序*/
    let arr3=[1,3,2,5,4];
    let sortArr=arr3.sort((a,b)=>{
        //从小到大
        return a-b;
        //从大到小
        //return b-a;

    });
    console.log(sortArr);
`Hello ${'World'}`// "Hello World"

1.Object类型

不同点:第二个参数substr(startIndex,lenth): 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);substring(startIndex, endIndex): 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾’)。

7.单体内置对象

// 变量place没有声明let msg = `Hello, ${place}`;// 报错

4.RegExp类型(来支持正则表达式)

美高梅4858官方网站 35

flags包括3个标志:
g:全局模式
i:不区分大小写
m:多行模式
//匹配字符串中所有bat或cat
var pattern1=/[bc]at/i;
var pattern1=new RegExp("[bc]at","i");

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

5.Function类型

ES中每个函数都是Function类型的实例,而且与其他引用类型一样具有属性和方法。函数名实际上是一个指向函数对象的指针。

美高梅4858官方网站 36

函数名仅仅是指向函数的指针:

美高梅4858官方网站 37

var str="ABC def!"console.log(str.toLowerCase//abc def!
function fn() { return "Hello World";} `foo ${fn()} bar`// foo Hello World bar
var str="abc def"console.log(str.substring//c defconsole.log(str.substring// c 

如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

返回在指定的位置的字符的 Unicode 编码。

传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

如果repeat的参数是负数或者Infinity,会报错。

var str="Hello world!"console.log(str.indexOf//0console.log(str.indexOf//-1console.log(str.indexOf///6

提取字符串中两个指定的索引号之间的字符。stringObject.substring(start,stop)。start :必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。stop :可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

如果省略第二个参数,默认使用空格补全长度。

'abc'.padStart(10, '0123456789')// '0123456abc'

把字符串转换为小写。

模板字符串之中还能调用函数。

相同点:如果只是写一个参数,两者的作用都一样:都是是截取字符串从当前下标以后直到字符串最后的字符串片段。substr(startIndex);substring(startIndex);

把字符串转换为小写。

'na'.repeat// RangeError'na'.repeat// RangeError

如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。如果模板字符串中的变量没有声明,将报错。

点击:加入

$.html(`<ul> <li>first</li> <li>second</li></ul>`);
<pre >//code from http://caibaojian.com/js-string.html`const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join} </table>`;`</pre>

上面代码中,padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

提取字符串的片断,并在新的字符串中返回被提取的部分。stringObject.slice(start,end);start :要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。end:紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

console.log("123456789".substr; // "34567"console.log("123456789".substring ;// "345"

let s = ' 
		

本文由美高梅4858官方网站发布,转载请注明来源

关键词: JAVA 方法 代码 函数 字符串