xiaohuihui
for me
FRIENDS
friendAfriendBfriendC

javascript内置对象及方法

2020-07-01 20:06:31
Word count: 2.8k | Reading time: 12min

JavaScript内置对象及方法

1.JS Array

Array对象：Array对象用于在单个变量中存储多个值。

创建Array对象的语法：

1
2
3
new Array();
new Array(size);  //size参数为数组的个数
new Array(argument1,argument2,..);		//数组元素

Array对象属性

1.length

​ legth用来设置或返回数组中元素的数目 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    var arr = new Array(3);
    arr[0] = 'xhh';
    arr[1] = 'yql';
    arr[2] = 'hwq';
    console.log(arr.length);    //3
    console.log(arr[1]);    //yql
    arr.length = 5; 
    console.log(arr.length);   //5 

    var arr2 = new Array('xhh','xjj','xll');
    console.log(arr2[0]);     //xhh
    console.log(arr2.length);    //3
</script>

Array对象方法

1.contact()

concat() 方法用于连接两个或多个数组。

语法:

1
arr.concat(arr1,arr2)	//括号内是要与arr数组连接的数组,然后返回一个新数组

代码案例：

1
2
3
4
5
6
7
8
<script>
    var arr = new Array(2);
    arr[0] = 'xhh',
    arr[1] = 'yql'
    console.log(arr);    //xhh,yql
    var newArray = arr.concat('kobe','huawuque');//此处也可传数组对象
    console.log(newArray);   //xhh,yql,kobe,huawuque 
</script>
2.join()

join()方法用于把数组的每个元素转化为字符串，然后将这些字符串拼接起来。

语法：

1
arr.join()		//括号里的参数为分隔符,用来分隔数组元素

代码案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq'
    console.log(arr)
    var str = arr.join(" ");
    var str2 = arr.join(".")
    var str3 = arr.join("")
    console.log(str);   //xhh yql hwq
    console.log(str2);    //xhh.yql.hwq
    console.log(str3);    //xhhyqlhwq
</script>
3.pop()

pop()方法用于删除并返回数组的最后一个元素。

语法：

1
arr.pop()	//pop方法也称弹栈(出栈),如果数组为空,返回undefined

代码案例：

1
2
3
4
5
6
7
8
9
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq' 
    popElement = arr.pop();   
    console.log(popElement);  //hwq
    console.log(arr);   //xhh,yql
</script>
4.push()

push()方法在数组末尾添加一个或多个元素,并返回新的长度。

语法：

1
arr.push(element1,element2...)

代码案例：

1
2
3
4
5
6
7
8
9
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq'
    var pushElement = arr.push('tangsan');
    console.log(pushElement);     //4
    console.log(arr);   //xhh,yql,hwq,tangsan
</script>
5.reverse()

reverse()方法用于翻转数组元素的顺序。

语法：

1
arr.reverse()

代码案例：

1
2
3
4
5
6
7
8
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq'
    console.log(arr);     //xhh.yql,hwq
    console.log(arr.reverse());     //hwq,xhh,yql
</script>
6.shift()

语法：

1
arr.shift()

shift()方法用于把数组的第一个元素删除，并返回被删除的元素。

1
2
3
4
5
6
7
8
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq'
    console.log(arr.shift());   //xhh
    console.log(arr)    //yql,hwq
</script>
7.slice()

slice()方法用于从数组中返回指定的元素。

语法：

1
arr.slice(start,end)	//start为开始元素(从何处开始选取),end为结束元素(从何处结束选取,输出时不包括此位置的元素),end可选

代码案例：

1
2
3
4
5
6
7
8
9
10
11
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq',
    arr[3] = 'xiaowu',
    arr[4] = 'tanghao'
    console.log(arr.slice(2));  //hwq,xiaowu,tanghao
    console.log(arr.slice(1,3));    //yql,hwq
    console.log(arr.slice(0,3));    //xhh,yql,hwq
</script>
8.sort()

sort()方法用于对数组的元素进行排序。

语法：

1
arr.sort()		//默认按字母排序

代码案例：

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq',
    arr[3] = 'xiaowu',
    arr[4] = 'tanghao'
    console.log(arr)
    console.log(arr.sort())
  </script>

如果不局限与字母顺序排序,就需要给sort方法提供函数，函数内传两个参数a和b。

  • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值。

如果比较的两值刚好是数字,a-b升序,b-a降序。

1
2
3
4
5
6
7
8
<script>
    function sortNumber(a,b){
      return b-a;
    }
    var arr = [1,5,4,3,6,9,15,50];
    console.log(arr);   //1, 5, 4, 3, 6, 9, 15, 50
    console.log(arr.sort(sortNumber));  //50, 15, 9, 6, 5, 4, 3, 1
</script>
9.splice()

splice()方法向/从数组中添加/删除元素，然后返回被删除的元素。

语法：

1
2
3
4
arr.splice(index,howmany,element1...elementn)
index:从哪开始删除
howmany:删除多少个元素
element1...elementn:向数组中添加元素

