JS_数组_字符串常用方法

01-复习
    数组
        字面量：[]
构造函数：new Array(10)   一个值的时候是长度
有下标，从0开始
有长度，从1开始数
    数组操作
         push pop shift unshift slice splice concat reverse join sort indexOf

02-练习
     写一个去重计数 {a:n, b:n, c:n, d:n}
        <script>
        // { a: n, b: n, c: n .... }
        var arr = ['c', 'c', 'd', 'a', 'b', 'c', 'd', 'b', 'c', 'd', 'a', 'b', 'c']
        /*
            var obj = { c: 3, d: 1, a: 1, }
            obj[name] === undefined
                obj[name] = 1
            obj[name] !== undefined
                obj[name] += 1
            obj[name] === undefined
                obj[name] = 1
            obj[name] === undefined
                obj[name] = 1
            obj[name] !== undefined
                obj[name] += 1
        */
        var obj = {}

        // console.log(obj.a)
        // obj.a = 1
        // console.log(obj)

        // var name = 'a'
        // obj[name] = 1
        // console.log(obj)

        for (var i = 0; i < arr.length; i++) {
            // console.log(arr[i])
            var name = arr[i]

            if (obj[name] === undefined) {
                obj[name] = 1
            } else {
                obj[name] += 1
            }

            console.log(obj)
        }

    </script>

02-练习2
    理解对象
        <script>
        var obj = {
            'name': 'Jack',
            'age': 18
        }

        var str = 'name'

        console.log(obj.name)        // 使用点操作
        console.log(obj['name'])     // 使用字符串查找属性
        console.log(obj[str])           // 传参形式
    </script>

03-ES5
    a.发展历史
            ECMAScript
    ES3
    ES5

   function fn() {}
   var fn = () => {}
    b.数组的循环方法
         ES5
        - 数组的循环方法
        - forEach map filter some every indexOf
        - 不兼容ie 6 7 8
    c.使用
        var arr = [12, 5, 7, 99, 103]

        // arr.forEach(function (ele, index, arr) {
        //     // console.log(ele)         // 数组里面每一项
        //     // console.log(index)       // 下标
        //     console.log(arr)            // 数组
        // })

        // 返回一个新数组
        // var res = arr.map(function (ele, index, arr) {
        //     return arr
        // })
        // console.log(res)

        // 返回一个新数组
        // var res = arr.filter(function (ele, index, arr) {
        //     return ele > 50
        // })
        // console.log(res)

        // 返回一个布尔值
        // 有一个满足条件就返回true
        // var res = arr.some(function (ele, index, arr) {
        //     return ele > 50
        // })
        // console.log(res)

        // 返回一个布尔值
        // 所有值满足条件才会返回true
        var res = arr.every(function (ele, index, arr) {
            return ele > 50
        })
        console.log(res)

04-严格模式
     'use strict'  //严格模式
        <script>
        'use strict'        // 严格模式
        // var a = 12
        // console.log(a)

        // 不加var的变量算全局变量
        // 不加var是不规范写法
        // function fn() {
        //     var a = b = c = d = 12
        // }
        // fn()
        // console.log(d)

        // 错误写法
        // if (true) {
        //     function fn() { }
        // }
        // fn()
    </script>

05-ASCII码
      ASCII
     - 126 位

     UTF-8 万国码
     gb2312 / gbk 中国

     十六进制：0 - 9 a - f
     中文头：4e00
     中文尾：9fa5
          for (var i = 0x4e00; i < 0x9fa5; i++) {
            document.write(String.fromCharCode(i) + ' ')
        }

06-字符串
      字符串
    - 在引号里面的都是字符串
        字面量
              var str = 'hello qianfeng'
        console.log(str)
        console.log(str[2])
        console.log(str.length)
        构造函数
             var str2 = new String('heiheihei')
        console.log(str2)
        console.log(str2[2])
        console.log(str2.length)

