JS基本知识点回顾（Ⅱ）

2018-06-25 本文已影响0人凛冬已至_123

本文用于复习JS相关知识点，相当于知识简单的梳理. So, It's not be Detailed introduction

数组

数组方法概览

var arr = [3, 4, 5, 6]
console.log(arr.length)  //4
console.log(arr[0])      //3
console.log(arr[3])      //6
console.log(arr[4])      //undefined
arr[4] = 'hello'
console.log(arr[4])      // 'hello'

arr.push('jirengu')      //再数组最后添加一个元素
console.log(arr)         // [3, 4, 5, 6, 'hello', 'jirengu']
var value = arr.pop()    //把数组最后一位弹出来，返回 
console.log(value)       //'jirengu'
console.log(arr)         //[3, 4, 5, 6, 'hello']

arr.unshift('ruoyu')     //在数组第一位新增
console.log(arr)         //['ruoyu', 3, 4, 5, 6, 'hello']
var value2 = arr.shift() //把数组第一位拿出来返回，数组发生变化
console.log(value2)      // 'ruoyu'
console.log(arr)         //[3, 4, 5, 6, 'hello']

var arr2 = arr.splice(1, 2)         //从下标为1的元素开始，拿出来2个元素作为一个数组返回，原数组发生改变
console.log(arr)         // [3, 6, 'hello']
console.log(arr2)        //  [4, 5]

arr.splice(1, 0, 8,9)    //从下标为1的位置（元素6）开始，删除0个，新增两个元素(在6前面新增8,9)
console.log(arr)         //[3, 8, 9, 6, 'hello']

var arr3 = arr.slice(2,3)           //从 arr 下标为2开始，到下标为3结束(不包括3)，做为新数组，原数组不变
console.log(arr3)       // [9]
console.log(arr)        //[3, 8, 9, 6, 'hello']

var str = arr.join('-')
console.log(str)        // "3-8-9-6-hello"

var arr4 = [3, 5, -1, 18, 9, 27]
arr4.reverse()          //倒序，本身发生变化
arr4.sort(function(v1, v2){   //排序，本身发生变化
    return v1-v2; //v2-v1
})

终极神器
JavaScript提供了一个splice方法用于一次性解决数组添加、删除（这两种方法一结合就可以达到替换效果），方法有三个参数

1.开始索引
2.删除元素的位移
3.插入的新元素，当然也可以写多个
splice方法返回一个由删除元素组成的新数组，没有删除则返回空数组

look here

//删除
var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]
//插入与替换
var a = [1,2,3,4,5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

常规操作
join(char)
这个方法在C#等语言中也有，作用是把数组元素（对象调用其toString()方法）使用参数作为连接符连接成一字符串，不会修改原数组内容

var a = [1,2,3,4,5];
console.log(a.join(',')); //1,2,3,4,5
console.log(a.join(' ')); //1 2 3 4 5

slice(start,end)
不要和splice方法混淆，slice方法用于返回数组中一个片段或子数组，如果只写一个参数返回参数到数组结束部分，如果参数出现负数，则从数组尾部计数（-3意思是数组倒第三个，一般人不会这么干，但是在不知道数组长度，想舍弃后n个的时候有些用，不过数组长度很好知道。。。。，好纠结的用法），如果start大于end返回空数组，值得注意的一点是slice不会改变原数组，而是返回一个新的数组

var a = [1,2,3,4,5];
console.log(a); //[1, 2, 3, 4, 5]
console.log(a.slice(1,2));//2
console.log(a.slice(1,-1));//[2, 3, 4]
console.log(a.slice(3,2));//[]
console.log(a); //[1, 2, 3, 4, 5]

concat(array)
看起来像是剪切，但这个真不是形声字，concat方法用于拼接数组，a.concat(b)返回一个a和b共同组成的新数组，同样不会修改任何一个原始数组，也不会递归连接数组内部数组

var a = [1,2,3,4,5];
var b = [6,7,8,9];
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]

reverse()
方法用于将数组逆序，与之前不同的是它会修改原数组

var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]

sort
sort方法用于对数组进行排序，当没有参数的时候会按字母表升序排序，如果含有undefined会被排到最后面，对象元素则会调用其toString方法，如果想按照自己定义方式排序，可以传一个排序方法进去，很典型的策略模式，同样sort会改变原数组

