数组对象与字符串对象

2023-11-01

1.数组对象

1.1什么是数组对象 

javaScrip中的数组对象可以使用new Array或字面量“[]”来创建,在创建以后,就可以调用数组对象提供的一些方法来实现对数组额度操作了。数组对象用于在单个变量中存储多个值,JavaScript的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组。
 

 1.2数组类型检测

示例代码: 

var arr = [];
var obj = {};
// 第一种方式
console.log(arr instanceof Array);//输出结果:true
console.log(arr instanceof Array);//输出结果:false
// 第二种方式
console.log(Array.isArray(arr));//输出结果:true
console.log(Array.isArray(obj));//输出结果:false

  1.3添加或删除数组元素

方法:

方法名
功能描述
返回值
push( 参数
1…)
数组末尾添加一个或多个元素,会 修改原数组
返回数组的新长
unshift( 参数
1…)
数组开头添加一个或多个元素 ( 把数组长度 -1 ,无参数 ) ,会
修改原数组
返回数组的新长
pop()
删除数组的最后一个元素,若是空数组则返回 undefifined
修改原数组
返回删除的元素
的值
shift()
删除数组的第一个元素,若是空数组则返回 undefifined ,会
修改原数组
返回第一个元素
的值

 示例代码:

// push
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是数组长度 输出结果为:5
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white', 'yellow',
'red']
// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是数组长度 输出结果为:6
console.log(arr);// 修改了原来的数组 输出结果为['red', 'blue', 'pink', 'black',
'white', 'yellow']
// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是删除的元素 输出结果为:yellow
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']
// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是删除的元素(第一个) 输出结果为:pink
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']

 注意:push()unshift()方法的返回值是新数组的长度,而pop()shift()方法返回的是移出的数组元素

案例 :筛选数组

案例需求:要求在包含工资的数组中,剔除工资达到2000或以上的数据,把小于2000的数重新放 到新的数组里面。

示例代码: 

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);// 相当于:newArr[newArr.length] = arr[i];
}
}
console.log(newArr);

1.4 数组排序

方法: 

方法
功能描述
reverse()
颠倒数组中元素的位置,该方法会改变原数组,返回新数组
sort()
对数组的元素进行排序,该方法会改变原数组,返回新数组

示例代码: 

// reverse
var arr = ['red', 'blue', 'green']
console.log(arr.reverse());//输出的结果为:['green', 'blue', 'red']
console.log(arr);// 改变原数组['green', 'blue', 'red']
// sort: 如果调用该方法时没有使用参数,按照字符编码的顺序进行排序。
var arr1 = [1, 4, 5, 6, 73, 32, 22, 15];
// 不传参数的情况
console.log(arr1.sort());//输出的结果为:[1, 15, 22, 32, 4, 5, 6, 73]
// 传参数:参数是用来指定按某种顺序进行排列的函数
/*
即 a 和 b 是两个将要被比较的元素:
*/
arr1.sort(function (a, b) {
// return b - a;//降序 // [73, 32, 22, 15, 6, 5, 4, 1]
return a - b;//升序 // [1, 4, 5, 6, 15, 22, 32, 73]
})
console.log(arr1);

 

1.5数组索引 

 方法:

方法
功能描述
indexOf()
返回在数组中可以找到给定值的第一个索引,如果不存在,则返回 -1
lastIndexOf()
返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1

示例代码:

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 输出结果为: 1
// 找到第二个bison的索引
console.log(beasts.indexOf('bison', 2));
// 输出结果为: 4
console.log(beasts.indexOf('giraffe'));
// 输出结果为: -1
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// 输出结果为: 3
console.log(animals.lastIndexOf('Tiger'));
// 输出结果为: 1

 注意:默认都是从指定数组索引的位置开始检索,并且检索方式与运算符“===”相同,即只有全等时才会 返回比较成功的结果。

案例: 数组去除重复元素

示例代码: 

// 声明数组
function unique(arr) {
    var newArr = [];
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 判断新数组中是否有原数组中的元素
        // indexOf 结果为-1表示没有该元素
        if (newArr.indexOf(arr[i]) === -1) {
            // 没有的话就把该元素push到新数组中
            newArr.push(arr[i])
        }
    }
    return newArr;
}
// 调用数组
var res = unique([1, 2, 3, 4, 3, 2])
console.log(res);

