2020-09-01---ES5、String

最新推荐文章于 2023-03-22 11:56:41 发布

易de

最新推荐文章于 2023-03-22 11:56:41 发布

阅读量419

点赞数

分类专栏： H5

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/108339746

版权

H5 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

52 篇文章 0 订阅

订阅专栏

ES5-String

一、选择排序

取一个元素与剩下所有的元素进行比较，复合条件，交换位置。

<script>
        /*
        取一个元素与剩下所有的元素进行比较，符合条件，交换位置。
        选择一个数与剩下的所有元素比较，符合条件，交换位置
        */
        function fnSortSelect(){
            arr = [3,9,5,12,4];
            //一圈选择一个数，
            for(var i = 0;i < arr.length - 1;i ++){
                //选择的一个数与剩下的所有进行比较
                for(var j = i;j < arr.length;j ++){
                    //符合条件
                    if(arr[i] < arr[j]){
                        //交换位置
                        var t = arr[j];
                        arr[j] = arr[i];
                        arr[i] = t;
                    }
                }
            }
            // console.log(arr);
            return arr;
        }
    </script>

二、利用堆栈理解值传递与引用传递

基本数据类型（只有一个值，且值存放在栈空间中）的值都属于值传递。
复合数据类型（多个值，值都存放在堆中，栈空间存放的是指向堆的地址）的值都都属于引用传递。

 <script>
        /*
        一个栈只能存放一个数据
        简单数据类型（只有一个数据）的变量都存放在栈里面，是值传递。
        符合数据类型（有多个数据）的变量的值都存放在堆里面，栈里面放的是值所在的堆的地址，是引用传递。
        */
        //简单数据类型
        // var a = 3;
        // var b = a;
        // b = 4;
        // console.log(a,b);//3 4

        //复合数据类型
        //数组
        // var arr = [1,3,5];
        // var list = arr;
        // list[0] = 2;
        // console.log(arr,list);//[2,3,5] [2,3,5]
        //对象
        // var obj = {id : 1,name : '苹果',num : 9};
        // var object = obj;
        // obj.name = '桃';
        // console.log(obj,object);//{id: 1, name: "桃", num: 9} {id: 1, name: "桃", num: 9}

        // var a = 1;
        // function fn1(a){
        //     a = 3;
        //     return a;
        // }
        // fn1(a);//1

        var arr = [0];
        function fn2(list){
            list[0] = 1;
        }
        fn2(arr);
        console.log(arr);//1

        var arr = [1,2,3];
        function fn3(list){
            list = 5;
        }
        fn3(arr[1]);
        console.log(arr);//1,2,3
    </script>

三、JSON ：是一个跨平台跨语言的一种网络数据传输格式。

[] ：如果里面有字符串，一定使用双引号。
{} ： key必须加双引号，value如果是字符串，必须加双引号
注：在JSON中value的值不能是：undefined NaN function
infinity 一个JSON文件里只能有一个json数据。

原生js环境                           JSON
[1,2,'3']                          [1,2,"3"]
{name : '张三'}                    {"name" : "张三"}
{'name' : "张三"}
{"name" : "张三"}
{eat : function(){return '吃';}}

四、严格模式

“use strict”; //必须放到作用域的开头部分
什么影响？

不能够隐式声明变量，必须添加关键字
函数的形参不允许重复
函数中形参值的变化不影响arguments中的值
arguments中的callee方法不能再表示自己的函数（淘汰了）
with（）：已禁用
新增关键字 eval arguments
取消了八进制

五、arguments ：内置的伪数组对象（实参副本）

六、ES5新增的数组方法（都不会改变原数组）

1.indexOf（元素，[start]）：

查找元素在数组中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向后查找。

2.lastIndexOf（元素，[start]）:

从右向左查找元素在数组中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向前查找。

3.forEach（function(value,index,array){}）遍历数组

ES5中操作数组的一种方法，主要功能是遍历数组，该语句需要一个回调函数作为参数，回调函数的形参依次为：value：遍历的数组内容，index：对应的索引，array：数组本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [
                    {
                        "user" : "张一山",
                        "age" : 28
                    },
                    {
                        "user" : "张二毛",
                        "age" : 29
                    },
                    {
                        "user" : "张三疯",
                        "age" : 217
                    }
                ];
        //一般函数写法
        arr.forEach(function(value){
            console.log(value.user + ':' + value.age);
        })
        //回调函数写法
        arr.forEach((value,index)=> {
            console.log(value.user + ':' + value.age);
            console.log(index);
        });
    </script>
</body>
</html>