var a=[5,4,3,2,1]
a.sort()
console.log(a) //[1, 2, 3, 4, 5]

 var a = [7,8,9,10,11]

    a.sort(function(v1,v2){
        return v1-v2
    })
    console.log(a) //[7, 8, 9, 10, 11]

    var users = [
        {
            name: 'aaa',
            age: 21
        },
        {
            name: 'baa',
            age: 18
        },
        {
            name: 'abc',
            age: 24
        }
    ]
    // 按age 从小到大排序

    var sortByAge = users.sort(function(v1, v2){
        return  v1.age > v2.age
    })

  // 按name从大到小排序
    var sortByName = users.sort(function(v1, v2){
        return  v1.name > v2.name
    })

ES5数组扩展

Array.isArray(obj)
这是Array对象的一个静态函数，用来判断一个对象是不是数组

var a = [];
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

.indexOf(element)/.latIndexOf(element)
顾名思义，这两个方法用于查找数组内指定元素位置，查找到第一个后返回其索引，没有查找到返回-1，indexOf从头至尾搜索，lastIndexOf反向搜索。

var a = [1,2,3,3,2,1]
console.log(a.indexOf(2)) //1
console.log(a.lastIndexOf(2)) //4

.forEach(element,index,array)
遍历数组，参数为一个回调函数，回调函数有三个参数：

1.当前元素
2.当前元素索引值
3.整个数组

var a = new Array(1,2,3,4,5,6);

a.forEach(function(e,i,array){
    array[i]= e + 1;
});

console.log(a); //[2, 3, 4, 5, 6, 7]

.every(function(element,index,array))/.some(function(element,index,array))
这两个函数类似于离散数学中的逻辑判定，回掉函数返回一个布尔值

every是所有函数的每个回掉函数都返回true的时候才会返回true，当遇到false的时候中止执行，返回false
some函数是存在有一个回调函数返回true时，终止执行返回true，否则返回false
在空数组上调用every返回true，some返回false

var a = [1, 2, 3, 4, 5, 6]

console.log(a.every(function(e, i, arr){
return e < 5
}))

console.log(a.some(function(e,i,arr){
  return e > 4
}))

.map(function(element))
与forEach类似，遍历数组，回调函数返回值组成一个新数组返回，新数组索引结构和原数组一致，原数组不变

var a = [1, 2, 3, 4, 5, 6]

console.log(a.map(function(e){
  return e * e
}))  // [1, 4, 9, 16, 25, 36]

console.log(a) //[1, 2, 3, 4, 5, 6]

filter(function(element))
返回数组的一个子集，回调函数用于逻辑判断是否返回，返回true则把当前元素加入到返回数组中，false则不加
新数组只包含返回true的值，索引缺失的不包括，原数组保持不变

var a = [1, 2, 3, 4, 5, 6]

console.log(a.filter(function(e){
  return e % 2 == 0;
})) // [2, 4, 6]

console.log(a) //[1, 2, 3, 4, 5, 6]

.reduce(function(v1,v2),value)/.reduceRight(function(v1,v2),value)
遍历数组，调用回掉函数，将数组元素合成一个值，reduce从索引最小值开始，reduceRight反向。方法有两个参数

回调函数：把两个值合为一个，返回结果
value：一个初始值可选

var a = [1, 2, 3, 4, 5, 6]
var b = a.reduce(function(v1, v2){ return v1 + v2 }) console.log(a) // 21

var b = a.reduceRight(function(v1, v2){ return v1 - v2 }, 100)

console.log(b) // 79

字符串

字符串模板（ES6）

var name = '饥人谷'
var website = 'jirengu.com'

var str = `你好， 这里是${name}，${website}，开启你的前端之路`
//"你好， 这里是饥人谷，jirengu.com，开启你的前端之路"

长度计算，连接

    var str = "hello";
    console.log( str.length );
    console.log( str[0] );
    console.log( str[str.length - 1]  );
    console.log( str.charAt(0) );
    console.log( str.charCodeAt(0) );//返回匹配位置元素的Unicode码

    var str2 = " world";
    var str3 = str1 + str2;
    cosnole.log( str3 );

字符串截取

    var str = "hello world";
    var sub1 = str.substr(1, 3); // 第一个是开始位置， 第二个是长度  ell
    var sub2 = str.substring(1, 3); // 第一个是开始位置，第二个是结束位置，长度为第二个－第一个  el
    var sub3 = str.slice(1, 3); // 同上 允许负参

字符串操作不会修改原来的字符串

查找

    var str = "hello my world";
    var s1 = str.search('my');   //6 找不到为-1
    var s2 = str.replace('my', 'your'); //
    var s3 = str.match('my'); //返回匹配的数组

大小写

    var str = "Hello";
    str.toUpperCase();
    str.toLowerCase();

