数组和字符串常用的方法

数组常用的方法

1)检测是否为数组

instanceof 运算符 //可以判断一个对象是否是某个构造函数的实例
Array.isArray()  // 用于判断一个对象是否为数组 (HTML5新增的,ie9以上版本支持)

例如:

var obj={};
var arr=[];

console.log(obj instanceof Array); // false  表示obj不是数组
console.log(arr instanceof Array); // true  表示arr是数组

console.log(Array.isArray(obj)); // false  不是数组
console.log(Array.isArray(arr)); // true  是数组

2)添加删除数组的方法

添加数组元素

unshift()  // 在数组的开头添加一个或者多个数组元素
返回值: 新数组的长度

push()     // 在数组的末尾添加一个或者多个数组元素
返回值: 新数组的长度

例如:

var arr=[1,2,3];
arr.unshift("red",4);
console.log(arr); // ['red', 4, 1, 2, 3]
console.log(arr.unshift("red",4)); // 5

var arr2=["red","pink","blue"];
arr2.push("green");
console.log(arr2); // ["red","pink","blue","green"]
console.log(arr2.push("green")); // 4

删除数组元素

shift()   // 删除数组元素的第一个元素,一次只能删除一个
返回值:被删除的那个元素

pop()    // 删除数组元素的最后一个元素,一次只能删除一个
返回值:被删除的那个元素

例如:

var arr=[1,2,3,4,5];
arr.shift();               // 里面不要写参数
console.log(arr);          // [2,3,4,5]
console.log(arr.shift());  // 1

var arr2=["red","pink","blue","green"];
arr2.pop();                // 里面不要写参数
console.log(arr2);         // ["red","pink","blue"]
console.log(arr2.pop());   // green

3)数组排序

翻转数组

reverse() // 翻转数组中元素的顺序,无参数 (只有数组才可以翻转)
该方法会改变原来的数组,返回新数组

例如:

var arr=["red","pink","blue","green"];
arr.reverse();
console.log(arr); // ["green","blue","pink","red"]

数组排序(冒泡排序)

sort()   //  对数组元素进行排序
该方法会改变原来的数组,返回新数组

注意: sort()方法需要传入参数来设置升序和降序排序
如果传入 "function(a,b){return a-b}",则为升序
如果传入 "function(a,b){return b-a}",则为降序

例如:

个位数的排序
var arr=[8,3,4,7,0,6,1];
var arr2=[13,9,7,4,8,1];
arr.sort();
arr2.sort();
console.log(arr);  // [0,1,3,4,6,7,8]  这种方式排序只能满足个位数的排序,因为它是按1-9的数字顺序排列的
console.log(arr2); // [1,13,4,7,8,9]  

多位数的排序
var arr3=[11,4,0,88,102,9,234];

arr3.sort(function(a,b){
    return a-b;  // 升序排列
});
console.log(arr3); // [0,4,9,11,88,102,234]

arr3.sort(function(a,b){
    return b-a;  // 降序排列
});
console.log(arr3); // [234,102,88,11,9,4,0]

数组索引的方法

indexOf()      // 数组中查找给定元素的第一个索引(从前往后找)
如果要查找的元素存在,返回查找元素的索引号
如果要查找的元素不存在,返回-1

lastIndexOf()  // 在数组中的最后一个索引(从后往前找)
如果要查找的元素存在,返回查找元素的索引号
如果要查找的元素不存在,返回-1

例如:

var arr=[3,5,4,"red",8,"green",14,25,66];
console.log(arr.indexOf("red"));      // 3
console.log(arr.lastIndexOf("red"));  // 3

如果同一个元素有多个
var arr2=[3,5,4,"red",8,"green","red",25,66];
console.log(arr.indexOf("red"));      // 3 (从前往后找)
console.log(arr.lastIndexOf("red"));  // 6 (从后往前找)

如果数组中没有要查找的元素
var arr=[3,5,4,"red",8,"green",14,25,66];
console.log(arr.indexOf("red"));      // -1
console.log(arr.lastIndexOf("red"));  // -1

4)数组转换为字符串

toString()  // 把数组转换成字符串,逗号分隔每一项  
返回一个字符串

join("分隔符")  // 该方法用于把数组中的所有元素转换成一个字符串 (默认为逗号分隔)
返回一个字符串

例如:

var arr=["red","pink","blue","green"];
console.log(arr.toString()); // red,pink,blue,green
console.log(arr.join());  // red,pink,blue,green  (不写分隔符,默认为逗号分隔)
console.log(arr.join("-"));  // red-pink-blue-gren

5)其他方法

拼接数组
concat()  // 连接两个或者多个数组,不影响原数组
返回值:一个新数组

截取数组
slice()  //  数组截取  
slice(begin,end)  // begin:开始截取的位置  end:结束截取的位置
返回值:被截取项目的新数组

删除数组
splice()  //  数组删除
splice("第几个开始","要删除的个数")
返回值:被删除项目的新数组(此方法会影响原数组)

ES5新增的数组方法

遍历数组

