JavaScript 对象：String & Array 及其常见应用

String对象

split

功能：把字符串分割为字符串数组。官方文档已经描述的够清楚，不多赘述。主要说一下需要注意的情况以及应用

1、省略分割参数

var str="How are you doing today?";
var n=str.split();

//n 输出数组值得结果:
["How are you doing today?"]

2、分割字符为空字符""`

//分割每个字符，包括空格:
var str="How are you doing today?";
var n=str.split("");

//n 输出数组值得结果:
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

3、使用 limit 参数

var str="How are you doing today?";
var n=str.split(" ",3);	//此分隔符为空格
//n 将输出3个数组的值:
How,are,you

4、使用某个字符做分隔符(重点)

var tktNo: '781-1157594322/781-1157594323/781-1157594324'
console.log(tktNo.split('/'))
//结果为：
["781-1157594322", "781-1157594323", "781-1157594324"]

Array对象

filter

用法： 用于过滤，就是把数组中的每个元素，使用回调函数func进行校验，回调函数func返回一个布尔值，将返回值为 true 的元素放入新数组

参数：函数

返回值： Boolean

写法一：

//箭头函数 参数n为数组元素
const nums = [20,30,110,60,190,50]
let newNums =nums.filter(n =>{
  return n < 100
})

写法二：

//普通函数
 let newNums = nums.filter(function(n) {
		return n < 100;
      })

map

用法： 遍历原数组，将元素处理然后放入到新数组中

参数： 函数

返回值： 新数组元素

写法一：

//箭头函数
let newNums2 =newNums.map(n =>{
  return n*2
})

写法二：

let newNums2 =newNums.map(function(n){
  return n*2
})

reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
total	必需。初始值, 或者计算结束后的返回值。初始值 = initialValue
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

返回值： 新数组元素

示例：

//将数组中所有元素加上n
let arr = [20,40,80,100]
let sum = arr.reduce( (preValue, n) => {
  return preValue + n
},0)
/*
	第一次：preValue -> 0  ; n-> 20
	第二次：preValue -> 20 ; n-> 40
	第一次：preValue -> 60 ; n-> 80
	第一次：preValue -> 140; n-> 100
*/

preValue：上一次汇总的值，即return的值，初始值设置为0

n: 是指遍历数组中的元素

链式调用

将数组arr中小于10的元素*2然后再相加

var arr = [2,6,8,11,20,32];
let total = arr.filter(n => n < 10).map(n => n*2).reduce((pre,n) => pre + n)
console.log(total); // 32

sort排序

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

//输出结果 Apple,Banana,Mango,Orange

默认升序，若想实现降序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse()

注意：当数字是按字母顺序排列时"40"将排在"5"前面。要使用数字排序，必须通过一个函数作为参数来调用，即Array.sort(callback)，函数指定数字是按照升序还是降序排列。

//数字排序（数字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//输出结果 1,5,10,25,40,100

//降序
points.sort(function(a,b){return b-a});

排序方法callback

如果返回值小于0表示两个元素不需要交换位置，大于0表示要用交互位置，0表示相等，实际上<=0等效。

键值对{}

Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

参考文档

应用

统计一个字符在字符串中出现的次数

方式一

var arr = 'abcdaabc';
var newArr1=arr.split('a')	//["", "bcd", "", "bc"]
var newArr2=arr.split('b')	//["a", "cdaa", "c"]
var newArr3=arr.split('c')	//["ab", "daab", ""]
var num = newArr.length-1	//num即为出现次数

之所以出现空字符串：

• 该字符出现在首尾处
• 相同字符相邻时中间会出现空字符

方式二

var strs = "hello everyone"
var num = strs.split('').filter(i => i == 'e').length

统计所有出现过的字符在字符串中出现的次数

/*
	res: 单次返回结果
	cur: 当前数组元素
	{}: 返回结果初始值
*/
var arrString = 'abcdaabc';
var tt = arrString.split('').reduce((res, cur) => {
	console.log("cur",cur);		//'a','b','c','d','a'.......
    console.log("res[cur]",res[cur]); 	// undefine
    res[cur] ? res[cur] ++ : res[cur] = 1 	//三目运算符，res[cur]为undefine时，给key为cur的value赋值为1，之后叠加次数
	console.log("res",res);
    return res;
}, {})
//res 结果为
{a: 3, b: 2, c: 2, d: 1}

数组元素累加

arr.reduce( (a,b) => a+b)

对象数组按某个属性排序

实际上在于数组对象的sort方法 : Array.sort(callback)

let  cities = [
    {name:'西安市',value:100},
    {name:'威阳市',value:120},
    {name:'延安市',value:80},
    {name:'南洛市',value:90},
    {name:'榆林市',value:130}
]

function sortRule(a,b) {
    return a.value - b.value
}

cities.sort(sortRule)
console.log(cities);

打印结果如下

[
    {name: "延安市", value: 80},
	{name: "南洛市", value: 90},
 	{name: "西安市", value: 100},
	{name: "威阳市", value: 120},
	{name: "榆林市", value: 130}
]

若想不规定某个属性，而是指定任意属性

let  cities = [
    {name:'西安市',value:100},
    {name:'威阳市',value:120},
    {name:'延安市',value:80},
    {name:'南洛市',value:90},
    {name:'榆林市',value:130}
]

function sortRule(prop) {
    return function (a,b) {
        return a[prop] - b[prop]
    }
}

cities.sort(sortRule('value'))
console.log(cities);