07-字符串常用方法
      indexOf lastIndexOf slice split replace toUpperCase toLowerCaes
         <script>
        
        var str = 'Hello qianfeng'

        // indexOf
        // - 查找:返回下标，找不到返回-1
        // console.log(str.indexOf('e'))         // 1
        // console.log(str.indexOf('c'))         // -1

        // lastIndexOf
        // - 查找:返回下标，找不到返回-1
        // console.log(str.lastIndexOf('e'))    // 11
        // console.log(str.indexOf('c'))         // -1
        // var arr = ['jpg', 'gif', 'jpeg', 'webp']
        // var str = '98hu328vg28g32g.abc.avi.mp3.jpg'
        // console.log(str.lastIndexOf('.'))

        // slice
        // - 复制
        // console.log(str.slice(str.lastIndexOf('.') + 1))
        // var str2 = str.slice(str.lastIndexOf('.') + 1)
        // if (arr.indexOf(str2) !== -1) {
        //     alert('支持文件格式')
        // } else {
        //     alert('不支持文件格式')
        // }

        // split
        // - 转数组
        // console.log(str.split())
        // console.log(str.split(''))
        // console.log(str.split(' '))
        // console.log(str.split('e'))
        // var str = '2022-2-15'
        // console.log(str.split('-').join('/'))

        // replace
        // - 替换
        // console.log(str.replace('o', '*'))
        // console.log(str.replace(/e/g, '*'))

        // toUpperCase
        // - 转大写
        // console.log(str.toUpperCase())

        // toLocaleLowerCase
        // - 转小写
        console.log(str.toLocaleLowerCase())
    </script>

08-字符串练习
     a.100000 转成钱币格式
         // 100000 转成钱币格式
        // - 100,000
        var num = 10000000

        function mFn(num) {
            num += ''       // 让数字转成字符串

            var arr = num.split('').reverse()  // 切成数组并且反转

            var newArr = []         // 建立新数组存逗号，为什么不用原来的数，如果加内容会改变数组长度循环会出问题

            for (var i = 0; i < arr.length; i++) {
                newArr.push(arr[i])         // 把每个值都存到新数组里面

                if ((i + 1) % 3 === 0) {        // 到第三个值多存个逗号
                    newArr.push(',')
                }
            }

            var str = newArr.reverse().join('')     // 把数组反转过来，在把数组变成字符串

            if (str[0] === ',') {       // 判断有没有多出来的逗号，有就替换掉
                str = newArr.reverse().join('').replace(',', '')
            }

            // console.log(str) 

            return str      // 返回一个正确结果
        }
        var str = mFn(num)

        // console.log(str)
    b.hello qianfeng -> Qianfeng Hello
         // hello qianfeng -> Qianfeng Hello
        function fn(str) {
            var arr = str.split(' ')        // 先切成数组

            var newArr = []                 // 存拼接好的字符串

            arr.forEach(function (ele) {
                // console.log(ele[0].toUpperCase() + ele.slice(1))
                // console.log(ele.slice(1))
                newArr.push(ele[0].toUpperCase() + ele.slice(1))        // 把拼接好的字符串存到新数组里面
            })

            // console.log(newArr.reverse().join(' '))
            return newArr.reverse().join(' ')       // 把数组反转，再转成字符串，返回出去
        }
        var str2 = fn('hello qianfeng')
        console.log(str2)

09-字符串练习2
    转换格式 字符串---对象 
          // http://www.baidu.com/?username=admin&password=1234567
        // http://www.baidu.com/?username=admin&password=123456&id=9527
        // { username: 'admin', password: '123456', id: 9527 }
             <script>
        // http://www.baidu.com/?username=admin&password=1234567
        // http://www.baidu.com/?username=admin&password=123456&id=9527
        // { username: 'admin', password: '123456', id: 9527 }

        function strQuery(str) {
            str = str.slice(str.indexOf('?') + 1)           // 字符串把问号后面的数取到
            var arr = str.split('&')                        // 字符串切成数组
            var obj = {}                                    // 存结果

            arr.forEach(function (ele) {
                // console.log(ele.split('='))
                var name = ele.split('=')[0]                // 把等号切掉，变成数组第0个就是name
                var value = ele.split('=')[1]               // 把等号切掉，变成数组第1个就是value

                obj[name] = value                           // 给对象赋值属性名和属性值
            })

            // console.log(obj)
            return obj
        }
        // var obj = strQuery('http://www.baidu.com/?username=admin&password=123456&id=9527')

        // console.log(obj.username)
        // console.log(obj.id)

        // 对象转字符串
        // - { username: 'admin', password: '123456', id: 9527 } -> username=admin&password=123456&id=9527
        function queryStr(obj) {
            var arr = []

            for (var attr in obj) {
                // console.log(attr)
                // console.log(obj[attr])
                var str = attr + '=' + obj[attr]

                arr.push(str)
            }

            // console.log(arr.join('&'))
            return arr.join('&')
        }
        var obj = { username: 'admin', password: '123456', id: 9527 }
        var str = queryStr(obj)

        console.log(str)
    </script>