数组对象数组对象,字符串对象的使用以及值类型的介绍

数组对象,字符串对象的使用以及值类型的介绍

数组对象

当我们在使用JavaScript编写代码时,数组是我们最常用的数据类型之一。数组是一种有序的集合,可以存储多个值。在JavaScript中,数组是一种特殊的对象,它可以存储任何类型的数据,并且可以使用许多有用的方法来操作和管理数组数据。

数组类型检测

在开放中时常需要检测变量的类型是否为数组类型,那么可以用instanceof来实现

var arr = [];
var obj = [];
//第一种instanceof
console.log(arr instanceof Array);//true
console.log(obj instanceof Array);//false
//第二种Array.isArray()
console.log(Array.isArray(arr));//true
console.log(Array.isArray(obj));//false

下面是一些常见的JavaScript数组方法,这些方法可以更好地管理和操作数组数据

1.push()方法

push()方法可以向数组的末尾添加一个或多个元素。例如:

var fruits = ['apple', 'banana'];
fruits.push('orange', 'grape');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape']
2.pop()方法

pop()方法可以从数组的末尾删除一个元素,并返回该元素的值。例如:

var fruits = ['apple', 'banana', 'orange'];
var lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']
3.shift()方法

shift()方法可以从数组的开头删除一个元素,并返回该元素的值。例如:

var fruits = ['apple', 'banana', 'orange'];
var firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits); // ['banana', 'orange']
4.unshift()方法

unshift()方法可以向数组的开头添加一个或多个元素。例如:

var fruits = ['apple', 'banana'];
fruits.unshift('orange', 'grape');
console.log(fruits); // ['orange', 'grape', 'apple', 'banana']
案例:筛选数组
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])
    }
}
console.log(newArr);//[1500,1200,1800]
5.reverse()方法

颠倒数组中元素的位置,该方法会改变原数组,返回新数组

var arr = ['pink','black','white','yellow'] 
console.log(arr.reverse());//(4) ['yellow', 'white', 'black', 'pink']
6.sort()方法

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

// sort: 如果调用该方法时没有使用参数,按照字符编码的顺序进行排序.
var arr1 = [1,4,7,9,3,23,7,3,45,34] 
//不传参数
console.log(arr1.sort());//(10) [1, 23, 3, 3, 34, 4, 45, 7, 7, 9]
//传参数: 参数是用来指定按某种顺序进行排列的函数
var arr2 = [1,4,7,9,3,23,7,3,45,34]
arr2.sort(function(a,b){
return b-a;//降序
    //a - b升序
});
console.log(arr2);//(10) [45, 34, 23, 9, 7, 7, 4, 3, 3, 1]
7.indexOf()方法

indexOf()方法可以在数组中查找指定元素的索引,并返回该索引。如果数组中不存在该元素,则返回-1。

lastlndexOf)返回指定元素在数组中的最后一个的索引,如果不存在则返回-1

例如:

var arr = ['pink','black','white','yellow','pink']
console.log(arr.indexOf('pink'));//0
console.log(arr.indexOf('pink',2));//从第二个元素开始查找,4
console.log(arr.indexOf('red'));//-1
console.log(arr.lastIndexOf("white"));//2

案例:数组去重
function unique(arr){
	var newArr = [];
	for (var i = 0;i < arr.length;i++){
		if(newArr.indexOf(arr[i]) === -1){
			newArr.push(arr[i])
		}
	}
	return newArr
}
var res = unique([1,2,3,4,3,4])
console.log(res);//(4) [1, 2, 3, 4]

8.将数组转换成字符串
toString(),把数组转换为字符串,逗号分隔每一项
join(分隔符’),将数组的所有元素连接到一个字符串中
var arr = ['a','b','c']
console.log(arr.tostring());//a,b,c

console.log(arr.join());//a,b,c
//如果 separator 是空字符串 (") ,则所有元素之间都没有任何字符
console.log(arr.join(''));//abc
//将分隔符转换为字符串()小括号里面填写的是指定的分隔符
console.log(arr.join('-'));//a-b-c

字符串对象

JavaScript中的字符串是一种基本数据类型,它们可以使用一系列内置的字符串对象方法来操作和处理。在本篇博客中,我们将探讨一些常用的字符串对象方法以及它们的用途。

创建字符串对象

var str = new string('hello world')
var str1 = "hello world"
console.log(str)//hello world
console.log(str1)//hello world
1.length()

返回字符串的长度。例如:

var str = "Hello World!";
var length = str.length;
console.log(length); // 输出:12
2.indexOf()