代码案例：

1
2
3
4
5
6
7
8
9
10
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq',
    arr[3] = 'xiaowu',
    arr[4] = 'tanghao'
    arr.splice(2,2,'bibidong');     //从第二个元素开始删除,删除两个元素,然后在删除位置加上新元素bibidong
    console.log(arr);  //"xhh", "yql", "bibidong", "tanghao"
</script>
10.toString()

toString()方法把数组转化成字符串，并返回结果。

语法：

1
arr.toString()

代码案例：

1
2
3
4
5
6
7
8
9
<script>
    var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq',
    arr[3] = 'xiaowu',
    arr[4] = 'tanghao'
    console.log(arr.toString());    //xhh,yql,hwq,xiaowu,tanghao
</script>
11.unshift()

unshift()方法向数组的开头添加一个或更多元素，并返回新的长度。

语法：

1
arr.unshift(element1...elementn)

代码案例：

1
2
3
4
5
6
7
8
9
<script>
     var arr = new Array(3);
    arr[0] = 'xhh',
    arr[1] = 'yql',
    arr[2] = 'hwq'
    var length = arr.unshift('tangsan','xiaowu')
    console.log(length);    //5
    console.log(arr);     //"tangsan", "xiaowu", "xhh", "yql", "hwq"
</script>
12.filter()

filter()方法创建一个新的数组，新数组的元素是通过指定数组中符合条件的所有元素。

filter()不会对空数组进行检测。

filter()不会改变原始数组。

2.JS String

String对象：String 对象用于处理文本（字符串）。

String对象属性length跟Array对象的基本一样，这里不作展示。

String对象方法

1.concat()

concat()方法连接两个或多个字符串。

语法:

1
str.concat(str2)

代码案例：

1
2
3
4
5
6
<script>
    var str1 = 'hello'
    var str2 = 'world'
    var str3 = str1.concat(str2);
    console.log(str3);    //helloworld
</script>
2.indexOf()

indexOf()方法用来返回某个指定字符，在字符串中首次出现的位置。

语法：

1
str.indexOf(要查找的字符或字符串)

代码案例：

1
2
3
4
5
6
7
8
9
<script>
    //indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置
    var str = 'hello development world'
    console.log(str.indexOf('w'))   //18
    console.log(str.indexOf('development'))   //6 
    console.log(str.indexOf('h'))     //0 
    console.log(str.indexOf('hello'))   //1
    console.log(str.indexOf(' '))     //5
</script>

如果要检索的字符串值没有出现，则该方法返回 -1。

3.match()

match() 方法用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

语法：

1
2
str.match(检索的字符串值)
str.match(regexp)   //regexp为正则表达式
1
2
3
4
5
6
7
8
9
10
<script>
    var regex = /ab{2,5}c/g;    //可匹配2到5个b
    var regex2 = /a[123]b/g;    //第二个可为1或2或3
    var str = "abc abbc abbbc abbbbc abbbbbc abbbbbbc"
    var str2 = "a2b a1b a4b a5b"
    console.log(str.match(regex));    //"abbc", "abbbc", "abbbbc", "abbbbbc"
    console.log(str2.match(regex2));    //"a2b", "a1b"
    console.log(str.match('abc'));    //abc
    console.log(str.match('aaa'));    //undefined
</script>
4.replace()

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

1
2
3
4
<script>
    var str = 'hello world';
    console.log(str.replace(/hello/,'good'));   //good world
</script>
5.字符串截取方法
5.1slice()

slice()方法通过指定的开始和结束位置，提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法:

1
str.slice(start,end)

参数：

start：必需，规定从何处开始选取。如果是负数，那么从字符串尾部开始算起，-1是指最后一个字符，-2指倒数第二个字符，以此类推。

end：(可选)：规定从何处结束选取，即结束处的字符下标。如果没有指定该参数，那么截取的字符串包含从start到结束的所有字符。如果这个参数是负数，那么它规定的是从数组尾部开始算起的字符。

代码案例：

1
2
3
4
5
6
7
8
9
10
11
var str = "0123456789";
console.log("原始字符串：", str);
 
console.log("从索引为3的字符起一直到结束：", str.slice(3));  //3456789
console.log("从倒数第3个字符起一直到结束：", str.slice(-3));  //789
 
console.log("从开始一直到索引为5的前一个字符：", str.slice(0,5));  //01234
console.log("从开始一直到倒数第3个字符的前一个字符：", str.slice(0,-3));  //0123456
 
console.log("从索引为3的字符起到索引为5的前一个字符：", str.slice(3,5));  //34
console.log("从索引为3的字符起到倒数第3个字符的前一个字符：", str.slice(3,-3));  //3456
5.2substring()

substring()方法用于提取字符串中介于两个指定下标之间的字符。

语法：

1
str.substring(start,stop)

参数：

start：必需：一个非负的整数，规定要提取的子串第一个字符在str中的位置。

