【Javascript Day12】数组操作方法及String规则和方法

数组的操作方法

var names = ["涛","潇然","烨霖","聪健","立辉"];

// 1. 数组变量.toString 方法：数组转换为字符串
// 转换规则：将数组的每个元素都单独加载，并通过 , 进行拼接
// 自动触发：当数组和其它元素使用 + 进行字符串拼接时，会自动调用toString
var temp1 = names.toString();
console.log(names);
console.log(temp1);

var temp2 = names + "-字符串";
console.log(temp2);

// 2. 数组变量.join(splitStr) : 将数组中每个元素单独取出，并通过指定的splitStr字符进行拼接
// 参数 splitStr 默认值 ,
var temp3 = names.join();
console.log( temp3 );

var temp4 = names.join("#");
console.log(temp4);

// 3. 数组变量.concat() ：将两个数组合并成一个数组
// + (method) Array<string>.concat(...items: ConcatArray<string>[]): string[]
// ( 方法 ) 调用方法的对象类型.concat( 参数:参数类型,参数:参数类型 ):方法返回值类型
// ( 方法 ) 调用方法的对象类型.concat( ...参数:参数类型 ):方法返回值类型
// ...任意数量的参数
var arr1 = ["潘阳市","尹原市","宁泽洋安市","衡胤祥","吉峻熙"]
var arr2 = ["Cambridgeshire","Avon","Bedfordshire","Berkshire"]
var arr3 = [100,100,100,100,100]

var newArr = [];
for (var i = 0; i < arr1.length; i++) {
newArr.push( arr1[i] );
}
for (var i = 0; i < arr2.length; i++) {
newArr.push( arr2[i] );
}
console.log(newArr);
// concat 方法其实就是上述循环操作的简化操作 [语法糖]
var newArr1 = arr1.concat( arr2 );
console.log(newArr1);
console.log( "arr1:",arr1 );
console.log( "arr2:",arr2 );

var newArr2 = arr1.concat(arr2,arr3);
console.log(newArr2);

var newArr3 = arr3.concat(arr2,arr1);
console.log(newArr3);

// 4. 数组变量.slice(start?: number, end?: number) 从指定数组中截取一段元素组成新得数组 => 不改变原始数组
// ? 表示参数可以传递可以不传递，多个?描述参数时，
// 只有在前面得?传递得情况下，才会触发后续参数可传或不传得特性
// 参数
// + 正向截取
// start 需要截取得数组元素得起始下标
// end 需要截取得数组元素得终止下标
// + 逆向截取
// start 取值为负数,表示倒数第几个元素
// end 取值为负数,表示倒数第几个元素
// 5. 数组变量.splice(start: number, deleteCount?: number) 从指定数组中截取一段元素组成新得数组 => 改变原始数组
// 数组变量.splice(start: number, len?: number) 从指定数组中截取一段元素组成新得数组
// 参数 start 设置截取得起始下标
// deleteCount|len 个数

var nums = [1,2,3,4,5,6,7,8,9];

var newArr4 = [];
for (var i = 2; i < 6; i++) {
newArr4.push( nums[i] )
}
console.log(newArr4);
// 上述操作可以通过 slice 或者 splite 方法完成

var nums1 = [1,2,3,4,5,6,7,8,9];
var newArr5 = nums1.slice( 2,6 ); // [2,6) 从下标2截取到下标5
console.log( newArr5 );

var nums2 = [1,2,3,4,5,6,7,8,9];
var newArr6 = nums2.slice( -4,-2 ); // [-4,-2) 从倒数第4个元素截取到倒数第3个元素
console.log( newArr6 );

var nums3 = [1,2,3,4,5,6,7,8,9];
var newArr7 = nums3.slice( -2,-4 ); // 截取范围不存在相交区域时,返回空数组
console.log( newArr7 );

var nums4 = [1,2,3,4,5,6,7,8,9];
var newArr8 = nums4.splice(2,3); // 从下标2开始截取三个元素
var newArr8 = nums4.splice(2,3); // 从下标2开始截取三个元素
console.log(newArr8);
console.log( "nums4:",nums4 );