在这里插入图片描述

4.map（function(value,index,array){return …}）

遍历数组，返回一个新数组（可以对数组中的每一个元素进行操作）

5.filter（function(value,index,array){return 过滤条件}）

过滤满足条件的元素，返回一个新数组

6.some（function(value,index,array){return …}）

判断数组中的元素是否符合条件，只要有一个符合条件，返回true，同时结束循环。如果遍历完数组，发现都不符合条件，返回false。

7.every（function(value,index,array){return …}）

判断数组中的元素是否符合条件，如果遍历完数组，发现都符合条件，返回true。如果有一个不符合条件，则返回false，同时退出循环。

8.reduce（function(prev,next,index,array){return …}）

归并。prev第一次循环的时候，取的是数组中第一个元素。next是依次从第二个元素开始遍历。从第二次循环开始，将prev与next运算后的结果再次赋给prev。

<script>
        //1.indexof(value,start)
        arr = [1,3,2,5,2,3,4,3,2];
        //返回3第一次出现时的下标
        console.log(arr.indexOf(3));//1
        //返回从下标为2开始查找3第一次出现时的索引
        console.log(arr.indexOf(3,2));//5

        //2.lastIndexOf(value,start)
        //从右向左查找，返回3第一次出现时的下标
        console.log(arr.lastIndexOf(3));//7
        //从低二个参数所指的下标开始向左（前）查找，返回3第一次出现时的下标
        console.log(arr.lastIndexOf(3,2));//1

        //3.forEach(function(value,index,array){})
        // console.log(arr.forEach(function(value,index,array){}))
        //遍历数组，没有返回值
        arr.forEach(function(value,index,array){
            console.log(value,index,array);
        })

        //4.map
        //遍历数组，可以对数组中的每一个值进行操作。返回一个新数组
        console.log(arr.map(function(value){
            return value * 2;
        }))

        //5.filter
        //过滤数组，返回满足条件的新数组
        console.log(arr.filter(function(value){
            return value > 3;
        }))

        //6.some
        //判断数组中是否有满足条件的值，只要发现有一个满足条件，就停止循环，返回true。返回值为true或false。
        console.log(arr.some(function(val){
            return val == 3;
        }))

        //7.every
        //判断数组中是否有满足条件的值，只要发现有一个不满足条件，就停止循环，返回true。返回值为true或false。
        console.log(arr.every(function(value){
            return value == 3;
        }))

        //8.reduce
        //第一次循环，prve取的是数组中的第一个元素。next依次从第二个元素开始遍历。从第二次循环开始，将Prve与next元素后的值再次赋给Prve。
        var list = [1,2,3,4,5];
        console.log(list.reduce(function(prve,next){
            return prve * next;
        }))
    </script>

七、String 字符串

1. 如何声明字符串

字面量 ’ ’ " "
new String();

2.属性

length 长度字符串下标也是从0开始，最大下标是length - 1。

3.方法查替截转（都不会改变原串）

查

1. indexOf（‘字符串’,start）

查找字符串在父串中第一次出现时的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向后查找。

2.lastIndexOf（‘字符串’,start）

从右向左查找，查找字符串在父串中第一次出现时的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向前查找。

3.charAt（下标）

查找指定下标位置的字符

4.charCodeAt（下标）

查找指定下标位置字符的编码值

 <script>
        var str = 'how do you do';
        //1.indexOf('字符串'start);
        console.log(str.indexOf('do'));//4
        //2.lastIndexOf()
        console.log(str.lastIndexOf('do'));//11
        //3.charAt()
        //查找指定下标位置的字符
        console.log(str.charAt('4'));//d
        //遍历字符串
        for(var i = 0,len = str.length;i < len;i ++){
            console.log(str.charAt(i));
        }
        //4.charCodeAt()
        console.log(str.charCodeAt(4));//100

        //静态方法  String.fromCharCode()
        console.log(String.fromCharCode(str.charCodeAt(4)));//d
    </script>

替

replace（旧串，新串）

替换字符串，一次只能替换一个

 <script>
        str = "how you are you";
        //一次只能替换一个
        console.log(str.replace('y','b'));
        console.log(str.replace('are','aree'))

        //全部替换
        while(str.indexOf('y') !== -1){
            str = str.replace('y','t');
        }
        console.log(str);
    </script>

截截取字符串中指定范围的子串

1.substring（start,end）支持参数互换，不支持负数

2.slice（start,end）支持负数，不支持参数互换

3.substr（start,length）截取指定长度的字符串

