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);

JavaScript 对象:String & Array 及其常见应用的更多相关文章

  1. JavaScript (六) js的基本语法 - - - Math 及 Date对象、String对象、Array对象

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Math 1.Math对象的案例 var result= Math.max(10,20,30,40) ...

  2. JS内置对象-String对象、Date日期对象、Array数组对象、Math对象

    一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...

  3. 详解Javascript中的Array对象

    基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

  4. JavaScript快速入门-ECMAScript本地对象(String)

    一.String对象 String对象和python中的字符串一样,也有很多方法,这些方法大概分为以下种类: 1.索引和查找 1.charAt()   返回指定位置的字符. 2.charCodeAt( ...

  5. JavaScript中String对象的match()、replace() 配合正则表达式使用

    正则表达式由来已久,查找替换功能非常强大,但模板难记复杂. JavaScript中String对象的match().replace()这2个方法都要使用正则表达式的模板.当模板内容与字符串不相匹配时, ...

  6. JavaScript 对象Array,Map,Set使用

    for(int i = 0 :i < 3 ;i++ ){ //[重点说三遍] 在说明每个对象的用法之前,首先说明 JavaScript 对象的使用一定要注意浏览器的兼容性问题!尤其是IE的版本! ...

  7. JavaScript:String 对象

    ylbtech-JavaScript:String 对象 1.返回顶部 String 对象 String 对象用于处理文本(字符串). 创建 String 对象的语法: new String(s); ...

  8. JavaScript 字符串(String)对象

    String 对象 String 对象用于处理文本(字符串). 创建 String 对象的语法: new String(s); String(s); 参数 参数 s 是要存储在 String 对象中或 ...

  9. javascript 对象初探 (四)--- 内建对象之旅之Array

     我们不要去纠结神马是内建对象,神马是內建构造器.到后来你们便会发现其实她们都是对象. Array()是一个构建数组的內建构造器函数: var arr = new Array(); 与下面的是等效的: ...

随机推荐

  1. [原创]配置php+nginx 时遇到的”file not found","access denied"奇怪问题的解决过程

    在centos 7中按照我的随笔转载文章"[转载]CentOS 下安装LEMP服务(Nginx.MariaDB/MySQL和PHP)"安装好后,结果无法显示phpinfo()信息, ...

  2. VMware vSphere 7 Update 3 下载

    请访问原文链接:https://sysin.org/blog/vmware-vsphere-7-u3/,查看最新版.原创作品,转载请保留出处. vSphere 7 Update 3 已经宣布可用,即将 ...

  3. ☠全套Java教程_Java基础入门教程,零基础小白自学Java必备教程👾#010 #第十单元 Scanner类、Random类 #

    一.本单元知识点概述 (Ⅰ)知识点概述 二.本单元教学目标 (Ⅰ)重点知识目标 1.API的使用2.Scanner类的使用步骤3.Random类的使用 (Ⅱ)能力目标 1.掌握API的使用步骤2.使用 ...

  4. Stream之高级函数

    上回文说到了有关Stream一些数学函数的用法.今天来说下Stream一些高级的函数用法,这些函数在日常工作中也是必不可少的,测试数据还是引用上一篇的数据. Map 这个方法我个人称之为转换函数,把一 ...

  5. Sentry 监控 - Snuba 数据中台架构(Data Model 简介)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  6. 10.11 HTTPS

    没有HTTPS的抓包截图 HTTPS=HTTP + TLS/SSL https 实现过程如下 1.客户端发起HTTPS请求 rewrite www.baidu.com https://www.baid ...

  7. Go的Select

    Go 的通道有两种操作方式,一种是带 range 子句的 for 语句,另一种则是 select 语句,它是专门为了操作通道而存在的.这里主要介绍 select 的用法. 一.select的语法 se ...

  8. Azure Devops实践(5)- 构建springboot项目打包docker镜像及容器化部署

    使用Azure Devops构建java springboot项目,创建镜像并容器化部署 1.创建一个springboot项目,我用现有的项目 目录结构如下,使用provider项目 在根目录下添加D ...

  9. leetcode 5/300 最长回文子串 py

    目录 题目说明 方法一:动态规划--状态转移方程 方法二:优化中心扩展算法 题目说明 要看明白求得是什么,最长回文字串是指例如cababa中ababa是最长的,不是求回文的部分aba 方法一:动态规划 ...

  10. Java:Object对象小记

    Java:Object对象小记 对 Java 中的 Object 对象,做一个微不足道的小小小小记 Object 的常用方法有哪些 clone() 方法:用于创建并返回当前对象的一份拷贝: 在Java ...