1.6数组转换字符串 

方法:

方法
功能描述
toString()
把数组转换为字符串,逗号分隔每一项
join(' 分隔符 ')
将数组的所有元素连接到一个字符串中

示例代码: 

// toString
var arr = ['a', 'b', 'c']
console.log(arr.toString());// 输出结果为:a,b,c
// join
console.log(arr.join());// 输出结果为:a,b,c
console.log(arr.join(''));// 输出结果为:abc
console.log(arr.join('-'));// 输出结果为:a-b-c

其他方法: 

方法: 

方法
功能描述
fifill()
用一个固定值填充数组中指定下标范围内的全部元素
splice()
通过删除或替换现有元素或者原地添加新的元素来修改数组, 返回被删除项目的新数
slice()
数组截取,参数为 slice(begin, end) ,包含 begin ,但不包含 end 返回被截取项目 的新数组
concat()
连接两个或多个数组,不影响原数组, 返回一个新数组

注意: slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后 皆会对原数组产生影响。

示例代码:

//fill
        const array1 = [1, 2, 3, 4];
        console.log(array1.fill(0, 2, 4));        
        console.log(array1.fill(5, 1));
        console.log(array1.fill(6));   
        //splice
        const months = ['Jan', 'March', 'April', 'June'];
        months.splice(1, 0, 'Feb');
        console.log(months);
        months.splice(4, 1, 'May');
        console.log(months);
        //slice
        const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        console.log(animals.slice(2));
        console.log(animals.slice(2, 4));
        console.log(animals.slice(1, 5));
        console.log(animals.slice(-2));
        console.log(animals.slice(2, -1));
        console.log(animals.slice()); 
        //concat
        const array11 = ['a', 'b', 'c'];
        const array2 = ['d', 'e', 'f'];
        const array3 = array11.concat(array2);
        console.log(array3);

 

 2.字符串对象

什么是字符串对象 :

字符串对象使用new String()来创建,在String构造函数中传入字符串,这样就会在返回的字符串对象中保存这个字符串。字符串对于保存以文本形式表示的数据很有用。一些最常用的字符串操作是检查他们的长度,使用+和+=字符串操作符构建和连接它们,使用indexOf()方法检查子字符串的存在或者位置,或使用?>substring()方法提取子字符串。

 语法:

var str = new String('送你一朵小红花')
console.log(str)
console.log(str.length);//输出结果为:7
// 看不到常见的属性和方法
var str1 = '送你一朵小红花'
console.log(str1)

2.1根据字符返回位置 

方法:

方法
功能描述
indexOf(‘ 要查找
的值 ,开始的位
)
返回指定内容在原字符串中的位置, 如果找不到就返回 -1 ;开始的位置是
index 索引号;
参数 2 可选,规定在字符串中开始检索的位置。它的合法取值是 0 string
Object.length - 1 。如省略该参数,则将从字符串的首字符开始检索。
lastIndexOf(‘
查找的值 ,开始
的位置 )
从后往前找,只找第一个匹配的,如果没有找到匹配字符串则返回 -1
参数 2 可选,规定在字符串中开始检索的位置。它的合法取值是 0
stringObject.length - 1 。如省略该参数,则将从字符串的最后一个字符处开
始检索。

示例代码:

// indexOf:参数1:要搜索的子字符串;参数2:可选
var str = new String('送你一朵小红花,送你一朵小红花');
// 查找 花 首次出现的位置
var res = str.indexOf('花');
// 查找 花 从第七个位置查找 花 ,第一次出现的位置
var res2 = str.indexOf('花', 7);
console.log(str);
console.log(str.length);//7
console.log(res);//输出结果:6
console.log(res2);//输出结果:14
// lastIndexOf:参数1:要搜索的子字符串;参数2:可选
var str1 = new String('to be or not to be');
// 查找 e 从最后一个字符开始,第一次出现的位置
var res1 = str1.lastIndexOf('e');
// 查找 e 从第8个位置开始倒数,第一次出现的位置
var res3 = str1.lastIndexOf('e', 8);
console.log(str1);
console.log(str1.length);//15
console.log(res1);//输出结果:17
console.log(res3);//输出结果:4

注意 :indexOflastIndexOf都区分大小写

案例: 

