ES6之前遍历字符串的方式以及遍历字符串并进行加密的例子

ES6学习 本文总阅读量次

了解下ES6之前遍历字符串的方式

ES6之前遍历字符串的方式

步骤1：使用for循环

补充：charAt()查找字符

  • 语法:
    stringObject.charAt(index)
  • 功能:返回stringObject中index位置的字符.
  • 例子：
    1
    2
    3
    4
    5
    6
    let str="我超级棒的！";

    for(let i=0,len=str.length;i<len;i++){
        // console.log(str[i]);
        console.log(str.charAt(i));
    }
    for循环与数组例子1结果对比
  • 直接使用str[index]与str.charAt(index)效果一样。

步骤2：将字符串转换成数组

补充：[].slice和Array.prototype.slice的区别

  • slice()截取，语法：arrayObject.clice(start,end);，start可省、end可省，返回值：数组。如果省略 start，则 slice 从索引 0 开始。
  • Array是一个构造函数。浏览器内置的特殊对象。
  • Array没有slice方法,但是”Array的实例[]“有slice方法。
  • Array.prototype原型上有方法slice()
    我们可以用Array.prototype.slice或者**Array的实例**[].slice都行，但**不能Array.slice**。
  • Array.prototype.slice.call(arguments)
    可以将类数组对象（如：字符串）转成数组。（下面的“将字符串转换成数组的各种方法”的“方法一”中有使用）

方法1：Array.prototype.slice

  • Array是一个构造函数。浏览器内置的特殊对象。Array没有slice方法。Array.prototype原型上有方法slice()
    我们可以用Array.prototype.slice或者Array的实例[].slice都行，但不能Array.slice。
  • Array.prototype.xx方法.call(str)可以使str调用Array的xx方法从而将字符串转换为数组。
  • slice()截取，语法：arrayObject.slice(start,end);，start可省、end可省，返回值：数组。如果省略 start，则 slice 从索引 0 开始。
  • call()传参使用方法：Array.prototype.slice.call(str);
    1
    2
    3
    4
    let str="我超级棒的！";

    var oStr=Array.prototype.slice.call(str);
    console.log(oStr);//["我", "超", "级", "棒", "的", "！"]
    或者使用var oStr=Array.prototype.slice.call(str,0);也可以。

方法2:str.split

使用**字符串的split()**进行切割可以将字符串转换成数组：

1
2
3
4
let str="我超级棒的！";

var oStr=str.split("");
console.log(oStr);//["我", "超", "级", "棒", "的", "！"]

方法3:解构赋值

使用字符串的解构赋值结合扩展运算符可以将字符串转换成数组：

使用扩展运算符时会把每个剩余未匹配的字符作为一项组成一个数组。

使用扩展运算符时会把每个oStr中剩余未匹配的字符作为一项组成一个数组来匹配给oStr：

1
2
3
4
let str="我超级棒的！";

const [...oStr]=str;
console.log(oStr);//["我", "超", "级", "棒", "的", "！"]

[...oStr]: 这是解构赋值的语法，它使用了扩展运算符...，它的意思是将 str 字符串转换为一个字符数组，并将其存储在 oStr 变量中

  • 帮助理解：回顾下字符串的解构赋值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let [a, b, c, d, e, f] = "hello " // 空格也会被识别
    console.log(a, b, c, d, e, f) // h e l l o 空格

    let { length } = "hello" // 提取属性【了解即可】
    console.log(length) // 5

    let [a, b, c, ...d] = "hello " // 注意理解结合扩展运算符
    console.log(a, b, c, d) // h e l ['l', 'o', ' ']

    // 所以解构赋值+扩展运算符可以将字符串转为数组
    let [...arrStr] = "hello "
    console.log(arrStr) // ['h', 'e', 'l', 'l', 'o', ' ']

方法4:扩展运算符

使用扩展运算符也可以将字符串转换成数组(即：创建数组oStr的时候，通过扩展运算符将字符串展开，字符串的每一个字符构成一个数组元素。)：

1
2
3
4
let str="我超级棒的！";

const oStr=[...str];
console.log(oStr);//["我", "超", "级", "棒", "的", "！"]

或者

1
2
let str = "antzone";
console.log([...str]);// ["a", "n", "t", "z", "o", "n", "e"]

补充：forEach()遍历数组的每个元素

  • forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  • 注意: forEach() 对于空数组是不会执行回调函数的。
  • 语法：array.forEach(function(currentValue, index, arr), thisValue)
    参数与描述
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <body>

    <p>点击按钮列出数组的每个元素。</p>
    <button onclick="numbers.forEach(myFunction)">点我</button>
    <p id="demo"></p>

    <script>
    demoP = document.getElementById("demo");
    var numbers = [4, 9, 16, 25];

    function myFunction(item, index) {
        demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
    }
    </script>

    </body>
    结果
    使用3个参数的例子

步骤3：对数组进行遍历

使用数组的forEach()对数组进行遍历，整合上面的将字符串转换为数组则可以得到：

1
2
3
4
5
6
7
8
let str="我超级棒的！";
//将字符串转换为数组
var oStr=str.split("");
//使用数组的forEach()对数组进行遍历
oStr.forEach(function(word){
    console.log(word);
});
console.log(oStr);

ES6之前遍历字符串并进行加密的例子

例子-1
例子-2

注意：

  • 可以使用 对象名["property"]来访问对象属性。
  • 但是在该例子中可以发现并没有引号，有引号则取不到，这是因为切割字符串时我们使用的分隔符是引号，所以数组oStr中的每一个元素已经自带引号，即map的属性名word已经是有引号的了。（如下所示）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let str = "我超级棒的！";
    var oStr=str.split("");//使用字符串的split()进行切割得到数组
    console.log(oStr);//["我", "超", "级", "棒", "的", "！"]
    const map = { 我: "www", 超: "ccc", 棒: "bbb",级:"jjj",的:"ddd",'！':"lll" };
    console.log(map["棒"]);//bbb,注意这里的属性名需要放到引号内

    oStr.forEach(function(word,index){
        if(str.includes(word)){
            oStr[index]=map[word];
        }
    });
    console.log(oStr);//["www", "ccc", "jjj", "bbb", "ddd", "lll"]
ES6学习