var nums5 = [1,2,3,4,5,6,7,8,9];
// 使用splice删除特性,完成数组指定位置得元素删除
// => 影响数组得长度,和被删除元素后续元素得下标
// => 循环删除时对数组得影响
nums5.splice(3,1)
console.log(nums5);

循环删除案例

String的规则

// 栈:内存大小有限 [ number,boolean,null,undefined ]
// 堆:理论上是无限的

console.log( Number.MAX_VALUE ); // => number 会存在一个数值上限

// 引用变量通过地址,指向堆中空间,只要栈的地址没变,和改地址有关变量都会产生关联
var arr1 = [1,2,3,4];
var arr2 = arr1;
arr1[0] = 999;
console.log(arr1);
console.log(arr2);

// 将string当作基本类型数据理解,但实际上string是引用类型数据
// => string被JS设置成包装类型 => 不可修改,不可变数据
var str = "文本数据文本数据文本数据文本数据文本数据文本数据文本数据文本数据文本数据";
var str1 = str; // 将str数据复制一份，并分配给str1
str = "abc"; // 重新创建一个新的空间
console.log(str);
console.log(str1);

String的内置规则

var str1 = "abcdefg";
// 1. 字符串变量.length : 获取字符串的字符长度
// => 字符串是由字符组成，所以JS中会为字符串的每个字符都分配标识(下标索引)
console.log( str1.length );
// [下标] 从字符串中取值和数组的使用方式存在代码阅读冲突
console.log( str1[0] );


// 2. 字符串变量.at(pos) 通过下标获取字符串对应的字符
// pos 取正数表示下标
// pos 取负数表示倒数位置
console.log( str1.at(0) );
console.log( str1.at(-1) );


for (var i = 0; i < str1.length; i++) {
console.log( str1.at(i) );
}

// 将字符串进行反转
var str2 = "abcd"; // ==> dcba
var tempStr2 = "";
for (var i = str2.length-1; i >=0; i--) {
tempStr2 += str2.at(i);
}
console.log(tempStr2);

// 3. 字符串变量.charAt(index);
// index 为下标
var str3 = "abcdefg";
console.log( str3.charAt(0) );
console.log( str3.charAt(1) );
console.log( str3.charAt(-1) );

// 4. 字符串变量.charCodeAt( index ) 返回是字符的ascii标识码
var str4 = "abAdefg";
console.log( str4.charCodeAt(0) );
console.log( str4.charCodeAt(1) );
console.log( str4.charCodeAt(2) );

// utf8 叫做字符编码 => 不同语言字符是需要通过扩展字符编码实现计算机的使用
// utf8是软件工程统一的字符编码集【中文 65535 个常用汉字】
var str5 = "一段中文";
console.log( str5.charCodeAt(0) );

// 5. 字符串变量.codePointAt( index ) 返回是字符的ascii标识码
var str6 = "abAdefg";
console.log( str6.codePointAt(0) );

// 6. 字符串变量.indexOf(字符或者字符串) 从左侧下标0开始向右查找返回下标，不存在返回-1
// 7. 字符串变量.lastIndexOf(字符或者字符串) 从右向左查找到下标0 返回下标，不存在返回-1
var str7 = "abcabc";
console.log( str7.indexOf("b") );
console.log( str7.lastIndexOf("b") );

// 6. 字符串变量.indexOf(字符或者字符串,开始查找的位置) 从左向右查找返回下标，不存在返回-1
// 7. 字符串变量.lastIndexOf(字符或者字符串,开始查找的位置) 从右向左查找返回下标，不存在返回-1
console.log( str7.indexOf("b",3) );

String案例