stop：可选：一个非负的整数，比要提取的子串的最后一个字符在str的位置多1。

代码案例：

1
2
3
4
5
6
7
8
9
var str = "0123456789";
console.log("原始字符串：", str);
 
console.log("从索引为3的字符起一直到结束：", str.substring(3));  //3456789
console.log("从索引为20的字符起一直到结束：", str.substring(20));  //
 
console.log("从索引为3的字符起到索引为5的前一个字符结束：", str.substring(3,5));  //34
console.log("start比end大会自动交换，结果同上：", str.substring(5,3));  //34
console.log("从索引为3的字符起到索引为20的前一个字符结束：", str.substring(3,20));  //3456789
5.3substr()

substr()方法用于返回一个指定位置开始的指定长度的子字符串。

语法：

1
str.substr(start,length)

start：(必需):所有的子字符串的起始位置。字符串中的第一个字符的索引为0。

length：(可选):在返回的子字符串中应包括的字符个数。如果length为0或负数,将返回一个空字符串。如果没有指定length，则字符串将延续到str的最后。

案例代码：

1
2
3
4
5
6
7
8
var str = "0123456789";
console.log("原始字符串：", str);
 
console.log("从索引为3的字符起一直到结束：", str.substr(3));  //3456789
console.log("从索引为20的字符起一直到结束：", str.substr(20));  //
 
console.log("从索引为3的字符起截取长度为5的字符串：", str.substr(3,5));  //34567
console.log("从索引为3的字符起截取长度为20的字符串：", str.substr(3,20));  //3456789
6.split()

split() 方法用于把一个字符串分割成字符串数组。

语法：

1
2
3
arr.split(separator,howmany)
separator:从此指定参数开始切割
howmany:返回数组的最大长度

案例代码：

1
2
3
4
5
<script>
    var str = 'hello development world';
    console.log(str.split(' '));    //从空格开始指定切割    ["hello", "development", "world"]
    console.log(str.split('',5));       //["h", "e", "l", "l", "o"]
</script>
7.toLowerCase()

toLowerCase()方法将字符串转化为小写。

8.toUpperCase()

toUpperCase()方法将字符串转化为大写。

3.ES6方法

1.find方法源代码的封装:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
var user = [
      {id:1,name:'xhh',age:12},
      {id:2,name:'xhh2',age:12},
      {id:3,name:'xhh3',age:12},
      {id:4,name:'xhh4',age:12},
    ] 
    
    Array.prototype.myFind = function(condition){
      for(var i=0;i<this.length;i++){
        if(condition(this[i])){
          return this[i]
        }
      }
    }

    var ret = user.myFind(function(item){
      return item.id === 4
    })
    console.log(ret)    //{id: 4, name: "xhh4", age: 12}
</script>

2.findIndex方法源代码的封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
var user = [
      {id:1,name:'xhh',age:12},
      {id:2,name:'xhh2',age:12},
      {id:3,name:'xhh3',age:12},
      {id:4,name:'xhh4',age:12},
    ] 

    
Array.prototype.myFind = function(condition){
      for(var i=0;i<this.length;i++){
        if(condition(this[i])){
          return i
        }
      }
    }

    var ret = user.myFind(function(item){
      return item.id === 4
    })
    console.log(ret)    //3
</script>

Author: 小灰灰

Link: http://xhh460.github.io/2020/07/01/javascript%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1%E5%8F%8A%E6%96%B9%E6%B3%95/

Copyright: All articles in this blog are licensed.

< PreviousPost
javaSENextPost >
js笔记
CATALOG
  1. 1. JavaScript内置对象及方法
  2. 2. 1.JS Array
    1. 2.1. Array对象属性
      1. 2.1.1. 1.length
    2. 2.2. Array对象方法
      1. 2.2.1. 1.contact()
      2. 2.2.2. 2.join()
      3. 2.2.3. 3.pop()
      4. 2.2.4. 4.push()
      5. 2.2.5. 5.reverse()
      6. 2.2.6. 6.shift()
      7. 2.2.7. 7.slice()
      8. 2.2.8. 8.sort()
      9. 2.2.9. 9.splice()
      10. 2.2.10. 10.toString()
      11. 2.2.11. 11.unshift()
      12. 2.2.12. 12.filter()
  3. 3. 2.JS String
    1. 3.1. String对象方法
      1. 3.1.1. 1.concat()
      2. 3.1.2. 2.indexOf()
      3. 3.1.3. 3.match()
      4. 3.1.4. 4.replace()
      5. 3.1.5. 5.字符串截取方法
      6. 3.1.6. 5.1slice()
      7. 3.1.7. 5.2substring()
      8. 3.1.8. 5.3substr()
      9. 3.1.9. 6.split()
      10. 3.1.10. 7.toLowerCase()
      11. 3.1.11. 8.toUpperCase()
  4. 4. 3.ES6方法
    1. 4.1. 1.find方法源代码的封装:
    2. 4.2. 2.findIndex方法源代码的封装