案例需求: 要求在一组字符串中,找到所有指定元素出现的位置以及次数。字符串为 ' Hello
World, Hello JavaScript '

示例代码:

var str = new String('To be, or not to be, that is the question.');
var index = str.indexOf('e');
console.log(index);// 输出e出现的位置,此处输出结果为:4(首次出现)
var num = 0;
while (index != -1) {// index !=-1 表示可以找到o的时候
console.log(index);// 输出e出现的位置,此处输出结果为:4 18 31 35
index = str.indexOf('e', index + 1);//indexOf('要查找的对象',位置)
// 从第一次出现的位置,之后开始查找,再赋值给index;
num++;
}
console.log('e出现的次数是:' + num)

5.2根据位置返回字符 

方法:

成员
作用
charAt(index)
获取 index 位置的字符,位置从 0 开始计算
charCodeAt(index)
获取 index 位置的字符的 ASCII
str[index]
获取指定位置处的字符( HTML5 新增)和 charAt 等效

示例代码:

var str = 'andy';
// 获取index位置的字符
console.log(str.charAt(0));//输出的结果为;a
// 获取index位置的字符的ASCII码
console.log(str.charCodeAt(0));//输出结果为:97(a的ASCII码是97)
for (var i = 0; i < str.length; i++) {
// 获取指定位置处的字符
console.log(str[i]);
}

案例:统计出现最多的字符和次数 

案例需求:使用charAt()方法通过程序来统计字符串中出现最多的字符和次数

示例代码:

for (var i = 0; i < str.length; i++) {
// 3. 利用chars保存字符串中的每一个字符
var chars = str.charAt(i);
console.log(chars);
// 4. 利用对象的属性来方便查找元素
// obj[chars]获取对象的属性的属性值
if (obj[chars] != true) {//如果没有获取到当前字符串,值为undefined(转为布尔值为
false)
obj[chars] = 1;//给当前对象的属性对应的属性值赋值为1
} else {
obj[chars]++; //如果获取到了当前字符串,即对应的属性值+1
}
}
console.log(obj);
// 2. 统计出现最多的字母
var max = 0; // 保存出现次数最大值
var maxStr = ''; // 保存出现次数最多的字符
// 2.1 遍历对象的属性和方法
for (var key in obj) {
// 2.2 将对象中属性的值和max进行比较
if (obj[key] > max) {
max = obj[key];
maxStr = key
}
}
console.log('出现最多的字符是:' + maxStr + ' ,共出现了' + max + '次')

5.3 字符串操作方法

方法:

方法
作用
concat(str1, str2,str3…)
concat() 方法用于连接两个或多个字符串。拼接字符串,等效于 + + 更常用
该方法没有改变原有字符串,会返回连接两个或多个字符串新字符串。
slice(start,[end])
截取从 start 位置到 end (不包含 end )位置之间的一个子字符串 可提取字符串的某个
部分,并以的字符串返回被提取的部分
substring(start[,end])
截取从 start 位置到 end 位置之间的一个子字符串,基本和 slice 相同,但是不 接收负值
substr(start[,
length])
截取从 start 位置开始到 length 长度的子字符串
从起始索引号提取字符串中 指定数目 的字符
toLowerCase()
获取字符串的小写形式
toUpperCase()
获取字符串的大写形式
split([separator[,
limit])
使用 separator 分隔符将字符串分隔成数组, limit 用于限制数量 separator可选。 limit可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回 的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都 会被分割,不考虑它的长度。
replace(str1,
str2)
使用 str2 替换字符串中的 str1 ,返回替换结果, 只会替换第一个字符

示例代码:

var str = 'HelloWord';
// concat
var res = str.concat('!!');
console.log(res);//HelloWord!!
// slice
var res1 = str.slice(1, 5);
console.log(res1); //ello
// substring
var res2 = str.substring(3);//截取从下标为3开始,之后的内容
console.log(res2);//loWord
var res3 = str.substring(3, 7);//截取从下标为3开始,到7结束的内容(不包含7)
console.log(res3);//loWo
// substr
var res4 = str.substr(2, 5);
console.log(res4);//lloWo
// toLowerCase
var res5 = str.toLocaleLowerCase();
console.log(res5);//helloword
// toUpperCase
var res6 = str.toLocaleUpperCase();
console.log(res6);//HELLOWORD
// split
var str1 = 'How are you doing today?'
var res7 = str1.split(' ');
console.log(res7);// ['How', 'are', 'you', 'doing', 'today?']
var res8 = str1.split();
console.log(res8);//['How are you doing today?']
var res9 = str1.split(' ', 3);
console.log(res9);// ['How', 'are', 'you']
// replace
var res10 = str1.replace(' ', ',');
console.log(res10);//How,are you doing today?

案例: 判断用户名是否合法

案例需求: 用户名长度在 3~10 范围内,不能出现敏感词 admin 的任何大小写形式

示例代码:

var res = prompt('请您输入用户名')
if (res.length < 3 || res.length > 10) {
    alert('用户名长度为3—10位,请您重新输入')
} else if (res.toLocaleLowerCase().indexOf('admin') != -1 ||
res.toUpperCase().indexOf('admin') != -1) {
    alert('不能出现敏感词admin')
} else {
    alert('恭喜您,该用户名可以使用');
}

5.4值类型与引用类型 

示例代码:

var str = 'abc';
str = 'hello';
// 当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
// 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间 来 显示 因为需要不断的开辟新的空间

案例代码: 代码中的obj1obj2指向了同一个对象。

示例代码:

// 创建一个对象,并赋值给变量obj1
var obj1 = {
    name: '小明',
    age: 18
}
// 此时并没有复制对象,而是obj2和obj1两个变量引用了同一个对象
var obj2 = obj1;
// 比较两个变量是否引用同一个对象
console.log(obj2 === obj1); // 输出结果:true
// 通过obj2修改对象的属性
obj2.name = '小红';
// 通过obj1访问对象的name属性
console.log(obj1.name); // 输出结果:小红
上述代码运行后, obj1 obj2 两个变量引用了同一个对象,此时,无论是使用 obj1 操作对象还是使用
obj2 操作对象,实际操作的都是同一个对象。

 

obj1 obj2 两个变量指向了同一个对象后,如果给其中一个变量(如 obj1 )重新赋值为其他对象,或
者重新赋值为其他值,则 obj1 将不再引用原来的对象,但 obj2 仍然在引用原来的对象。
var obj1 = { name: '小明', age: 18 };
var obj2 = obj1;
// obj1指向了一个新创建的对象
obj1 = { name: '小红', age: 17 };
// obj2仍然指向原来的对象
console.log(obj2.name); // 输出结果:小明

注意: 当一个对象只被一个变量引用的时候,如果这个变量又被重新赋值,则该对象就会变成没有任何变 量引用的情况,这时候就会由JavaScript的垃圾回收机制自动释放。

function change(obj) {
obj.name = '小红'; // 在函数内修改了对象的属性
}
var stu = { name: '小明', age: 18 };
change(stu);
console.log(stu.name); // 输出结果:小红

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数组对象与字符串对象 的相关文章

  • Git技能树(3):Git使用

    Git技能树 3 Git使用 在开始 Git 的基础命令学习之前 我们先来认识一下版本库 Repository 接下来我们所有提到的 Git 基础命令 都是基于版本库的 那么什么是版本库呢 版本库又名仓库 英文名 repository 你可

随机推荐

  • mybatis-plus更新数据updateById返回false

    Packet byId ips getById 211l System out println byId Packet pa new Packet pa setId byId getId pa setStatus 1 pa setVersi
  • 霍夫投票直观理解

    霍夫投票法最典型的示例是二维图像中霍夫直线检测 过二维平面中的定点可以得到无数条直线 如果以顶点参数为做一条直线 即将这些直线变换到参数空间 那么这个定点对应参数空间中的一条直线 如果在参数空间中有两条直线相交于同一个点 那么说明对应的两个
  • Unity排行榜功能(使用MVC框架)

    要求 实现如图所示UI界面 按下某一按键实现排行榜的更新 M 数据模型类 主要负责数据 玩家的数据 public class RankModel 定义三个属性 姓名 分数 排名 定义构造函数 public string Name set g
  • 基于arduino下的巡线小车

    先发代码再进行解释吧 include
  • 《Head First HTML5 javascript》第10章 自定义对象

    2022 11 23 第10章 自定义对象 面向对象OOP Object Oriented Programming 对象是一个包含相关数据和方法的集合 通常由一些变量和函数组成 我们称之为对象里面的属性和方法 对象是存储在单个分组中的相关功
  • Git统计个人提交代码行数

    1 Git统计个人提交代码行数 git log format aN sort u while read name do echo en name t git log author name pretty tformat numstat aw
  • Windows系统文件快捷链接(软链接/硬链接/符号链接)mklink

    记录学习mklink 将大文件从c盘移出 快捷方式 软链接 硬链接 符号链接 快捷方式 常见文件链接方式 在Windows上以 lnk结尾的文件 这类文件通常用于指定某一个文件或某一个目录的位置 可扩展性很强 桌面快捷方式就是这类了 软链接
  • Ubuntu Openvino(YOLOV5)加载训练好的模型 xml onnx bin

    使用 Openvino 对自己训练好的模型yolov5 pt gt IR 进行推理 环境需求 Ubuntu 系统 20 04 vscode 编辑器 python3 Openvino 环境 priority 关键为 export 导出的修改
  • Libvirt简介

    Libvirt 是一个函数库 包含实现Linux虚拟化功能的linux API 提供了管理虚拟机的稳定的 统一的接口 其主要包括Libvirt API Libvirtd进程和virsh工具集三个部分 架构说明 用户程序 程序 virsh工具
  • Flutter基础(手势检测GestureDetector)-二

    import package flutter material dart void main runApp new MaterialApp title flutter质感设计 home new MyButton class MyButton
  • 核工业物理研究院九院三所

    1 流体物理研究所 一所 高能量密度流体力学过程 爆轰压缩 凝聚态 辐射流体力学等 可以说包括了核武器设计的基础理论部分和核试验 亚临界试验等的试验数据采集分析 2 核物理与化学研究所 二所 核物理 放射化学 核过程等 就是核反应堆技术 核
  • mongo 常用的命令

    一个mongod服务可以有建立多个数据库 每个数据库可以有多张表 这里的表名叫collection 每个collection可以存放多个文档 document 每个文档都以BSON binary json 的形式存放于硬盘中 因此可以存储比
  • 虚拟网络无法连接本机网络(Xshell无法连接虚拟机)

    Xshell无法连接虚拟机 类似于 Could not connect to 192 168 0 128 port 22 Connection failed 在很多博客中也看到过许多解决方法 例如 安装sshd的客户端 服务端 给sshd的
  • 华为mate30老是显示无法连接服务器,华为Mate30 Pro手机微信信息老是发不出,提示无法连接到网络...

    华为Mate30 Pro手机的微信信息老是发不出 并且在接收微信消息的有延迟 信号满格 时常提示无法连接到网络 微信时常半天发不出 发个东西转半天 接收也经常延迟几分钟才收到提醒 这是什么鬼手机啊 别人发来消息 一来就是好多条 还有十来分钟
  • priorityQueue优先级队列 (python、c++)

    优先级队列 优先级队列 python C 最近用优先队列写了一个SNIC超像素分割的工程 有兴趣的可以下载看看 VIP大佬让我赚一点下载积分吧 感激不尽 https download csdn net download koffee f 1
  • 2023天一永安杯部分wp

    web Query 布尔盲注 import requests import string dictionary string digits string ascii letters url http cd5a2660b462c867 nod
  • linux 开启curl命令,如何启用curl命令HTTP2支持

    当我们直接使用 curl 去请求一个 https 页面时 默认可以看到其默认返回的是 HTTP1 1 的 response 现在使用 HTTP2 的网站越来越多 技术也越来越成熟 如何启用 curl 命令 HTTP 2 支持就成为了一个问题
  • 洛谷 B2043 判断能否被 3,5,7 整除 题解

    这一道题很简单 首先 要输入一个数x 之后将判断x分别是否能整除3 5 7 为了进行依次的判断 我们要使用for循环 for int i 3 i lt 7 i 2 i 3表示从3开始循环 之后i lt 7循环到7结束 由于整除的数为3 5
  • 安装tensorflow过程中的报错

    安装tensorflow后 测试安装是否成功 结果报错 SystemError
  • 数组对象与字符串对象

    1 数组对象 1 1什么是数组对象 javaScrip中的数组对象可以使用new Array或字面量 来创建 在创建以后 就可以调用数组对象提供的一些方法来实现对数组额度操作了 数组对象用于在单个变量中存储多个值 JavaScript的数组