javascripts数组以及字符串方法及案例

JS 原生对象

Array

数组对象，提供操作数组的各种方法和属性，将我们常用的操作数组的方法进行了封装，我们只需要使用就可以

• length

数组的长度，数组中元素的个数

• construction

指向数组对象的构造函数 (Arry)

数组对象的方法

1. arr.push

let arr = [1,2,3];
arr.push(4); 
console.log(arr); // [1,2,3,4]
arr.push(5,6);
console.log(arr); // [1,2,3,4,5,6]

• 向数组的末尾添加一个或多个元素
• 参数：要添加的元素
• 返回值：修改后数组的长度 (length)
• 修改原数组

2. arr.unshift()

let arr = [1,2,3];
arr.push(4); 
console.log(arr); // [4,1,2,3]
arr.push(5,6);
console.log(arr); // [5,6,4,1,2,3]

• 向数组的前面添加一个或多个元素
• 参数：要添加的元素(可以追加多个)
• 返回值：修改后数组的长度 (length)
• 修改原数组

3. arr.pop()

let arr = [1,2,3];
arr.pop(); 
console.log(arr); // [1,2]

• 删除数组的最后一个元素
• 参数：无（只能删除一个）
• 返回值：被删除的元素
• 修改原数组

4. arr.shift()

let arr = [1,2,3];
arr.shift(); 
console.log(arr); // [2,3]

• 删除数组的第一个元素
• 参数：无（只能删除一个）
• 返回值：被删除的元素
• 修改原数组

5. arr.splice()

let arr = [1,2,3];
arr.splice(0,0,5,6,9); 
console.log(arr); // [5, 6, 9, 1, 2, 3]

• 第一个参数是删除的起始位置也是添加元素的起始位置
• 万能的增删，可以在任意位置删除或增加
• 参数：增删的位置，删除的个数，要添加的元素
• 返回值：删除元素所组成的数组，如果没有删除，结果为空数组
• 修改原数组

6. arr.slice()

let arr = [1,2,3];
let arr1 = arr.slice(1); 
console.log(arr1); //[2, 3]

• 截取，截取数组中的一部分
• 参数：截取开始的下标，截取结束的下标（截取的元素包含起始下标，不包含结束下标）参数可以是负数，负数表示倒数，只传一个参数表示从起始下标截取到最后
• 返回值：截取的元素组成的新数组
• 不修改原数组

7. arr.join()

let arr = [1,2,3];
let str = arr.join('@');
console.log(str); //1@2@3

• 将数组元素通过一个连接符成一个字符串
• 参数：连接符
• 返回值：连接之后的字符串
• 不修改原数组

8. arr.concat()

let arr = [1,2,3];
let arr1 = [9,8,7];
let newArr = arr.concat(arr1);
console.log(newArr);//[1, 2, 3, 9, 8, 7]

• 连接两个或多个数组
• 参数：连接的数组
• 返回值：连接之后的新数组
• 不修改原数组

9. arr.indexOf()

let arr = [1,2,3];
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(20));//-1

• 查询每一个元素第一次出现的下标，如果没有返回-1，如果存在返回下标
• 参数：要查询的元素
• 返回值：下标或 -1
• 不修改原数组

10. arr.lastIndexOf()

let arr = [1,2,3];
console.log(arr.lastIndexOf(2));//1
console.log(arr.lastIndexOf(20));//-1

• 倒序查找元素第一次出现的位置，如果没有返回-1，如果存在返回下标
• 参数：要查询的元素
• 返回值：下标或 -1
• 不修改原数组

11. arr.sort()

• 数组排序
• sort 方法只有一个参数
• 不写参数
• 会按照数组元素的 ASCII 编码值进行排序
• 如果写参数，参数必须是一个回调函数
• 回调函数必须有两个参数，为了返回两个合适的排序规则 返回值：排序之后的数组
• 会修改原数组

var arr3=[1,5,6,99,52,663,22,66,552,6,622];
arr3.sort(function(a,b){
//a-b 正序，
//b-a 倒序，  
return a-b;
})
console.log(arr3);
// 控制台输出
// (11) [1, 5, 6, 6, 22, 52, 66, 99, 552, 622, 663]
//箭头函数
arr.sort((a,b)=>a-b)     //正序，
arr.sort((a,b)=>b-a)     //倒序，

12. arr.forEach()

• 遍历数组元素
• 参数：回调函数
  • 回掉函数的参数
  • 数组的元素，数组的下标，要操作的数组
• 不会修改原数组

