JavaScript 知识总结【数组、字符串方法】

刀刀小站
150 阅读6分钟

数组、字符串方法

字符串方法

转为大写

  1. JavaScript 方法

    str.toUpperCase()

  2. CSS 方法

    text-transform: uppercase;

转换小写

  1. JavaScript 方法

    str.toLowerCase()

  2. CSS 方法

    text-transform: lowercase;

查找指定字符串第一次出现的位置

str.indexOf()

返回值是字符串第一次出现的索引，从0开始。如果没找到返回-1。

截取字符串

str.substr('start','howmany')
  • start ：从第几个索引开始截取，如果是负数则从后面往前截取
  • howmany ：截取几个字符（如果不写则截取后面全部字符，负数无意义，看作0）
  • 不会改变原字符串

字符串转数组

str.split()
  • 括号内填的是分隔符
  • 如果括号内啥都不填则默认为英文逗号

替换字符

str.replace('where','what')
  • where ：被替换掉的字符
  • what ：替换为的字符
  • 只会替换第一个符合条件的字符，想要多个替换需要用到函数

去掉空格

str.trim()

关键字检索

str.includes('string','num')
  • string ：要查找的对象
  • num ：第几个字符开始查找（不写默认是0） 示例：
        let chao = ["牛肉", "大鱼大肉", "羊肉"];
        let love = "我喜欢吃牛肉";
        let stauts = chao.some(chao => {
            return love.includes(chao);
        });
        if (stauts) {
            console.log("找到关键词了");
        }

重复生成

*.repeat()

*：所要重复生成的字符

字符串拼接

str.concat('string')
  • string ：要拼接的字符串


数组的方法

数组的操作

检测是否为数组

arr instanceof Array

数组元素增删

  • 增加元素

  1. 开头增加

    unshift()

    • unshift 是可以直接给数组开头追加新的元素
    • unshift() 参数直接写数组元素
    • unshift 的返回值是新数组的长度
    • 原数组也会发生变化

  2. 结尾增加

    push()

    • push 是可以直接给数组末尾追加新的元素
    • push() 参数直接写数组元素
    • push 的返回值是新数组的长度
    • 原数组也会发生变化
  • 删除元素

  1. 开头删除

    shift()

    • shift 是可以删除数组第一个元素，一次只能一个
    • shift() 没用参数
    • shift 的返回值是被删除的那个元素
    • 原数组也会发生变化

  2. 结尾删除

    pop()

    • pop 是可以删除数组最后一个元素，一次只能一个
    • pop() 没用参数
    • pop 的返回值是被删除的那个元素
    • 原数组也会发生变化

反转数组

arr.reverse()
  • 会改变原数组
  • 反转后返回新数组

清空数组

  1. arr.length=0
  2. arr=[]

