【博学谷学习记录】超强总结,用心分享|字符串、数组、对象的常用方法

104 阅读7分钟

今天记录一下字符串、数组和对象的一些常用方法,掌握这些方法,便于对字符串、数组、对象进行相关操作。

字符串

1.indexOf(s,n)

返回指定的字符串值在字符串中首次出现的位置。
参数:s为要检索的字符,必需;n为可选的字符参数,规定字符串检索的位置

    const str = "1abc123abc456abc";
    
    const index1 = str.indexOf('a')  // index1 = 1
    const index2 = str.indexOf('a',10)  //index2 = 13
    const index3 = str.indexOf('a',14)  //index3 = -1

2.lastIndexOf(s,n)

返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
参数:s为要检索的字符,必需;n为可选的字符参数,规定字符串检索的位置。

const str = "1abc123abc456abc";

const index1 =str.lastIndexOf("a");    //index1 = 13
const index2 =str.lastIndexOf("a",11);  //index2 = 7
const index3 =str.lastIndexOf("a",0);   //index3 = -1

3.charAt(n)

返回指定位置的字符。
参数:n表示字符串中某个位置的索引,不写默认为第0个字符。

const str = "1abc123abc456abc";
const s = str.charAt(3);  // c 

4.charCodeAt(n)

返回指定位置的字符的Unicode编码。
参数:n表示字符串中某个位置的索引,可以没有参数,默认是索引为0的参数。

const str = "1abc123abc456abc";

const s = str.charCodeAt(3);  //s = 99

注:c的unicode编码为99。
注意:charAt(n)方法和charCodeAt(n)方法类似,前者返回的是字符,后者返回的是字符的unicode编码。

5.fromCharCode()

功能:将编码转成字符方法。
参数:十进制和十六进制,不支持unicode编码。

var s1 =String.fromCharCode("0x56fd"); //国
var s2 = String.fromCharCode(22269); //国

注:“国”的十六进制编码是56fd,十进制是22269

6.slice(m,n)

功能:根据指定位置,截取子串,从m到n,不包括n。 参数:m,n为索引

const str = "1abc123abc456abc";

const s = str.slice(3,5)  //s = 'c1'

7.substring(m,n)

功能:根据指定位置,截取子串,从m到n,不包括n。 参数:m,n为索引

const str = "1abc123abc456abc";

const s = str.substring(3,5)  //s = 'c1'

8.replace(oldstr,newstr)

功能:字符串替换。
参数:oldstr为需要被替换的字符,newstr为替换的字符。

const str = "1abc123abc456abc";
const s = str.replace('a','l')
注意:每次只能替换一个符合条件的字符。

9.split("s")

功能:分割字符,返回成为数组。
参数:"s"为分割的字符。

    const str = "1abc123abc456abc";
    const arr1 = str.split("b");  // ['1a', 'c123a', 'c456a', 'c']
    const arr2 = str.split(); //['1abc123abc456abc']
    const arr3 = str.split("");   //['1', 'a', 'b', 'c', '1', '2', '3', 'a', 'b', 'c', '4', '5', '6', 'a', 'b', 'c']

10.search()

功能:检索字符串中指定的子字符串,返回第一个与字符串匹配的索引值。
参数:需要被检索的字符串

    const str = "1abc123abc456abc";
    
    const s1= str.search("abc");  // 1
    const s2 = str.search("efg");  //-1
注:如果没有找到任何匹配的子串,则返回-1

11.match()

功能:在字符串内检索指定的值,匹配到就返回指定的字符值。
参数:需要被检索的字符串

    const str = "1abc123abc456abc";
    const s1= str.match("abc"); //['abc', index: 1, input: '1abc123abc456abc', groups: undefined]
    const s2 = str.match("efg"); //null
    注:该方法类似indexOf()和lastIndexOf(),但是它返回指定的值,没有就返回null

12.concat()

功能:连接两个或多个字符串,返回连接后的字符串。
参数:需要连接的字符串。

    const str1="abc ";

    const str2="123";

    console.log(str1.concat(str2));   // "abc 123"
    提示:如果需要拼接字符串,用运算符‘+’更简单,或者使用模板字符串

13.toLowerCase()

功能:把字符串转换为小写。

    const str = "ABC abc";

    console.log(str.toLowerCase()); // abcabc

14.toUpperCase()

功能:把字符串转换为大写。

    const str = "ABC abc";

    console.log(str.toUpperCase()); // ABCABC

数组

1.声明数组的方式

<script>
    //1.new Array() ---构造函数方法
    const arr = new Array() //创建一个空数组
    const arr = new Array('zs','ls','we') //创建一个数组,并初始化
    var arr = new Array(1, 2, 3, 4); //创建一个数组,并初始化

    //2.字面量方式
    const arr = []  //创建一个空数组
    const arr = [1,2,3] //创建一个数组,并初始化
</script>

2.数组扩容

<script>
    //利用修改数组长度来达到数组扩容和缩容的目的
    let arr = [1, 1.2, new Date(), false, "呵呵"];
    arr.length = 10 //扩容
    arr.length = 3 //缩容
</script>       

3.清空数组

<script>
    // 方式1 推荐
    arr = [];   //重新赋值  
    // 方式2
    arr.length = 0; //修改数组长度
    // 方式3
    arr.splice(0, arr.length);  //删除方法
</script>

4.数组的常用方法

  1. push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度
<script>
    arr.push(item)  //参数 被添加到数组末尾的元素
    arr.push(item1,item2,....itemN)
    
    let arr = ['a','b','c','d']
    arr.push('e')
    arr.push('f','g','h')
