数组常用方法
1.push()
在尾部追加,类似于压栈,原数组会变。
const arr = [1, 2, 3]
arr.push(8)
console.log(arr) // [1, 2, 3, 8]
2.pop()
在尾部弹出,类似于出栈,原数组会变。
const arr = [1, 2, 3]
const popVal = arr.pop()
console.log(popVal) // 3
console.log(arr) // [1, 2]
// 数组模拟常见数据结构之一:栈
const stack = [0, 1]
stack.push(2) // 压栈
console.log(stack) // [0, 1, 2]
const popValue = stack.pop() // 出栈
console.log(popValue) // 2
console.log(stack) // [0, 1]
数组的
push
&pop
可以模拟常见数据结构之一:栈。
3.unshift()
在头部压入数据,类似于入队,原数组会变。
const arr = [1, 2, 3]
arr.unshift(0)
console.log(arr) // [0, 1, 2, 3]
4.shift()
在头部弹出数据,原数组会变。
const arr = [1, 2, 3]
const shiftVal = arr.shift()
console.log(shiftVal) // 1
console.log(arr) // [2, 3]
// 数组模拟常见数据结构之一:队列
const queue = [0, 1]
queue.push(2) // 入队
console.log(queue) // [0, 1, 2]
const shiftValue = queue.shift() // 出队
console.log(shiftValue) // 0
console.log(queue) // [1, 2]
数组的
push
(入队) &shift
(出队) 可以模拟常见数据结构之一:队列。
5.concat()
concat
会在当前数组尾部拼接传入的数组,然后返回一个新数组,原数组不变。
const arr = [1, 2, 3]
const arr2 = arr.concat([7, 8, 9])
console.log(arr) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 7, 8, 9]
6.indexOf()
在数组中寻找该值,找到则返回其下标,找不到则返回
-1
。
const arr = [1, 2, 3]
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(0)) // -1
7.includes()
在数组中寻找该值,找到则返回
true
,找不到则返回false
。
const arr = [1, 2, 3]
console.log(arr.includes(2)) // true
console.log(arr.includes(4)) // false
8.join()
将数组转化成字符串,并返回该字符串,不传值则默认逗号隔开,原数组不变。
const arr = [1, 2, 3]
console.log(arr.join()) // ‘1, 2, 3’
console.log(arr) // [1, 2, 3]
9.reverse()
翻转原数组,并返回已完成翻转的数组,原数组改变。
const arr = [1, 2, 3]
console.log(arr.reverse()) // [3, 2, 1]
console.log(arr) // [3, 2, 1]
10.slice(start,end)
从
start
开始截取到end
,但是不包括end,
原数组不变。
const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1, 4)) // [2, 3, 4]
console.log(arr) // [1, 2, 3, 4, 5]
11.splice(start, deleteCount, item1, item2……)
start
参数 开始的位置
deleteCount
要截取的个数后面的
items
为要添加的元素如果
deleteCount
为0
,则表示不删除元素,从start
位置开始添加后面的几个元素到原始的数组里面。返回值为由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
这个方法会改变原始数组,数组的长度会发生变化
const arr3 = [1, 2, 3, 4, 5, 6, 7, "f1", "f2"];
const arr4 = arr3.splice(2, 3) // 删除第三个元素以后的三个数组元素(包含第三个元素)
console.log(arr4); // [3, 4, 5];
console.log(arr3); // [1, 2, 6, 7, "f1", "f2"]; 原始数组被改变
const arr5 = arr3.splice(2, 0, "wu", "leon");
// 从第2位开始删除0个元素,插入"wu","leon"
console.log(arr5); // [] 返回空数组
console.log(arr3); // [1, 2, "wu", "leon", 6, 7, "f1", "f2"]; 原始数组被改变
const arr6 = arr3.splice(2, 3, "xiao", "long");
// 从第 2 位开始删除 3 个元素,插入"xiao", "long"
console.log(arr6); // ["wu", "leon", 6]
console.log(arr3); //[ 1, 2, "xiao", "long", 7, "f1", "f2"]
const arr7 = arr3.splice(2); // 从第三个元素开始删除所有的元素
console.log(arr7);// ["xiao", "long", 7, "f1", "f2"]
console.log(arr3); // [1, 2]
12.sort()
对数组的元素进行排序,并返回数组。
默认排序顺序是在将元素转换为字符串,然后比较它们的
UTF-16
代码单元值序列时构建的。由于它取决于具体实现,因此无法保证排序的时间和空间复杂性。
const arr = [1, 2, 3]
arr.sort((a, b) => b - a)
console.log(arr) // [3, 2, 1]
13.toString()
将数组转化成字符串,并返回该字符串,逗号隔开,原数组不变。
const arr = [1, 2, 3, 4, 5]
console.log(arr.toString()) // ‘1, 2, 3, 4, 5’
console.log(arr) // [1, 2, 3, 4, 5]
14.find()
数组中第一个满足所提供测试函数的元素的值,否则返回 undefined,原数组不变。
/*
find((element, index, array) => { } )
可接收三个参数
element:当前遍历到的元素
index:当前遍历到的索引
array:数组本身
*/
const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found); // 12
console.log(array1); // [5, 12, 8, 130, 44]
15.findIndex()
返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
/*
findIndex((element, index, array) => { } )
可接收三个参数
element:当前元素
index:当前元素的索引
array:调用findIndex的数组。
*/
const array1 = [5, 12, 8, 130, 44];
const found = array1.findIndex((element) => element > 10);
console.log(found); // 1
console.log(array1); // [5, 12, 8, 130, 44]
字符串常用方法
1.charAt()
返回指定索引位置处的字符。类似于数组用中括号获取相应下标位置的数据。
var str = 'abcdefg'
console.log(str.charAt(2)) // 输出 'c'
console.log(str[2]) // 输出 'c'
2.concat()
类似数组的concat(),用来返回一个合并拼接两个或两个以上字符串。原字符串不变。
const str1 = 'abcdefg'
const str2 = '1234567'
const str3 = str1.concat(str2)
console.log(str3) // 输出 'abcdefg1234567'
3.indexOf()、lastIndexOf()
indexOf
,返回一个字符在字符串中首次出现的位置,lastIndexOf
返回一个字符在字符串中最后一次出现的位置。
const str = 'abcdcefcg'
console.log(str.indexOf('c')) // 输出 '2'
console.log(str.lastIndexOf('c')) // 输出 '7'
4.slice()
提取字符串的片断,并把提取的字符串作为新的字符串返回出来。原字符串不变。
const str = 'abcdefg'
console.log(str.slice()) // 输出 'abcdefg', 不传递参数默认复制整个字符串
console.log(str.slice(1)) // 输出 'bcdefg',传递一个,则为提取的起点,然后到字符串结尾
console.log(str.slice(2, str.length-1)) // 输出'cdef',传递两个,为提取的起始点和结束点
5.split()
使用指定的分隔符将一个字符串拆分为多个子字符串数组并返回,原字符串不变。
const str = 'A*B*C*D*E*F*G'
console.log(str.split('*')) // 输出 ["A", "B", "C", "D", "E", "F", "G"]
6.substr(), substring()
这两个方法的功能都是截取一个字符串的片段,并返回截取的字符串。
substr
和substring
这两个方法不同的地方就在于参数二,substr
的参数二是截取返回出来的这个字符串指定的长度,substring
的参数二是截取返回这个字符串的结束点,并且不包含这个结束点。而它们的参数一,都是一样的功能,截取的起始位置。注意事项:
substr
的参数二如果为0
或者负数,则返回一个空字符串,如果未填入,则会截取到字符串的结尾去。substring
的参数一和参数二为NAN
或者负数,那么它将被替换为0
。
const str = 'ABCDEFGHIJKLMN'
console.log(str.substr(2)) // 输出 'CDEFGHIJKLMN'
console.log(str.substring(2)) // 输出 'CDEFGHIJKLMN'
console.log(str.substr(2, 9)) // 输出 'CDEFGHIJK'
console.log(str.substring(2, 9)) // 输出 'CDEFGHI'
7.match()
检索返回一个字符串匹配正则表达式的结果。
var str = "For more information, see Chapter 3.4.5.1";
var re = /see (chapter \d+(\.\d)*)/i;
var found = str.match(re);
console.log(found);
注意事项:如果match
方法没有找到匹配,将返回null
。如果找到匹配,则 match
方法会把匹配到以数组形式返回,如果正则规则未设置全局修饰符g
,则 match
方法返回的数组有两个特性:input
和index
。input
属性包含整个被搜索的字符串。index
属性包含了在整个被搜索字符串中匹配的子字符串的位置。
8.replace()
返回一个由替换值(
replacement
)替换部分或所有的模式(pattern
)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern
是字符串,则仅替换第一个匹配项。
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"
const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"
9.search()
在目标字符串中搜索与正则规则相匹配的字符,搜索到,则返回第一个匹配项在目标字符串当中的位置,没有搜索到则返回一个
-1
。
const str = '2018年结束了,2019年开始了,2020年就也不远了'
const reg = /\d+/i // 这里是定义匹配规则,匹配字符串里的1到多个数字
console.log(str.search(reg)) // 输出 0 这里搜索到的第一项是从位置0开始的
10.toLowerCase(),toUpperCase()
toLowerCase
把字母转换成小写,toUpperCase()
则是把字母转换成大写。
const str1 = 'abcdefg'
const str2 = 'ABCDEFG'
console.log(str2.toLowerCase()) // 输出:'abcdefg'
console.log(str1.toUpperCase()) // 输出:'ABCDEFG'
11.includes(), startsWith(), endsWith()
includes
、startsWith
、endsWith
,es6
的新增方法,
includes
用来检测目标字符串对象是否包含某个字符,返回一个布尔值,
startsWith
用来检测当前字符是否是目标字符串的起始部分,相对的
endwith
是用来检测是否是目标字符串的结尾部分。
const str = 'Excuse me, how do I get to park road?'
console.log(str.includes('how')) // 输出:true
console.log(str.startsWith('Excuse')) // 输出:true
console.log(str.endsWith('?')) // 输出:true
12.repeat()
返回一个新的字符串对象,新字符串等于重复了指定次数的原始字符串。接收一个参数,就是指定重复的次数。原字符串不变。
const str = 'http'
const str2 = str.repeat(3)
console.log(str) // 输出:'http'
console.log(str2) // 输出:'httphttphttp'
常用遍历方法
1.for()
最常用的
for
循环,经常用的数组遍历,也可以遍历字符串。
const arr = [1, 2, 3]
const str = 'abc'
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
console.log(str[i])
}
2.while() / do while()
while
、do while
主要的功能是,当满足while
后边所跟的条件时,来执行相关业务。这两个的区别是,
while
会先判断是否满足条件,然后再去执行花括号里面的任务,而
do while
则是先执行一次花括号中的任务,再去执行while
条件,判断下次还是否再去执行do
里面的操作。也就是说do while
至少会执行一次操作.
3.forEach()
拷贝一份遍历原数组。
return
无法终止循环。不过可以起到continue
效果。本身是不支持的
continue
与break
语句的我们可以通过some
和every
来实现。
const arr = [5,1,3,7,4]
arr.forEach((item, index) => {
if (item < 2) return
console.log(`索引:${index},数值:${item}`)
arr[5] = 0
})
console.log(arr)
// 索引:0,数值:5
// 索引:2,数值:3
// 索引:3,数值:7
// 索引:4,数值:4
// [5, 1, 3, 7, 4, 0]
4.for...in
for...in
是 ES5 标准, 此方法遍历数组效率低,主要是用来循环遍历对象的属性。遍历数组的缺点:数组的下标
index
值是数字,for-in
遍历的index
值"0","1","2"
等是字符串。
Object.defineProperty
,建立的属性,默认不可枚举。
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
5.for...of
for…of
是ES6
新增的方法,但是for…of
不能去遍历普通的对象,for…of
的好处是可以使用break
跳出循环。
for-of
这个方法避开了for-in
循环的所有缺陷与
forEach()
不同的是,它可以正确响应break
、continue
和return
语句
for-of
循环不仅支持数组,还支持大多数类数组对象,例如DOM
NodeList对象[6]。
for-of
循环也支持字符串遍历
// for of 循环直接得到的就是值
const arr = [1, 2, 3]
for (const value of arr) {
console.log(value)
}
// 1
// 2
// 3
for...in
和 for...of
区别?
(1)for…in 用于可枚举数据,如对象、数组、字符串
(2)for…of 用于可迭代数据,如数组、字符串、Map、Set
6.every / some
返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时,可以使用
every
/some
。这两个的区别是,
every
会去判断判断数组中的每一项,而
some
则是当某一项满足条件时返回。
// every
const foo = [9, 1, 3, 7, 4].every((item, index) => {
console.log(`索引:${index},数值:${item}`);
return item > 7;
});
console.log(foo);
// every 打印:
//索引:0,数值:9
//索引:1,数值:1
//false
// some
const foo = [9, 1, 3, 7, 4].some((item, index) => {
console.log(`索引:${index},数值:${item}`);
return item > 7;
});
console.log(foo);
// some 打印:
// 索引:0,数值:9
// true
7.filter()
filter
方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为
true
的成员组成一个新数组返回。该方法不会改变原数组。
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
8.map()
map
即是 “映射”的意思 ,原数组被“映射”成对应新数组。
map:
支持return
,相当与原数组克隆了一份,把克隆的每项改变了,也不影响原数组。
const foo = [5,1,3,7,4].map((item,index) => {
console.log(`索引:${index},数值:${item}`)
return item + 2
})
console.log(foo)
// 索引:0,数值:5
// 索引:1,数值:1
// 索引:2,数值:3
// 索引:3,数值:7
// 索引:4,数值:4
// [7, 3, 5, 9, 6]
9. reduce() / reduceRight()
reduce
从左到右将数组元素做“叠加”处理,返回一个值。reduceRight
从右到左。
const foo = [5,1,3,7,4].reduce((total, cur) => {
console.log(`叠加:${total},当前:${cur}`)
return total + cur
})
console.log(foo)
// 叠加:5,当前:1
// 叠加:6,当前:3
// 叠加:9,当前:7
// 叠加:16,当前:4
// 20
10.Object,keys遍历对象的属性
Object.keys
方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。
const obj = {
p1: 123,
p2: 456
};
Object.keys(obj) // ["p1", "p2"]
11.Object.getOwnPropertyNames() 遍历对象的属性
Object.getOwnPropertyNames
方法与Object.keys
类似,也是接受一个对象作为参数,返回一个数组,包含了该对象自身的所有属性名。但它能返回不可枚举的属性。
const arr = ['Hello', 'World'];
Object.keys(arr) // ["0", "1"]
Object.getOwnPropertyNames(arr) // ["0", "1", "length"]
以上遍历方法的区别:
一:map(),forEach(),filter()循环的共同之处:
1.forEach,map,filter循环中途是无法停止的,总是会将所有成员遍历完。
2.他们都可以接受第二个参数,用来绑定回调函数内部的 this 变量,将回调函数内部的 this 对象,指向第二个参数,间接操作这个参数(一般是数组)。
二:map()、filter()和forEach()循环的不同:
forEach 循环没有返回值;map,filter 循环有返回值。
三:map()和filter()都会跳过空位,for 和 while 不会
四:some()和every():
some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.
五:reduce(),reduceRight():
reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员)。
六:Object对象的两个遍历 Object.keys 与 Object.getOwnPropertyNames:
他们都是遍历对象的属性,也是接受一个对象作为参数,返回一个数组,包含了该对象自身的所有属性名。但Object.keys不能返回不可枚举的属性;Object.getOwnPropertyNames能返回不可枚举的属性。