JavaScript第六天

拓展

常用数组方法

​ 1.反转数组

​ arr.reverse() 反转数组，会改变原数组，并返回反转后的新数组

let arr = [4,3,2,1]
arr.reverse()
console.log(are)

​ 2.清空数组

let arr = [1,2,3,4]
// arr = []
arr.length = 0

​ 3.数组排序

​ arr.sort(function (a, b) { return a - b }) 数组升序排列 会改变原数组，并返回反转后的新数组

let arr = [6,5,4,3,2,1]
arr.sort(function(a,b){
  return a - b
})
//[1,2,3,4,5,6]

​ arr.sort(function (a, b) { return b - a }) 数组降序排列 会改变原数组，并返回反转后的新数组

let arr = [1,2,3,4,5,6]
arr.sort(function(a,b){
  return b - a
})
//[6,5,4,3,2,1]

​ 4.数组转换成字符串

​ arr.splice(index,howmany,arr1,arr2...) ，删除元素并添加元素，从index位置开始删除howmany个元素，并将arr1、arr2...数据从index位置依次插入。howmany为0时，则不删除元素

let arr = ['1','2','3','4']
let str = arr.join('+')
//1+2+3+4

​ 5.数组删除位置添加新元素

let arr = ['李狗蛋', '张翠花', '赵铁柱', '王小二']
​
// arr.splice(从哪里删，删除几个，追加元素····)
arr.splice(1, 2, '张三', '李四')

​ 6.交换变量数据

let a = 1
let b = 10;
// 交换语句前，要用分号分隔，否则会报错
[a, b] = [b, a]

​ 7.展开运算符

// 展开运算符 ...  首先arr2在堆里面开辟了新的内存，然后用arr1里面的值填充进arr2里面let arr1 = [1, 2, 3, 4, 5, 6, 7]
let arr2 = [...arr1]
arr2[0] = 100
console.log(arr1);
console.log(arr2);

数组遍历

• forEach()

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

// [4, 9, 0, 10, 240, -12, 98] 将原有数组中每一项的数据加10返回新数组
let arr = [4, 9, 0, 10, 240, -12, 98]
let newArr = []
​
// v -> value 值
// i -> index 索引
arr.forEach(function(v, i) {
    newArr.push(v + 10)
    // newArr[newArr.length] = v + 10
})
console.log(newArr);
// [14, 19, 10, 20, 250, -2, 108]

• map()

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

// ['13','3','79','1','10','24','78','2'] 个位数补0返回新数组
let arr = ['13', '3', '79', '1', '10', '24', '78', '2']
    // map会返回一个新的数组
let newArr = arr.map(function(v, i) {
    return +v < 10 ? '0' + v : v
})
console.log(newArr);
// ['13', '03', '79', '01', '10', '24', '78', '02']

• filter()

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

//数组去重 [1,1,2,3,4,4,5,6,6,6,6,7,7,8,9,9,9]
​
let arr = [1,1,2,3,4,4,5,6,6,6,6,7,7,8,9,9,9]
let newArr = arr.filter(function(v, i){
    return i === arr.indexOf(v)
})
console.log(newArr)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

案例

​ 1.统计字符串 'abcoefoxyozzopp' 中每个字符出现的次数，给目标返回对象的数据类型

let str = 'abcoefoxyozzopp'
let arr = str.split('')
let obj = {}
let newArr = arr.forEach(function(v, i) {
    if (obj[v]) {
        obj[v] += 1
    } else {
        obj[v] = 1
    }
})
console.log(obj);
// {a: 1,b: 1,c: 1,e: 1,f: 1,o: 4,p: 2,x: 1,y: 1,z: 2}

​ 2.封装一个函数，实现功能：往函数传参为该格式字符串：'get-elements-by-class-name'，得到驼峰命名法的返回值为‘getElementsByClassName’

function getName(str, sym) {
    let newStr = str.toLowerCase()
    let arr = newStr.split(`${sym}`)
    let newArr = arr.map(function(v, i) {
​
        if (i !== 0) {
            // console.log(v[0].toUpperCase());
            // console.log(v.substr(1));
            return v[0].toUpperCase() + v.substr(1)
        }
                return v
    })
    let res = newArr.join('')
    return res 
}
console.log(getName('GET-elemenTs-bY-cLAss-nAMe', '-'));
// getElementsByClassName

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

function getUrlMessage(str) {
   let arr = str.split('?')
       // console.log(arr);
   let newArr = arr[1].split('&')
       // console.log(newArr);
   let obj = {}
   let resArr = newArr.map(function(v, i) {
       let arr1 = v.split('=')
           // console.log(arr1);
       obj[arr1[0]] = arr1[1]
   })
   return obj
}
​
console.log(getUrlMessage(str));
// {key0: 'haha', key1: 'hello', key2: 'xixi'}

\