数组方法及字符串方法总结

数组方法及字符串方法总结

---

数组方法

---

1)forEach

语法:数组.forEach(function(数组的每一项元素,[元素对应的索引]){})

作用:用来遍历数组

返回值:没有返回值,不会影响原数组

letstr=''

arr.forEach(item=> {

const { name, picture, price } =item

str+=`

<div class="item">

<img src=${picture}alt="">

<p class="name">${name}</p>

<p class="price">${price}</p>

</div>

`

})

document.querySelector('.list').innerHTML=str

2)filter

语法:数组.filter(function(item, [ index ]){return筛选条件)

作用:筛选数组中符合条件的元紊

返回值:有返回值,返回值是一个数组,包含的是符合筛选条件的元素，不影响原数组

constarr=goods.filter(item=> {

console.log(item);

const { price } =item

returnprice>100&&price<1000

})

console.log(arr);

3)map

语法: arr.map(function(item,index){}) item数组元素 index下标

作用：迭代数组，经常用于处理数据

返回值:map返回一个新数组，数组元素就是return后面的值

constres=goodsList.map(item=> {

const { name, price, picture } =item

return`

<div class="item">

<img src="${picture}" alt="">

<p class="name">${name}</p>

<p class="price">${price}</p>

</div>

`

})

document.querySelector('.list').innerHTML=res.join('')

4)reduce

语法: arr.reduce(function(累计值，当前元素，[索引号]，[源数组]){}，起始值)

作用： 累计器 常用于求和，不是只能求数组的和

累计值参数:

1.如果有起始值，则以起始值为准开始累计，累计值=起始值

2.如果没有起始值，则累计值以数组的第一个数组元素作为起始值开始累计

3．后面每次遍历就会用后面的数组元素累计到累计值里面

constarr= [3, 5, 7]

constres=arr.reduce(function (prev, item) {

console.log(`累计值是${prev},数组的每一项是${item}`)

returnprev+item

})

console.log(res);

5)find

语法:数组.find(function(item, [index]){return查找的条件})

作用：查找数组中符合条件的元素

返回值:如果查找到,那么返回的是符合条件的第一个元素如果查找不到,那么返回的结果是undefined

consthv=goods.find(item=>item.name==='华为')

console.log(hv);

6)some

语法:数组.some(function( item, [index] ){return条件})

作用:判断数组中是否有符合条件的元素

返回值:是一个布尔值 如果数组只要有一个元素符合条件则为true 一个复合条件的都没有 则返回false

constarr= [1, 2, 3, 4, 5, 6]

constres=arr.some(item=>item>5)

console.log(res);

7)every

语法:数组.every(function( item, [index] ){return条件})

作用:判断数组中是否所有的元素都符合条件

返回值:是一个布尔值 如果数组的每一项元素都符合条件,那么返回的结果是true

constarr= [22, 33, 44, 55]

constres=arr.every(item=>item%11===0)

console.log(res);

8)join

语法:数组.join()

作用:方法将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。

返回值:一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串。

注意：如果省略，数组元素用逗号分隔。如果是空字符串（""），则所有元素之间都没有任何字符。

consta= ['Wind', 'Water', 'Fire'];

a.join(); // 'Wind,Water,Fire'

a.join(''); // 'WindWaterFire'

9)sort

语法:sort(function XX(a, b) { })

作用:对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

返回值:排序后的数组。请注意，数组已原地排序，并且不进行复制。

constmonths= ['March', 'Jan', 'Feb', 'Dec'];

months.sort();

console.log(months);

// expected output: Array ["Dec", "Feb", "Jan", "March"]

10)reverse

语法：数组.reverse()

作用：将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组返回值：颠倒后的数组

consta= [1, 2, 3];

console.log(a); // [1, 2, 3]

a.reverse();

console.log(a); // [3, 2, 1]

11)concat

语法：数组1.concat(数组2, , * … ,* 数组N)

作用：concat() 方法用于合并两个或多个数组。

返回值：此方法不会更改现有数组，而是返回一个新数组。

constletters= ['a', 'b', 'c'];

constnumbers= [1, 2, 3];

constres=letters.concat(numbers);

console.log(res);

// results in ['a', 'b', 'c', 1, 2, 3]

​

合并数组的另一个办法展开运算符

constarr1= [1, 2, 3]

constarr2= [4, 5, 6]

constarr3= [...arr1, ...arr2]

console.log(arr3);

12)splice

语法：数组.splice(start, deleteCount, item1, item2, itemN)

作用：删除或替换现有元素或者原地添加新的元素，并以数组形式返回被修改的内容。此方法会改变原数组。

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

注意第一个参数是修改开始的索引号；第二个参数表示要移除的数组元素的个数，如果不写第二个参数默认删除start后面的所有元素；item1, item2（可不写）表示要新添加的元素

constmonths= ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');

console.log(months);

//expected output: Array ["Jan", "Feb", "March", "April", "June"]

13)push

语法：数组.push(element0, element1, … , elementN)作用：push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。返回值：当调用该方法时，数组新的 length 值将被返回。

constsports= ["soccer", "baseball"];

consttotal=sports.push("football", "swimming");

console.log(sports);

// ["soccer", "baseball", "football", "swimming"]

14)unshift