<script>
        str = 'good good study,day day up';
        console.log(str.substring(5,6));
        console.log(str.slice(5,6));
        console.log(str.substr(5,6));
    </script>

转

1.toUpperCase（）：小写字母转大写字母

2.toLowerCase（）：大写字母转小写字母

3.split（‘切割符’，[length]） : 将字符串转为数组

<script>
        str = 'How Are You';
        console.log(str.toUpperCase());
        console.log(str.toLowerCase());
        console.log(str.split(' '));
        console.log(str.split(''));
    </script>

4.静态方法

String.fromCharCode（）将编码转为字符

八、ASCII码和字符串

中文在ASCII值中的范围：十六进制
4E00 19968
9FA5 40869
20902 （回文数）

案例

<body>
    <!-- 五、影响职业因素 -->
    <table border = '1' cellspacing = '0' width = '300'> 
        <tr align = 'center'>
            <td><b>影响职业因素</b></td>
        </tr>
        <tr align = 'center'>
            <td>请输入一个单词：<input type="text" id = 'in_txt'></td>
        </tr>
        <tr align = 'center'>
            <td>结果：<input type="text" id = 'out_txt'></td>
        </tr>
        <tr align = 'center'>
            <td>
                <input type="button" value="计算" id = 'cal'>
                <input type="button" value="清空" id = 'clear'>
            </td>
        </tr>
    </table>
    <!-- 方法一 -->
    <!-- <script>
        //获取对象
        var o_in_txt = document.getElementById('in_txt');
        var o_out_txt = document.getElementById('out_txt');
        var o_cal = document.getElementById('cal');
        var o_clear = document.getElementById('clear');
        //点击事件
        o_cal.onclick = function(){
            //获取输入框的内容
            var str = o_in_txt.value;
            //把输入框的内容转为数字存放在字符串里
            var str_code = '';
            for(var i = 0,len = str.length;i < len;i ++){
                //转为的数字都依次拼接到字符串里，并用空格把每个数字隔开，这样方便下面截取每个数字
                str_code +=  str.charCodeAt(i) - 96 + ' ';
            }
            console.log(str_code);
            //因为每个数字后面都有一个加号，而最后一个数字后又不需要加号，所以就把最后一个加号截掉。然后把字符串转为以空格为分隔符分隔的数组，然后截取每一个数字,最后用+连接每一个数字。
            str_code = str_code.substring(0,str_code.length-1).split(' ').join('+');
            // str_code = str_code
            console.log(str_code);
            //计算和
            var sum = eval(str_code);
            //将数字和和都放到输入框里
            o_out_txt.value = str_code + '=' + sum;
        }
        o_clear.onclick = function(){
            o_in_txt.value = '';
            o_out_txt.value = '';
        }
    </script> -->
    <!-- 方法二 -->
    <script>
        //获取对象
        var o_in_txt = document.getElementById('in_txt');
        var o_out_txt = document.getElementById('out_txt');
        var o_cal = document.getElementById('cal');
        var o_clear = document.getElementById('clear');
        //点击事件
        o_cal.onclick = function(){
            //先把26个字母放到一个字符串里,让每一个字母和它在字符串里的下标一一对应。
            var word = ' abcdefghijklmnopqrstuvwxyz'
            //放输入的字符对应的数字
            var str = '';
            //获取输入框里面的字符
            var o_str = o_in_txt.value;
            var sum = 0;
            //判断输入框里面的字符
            for(var i = 0;i < o_str.length;i ++){
                for(var j = 0;j < word.length;j ++){
                    //如果输入框里面的字符和word里面的字符一致，就把该字符在word里面对应的位置放到str里面。
                    if(o_str[i] === word[j]){
                        str += j + '+';
                        sum += j;
                    }
                }
            }
            //最后一个数字后面不需要加号，截掉。
            console.log(str.substring(0,str.length-1) + '=' + sum);
            o_out_txt.value = str.substring(0,str.length-1) + '=' + sum;
        }
        o_clear.onclick = function(){
            o_in_txt.value = '';
            o_out_txt.value = '';
        }
    </script>
</body>

易de

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-01---ES5、String

ES5_String一、选择排序二、利用堆栈理解值传递与引用传递三、JSON ：是一个跨平台跨语言的一种网络数据传输格式。四、严格模式五、arguments ：内置的伪数组对象（实参副本）六、ES5新增的数组方法（都不会改变原数组）1.indexOf（元素，[start]）：2.lastIndexOf（元素，[start]）:3.forEach（function(value,index,array){}）遍历数组4.map（function(value,index,array){return ...}）
复制链接

扫一扫