数组排序

  1. 升序排序

    arr.sort(function( a, b){
        return a-b
}

  2. 降序排序

    arr.sort(function( a, b){
        return b-a
}

转为字符串

arr.join()

括号内填转为字符串的连接符号。默认逗号连接

删除元素并添加元素

arr.splice(index,howmany,arr1,arr2...)
  • index ：从第 index 位开始
  • howmany ：删 howmany 位元素，为0时则不删元素
  • arr1 、arr2 ：插入的元素，不写则不添加

获取数组索引

  1. 根据字符返回位置

  • 返回第一个符合条件的数组元素

    arr.indexOf(str,num)
    • str ：要查找的字符
    • num ：起始位置

  • 返回最后一个符合条件的数组元素索引

    arr.lastIndexOf()
  1. 根据位置返回字符

  • charAt(index)

  • charCodeAt(index)返回字符的 ascll 码

删除元素与追加元素

arr.splice(index,howmany,arr1,arr2...)
  • index ：从哪里开始删
  • howmany ：删几个
  • arr1、arr2：追加元素

如果不打算删除而是在某元素后追加元素，则从哪里删选该元素后一个元素的索引号，删几个填0

类型转换

  1. 数组转为字符串
arr.join()
  • 括号内添加符号来更改分隔符，不填默认为逗号
  • 不会改变原数组，需要用新的变量来接收转换后的结果

展开运算符

语法：...

  • 在函数中，可用于代替形参全部接收未知数个实参
  • 在数组中，可用于接收元素合并数组

交换变量值

[a,b]=[b,a]

数组遍历方法

  • arr.forEach(function(v,i){})

    用于调用数组中的每一个元素，并将元素传递给回调函数，原数组不变。

  • arr.map(function(v,i){})

    原数组的每一项执行函数后，返回一个新的数组。原数组不变

  • arr.filter(function(v,i){})

    过滤数组中，符合条件的元素并返回一个新的数组



总结

数组、字符串方法.png



例题

  1. 统计字符串中每个字符出现的次数，要求以对象形式呈现。

    解析：利用 forEach() 方法对数组 arr 进行循环遍历，用对象名[变量] obj[v] 的格式方法检测当前的值是否在对象内出现过。遇到当前对象 obj{} 内没有的值，则为其赋值为1；如果有则让其值加1。

        let str = 'aabbbbccccccddddddeee'

    // 转为数组的形式好遍历
    let arr = str.split('')
    console.log(arr);

    let obj = {}

    arr.forEach((v, i) => {
        if (obj[v]) {
            obj[v] += 1
        } else {
            obj[v] = 1
        }
    })
    console.log(obj);
    ```

  2. 封装一个函数，实现功能：往函数传参为该格式字符串，得到驼峰命名法的返回值

    解析：先把该字符串全部换为小写，再转换为数组，利用 map() 循环返回值给一个新数组，对数组每一项进行判断，如果该元素索引号大于0（即排除第一个单词），则让它的第一个字母大写，再用 substr() 方法拼接返回，否则直接返回。

        let str = 'GET-elemenTs-bY-cLAss-nAMe'

    function changeStr(str) {
        str = str.toLowerCase()

        let arr = str.split('-')
        console.log(arr);

        let newArr = arr.map((v, i) => {
            if (i > 0) {
                return v[0].toUpperCase() + v.substr(1)
            } else {
                return v
            }
        })
        return newArr = newArr.join('')
    }
    console.log(changeStr(str));

  3. 有一个url(字符串)如下: <http://www.heima.com?key0=haha&key1=hello&key2=xixi> ; 要求处理此 url , 得到一个如下格式的对象: let obj = { key0:’haha’, key1:’hello’, key2:’xixi’ }

        let str = 'http://www.heima.com?key0=haha&key1=hello&key2=xixi'

    let array = str.split('?')
    console.log(array);

    let arr = array[1].split('&')
    console.log(arr);

    let arr1 = arr.map((v, i) => {
        return [v.split('=')[0], v.split('=')[1]]
    })
    console.log(arr1);

    let obj = Object.fromEntries(arr1)
    console.log(obj);


今日错题

  1. 下列哪一个语句结果为22 （） let num1 = 5; let num2 = 4;

    A. ++num2 + num1 * 2 + num2++

    B. ++num2 + num1 * 2 + ++num2 + 2

    C. ++num2 + num1 * 2 + num2 * 2 - 2

    D. num2++ + num1 * 2 + num2 * 2 - 2

    答案：D；我选：C

    解析：++i 是先自增再运算， i++ 是先运算再自增，D选项为4+10+10+2=22

  2. 下面结果是

    11TI.png

    A. '小黑','小黑','小黑'

    B. undefined,undefined,13

    C.'小黑',undefined,undefined

    D.'小黑',undefined,13

    答案：C；我选：D

    解析：对象的属性访问有两种方式，第一种是对象名.属性名，第二种对象名['属性名']，注意需要引号，如果没有引号则中括号内填的是变量，会去全局变量中找。第一种方法不能使用变量，因此浏览器去对象中找 aaa 属性名，找不到，返回 undefined 。

  3. 下面结果是

    12ti.png

    A. 10

    B. 9

    C. 11

    D. 以上都不对

    答案：D；我选：A

    解析：变量 i 赋值在 for 循环内，属于块级变量，无法在全局中引用到，全局中打印变量 i 只能是报错：变量 i 未声明。

  4. 下面的结果是

    13ti.png

    A. 20 10

    B. 10 11

    C. 20 11

    D.以上都不对

    答案：D；我选：C

    解析：变量 a 在函数作用域中已经被声明了，因此会就近原则，但是是用 let 进行声明的，没有预解析，因此报错。

avatar
文章
阅读
粉丝