数组、字符串对象及值类型与引用类型的使用

数组、字符串对象及值类型与引用类型的使用

数组对象

一、数组类型检测

在开发中，有时候需要检测变量的类型是否为数组。例如，在函数中，要求传入的参数必须是一个数组，不能传人其他类型的值，否则会出错，所以这时候可以在函数中检测参数的类型是否为数组。

数组类型检测方法

1、instanceof运算符

2、Array.isArray()方法

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

在上述代码中,如果检测结果为ture,表示给定的变量是一个数组,如果检测结果为false,表示给定的变量不是一个数组

二、添加或删除数组元素

JavaScript数组对象提供了添加或删除元素的方法，可以实现在数组的末尾或开头添加新的数组元素，或在数组的末尾或开头移出数组元素。

添加或删除数组元素

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

<script>
var arr = ['Rose', 'Lily']; 
console.log('原数组:'+ arr);
var last=arr.pop();
console.log(在末尾移出元素:'+last+'-移出后数组:+arr); 
var len-arr.push('Tulip','Jasmine');
console.log(在末尾添加元素后长度变为:'+len+'-添加后数组:'+ arr);
var first = arr.shift();
console.log('在开头移出元素:'+first+'-移出后数组:'+ arr); 
len = arr.unshift('Balsam','sunflower') ;
console.log('在开头添加元素后长度变为:'+len+'-添加后数组:'+arr);
</script>

从上述代码可以看出，push()和 unshift()方法可以为指定数组在末尾或开头添加一个或多个元素，而pop()和shift()方法则只能移出并返回指定数组在末尾或开头的一个元素。

三、【案例】筛选数组

要求：

在包含工资的数组中，剔除工资达到 2000 或以上的数据，把小于 2000的数重新放到新的数组里面。其中数组为 [1500,1200，2000,2100,1800]。

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

四、数组排序

JavaScript数组对象提供了数组排序的方法，可以实现数组元素排序或者颠倒数组元素的顺序等。

排序方法

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

需要注意的是，reverse()和sort()方法的返回值是新数组的长度。

//反转数组
var arr=['red','green','blue'];
        arr.reverse();
        console.log(arr);
//数组排序
var arr=[1,5,52,6,12]
        arr.sort(function(a,b){
            return b-a;
        });
        console.log(arr)

五、数组索引

在开发中，若要查找指定的元素在数组中的位置，可以利用Array对象提供的检索方法

检索方法

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

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

var arr = ['red', 'green', 'blue', 'pink', 'blue']; 
console.log(arr.indexOf('blue')); // 输出结果:2 
console.log(arr.lastIndexOf('blue')); // 输出结果:4

上述代码中，lastIndexOf0)方法用于在数组中从指定下标位置检索到最后一个给定值的下标。与indexOf(检索方式不同的是，lastIndexOf0方法默认逆向检索，即从数组的末尾向数组的开头检索。

六、【案例】数组去除重复元素

要求：

在一组数据中，去除重复的元素，其中数组为[‘blue’,‘green’,‘blue’]

// 声明数组
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);

七、数组转换为字符串

在开发中，可以利用数组对象的joio（）和toString（）方法将数组转换为字符串。

数组转换为字符串

方法名	功能描述
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

从上述代码可知，join()和toString0方法可将多维数组转为字符串，默认情况下使用逗号连接。不同的是，join()方法可以指定连接数组元素的符号。另外，当数组元素为 undefined、 null 或空数组时，对应的元素会被转换为空字符串。

八、其他方法

方法名	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	数组删除，参数为splice(第几个开始，要删除个数)，返回被删除项目的新数组
slice()	数组截取，参数为slice(begin, end),返回被截取项目的新数组\nconcat（）
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

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

var arr =['sky','wind', 'snow', 'sun'];
//从索引为2的位置开始，删除2个元素 
arr.splice(2，2);
console.log(arr); // 输出结果:(2) ["sky","wind"] 
//从索引为1的位置开始，删除1个元素后，再添加snow元素 
arr.splice(1,1,'snow');
console.log(arr); //输出结果:(2)["sky"，"snow"] 
//从索引为1的位置开始，添加数组元素 
arr.splice(1, 0,'hail','sun');
console.log(arr); //输出结果:(4) ["sky","hail","sun","snow"]

在上述代码中，splice0方法的第1个参数用于指定添加或删除的下标位置;第2个参数用于从指定下标位置开始，删除数组元素的个数，将其设置为0，则表示该方法只添加元素;剩余的参数表示要添加的数组元素，若省略则表示删除元素。

字符串对象

一、字符串对象的使用

字符串对象使用new String()来创建

var str=new String('apple');
// 创建字符串对象
console.log(str);
// 输出结果:String {"apple")
console.log(str.length);
//获取字符串长度，输出结果:5

可以使用“字符串变量length”的方式进行获即这种方式很像是在访问一个对象的length 属性

var str='apple';
console.log(str.length);
// 输出结果:5

字符串在JavaScriptJavScipt本包装类型包括 String、Number 和Boolean本数据类型包装成为复杂数据类型，从而使基本数据型也有了属性和方法。
需要注意的是，虽然JavaScript 基本包装类型的机制可以使普通变量也能像对象一样访问属性和方法，但它们并不属于对象类型

