js知识梳理三

发表于 | 分类于

数组常用方法

  • 方法的作用
  • 方法的参数
  • 方法的返回值
  • 原有数组是否改变

push

1
2
3
4
5
6
7
8
// 作用：向数组“末尾”追加新的内容
// 参数：追加的内容（可以是一个，也可是多个）
// 返回值：新增后数组的长度
// 原有数组改变
var ary = [12,23,34];
ary.push(100); //=>4  ary:[12,23,24,1000]
ary.push(100,{name:'xxx'}); //=>6
ary:[12,23,34,100,100,{...}]

pop

1
2
3
4
5
6
// 作用：删除数组最后一项
// 参数：无
// 返回：被删除的那一项内容
// 原有数组改变
var ary = [12,23,34];
ary.pop() => //34

shift

1
2
3
4
5
6
// 作用：删除数组中的第一项
// 参数：无
// 返回：被删除的那一项内容
// 原有数组改变
var ary = [12,23,34];
ary.shfit(); => 12

unshfit

1
2
3
4
5
6
7
// 作用：向数组开始位置追加新内容
// 参数：要新增的内容
// 返回：新增后数组的长度
// 原有数组改变
var ary = [12,23,34];
ary.unshfit(100,true) //=>5
// ary => [100,true,12,23,34]

splice

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
基于 SPLICE可以对数组进行很多的操作：删除指定
位置的内容、向数组指定位置增加内容、还可以修改
指定位置的信息

`删除：ary.splice(n,m)`
// 从索引n开始，删除m个内容，把删除的部分以一个新数组返回，原有数组改变

`新增：ary.splice(n,0,x,...)`
// 从索引n开始删除零项（没删除），把X或者更多需要插入的内容存放到数组中索引N的“前面”

`修改：ary.splice(n,m,x,...)`
// 修改的原理就是把原有内容删除掉，然后用新的内容替换这部分信息即可

// 1. 删除数组最后一项
ary.pop()
ary.splice(ary.length-1)
ary.length--

// 2. 向数组末尾追加新内容
ary.push(100)
ary.splice(ary.length,0,100)
ary[ary.length]=100

slice

1
2
3
4
5
6
7
8
9
// 作用：在一个数组中，按照条件查找出其中的部分内容
// 参数：两个参数（n/m），从索引n开始，找到索引m处，但是不包含m
// 返回：以一个新数组存储查找的内容原有数组不会变
ary.slice(2,5) // => 得到一个新数组
ary.slice(2) // => 一个参数，就查找到数组末尾
ary.slice(0)
ary.slice()
// 克隆数组
ary.slice(-3,-1) // 支持负数索引 ，数组长度 + 负数索引 => ary.slice(arr.length + (-3),arr.length + (-1))

concat

1
2
3
4
5
6
7
// 作用：实现多个数组(或者值)的拼接
// 参数：数组或者值
// 返回：拼接后的新数组
// 原有数组不变
`toString`
作用：把数组转换为字符串
参数：无

join

1
2
3
4
// 作用：和toString类似，也是把数组转换为字符串，但是我们可以设置变为字符串后，每一项之间的连接符
// 参数：指定的链接符
// 返回：字符串
// 原有数组不变

reverse

1
2
3
4
5
6
7
// 作用：把数组倒过来排列
// 参数：无
// 返回：排列后的新数组
// 原有数组改变
var ary = [12,23,24,45]
ary.reverse()
//ary => [45,24,23,12]

sort

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 作用：给数组排序
// 参数：无/函数
// 返回：排序后的新数组
// 原有数组改变
//=>sort在不传递参数的情况下，只能处理10以内数字排序
var ary=[1,3,2,4,5,6,7,9,8];
ary.sort(); =>[1,2,3,4,5,6,7,8,9]
var ary=[18,1,23,27,2,35,3,56];
ary.sort(); =>[1, 18, 2, 23, 27,
3, 35, 56] 没有按照我们想象中的排序
//=>真实项目中，基于sort排序，我们都需要传递参数
ary.sort(function (a,b){
return a-b;//=>升序 return ba; 降序
});

indexOf / lastIndexOf

1
2
3
4
5
6
7
8
9
这两个方法不兼容IE低版本浏览器(IE6~8)
// 作用：检测当前值在数组中第一次或者最后一次出现位置的索引
// 参数：要检测的值
// 返回：索引
// 原有数组不变
//=>验证数组中是否包含某一项
if(ary.indexOf(100)>-1){
//=>ARY中包含100这一项
}