返回字符串中指定字符或子字符串的第一个匹配项的位置。如果未找到匹配项,则返回-1。例如:

var str = "Hello World!";
var position = str.indexOf("World");
console.log(position); // 输出:6
3.lastIndexOf()

返回字符串中指定字符或子字符串的最后一个匹配项的位置。例如:

var str = "Hello World!";
var position = str.lastIndexOf("l");
console.log(position); // 输出:9
4.charAt(index)

获取index位置的字符,位置从0开始计算

var str = 'Apple';
console.log(str.charAt(3))//l
5.charCodeAt(index)

获取index位置的字符的ASCII码

var str = 'Apple';
console.log(str.charCodeAt(0))//65
6.str[index]

获取指定位置处的字符 (HTML5新增)和charAt等效

var str = 'Apple';
console.log(str[0])//A
案例:统计出现最多的字符和次数
var str = 'abcoefoxyozzopp';
var obj = {};
for (var i = 0; i < str.length; i++) {
    var chars = str[i];
    if (obj[chars]) { //判断obj对象中是否有str[i]属性
        obj[chars]++; //obj[chars]得到的是属性值
    } else {
        obj[chars] = 1;
    }
}
console.log(obj);
//遍历对象
var max = 0;
var ch = '';
for (var k in obj) { //k 得到的是属性名,obj[k]得到的是属性值
    if (obj[k] > max) {
        max = obj[k];
        ch = k;
    }
}
console.log(ch + '出现次数最多' + '次数为:' + max);//o出现次数最多次数为:4
7.concat()

可以连接多个字符串

var str = 'hello world';
console.log(str.concat('!'))//hello world!
8.slice()

从字符串中提取指定的子字符串。可以使用两个参数来指定要提取的子字符串的起始位置和结束位置。例如:

var str = "Hello World!";
var subStr = str.slice(6, 11);
console.log(subStr); //World
9.substring()

slice()方法类似,也是从字符串中提取指定的子字符串。但是,substring()方法不支持负数索引。例如:

var str = "Hello World!";
var subStr = str.substring(6, 11);
console.log(subStr); //World
10.substr()

从字符串中提取指定长度的子字符串。可以使用两个参数来指定要提取的子字符串的起始位置和长度。例如:

var str = "Hello World!";
var subStr = str.substr(6, 5);
console.log(subStr); //World
11.replace()

替换字符串中指定的字符或子字符串。可以使用两个参数来指定要替换的字符或子字符串和要替换成的字符或子字符串。例如:

var str = "Hello World!";
var newStr = str.replace("World", "JavaScript");
console.log(newStr); //Hello JavaScript!
12.toUpperCase()

将字符串中的所有字符转换为大写。例如:

var str = "Hello World!";
var upperStr = str.toUpperCase();
console.log(upperStr); // 输出:HELLO WORLD!
13.toLowerCase()

将字符串中的所有字符转换为小写。例如:

var str = "Hello World!";
var lowerStr = str.toLowerCase();
console.log(lowerStr); // 输出:hello world!
案例: 判断用户名是否合法
var name = prompt('请您输入用户名');
if (name.length < 3 || name.length > 10) {
    alert('用户名长度为3-10位,请您重新输入');
} else if (name.toLowerCase().indexOf('admin') !== -1) {
    alert('不能出现敏感词admin');
} else {
    alert('恭喜您,该用户名可以使用');
}

值类型和引用类型。

JavaScript 中的数据类型可以分为两种:值类型和引用类型。

值类型: 简单数据类型(如字符串型、数字型、布尔型、undefined、null)又称为值类型,在存储时,变量中存储的是值本身,因此叫做值类型

引用类型: 变量中保存的仅仅是一个引用的地址,当对变量进行赋值时,并不是将对象复制了一份,而是将两个变量指向了同一个对象的引用。

var obj1 = { name:'小明' ,age: 18};
//此时没有复制对象,而是obj2和obj1两个变量引用了同一个对象
var obj2 = obj1;
obj2,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)//小红

= obj1;
// obj1指向了一个新创建的对象
obj1 = { name: ‘小红’, age: 17 };
// obj2仍然指向原来的对象
console.log(obj2.name); //小明


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

如果在函数的参数中修改对象的属性或方法,则在函数外面通过引用这个对象的变量访问时的结果也是修改后的。

```js
function change(obj){
	obj.name = '小红';
}
var stu = {name:'小明',age: 18};
change(stu);
console.log(stu.name)//小红
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值