var obj=newString('Hello');
console.log(typeofobj); // 输出结果:object 
console.log(obj instanceof String); // 输出结果:true 
varstr='Hello';
console.log(typeof str); // 输出结果:string
console.log(str instanceof String); //输出 果:false

二、根据字符返回位置

字符串对象提供了用于检索元素的属性和方法

方法	作用
indexOf(‘ 要查找 的值’， 开始的位 置)	获取searchValue在字符串中首次出现的位置
lastIndexOf(‘ 要 查找的值’ ，开始 的位置)	获取searchValue在字符串中最后出现的位置

var str='HelloWorld';
str.indexOf('o'); //获取"o"在字符串中首次出现的位置，返回结果:4 
str.lastIndexOf('o'); //获取"o"在字符串中最后出现的位置， 返回结果:6

通过返回结果可以看出，位置从0开始计算，字符串第一个字符的位置是0，第符为1，一字符的位置是字符串的长度减1。

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

var str s 'Hello World, Hello JavaScript';
var index-str.indexOf('o');
var num =0;
while (index!=-1) {
	console.log(index); //依次输出:4、7、17 
	index = str.indexOf('o", index + 1);
	num++;
}
console.log('o出现的次数是:'+num)//o出现的次数是:3

字符串中的空格也会被当作一个字符来处理。

三、根据位置返回字符

字符串对象提供了用于获取字符串中的某一个字符的方法

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

var str='Apple';
console.log(str.charAt(3)); // 输出结果:1 
console.log(str.charCodeAt(0)); //输出结果:65(字符A的ASCII码为65) 
console.log(str[0]); //输出结果:A

四、【案例】统计出现最多的字符和次数

要求：

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

var str='Apple';
//第1步，统计每个字符的出现次数 
var o = {};
for (var i = 0; i<str.length; i++) {
	var chars = str.charAt(i); //利用chars保存字符串中的每一个字符 
	if(o[chars]) {//利用对象的属性来方便查找元素
	o[chars]++; 
    } else { 
		o[chars] = 1;
}
}
console.log(o);			// 输出结果:{A:1，p:2，1:1，e:1}
var max =0;				//保存出现次数最大值
var ch='';			//保存出现次数最多的字符
for (var k in o) {
	if (o[k] >max){ 
		max=o[k]; 
        ch =k; 
	}
}
//输出结果:"出现最多的字符是:p，共出现了2次"
console.log('出现最多的字符是:'+ch+'，共出现了'+max+'次');

五、字符串操作方法

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。

字符串对象的常用属性和方法

成员	作用
concat(str1, str2, str3…)	链接多个字符串
slice(start,[end])	截取从 start 位置到 end （不包含 end ）位置之间的一个子字符串可提取字符串的某个部分，并以新的字符串返回被提取的部分
substring(start,[end])	截取从 start 位置到 end 位置之间的一个子字符串，基本和 slice 相同，但是不 接收负值
substr(start,[length])	截取从 start 位置开始到 length 长度的子字符串,从起始索引号提取字符串中 指定数目 的字符
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串的大写形式
split([separator[,limit])	使用 separator 分隔符将字符串分隔成数组， limit 用于限制数量
replace(str1,str2)	使用 str2 替换字符串中的 str1 ，返回替换结果， 只会替换第一个字符

var str='HelloWorld';//在字符串末尾拼接字符，结果:HelloWorld!
str.concat('!');
str.slice(1,3); //截取从位置1开始到位置3范围内的内容，结果:el 
str.substring(5); //截取从位置5开始到最后的内容，结果:World 
str.substring(5,7); //截取从位置5开始到位置7范围内的内容，结果:Wo 
str.substr(5); //截取从位置5开始到字符串结尾的内容，结果:World 
str.substring(5,7); //截取从位置5开始到位置7范围内的内容，结果:Wo 
str.toLowerCase(); // 将字符串转换为小写，结果:helloworld 
str.toUpperCase(); //将字符串转换为大写，结果:HELLOWORLD 
str.split('l'); //使用"1"切割字符串，结果:["He"，""，"oWor","d"] 
str.split('l',3); //限制最多切割3次，结果:["He"，""，"oWor"] 
str.replace('World'，'!'); // 替换字符串，结果:"Hello!"

六、【案例】判断用户名是否合法

需求：

用户名长度在 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('恭喜您，该用户名可以使用');
}

值类型和引用类型

在 JavaScript 中，简单数据类型（如字符串型、数字型、布尔型、 undefifined 、 null ）又称为 值类 型 ，在存储时，变量中存储的是值本身，因此叫做值类型。
复杂数据类型（对象）又称为 引用类型 。
引用类型的特点是，变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象
复制了一份，而是将两个变量指向了同一个对象的引用。

// 创建一个对象，并赋值给变量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); // 输出结果：小红

练习:

var url = ’ http://www.martinhan.com/login?name=zs&age=18 ';

var url = 'http://www.martinhan.com/login?name=zs&age=18';
function getParams(url) {
var index = url.indexOf('?') + 1;
var params = url.substr(index);
console.log(params); // name=zs&age=18
var arr = params.split('&');
var o = {};
for (var i = 0; i < arr.length; i++) {
var newArr = arr[i].split('=');
o[newArr[0]] = newArr[1];
}
return o;
}
console.log(getParams(url));