es5/es6

  • every
  • filter
  • find
  • forEach
  • includes
  • keys
  • map
  • reduce / reduceRight
  • some

JS中关于字符串的一些细节知识

1
2
3
4
5
6
7
8
9
10
11
// 在JS中所有用单引号或者双引号包起来的都是字符串，每一个字符串是由零到多个字符组成
var str = 'zhufeng';
str.length ->字符串长度
str[0] ->'z'
str[str.length-1] ->'n'
str[100] ->undefined
//=>字符串中的每一个字符都有一个自己对应位置的索引，也有类似于数组一样的length代表自己的长度
//=>循环遍历字符串，输出每一项字符
for(var i=0;i<str.length;i++){
cosole.log(str[i]);
}

关于字符串中常用的方

字符串是基本数据类型，字符串的每一次操作都是值直接的进行操作，不像数组一样是基于空间地址来操作的，所以不存在原有字符串是否改变这一说，肯定都是不变的

charAt/charCodeAt

  • 作用：charAt根据索引获取指定位置的字符，charCodeAt不仅仅获取字符，它获取的是字符对应的Unicode编码值(ASC II码值)。
  • 参数:索引
  • 返回字符/ 对应的编码
    1
    2
    3
    4
    var str = 'hello world'
    str[0]
    str.charAt(0)
    str.charCodeAt(0)

indexOf/lastIndexOf

基于这两个方法，可以获取字符在字符串中第一次或者最后一次出现位置的索引，有这个字符，返回大于等于零的索引，不包含这个字符，返回的结果是­1，所以可以基于这两个方法，验证当前字符串中是否包含某个字符

1
2
3
4
var str='zhufeng';
if(str.indexOf('@')>-1){
//=>条件成立说明包含@符号
}

slice

作用：str.slice(n,m) 从索引n开始找到索引为m处(不包含m)，把找到的字符当做新字符串返回,和数组的slice方法用法相同

subString

和slice语法一模一样，唯一的区别在于：slice支持负数索引，而substring不支持负数索引
substr
也是字符串截取的方法，用法是：str.substr(n,m)，从索引n开始截取m个字符

1
2
3
// 支持第一个参数 为负数
var str = 'hello world';
str.substr(-3,3) // => 'rld'

toUpperCase/toLowerCase

实现字母的大小写转换，toUpperCase小写转大写，toLowerCase大写转小写

split

和数组中的join相对应，数组中的join是把数组们一项按照指定的连接符变为字符串，而split是把字符串按照指定的分隔符，拆分成数组中每一项

replace

  • 作用：替换字符串中的原有字符
  • 参数：原有字符，要替换的新字符
  • 返回：替换后的字符串

扩展

  • includes
  • localeCompare
  • search
  • trim

时间字符串格式化

有一个时间字符串 “2018-­4-­4 16:26:8”
，我们想基于这个字符串获取到 “04月04日 16时26分”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
~function(pro){
  pro.formatTime = function(template){
    template = template || `{0}年{1}月{2}日{3}时{4}分{5}秒`;
    var ary = this.match(/\d+/g); // 获取要格式化时间字符的数字 得到一个数组
    template = template.replace(/\{(\d+)\}/g,function(){
      // 替换模板
      var n = arguments[1],
        val = ary[n] || '0';
      val < 10 ? val = '0' + val :null;
      return val;
    })
    return template;
  }
}(String.prototype)

URL地址问号传参解析

有一个URL地
址“http://www.zhufengpeixun.cn/stu/?
lx=1&name=AA&sex=man” 地址问号后面的内
容是我们需要解析出来的参数信息
{
lx:1,
name:’AA’,
sex:’man’
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
~function (pro) {
pro.queryURLParameter = function () {
  var obj = {},
    reg = /([^?=&#]+)(?:=([^?=&#]+)?/g;
  this.replace(reg, function () {
    var key = arguments[1],
        value = arguments[2] || null;
      obj[key] = value;
    });
    return obj;
  }
}(String.prototype);
var str = 'http://www.zhufengpeix
un.cn/stu/?lx=1&name=&sex=#teache
r';
console.log(str.queryURLParameter());
-------------本文结束感谢您的阅读-------------