字符串操作不会修改原来的字符串

Math

Math对象是JavaScript的内置对象，提供一系列数学常数和数学方法。Math对象只提供了静态的属性和方法，所以使用时不用实例化
列几个常用的方法

abs,max,min

Math.abs(1) // 1
Math.abs(-1) // 1
Math.max(2, -1, 5) // 5
Math.min(2, -1, 5) // -1

floor,ceil
floor方法返回小于参数值的最大整数

Math.floor(3.2) // 3
Math.floor(-3.2) // -4

ceil方法返回大于参数值的最小整数

Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3

random
该方法返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

Math.random() // 0.7151307314634323

// 返回给定范围内的随机数
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

// 返回给定范围内的随机整数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Date

时间的表示方式

Javascript中的Date

var d = new Date()
console.log(d.toString())   //"Wed Feb 28 2018 17:18:26 GMT+0800 (CST)"
console.log(d.toGMTString()) //"Wed, 28 Feb 2018 09:18:26 GMT"
console.log(d.toUTCString())  //"Wed, 28 Feb 2018 09:18:26 GMT"
console.log(d.toISOString()) //"2018-02-28T09:18:26.967Z"

new Date()
使用Date构造函数创建一个Date的实例

    var d = new Date()

    d.getTime()         //返回实例对象距离1970年1月1日00:00:00对应的毫秒数
    d.getDate()         //返回实例对象对应每个月的几号（从1开始）
    d.getDay()          //返回星期，星期日为0，星期一为1，以此类推
    d.getFullYear()     //返回四位的年份
    d.getMonth()        //返回月份（0表示1月，11表示12月）
    d.getHours()        //返回小时(0~23)
    d.getMilliseconds() //返回毫秒（0-999）
    d.getMinutes()      //返回分钟（0-59）
    d.getSeconds()      //返回秒（0-59）

    var d2 = new Date()
    d2.setDate()

new Date(milliseconds)
Date对象接受从1970年1月1日00:00:00 UTC开始计算的毫秒数作为参数。这意味着如果将Unix时间戳作为参数，必须将Unix时间戳乘以1000。

new Date(1378218728000); // Tue Sep 03 2013 22:32:08 GMT+0800 (CST)

// 1970年1月2日的零时
var Jan02_1970 = new Date(3600*24*1000); // Fri Jan 02 1970 08:00:00 GMT+0800 (CST)

静态方法
Date.now()
now方法返回当前距离1970年1月1日00:00:00的毫秒数

Date.now(); // 1427974222853

Date.parse()
parse方法用来解析日期字符串，返回距离1970年1月1日 00:00:00的毫秒数
日期字符串的格式应该完全或者部分符合YYYY-MM-DDTHH:mm:ss.sssZ格式，Z表示时区，是可选的
如果解析失败，返回NaN

Date.parse("January 26, 2011 13:51:50")
Date.parse("Mon, 25 Dec 1995 13:30:00 GMT")
Date.parse("Mon, 25 Dec 1995 13:30:00 +0430")
Date.parse("2011-10-10")
Date.parse("2011-10-10 20:00:00")
Date.parse("2011-10-10T14:48:00")

正则表达式

正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

创建
JavaScript通过内置对象RegExp支持正则表达式，有两种方式创建正则表达式对象，如果我们想匹配字符串中<%xxx%>两个百分号分割的字符串可以这么写

构造函数
var reg=new RegExp('<%[^%>]+%>','g');
字面量
var reg=/<%[^%>]%>/g;
最后的g代表全局，还有几个修饰符
g：global，全文搜索，不添加的话搜索到第一个结果停止搜索
i：ingore case，忽略大小写，默认大小写敏感
m：multiple lines，多行搜索

元字符

image
字符类
我们可以使用元字符[]来构建一个简单的类, 比如[abcd]代表一个字符，这个字符可以是 abcd四个字符中的任意一个
取反
元字符[]组合可以创建一个类，我们还可以使用元字符^创建反向类/负向类，反向类的意思是不属于XXX类的内容，表达式 [^abc] 表示一个不是字符a或b或c的字符
范围类
按照上面的说明如果希望匹配单个数字那么表达式是这样的

  //匹配一个字符，这个字符可以是0-9中的任意一个
    var reg1 = /[0123456789]/

    //匹配一个字符，这个字符可以是0-9中的任意一个
    var reg2 = /[0-9]/

    //匹配一个字符，这个字符可以是a-z中的任意一个
    var reg3 = /[a-z]/

    //匹配一个字符，这个字符可以是大写字母、小写字母、数字中的任意一个
    var reg3 = /[a-zA-Z0-9]/