语法：数组.unshift(element0, element1, … , elementN)作用：将一个或多个元素添加到数组的开头，并返回该数组的新长度。返回值：返回该数组的新长度。

constarray1= [1, 2, 3];

console.log(array1.unshift(4, 5));

// expected output: 5

console.log(array1);

// expected output: Array [4, 5, 1, 2, 3]

15)pop

语法：数组.pop()作用：从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。返回值：从数组中删除的元素（当数组为空时返回undefined）

plants= ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());

// expected output: "tomato"

16)shift

语法：数组.shift()作用：从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度返回值：从数组中删除的元素; 如果数组为空则返回undefined 。

constarray1= [1, 2, 3];

constfirstElement=array1.shift();

console.log(array1);

// expected output: Array [2, 3]

console.log(firstElement);

// expected output: 1

17)findIndex

语法:findIndex(function(element, index, array){})

作用:数组中满足提供的测试函数的第一个元素的索引。

返回值:返回数组中通过提供测试函数的第一个元素的索引。否则，返回 -1

与find区别 find() 方法，它返回数组中找到的符合条件的第一个元素的值，而不是其索引

constarr= [5, 12, 8, 130, 44];

constnum=arr.findIndex((item) =>item>13);

console.log(num);//3

字符串方法

---

1)trim

语法:字符串.trim()

作用:从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串。

返回值:返回一个表示 str 去掉了开头和结尾的空白字符后的新字符串。

constgreeting=' Hello world! ';

console.log(greeting);

// expected output: " Hello world! ";

console.log(greeting.trim());

// expected output: "Hello world!";

2)substr

语法:字符串.substr(start[, length])

作用:返回一个字符串中从指定位置开始到指定字符数的字符。

返回值:是截取的字符串

conststr='我是中国人，我爱我的祖国'

constqu=str11.substr(2,3)

console.log(qu);

3)substring

语法:字符串.substring(开始的索引,[结束的索引])

作用:截取字符串

返回值:是截取的字符串

注意:

[1]如果结束的索引这个参数不传,表示从开始的索引截取到最后

[2]如果结束的索引这个参数传递,那么结束的索引对应的字符是不包含在内的

conststr11='我是中国人，我爱我的祖国'

constqu=str11.substring(2,5)//中国人 注意这里选取【）左闭右开 所以结束往后加一个索引值

4)split

语法:字符串.split('分隔符')

作用:将字符串转成数组

返回值: 是一个数组,不会影响源字符串

面试题：join()与split()区别?

join():数组的方法，把数组转换成字符串 数组.join('分隔符')

split()：字符串的方法， 把字符串转换为数组 字符串.split('分隔符')

conststr='pink,red'

constarr=str.split(',')

console.log(arr)

​

conststr1='2022-4-8'

constarr1=str1.split('-')

console.log(arr1)

5)replace

语法：字符串.toUppercase()

作用:返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。

返回值：是一个新的字符串,不会影响源字符串

constp='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?"

​

constregex=/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?"

​

6)toUpperCase

语法：字符串.toUppercase()

作用：将字符串转大写

返回值：是一个新的字符串,不会影响源字符串

const str = 'I love you'

//转大写

console.log(str.toUpperCase());

//需求:将第一个字符i转成大写

console.log(str.substring(0, 1).toUpperCase());

console.log(str[0].toUpperCase())

7)toLowerCase

语法：字符串.toUppercase()

作用：将字符串转小写

返回值：是一个新的字符串,不会影响源字符串

const str1 = 'I LOVE YOU'

// 转小写

console.log(str1.toLowerCase());

console.log(str1[0].toLowerCase());

console.log(str1.substring(0, 1).toLowerCase());

console.log(str1.substr(2, 4).toLowerCase());//love

8)startsWith

startsWith: 语法:字符串.startsWith(子字符串，[位置])

作用:判断字符串足否以某个子字符串开头

返回值:是一个布尔值,如果是以某个子字符串开头,结果是true,否则是false

注意：对大小写敏感

const str = 'I love you'

//需求:判断str是否以某个字符串开始

console.log(str.startsWith('I'));//true

console.log(str.startsWith('i'));//false

console.log(str.startsWith('I love'));//true

console.log(str.startsWith('I love', 3));//false

9)endsWith

语法:字符串.endsWith(子字符串,[位置])

作用:判断字符串是否以某个子字符串结束

返回值:是一个布尔值,如果是以某个子字符串结束,结果是true,否则是false

注意：对大小写敏感

console.log(str.endsWith('u'));//true

console.log(str.endsWith('you'));//true

console.log(str.endsWith('U'));//false

10)includes

语法:字符串.includes(子字符串，[位置])

作用:判断字符串足否包含子字符串

返回值:是一个布尔值,如果包含子字符串，结果是true,否则是false

注意 这个方法对大小写敏感

const str = 'I love you'

//需求:判断str是否包含子字符串

console.log(str.includes('love'));//true

console.log(str.includes('i love'));//false

console.log(str.includes('I love'));//true

11)indexOf

语法:indexOf(searchString, position)

作用:给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。

返回值:查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'dog';

const indexOfFirst = paragraph.indexOf(searchTerm);

console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`);

// expected output: "The index of the first "dog" from the beginning is 40"

console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`);

// expected output: "The index of the 2nd "dog" is 52"