var arr3=[1,5,6,99,52,663,22,66,552,6,622];
arr3.forEach(function(value,index){
  console.log(index,value)
})
// 箭头函数
arr3.forEach((value,index)=>{console.log(index,value)})

13. arr.filter()

• 筛选：根据回调函数的返回值来筛选相应的数组元素
• 参数：回调函数（返回筛选的条件）传递函数的 this
• 返回值：满足条件的元素组成的数组
• 不修改原数组

var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
var newArr =arr.filter(function(value,index){
return value>100;       //筛选arr数组中值大于100的元素；
})
console.log(newArr);
// 控制台输出
// (4) [663, 552, 123, 622]
var person = [
{name: "张三",age:20,sex: "男"},
{name: "李四",age:19,sex: "女"},
{name: "王五",age:22,sex: "男"},
{name: "赵六",age:21,sex: "女"}
];
var x =person.filter(function(value,index){
return value.age>20;           // 筛选出年龄大于20岁的学生
// return value.sex=="男";     //筛选出男同学
})
console.log(x);
// 箭头函数
arr.filter((value,index)=>{return 判断条件})

14. arr.map()

• 根据回调函数的结果判断是否能有满足条件的数组元素，如果存在返回 true，如果都没有返回 false
• 参数：回调函数，传递给函数的 this
• 返回值：映射之后的元素组成的数组
• 不修改原数组

var arr=[1,5,6,99,52,663,22,66,552,123,6,622];
// var end=arr3.map(function(value,index){
//     return value*2;        //将数组中的所有元素都乘以2返回
// });
// 箭头函数
var end = arr.map((value,index)=>value*2);
console.log(end);

15. arr.some()

• 根据回调函数的结果判断是否有满足条件的数组元素，如果存在返回 true，如果都没有返回 false
• 参数：回调函数，传给函数的 this
• 回调函数的参数
• 数组元素，数组下标，数组
• 返回值：boolean
• 不会修改原数组

var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
var end=arr3.some(function(value,index){
return value<500;
});
console.log(end);     //true

16. arr.every()

• 根据回调函数的条件判断数组中是否每一个都满足条件，都满足返回 true，否则返回 false
• 参数：回调函数，传给函数的 this
• 返回值：boolean
• 不修改原数组

var arr3=[1,5,6,99,52,663,22,66,552,123,6,622];
var end=arr3.every(function(value,index){
return value<500;
});
console.log(end);     //false

17. arr.reverse()

• 将数组元素进行倒叙排列
• 参数；无
• 返回值：倒叙后的数组
• 修改原数组

var arr=[1,5,8,6,9,4,2,3];
console.log(arr.reverse());     // (8) [3, 2, 4, 9, 6, 8, 5, 1]
console.log(arr);               // (8) [3, 2, 4, 9, 6, 8, 5, 1]

18. arr.includes()

• 查询数组中是否存在某元素，如果存在返回 true，否则返回 false
• 无法搜索对象
• 参数：要搜索的值，搜索的开始索引
• 返回值：Boolean
• 不修改原数组

var arr = [1,2,{name:"张三"}]
arr.includes(2)     // true
arr.includes(4)     // false
arr.includes({name:"张三"})     // false

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

includes 是能够判断元素是否存在，并不知道存在的位置，所以需要知道元素的位置（下标）必须要使用 indexOf 或 lastIndexOf .includes 是 ES7 中新增的方法，所以存在兼容性问题

19. Array.from()

• 将特定格式的对象转换为数组（类数组的对象）
• 参数：要转化的对象
• 返回值：转化之后的数组（如果该对象无法转为数组，返回一个空数组）
• 不修改原数组
• 无法判断对象是否存在（原因是每一个对象的存储位置都不同）

var a={length:2,0:'aaa',1:'bbb'};  
Array.from(a);        //['aaa','bbb']
// 原理：Array.prototype.slice.call(a);
var b={length:2};  
Array.from(b);       //[undefined.undefined]

20. Array.of()

• 将元素转化为数组（将元素放置在数组中）
• 参数：参与转换的元素
• 返回值：元素组成的数组（如果不传递参数结果为空数组）

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

21. arr.at()

let arr = [5, 12, 8, 130, 44];
console.log(arr.at(2));//8
console.log(arr.at(-2));//130

• 不修改原数组
• 参数：数组的下表，识别负数。
• 返回值：对应数组下标的原因

22. arr.find()

let arr = [{name:1},{name:2},{name:3}]
let obj = arr.find(v=>v.name == 1);
console.log(obj);//{name: 1}