//  案例：判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数

        var str = "oabcaefaoxyozzaopp";
        // var i1 = str.indexOf("a",0) // 0
        // var i2 = str.indexOf("a",i1+1) // 6
        // var i2 = str.indexOf("a",i2+1) // 6

        // 用于记录 最大次数和对应的 字符
        var maxChar = "";
        var maxNum = 0;
        for (var i = 0; i < str.length; i++) {
            // 循环依次获取每个字符
            var char = str.charAt(i);

            var count = 0;
            var j = -1;
            // 判断存在多少个当前循环到 char 字符
            do {
                // indexOf的第二个参数，可以限制查找范围
                j = str.indexOf(char,j+1);
                if(j!=-1){
                    count++;
                }
            } while( j!=-1 );
            // console.log(char,count);
            // 和循环外部记录的最大值进行比较完成替换
            if(count>maxNum){
                maxNum = count;
                maxChar = char;
            }
        }
        console.log(maxChar,maxNum);

// 案例2：统计一个字符串 'abcoefoxyozzopp' 中每个字符出现的次数
// var countObj = {
// a:2,
// c:3
// }
// console.log( countObj.b );
// console.log( countObj.c ); // 从对象中取属性 c 的值
// console.log( countObj["a"] ); // 从对象中取属性 a 的值

// var key = "a";
// console.log( countObj[key] ); // 从对象中取属性 a 的值
// key = "c";
// console.log( countObj[key] ); // 从对象中取属性 c 的值


var str1 = "oabcaefaoxyozzaopp";
var countObj1 = {};
for (var i = 0; i < str1.length; i++) {
var char = str1.charAt(i);
// console.log(char);
// console.log( countObj1[char] );
if( countObj1[char] ){
// countObj1对象中存在 char 变量值对应的属性名
countObj1[char]++;
}else{
// countObj1对象中没有 char 变量值对应的属性名
countObj1[char] = 1; // 将当前char增加为对象的新属性名，并取值1，标识出现1次
}
}
console.log(countObj1);

// 循环对象 => 获取次数最多的字符
var maxChar1 = "";
var maxCount1 = 0;
for (var key in countObj1) {
if( countObj1[key]>maxCount1 ){
maxChar1 = key;
maxCount1 = countObj1[key];
}
}
console.log(maxChar1,maxCount1);

String的常用方法

// 1. toUpperCase() 将小写字母转换为大写字母
var str1 = "abc中文123";
console.log( str1.toUpperCase() );
// 2. toLowerCase 将大写字母转换为小写字母
var str2 = "ABC中文123";
console.log( str2.toLowerCase() );

// 3. substr(from: number, length?: number)
// from 指定开始截取的位置 [ 取值负数，表示倒数]
// length 指定截取的长度 [大于等于0]
// 返回截取到的新字符串
var str3 = "01234567";
var tempStr3 = str3.substr(2,3);
console.log(tempStr3);
console.log("str3:",str3);

var tempStr4 = str3.substr(-5,3);
console.log(tempStr4);

var tempStr5 = str3.substr(-5,-3);
console.log(tempStr5);

// 4. substring(start: number, end?: number)
var str5 = "01234567";
var tempStr5 = str5.substring(2,4); // [2,4)
console.log(tempStr5);
console.log("str5:",str5);

// var tempStr6 = str5.substring(-4,-2);
// console.log(tempStr6);

// 5. slice(start?: number, end?: number)
var str7 = "01234567";
var tempStr7 = str7.slice(2,4);
console.log(tempStr7);

// 6. split(separator: string) 基于分割字符将字符串转换为数组
// separator 分割字符
var str8 = "00-1-2-33-4-5-6-7";
var arr8 = str8.split("-")
console.log(arr8);

var str9 = "0012334567"; // 将字符串按照字符进行数组转换分割
var arr9 = str9.split("");
console.log(arr9);

var str10 = "hello";

var arr10 = str10.split("");
console.log(arr10);
arr10.reverse();
console.log(arr10);
var newStr = arr10.join("");
console.log(newStr);

// 链式调用：前一个方法的返回值作为下一个方法的调用对象
var newStr1 = str10.split("").reverse().join("");
console.log(newStr1);

// 7. replace(被替换的字符,替换成的字符) 只替换第一个
// 7. replaceAll(被替换的字符,替换成的字符) 替换所有【和浏览器版本有关】

var str11 = "字@符@串";
var newStr11 = str11.replace("@","--");
console.log(newStr11);

var newStr12 = str11.replaceAll("@","--");
console.log(newStr12);