</script>   

2. pop()

删除数组最后一项,返回删除项

    let arr = ['a','b','c','d']
    arr.pop()   //['a','b','c']

3.shift()

删除数组第一项,返回删除项

     let arr = ['a','b','c','d']
     arr.shift()  //['b','c','d']

4.unshift()

在数组开头添加一个或多个元素,并返回数组的新长度

  arr.unshift(item)
  arr.unshift(item1,item2,....itemN)
  
   let arr = ['a','b','c','d']
   arr.unshift('z')  //['z', 'a', 'b', 'c', 'd']
   arr.unshift('x','y')   //['x','y', 'a', 'b', 'c', 'd']

5.concat()

将两个数组或多个数组合并成一个新的数组,原数组不受影响,浅拷贝

     const arr = ['a','b','c','d']
     const numbers = [1, 2, 3];
     
     const newarr = arr.concat(numbers); //合并两个数组 ['a', 'b', 'c', 1, 2, 3]
     const newarr = num1.concat(num2, num3);	//合并三个数组

6.slice(start,end)

从当前数组中截取一个新的数组,不影响原来的数组,返回一个新的数组,浅拷贝 截取的数组内容 [start,end)

  arr.slice(start, end) //参数 如果start省略,将从下标0开始 end等同
  
  const arr = ['a','b','c','d']
  const newarr =  arr.slice(1,3) //['b', 'c']

7.splice(index,howmany,element1,element2,……)删除、插入、替换

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 index:删除元素的开始位置 howmany:删除元素的个数,可以是0 element1,element2:要替换的新的数据。

//插入
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

//删除
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
    
//替换
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

8.indexOf()

方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1

 const arr = ['a','b','c','d']
 const index = arr.indexOf('b')  //index = 1
 const index = arr.indexOf('e') //index = -1

9.lastIndexOf() //查找数据在数组中最后一次出现的下标

 const arr = ['a','b','c','a','b','c']
 const index = arr.lastIndexOf('b') //index = 4

10.join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

   const arr = ['a','b','c','a','b','c']
   
   const str = arr.join()  // a,b,c,a,b,c
   const str1 = arr.join("")  // abcabc
   const str2 = arr.join('/')  // a/b/c/a/b/c

对象

1.Object.keys(obj)

获取对象中的属性名
参数:对象

   const object1 = {
        a: 'test',
        b: 18,
        c: false
    };

    console.log(Object.keys(object1)); //['a', 'b', 'c']

2.Object.values()

获取对象中的属性值

 const object1 = {
        a: 'test',
        b: 18,
        c: false
    };
console.log(Object.values(object1)) //['test', 18, false]
3、Object.freeze()

阻止修改对象里面的值和阻止添加新元素,只对对象有用
简单的数据类型使用 const

let obj = Object.freeze({
          a:5
        })
obj.a = 8
 obj.b = 8
console.log(obj)
// 直接报错
4、Object.assign()

合并多个对象,其实和扩展符的作用一样,都是浅拷贝
可以用来处理数组去重

   let obj = {
          a:5
        }
        let obj2 = {
          b:8
        }
        console.log(Object.assign(obj,obj2))
        console.log({...obj,...obj2})


 Object.assign([1, 2, 3], [4, 5])
    console.log(Object.assign([1, 2, 3], [4, 5]), '数组使用该方法===')
    // [4, 5, 3]
    // 把数组当作对象来处理
5、hasOwnProperty()

判断对象自身属性中是否具有指定的属性。

let obj = {
             a:5,
             b:6
 }
 console.log(obj.c)  //undefined
console.log(obj.hasOwnProperty('a'))  // true
 console.log(obj.hasOwnProperty('c'))  //false
6,Object.defineProperties(obj,props)

直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

 var obj = {property1:888,property3:777};
Object.defineProperties(obj, {
  'property1': {
    value: 123,
    writable: false
  },
  'property2': {
    value: 'Hello,word',
    writable: true
  }
});
console.log(obj)   
obj.property2 = 456 //修改了
console.log(obj)   
obj.property1 = 456 //不能修改
console.log(obj) 
7、Object.defineProperty(obj,prop,descriptor)

obj---需要定义属性的对象;
prop---需定义或修改的属性的名字;
descriptor---将被定义或修改的属性的描述符;

在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id="test">这是一个测试</div>
        <script>
            var test = document.getElementById("test");
            var data = {};
            var i = 0;
            Object.defineProperty(data, "b", {
                set: function(newValue) {
                    //当data.b的值改变的时候更新#test的视图 
                    test.textContent = newValue;
                },
                get: function() {}
            });
            setInterval(function() {
                i++;
                data["b"] = "data.b的值更新了,视图更新" + i;
            }, 1000);
        </script>
    </body>
</html>

8、Object.getOwnPropertyNames()

获取一个对象的所有键,并组成数组(包括不可枚举属性但不包括Symbol值作为名称的属性)

var obj = {
        age: 10,
        sex: "男",
        name: "bob"
 };
console.log(Object.getOwnPropertyNames(obj))
//["age", "sex", "name"]

9、Object.is()

判断两个值是否相同

  console.log(Object.is('foo', 'foo'))// true

10、Object.getOwnPropertyDescriptors(obj)

返回所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

    const object1 = {
        a: 'test',
        b: 18,
        c: false
    };
  const obj =  Object.getOwnPropertyDescriptors(object1)
  console.log(obj)

image.png