• 不修改原数组
• 参数：回调函数
• 返回值：方法返回数组中满足条件回调函数的第一个元素，如果没有值满足提供的回调函数，则返回undefined。

23. arr.toString()

let arr = [1,2,5,6,[1,5,6,[{name:12}],[1,2]]];
arr.toString();//'1,2,5,6,1,5,6,[object Object],1,2'

• 不修改原数组
• 参数：无
• 返回值： 返回转换后的字符串

24. arr.reduce()

let arr = [1,2,5,6];
let num = arr.reduce((pre,cur)=>{
	return pre+cur
},0)
console.log(num);//14
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

• 不修改原数组
• 参数：回调函数，初始值
• total 必需。初始值, 或者计算结束后的返回值。
• currentValue 必需。当前元素
• currentIndex 可选。当前元素的索引
• arr 可选。当前元素所属的数组对象。
• 返回值：数组累加之合等

String

字符串对象用于存储和处理字符串相关问题

字符串对象的属性

length：字符串的长度（字符的个数）

字符串对象的方法

1. str.charAt()

• 查询字符串下标所对应的字符
• 参数：index（下标）
• 返回值：对应的字符
• 不修改原字符串

2. str.charCodeAt()

• 查询字符串下标对应字符的 ASCII 编码值
• 参数 index（下标）
• 返回值：对应的 ASCII 编码值
• 不修改原字符串

3. str.fromCHarCode()

• 将 ASCII 编码值转为对应的字符
• 参数：十进制ASCII 编码
• 返回值：对应的字符

4. str.indexOF()

• 查找一个字符或者字符串在字符串中第一次出现的位置，未找到则返回 -1、
• 参数： 要查找的字符串
• 返回值： 目标字符串的下标位置，未找到则未 -1
• 不修改原字符串

var str='hello world';
str.indexOf('a');         //-1
str.indexOf('o');        //4

5. str.lastIndexOF()

• 倒序查找一个字符或者字符串在字符串中第一次出现的位置，返回位置，未找到则返回 -1
• 参数：要查询的元素
• 返回值：下标或 -1
• 不修改原字符串

var str='hello world';
str.lastIndexOf('o');      //7

6. str.replace()

• 将指定的字符串替换，只能替换第一个
• 参数：1. 要替换的内容； 2. 替换后的内容
• 返回值：替换后的字符串
• 不修改原字符串

var str='hello world';
str.replace('o','a');        //"hella world"

replace支持正则查找，str.replace(/正则/,“替换后的内容”)

7. str.slice()

• 截取，截取数组中的一部分,识别负数
• 参数：1. 截取起始下标； 2. 截取结束下标。参数可以是负数，负数表示倒数，只传一个参数表示从起始下标截取到最后（截取的元素包含起始下标，不包含结束下标）
• 返回值：截取的元素组成的新数组
• 不修改原字符串

8. str.substring()

• 截取，截取字符串中的一部分
• 参数：同slice方法，但不识别负数
• 返回值：截取的字符串
• 不修改原字符串

9. str.substr()

• 截取指定长度的字符串
• 参数：起始下标，截取的长度
• 返回值：被截取的字符串
• 不修改原字符串

10. str.split()

• 通过指定的分隔符将字符串分割为数组，作为分割符的字符最终被删除，不会出现在数组中
• 参数：分隔符
• 返回值：分隔后的字符组成的数组
• 不修改原字符串

var str='hello world';
console.log(str.split('o'));   //["hell", " w", "rld"]
console.log(str.split(''));    //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

11. str.toLowerCase()

• 将字符串中的字母都转为小写,不修改原字符串

12. str.toUpperCase()

• 将字符串中的字母都转为大写

13. str.trim()

• 去掉字符串左右的空格

14. str.concat()

• 用于连接两个或多个字符串,与数组中的concat方法很象
• 参数：被链接的字符串
• 返回值：拼接后的新的字符串
• 不修改原字符串

15. str.match()

• 检索指定的字符串
• 参数：被检索字符串，或者一段正则表达式
• 返回值：被检索的字符串所组成的数组，如果不存在返回 null.
• 不修改原字符串。

var str = 'hello world';
str.match('o');   //["o", index: 4, input: "hello world", groups: undefined]
str.match(/o/g);   // (2) ["o", "o"]

16. str.padStart,str.padEnd()

• 在字符串的开头或结尾添加字符到指定的字符串长度
• 参数 1：新字符串的目标长度，如果目标长度小于等于字符串本身长度，那么返回字符串本身。
• 参数 2：要添加的字符，如果参数 2 为空，默认使用空格添加
• 返回值为修改后的字符串，不修改原字符串