js字符串与数组的操作

最新推荐文章于 2024-08-16 16:00:54 发布

seven-yang

最新推荐文章于 2024-08-16 16:00:54 发布

阅读量893

点赞数 2

分类专栏： js基础

本文链接：https://blog.csdn.net/yangyixue123/article/details/75216148

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、字符串的处理方式

1.字符串str

str.length //获取它的长度

str.charAt(2) //获取传入下标处的字符，如果不传默认为”0“，超出时返回空

<script type="text/javascript">
var str="Hello World!"
document.write(str.length);//输出12
document。write(str.charAt(1));//输出e
</script>

str.charCodeAt(2) //获取传入下标处的Unicode 编码，不写默认为’0’

String.fromCharCode() //传入的编码值返回相应的字符，可以传多个编码，用’,’分割（静态方法，String不能少）

str.indexOf() //获取（）中在字符串中第一次出现的位置（可以一次找多个字符），未找到返回-1，第二个参数为开始位置（负数和不写默认是从0开始）

var index1 = a.indexOf("l");
//index1 = 2
var index2 = a.indexOf("l",3);
//index2 = 3

lastIndexOf() //获取（）中在字符串中最后出现的位置（可以一次找多个字符），未找到返回-1，第二个参数为开始位置（负数是从0开始，不写默认从最后开始找）

str.substring() //截取从第一个参数到第二个参数（不包括第二个参数）的字符串，一个参数时截取到最后，会自动检测两个参数大小，按照从小到大的顺序截取，不写和负数默认从0开始

str.slice() //与上面方法类似，但是不会自动检测参数大小，负数从后向前找（最后一个为-1）

str.split(‘.’) //以.分割整个字符串并输出一个数组，即使什么参数都不传也会变成一个数据的数组，因此如果想把一个字符串每个字符分割，就传一个空字符串”，（注意：如果分隔符在左右，也会生成个空在数组里），第二个可选参数限制生成数组的长度（剩下的会被舍去）

<script type="text/javascript">

var str="Hello World!"
document.write(str.split(" "));//输出Hello,World!
document.write(str.split(""));//输出H,e,l,l,o,W,o,r,l,d,!
document.write(str.split(" ",1));//输出Hello
"2:3:4:5".split(":")//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")//将返回["", "a", "b", "c"]

</script>

arr.join(‘’) //split的反义词，把arr数组里的内容用‘’连接成字符串，生成一个所有数组组成的字符串，‘’里写什么每个数据中间就会用什么连接

str.toUpperCase() //把内容转换成大写

str.toLowerCase() //把内容转换成小写

二、处理数组常用方法

1.① push(): 向数组尾部添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

<script>
    var arr = [1,2,3];
    console.log(arr);//[1,2,3]
    var b = arr.push(4);
    console.log(b);// 4   //表示当前数组长度
    console.log(arr);// [1,2,3,4]
</script>

②pop(): 删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

    var arr = [1,2,3];
    console.log(arr);                // [1,2,3]
    arr.pop();
    console.log( arr.pop() );　　// [3]　　//返回删除的元素
    console.log(arr);                // [1,2]

2.①unshift():在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];
arr.unshift('x');        // 4
console.log(arr);        // ['x', 'a', 'b', 'c']

② shift():删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var arr = ['a', 'b', 'c'];
arr.shift()         // 'a'
console.log(arr)     // ['b', 'c']

shift()方法还可以遍历并清空一个数组。

var list = [1, 2, 3, 4, 5, 6];
var item;
while (item = list.shift()) {
   console.log(item);//依次出现1，2，3，4，5，6
} 
console.log(list);     // []

3.arr.join():以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。

var arr = [1, 2, 3, 4];
arr.join(' ')     // '1 2 3 4'
 arr.join(' | ')     // "1 | 2 | 3 | 4"
arr.join()     // "1,2,3,4"

4.arr.concat():用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

var arr = [1,2,3];
var b = arr.concat([4,5,6]);
console.log(b);        //[1,2,3,4,5,6]

5.arr.reverse():用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。

var arr = ['a', 'b', 'c'];
arr.reverse() // ["c", "b", "a"]
console.log(arr) // ["c", "b", "a"]

6.arr.slice():用于截取原数组的一部分，返回一个新数组，原数组不变。

slice(start,end)它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。

如果省略第二个参数，则一直返回到原数组的最后一个成员。

var arr = ['a', 'b', 'c']; 
  arr.slice(0)         // ["a", "b", "c"]
 arr.slice(1)         // ["b", "c"]
  arr.slice(1, 2)     // ["b"]
  arr.slice(2, 6)     // ["c"]
  arr.slice()           // ["a", "b", "c"]    无参数返回原数组 
  arr.slice(-2)          // ["b", "c"]    参数是负数，则表示倒数计算的位置
 arr.slice(-2, -1)     // ["b"]