预定义类

image

有了这些预定义类，写一些正则就很方便了，比如我们希望匹配一个可以是 ab+数字+任意字符的字符串，就可以这样写了 /ab\d./
边界
正则表达式还提供了几个常用的边界匹配字符

image

var str = 'hello1 world hello2 123456 \t \r jirengu \n ruoyu hello3'
str.match(/hello\d/g)   // ["hello1", "hello2", "hello3"]
str.match(/^hello\d/g)  // ["hello1"]
str.match(/hello\d$/g)   // ["hello3"]

var str2 = 'hello1 whello9orld hello2 12-hello8-3456 \t \r jirengu \n ruoyu hello3'
str2.match(/\bhello\d\b/g)   //["hello1", "hello2", "hello8", "hello3"] 
//注意-也用于区分单词边界

例子
变量 className 为页面DOM元素对应的class 属性字符串，以下代码是检测 className 中是否包含值为"header"的 class

var reg = /(^|\s)header($|\s)/g

量词

image

var str1 = 'http://jirengu.com'
str1.match(/https?:\/\/.+/)  //匹配
str1.match(/https+:\/\/.+/)  //不匹配
str1.match(/https*:\/\/.+/)  //匹配

var str2 = 'https://jirengu.com'
str2.match(/https?:\/\/.+/)  //匹配
str2.match(/https+:\/\/.+/g) //匹配
str2.match(/https*:\/\/.+/g) //匹配

var str3 = 'httpssssss://jirengu.com'
str3.match(/https?:\/\/.+/g)  //不匹配
str3.match(/https+:\/\/.+/g)  //匹配
str3.match(/https*:\/\/.+/g)  //匹配

测试题
如何匹配一个合法的 url？提示：url 以 http 或者 https 或者 // 开头

var reg = /^(https?:)?\/\/.+/

如何匹配一个手机号？提示手机号以1开头，长度为11位数字

var reg = /1[3578]\d{9}/ // 错误
var reg2 = /^1[3578]\d{9}$/ //正确

贪婪模式和非贪婪模式
看了上面介绍的量词，也许爱思考的同学会想到关于匹配原则的一些问题，比如{3,5}这个量词，要是在句子中出现了十次，那么他是每次匹配三个还是五个，反正3、4、5都满足3～5的条件

量词在默认下是尽可能多的匹配的，也就是大家常说的贪婪模式

'123456789'.match(/\d{3,5}/g); //["12345", "6789"]

既然有贪婪模式，那么肯定会有非贪婪模式，让正则表达式尽可能少的匹配，也就是说一旦成功匹配不再继续尝试，做法很简单，在量词后加上?即可

'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]

正则表达式的相关方法

RegExp.prototype.test(str)
方法用于测试字符串参数中是否存正则表达式模式，如果存在则返回true，否则返回false

var reg = /\d+\.\d{1,2}$/g;

reg.test('123.45'); //true
reg.test('0.2'); //true

reg.test('a.34'); //false
reg.test('34.5678'); //false

RegExp.prototype.exec(str)
方法用于正则表达式模式在字符串中运行查找，如果exec()找到了匹配的文本，则返回一个结果数组,否则返回 null

除了数组元素和length属性之外，exec()方法返回对象还包括两个属性。

index 属性声明的是匹配文本的第一个字符的位置
input 属性则存放的是被检索的字符串string

String.prototype.search(reg)
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串

search() 方法不执行全局匹配，它将忽略标志g，它同时忽略正则表达式对象的lastIndex属性，并且总是从字符串的开始进行检索，这意味着它总是返回字符串的第一个匹配的位置

'a1b2c3'.search(/\d/g); //1
'a1b2c3'.search(/\d/); //1

String.prototype.match(reg)
match()方法将检索字符串，以找到一个或多个与regexp匹配的文本。但regexp是否具有标志 g对结果影响很大。

String.prototype.replace(reg, replaceStr)
关于string对象的replace方法，我们最常用的是传入两个字符串的做法，但这种做法有个缺陷，只能replace一次

'abcabcabc'.replace('bc','X'); //aXabcabc

'abcabcabc'.replace(/bc/g,'X'); //aXaXaX
'abcaBcabC'.replace(/bc/gi,'X'); //aXaXaX

String.prototype.split(reg)
我们经常使用split方法把字符串分割为字符数组

'a,b,c,d'.split(','); //["a", "b", "c", "d"]

和replace方法类似，在一些复杂的分割情况下我们可以使用正则表达式解决

'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]