arr.forEach(function(value, index, array) { 
    //参数一是:数组元素
    //参数二是:数组元素的索引 
    //参数三是:当前的数组 
})
    //相当于数组遍历的 for循环 没有返回值

过滤数组

var arr = [12, 66, 4, 88, 3, 7]; 
var newArr = arr.filter(function(value, index,array) { 
    //参数一是:数组元素 
    //参数二是:数组元素的索引 
    //参数三是:当前的数组 
    return value >= 20; 
}); 
console.log(newArr);// [66,88] 
//返回值是一个新数组(新数组中的元素是通过检查指定数组中符合条件的所有元素)

数组方法

some()方法查找数组中是否有满足条件的元素 
var arr = [10, 30, 4]; 
var flag = arr.some(function(value,index,array) { 
    //参数一是:数组元素 
    //参数二是:数组元素的索引 
    //参数三是:当前的数组 
    return value < 3;
});
console.log(flag); // false 表示没有找到符合条件的元素
// 返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

every()方法是用于检测数组中所有元素是否满足指定条件
// 返回值为布尔值
// true 表示所有元素都满足条件
// false 表示有一个元素不满足条件

ES6新增数组的扩展方法

1)扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3];
...ary // 1, 2, 3 
console.log(...ary); // 1 2 3 相当于 console.log(1,2,3);

扩展运算符可以应用于合并数组
// 方法一 
let ary1 = [1, 2, 3]; 
let ary2 = [3, 4, 5]; 
let ary3 = [...ary1, ...ary2]; 
// 方法二 ary1.push(...ary2);

将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];

2)构造函数方法：Array.from()

此方法将伪数组或可遍历对象转换为真正的数组
//定义一个集合 
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
//转成数组 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

此方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理， 将处理后的值放入返回的数组
let arrayLike = { "0": 1, "1": 2, "length": 2 }
let newAry = Array.from(arrayLike, item => item *2) // [2,4]
// 如果是对象，那么属性需要写对应的索引

3)实例方法：find()

此方法用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let ary = [{ id: 1, name: '张三' }, {id: 2, name: '李四' }]; 
let target = ary.find((item, index) => item.id == 2);
//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

4)实例方法：findIndex()

此方法用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15]; 
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

5)实例方法：includes()

此方法判断某个数组是否包含给定的值，返回布尔值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

字符串常用的方法

字符串的所有方法都不会修改字符串本身(字符串的不可变性)

1)根据字符返回位置

indexOf("要查找的字符串",开始的位置) // 开始的位置:index索引号
// 返回指定内容在原字符串中的位置,如果找不到就返回-1 (常用于同一个字符串有多个相同的字符)

lastIndexOf()  //从后往前找,只找第一个匹配的

2)根据位置返回字符

charAt(index) // 返回指定位置的字符(index字符串的索引号)

charCodeAt(index) // 返回指定位置处字符的ASCII码

str[index]  // 获取指定位置处字符  (HTML5 IE8+支持 和charAt()等效)

3)字符串操作方法

concat(str1,str2,...)
// concat()方法用于连接两个或者多个字符串,拼接字符串,等效于 + , + 号更长用
       
substr(start,length)
// 从start(索引号)的位置开始截取, length表示截取的个数

slice(start,end)
// 从start的位置开始截取,一直到end的位置(end取不到)  [start和end都是索引号]

substring(start,end)
// 从start的位置开始截取,一直到end的位置(end取不到)  [start和end都是索引号,不接受负值]

4)替换字符串

replace()方法用于在字符串中用一些字符替换另一些字符。
replace(被替换的字符串， 要替换为的字符串)
// 如果一个字符串中有多个相同的字符,replace()方法只能替换一个

5)把字符串切分为数组

split()方法用于切分字符串，它可以将字符串切分为数组。
// 在切分完毕之后，返回的是一个新数组。

例如:
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
var str1='red&pink&blue';
console.log(str.split('&')); // ['red','pink','blue']

toUpperCase() //转换大写
toLowerCase() //转换小写

ES5新增字符串方法

trim()方法会从字符串的两端删除空白字符,中间的空白字符无法删除
str.trim()
// 该方法不影响原字符串本身,返回的是一个新的字符串

ES6字符串的扩展方法

1)模板字符串

ES6新增的创建字符串的方式，使用反引号定义
let name = `zhangsan`;

模板字符串中可以解析变量
let name = '张三'; 
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行
let result = { 
    name: 'zhangsan', 
    age: 20, 
    sex: '男' 
}
let html = ` <div> 
<span>${result.name}</span> 
<span>${result.age}</span> 
<span>${result.sex}</span> 
</div> `;

在模板字符串中可以调用函数
const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大'; 
};
let greet = `${sayHello()} 哈哈哈哈`; 
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

2)实例方法：startsWith() 和 endsWith()

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

let str = 'Hello world!'; 
str.startsWith('Hello') // true 
str.endsWith('!') // true

3)实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串
'x'.repeat(3) // "xxx" 
'hello'.repeat(2) // "hellohello"