JavaScript 数组方法和字符串方法以及处理网址的练习

1. 数组对象

1.1 数组类型检测

        数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用 Array.isArray() 方法。

示例代码:

var arr = [];
var obj = {};
//第一种方式
console.log(arr instanceof Array);
console.log(obj instanceof Array);
//第二种方式
console.log(Array.isArray(arr));
console.log (Array. isArray(obj));

1.2 添加或删除数组元素

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

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

示例代码：

// push
var arr = ['pink ' , 'b1ack ', 'white', 'ye11ow']
console.log(arr.push( ' red '));
console.log(arr);
//unshift
var arr = ['pink ' , ' black ' ,'white', 'ye1low']
console.log(arr.unshift(' red', 'blue '));
console.log(arr);
//pop
var arr = ['pink ', 'b1ack ' , 'white', 'ye11ow']
console.log(arr. pop();
console.log(arr);
//shift
var arr = ['pink ', 'b1ack' , 'white', 'ye11ow ']
console.log(arr.shift();
console.log(arr);

注意: push() 和 unshift() 方法的返回值是新数组的长度，而 pop() 和 shift() 方法返回的是移出的数组元素。
1.3 案例:筛选数组
        案例需求:要求在包含工资的数组中，剔除工资达到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]);
    }
}
console.log (newArr);

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

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

 示例代码：

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

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

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

示例代码：

//indexOf
//--参数1:要查找的元素--参数2:开始查找的位置
//--注意:如果第二个参数是-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。
var beasts =['ant ', 'bison','came1', 'duck ', 'bison '];
console.log(beasts.indexof('bison' ));
//找到第二个bison的索引
console.log(beasts.indexof( ' bison',2));
console.1og(beasts .indexof( 'giraffe'));
//lastlndexOf()
//--如果该值大于或等于数组的长度，则整个数组会被查找。
//--如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。--如果该值为负时，其绝对值大于数组长度，则方法返回-1，即数组不会被查找。
var animals = [' Dodo', 'Tiger',' Penguin', 'Dodo'];
console.log(animals .1astIndexof( ' Dodo ' ));
console.log(animals. lastIndexof( 'Tiger'));

注意: 默认都是从指定数组索引的位置开始检索，并且检索方式与运算符"==="相同，即只有全等时
才会返回比较成功的结果。
1.6 案例: 数组去重
        案例需求:要求在一组数据中，去除重复的元素

//声明数组
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.7 数组转换为字符串
        在开发中，可以利用数组对象的 join() 和 toString() 方法，将数组转换为字符串。方法如下:

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

示例代码:

//tostring
var arr = ['a', 'b','c']
console.1og(arr.toString();

//join
//--参数可选:指定一个字符串来分隔数组的每个元素
//--如果需要，将分隔符转换为字符串()小括号里面填写的是指定的分隔符
//--如果省略，数组元素用逗号(,）分隔。
//--如果separator是空字符串("),则所有元素之间都没有任何字符
console.log(arr.join());
console.log(arr.join(''));
console.log(arr.join( '-'));

1.8 其他方法
        JavaScript 还提供了很多其他常用的数组方法。例如，填充数组、连接数组、截取数组元素等。
方法如下:

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

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

示例代码：

//fill
//--参数:value start end
//-- value:用来填充数组元素的值
//-- start:基于零的索引，从此开始填充，转换为整数。
//-- end:基于零的索引，在此结束填充转换为整数。fill()填充到但不包含end索引。
var array1 = [1,2,3,4];
//填充0,从数组索引2(包含)开始到4(不包含)结束
console.1og(array1.fi17(0,2,4));
//填充5,从数组索引1(包含)开始
console.log(array1.fi71(5,1));
//填充6
console.log(array1.fi11(6));

//splice
//参数:start deleteCount item1...
//-- start:执行修改的开始位置(从0计数）
//-- deleteCount:整数,表示要移除的数组元素的个数
//-- item1:要添加进去数组的元素
//从索引2的位置开始删除0个元素，插入“小红”
var myFish =["小米","小明","小张","小李"];
var removed = myFish.splice(2,0,"小红");
console. 1og(myFish);
console.log (removed);
//从索引2的位置开始删除0个元素插入“小刚”和"小蔡"
var myFish =["小米","小明","小张","小李"];
var removed = myFish.splice(2,0,'小刚','小蔡');
console.log(myFish);
console.log (removed);
//从索引3的位置开始删除1个元素
var myFish =["小米","小明","小刚","小蔡","小张","小李"];
var removed = myFish. splice(3，1);
console.1og(myFish);
console.1og(removed);
//从索引2的位置开始删除1个元素插入“小兰”
var myFish =["小米","小明","小刚","小蔡","小张","小李"];
var removed = myFish. splice(2,1,"小兰");
console. 1og(myFish);
console.log (removed) ;
//从索引0的位置开始删除2个元素插入"小兰"、"小蔡"和"小刚"
var myFish = ["小米","小明","小张","小李"];
var removed = myFish.sp1ice(0,2,'小兰','小蔡','小刚');
console.log(myFish);
console.log(removed);
//从索引2的位置开始删除2个元素
var myFish =['小兰','小蔡','小刚','小张','小李'];
var removed = myFish.splice (myFish. 1ength - 3,2);
console.log(myFish);
console.log (removed);
//从索引 2的位置开始删除所有元素
var myFish =['小兰','小蔡','小刚','小张','小李'l;
var removed = myFish. splice(2);
console.log (myFish);
console. 1og (removed);

//slice
//--参数:begin end
//-- begin :从该索引开始提取原数组元素(包含)
//-- end :在该索引处结束提取原数组元素(不包含)
//从索引 2的位置开始截取
var array3 = ['小兰','小蔡','小刚','小张','小李'];
var getArr = array3.s1ice(2);
console.log(array3);
console.log(getArr);
//从索引 2的位置开始截取到索引4的位置(包含2不包含4)
var array3 =['小兰','小蔡','小刚','小张','小李'];
var getArr = array3.slice(2，4)
console.log(array3);
console.log(getArr);
//从索引 2的位置开始截取到数组的倒数第一个元素(不包含)
var array3 =['小兰','小蔡','小刚','小张','小李'];
var getArr = array3.slice(2，-1);
conso1e.1og(array3);
console. 1og(getArr);
//截取后两个元素
var array3 = ['小兰','小蔡','小刚','小张','小李'];
var getArr = array3 .slice(-2);
consoTe. 1og(array3);
console.log(getArr);

//concat
//连接两个数组
const letters = ['a', 'b', 'c']
const numbers = [1,2,3];
const concatArr = letters. concat(numbers);
console. 1og( letters);
console.log(concatArr);
/连接三个数组
const num1 = [1,2,3];
const num2 =[4,5,6];
const num3 = [7,8,9];
const numArr = num1. concat(num2, num3);
console.log (numArr);
//将值连接到数组
const arr1 = ['a', 'b','c'];
const newArr1 = letters. concat(1,[2,3]);
console. 1og (newArr1);

2. 字符串对象

2.1 字符串对象的使用

        字符串对象使用 new String() 来创建,在 String 构造函数中传入字符串，这样就会在返回的字符串对象中保存这个字符串。
语法:

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

2.2 根据字符返回位置
        字符串对象提供了用于检索元素的属性和方法，字符串对象的常用属性和方法如下:

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

示例代码：

// indexof:参数1:要搜索的子字符串;参数2:可选
var str = new String('送你一朵小红花，送你一朵小红花');
//查找花首次出现的位置
var res = str.indexof('花');
//查找花从第七个位置查找花﹐第一次出现的位置
var res2 = str.indexof('花',7);
console. 1og (str);
console.log (str.length);
console.log(res);
console.log(res2);
//lastIndexof:参数1:要搜索的子字符串;参数2:可选
var str1 = new string( 'to be or not to be ' );/
/查找e从最后一个字符开始，第一次出现的位置
var res1 = str1.1astIndexof('e ');
//查找e从第8个位置开始倒数，第一次出现的位置
var res3 = str1.1astIndexof('e',8);
console.log(str1);
console.log(str1.1ength);
console.1og(res1);
console.log (res3);

注意: indexOf 和 lastlndexOf 都区分大小写

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

var str = new string( 'To be，or not to be，that is the question. ');
var index = str.indexof('e');
console.log(index);
var num = 0;
while (index != -1) {
    console.log(index);
    index = str.indexof('e ', index + 1);
    num++;
}
console.log('e出现的次数是:'+num)

2.3 根据位置返回字符
        字符串对象提供了用于获取字符串中的某一个字符的方法。方法如下:

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

示例代码：

var str = 'andy';
//获取index位置的字符
console.log(str. charAt(0));
//获取index位置的字符的ASCII码
console.log(str.charCcodeAt(O));
for (var i = 0; i< str. length;i++){
    //获取指定位置处的字符
    console.1og(str[i]);
}

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

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

2.5 字符串操作方法
字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法。字符串对象
的常用属性和方法如下:

成员	作用
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 = 'He11oword' ;
//concat
var res = str.concat(' ! ! ');
console.log(res);
//slice
var res1 = str.slice(1,5);
console.1og(res1);
//substring
var res2 = str.substring(3);
console.log(res2);
var res3 = str.substring(3,7);
console.log(res3);
//substr
var res4 = str. substr(2,5);
console.log(res4);
//toLowerCase
var res5 = str.toLocaTeLowercase();
console.log(res5);
//toUppercase
var res6 = str.toLocaleuppercase();
console.log(res6);
//split
var str1 = 'How are you doing today?'var res7 = str1.split(' ');
console.log(res7);
var res8 = str1.split();
console.log(res8);
var res9 = str1.split(' ',3)
console.log(res9);
//replace
var res10 = str1.replace(' ',',');
console.log(res10) ;

2.6 案例: 判断用户名是否合法
案例需求:用户名长度在3~10范围内不能出现敏感词 admin 的任何大小写形式。

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

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

var str = 'abc ';str = 'he11o ';
//当重新给str赋值的时候，常量'abc'不会被修改，依然在内存中
//重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变//由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i <100000; i++） {
    str += i;
}
console.log(str);

案例代码:

//创建一个对象，并赋值给变量obj1
var obj1 = {
    name: '小明'，age: 18
}
//此时并没有复制对象，而是obj2和obj1两个变量引用了同一个对象
var obj2 = obj1;
//比较两个变量是否引用同一个对象
console.log(obj2 === obj1);
//通过obj2修改对象的属性
obj2.name = '小红';
//通过obj1访问对象的name属性
console.log(obj1.name);

        上述代码运行后，obj1 和 obj2 两个变量引用了同一个对象，此时，无论是使用 obj1 操作对象还是使用 obj2 操作对象，实际操作的都是同一个对象。
        当 obj1 和 obj2 两个变量指向了同一个对象后，如果给其中一个变量(如obj1）重新赋值为其他对象，或者重新赋值为其他值，则obj1将不再引用原来的对象，但 obj2 仍然在引用原来的对象。
注意: 当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有
任何变量引用的情况，这时候就会由JavaScript的垃圾回收机制自动释放。
如果在函数的参数中修改对象的属性或方法，则在函数外面通过引用这个对象的变量访问时的
结果也是修改后的。

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