7.arr.splice():删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

splice(start,delNum,addElement1,addElement2,…)第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.splice(4, 2)     // ["e", "f"] 从原数组4号位置，删除了两个数组成员
console.log(arr)     // ["a", "b", "c", "d"]
var arr = ['a', 'b', 'c', 'd', 'e', 'f']; 
arr.splice(4, 2, 1, 2)     // ["e", "f"] 原数组4号位置，删除了两个数组成员,又插入了两个新成员
console.log(arr)         // ["a", "b", "c", "d", 1, 2]
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.splice(-4, 2)     // ["c", "d"] 起始位置如果是负数，就表示从倒数位置开始删除
var arr = [1, 1, 1]; 
arr.splice(1, 0, 2)     // [] 如果只插入元素,第二个参数可以设为0
conlose.log(arr)     // [1, 2, 1, 1]
var arr = [1, 2, 3, 4];
arr.splice(2)     // [3, 4] 如果只有第一个参数，等同于将原数组在指定位置拆分成两个数组
console.log(arr)     // [1, 2]

8.arr.sort():对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

 ['d', 'c', 'b', 'a'].sort()
  // ['a', 'b', 'c', 'd']

 [4, 3, 2, 1].sort()
  // [1, 2, 3, 4]

 [11, 101].sort()
 // [101, 11]

 [10111, 1101, 111].sort()
// [10111, 1101, 111]

上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照对应字符串的字典顺序排序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。

如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。

 var arr = [10111, 1101, 111];
  arr.sort(function (a, b) {
    return a - b;
  })
  // [111, 1101, 10111]

  var arr1 = [
                { name: "张三", age: 30 },
                { name: "李四", age: 24 },
               { name: "王五", age: 28 }
            ]

 arr1.sort(function (o1, o2) {
   return o1.age - o2.age;
 }) 
// [
 //   { name: "李四", age: 24 },
 //   { name: "王五", age: 28 },
 //   { name: "张三", age: 30 }
  // ]

三、js如何绑定自定义属性

1.基本了解：js中操作元素class时，需要用className

而使用cssText会先清空之前的所有样式，然后添加它的值

获取元素的颜色的属性值是不准确的

获取图片的src属性的时候获取到的是绝对路径，直接修改是可以写相对路径的

数组里面可以储存任意类型的数据

length属性代表数组的长度，是可读可写的

2.自定义属性：元素上本来不存在的属性;作用：js向html添加东西

语法：元素.自定义属性 = 123

①点击按钮，弹出按钮的索引值

<body>
<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
<script>
    var aInput = document.getElementsByTagName("input");
    for(var i = 0;i < aInput.length; i++ ){
       aInput[i].index = i;//自定义属性，就是通常用的索引值
       aInput[i].onclick = function(){
          alert(this.index);//弹出当前点击的是第几个按钮，从0开始
       }
    }
</script>
</body>

②点击，改变按钮的值

<body>
<input type="button" value="0">
<input type="button" value="0">
<input type="button" value="0">
<script>
    var aInput = document.getElementsByTagName("input");
    var arr = ["A","B","C","D","E","F","G"];
    for(var i = 0;i < aInput.length;i++){
        aInput[i].num = 0;
        aInput[i].onclick = function(){
            this.value = arr[this.num];
            this.num++;
            if(this.num === arr.length){
                this.num = 0;
            }
        }
    }
</script>
</body>

这里写图片描述

③自定义属性组开关：点击按钮时，会改变按钮的背景颜色，字体颜色

<style type="text/css">
        .cont{
            width: 400px;
            margin: 30px auto;
            position: relative;
        }
        .cont input{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: 20px;
            font-size: 30px;
            border: 1px solid red;
        }
        .cont .active{
            background-color: indigo;
            color: violet;
            border: 1px solid green;
        }
    </style>

<body>
<div class="cont">
    <input type="button" value="btn1">
    <input type="button" value="btn2">
    <input type="button" value="btn3">
</div>
<script>
    var aInput = document.getElementsByTagName("input");
    for(var i = 0;i < aInput.length;i++){
        aInput[i].Onoff = true;//自定义属性，切换开关
        //点击事件
        aInput[i].onclick = function(){
            if(this.Onoff){
            //this:object HTMLInputElement
                this.className = "active";
                this.Onoff = false;
            }
            else{
                this.className = "";
                this.Onoff = true;
            };
        }
    };
</script>
</body>