一. 字符串的方法
1. 转换大写
- str.toUpperCase()
let str = 'aBcDeFgHIjK'
let newStr1 = str.toLowerCase()
- css方式实现
text-transform: uppercase;
2. 转换小写
- str.toLowerCase()
let str = 'aBcDeFgHIjK'
let newStr1 = str.toLowerCase()
- css方式实现
text-transform: lowercase;
3. 查找指定字符串第一次出现的位置
- str.indexOf('检索的字符')
- 返回值是字符串第一次出现的索引
<script>
let str = 'abcdsonggesajdkljsakldjasldsa'
// indexOf('要检索的字符串') 如果返回-1 则代表没有找到
let index = str.indexOf('b')
console.log(index); //返回的结果为1
</script>
-
索引从0开始
-
如果没找到则返回-1
4. 提取字符串
- str.substr(从哪个索引开始提取, 提取几个)
<script>
let str = 'ligoudanzhangcuihuazhaotiezhu'
//str[8]开始11个字符: zhangcuihua
let newStr = str.substr(8, 11)
// str[1]开始2个字符: ig
let newStr1 = str.substr(1, 2)
console.log(newStr);
console.log(newStr1);
console.log(str);
</script>
5. 字符串转换成数组
- str.split('分隔符')
<script>
let str1 = 'ligoudan zhangcuihua zhaotiezhu'
let str2 = 'ligoudan,zhangcuihua,zhaotiezhu'
let str3 = 'ligoudan-zhangcuihua-zhaotiezhu'
// 括号里面代表分隔符, 如果只有引号连空格都没有则每个字符都是数组的一个元素
let arr1 = str1.split(' ')
let arr2 = str2.split(',')
let arr3 = str3.split('-')
// 都是输出['ligoudan', 'zhangcuihua', 'zhaotiezhu']
console.log(arr1);
console.log(arr2);
console.log(arr3);
</script>
二. 数组的方法
1. 反转数组 arr.reverse()
- [1,2,3,4,5]->[5,4,3,2,1]
<script>
// 开发当中 后台返回的数据可能是倒序，我们需要反转数组保证逻辑和用户逻辑一致
/*
let arr = ['12.20','12.29','1.2']
转换成
arr = ['1.2','12.29','12.20']
*/
let arr = [4, 3, 2, 1, 9, 8]
// 反转数组
arr.reverse()
console.log(arr);
// 输出的结果为[8, 9, 1, 2, 3, 4]
</script>
2. 数组升序排列 arr.sort(function(a,b){return a - b})
- 升序排列
<script>
let arr = [4, 9, 0, 10, 240, -12, 98]
// arr.sort() 数组排序
// a - b从小到大排序
arr.sort(function (a, b) {
return a - b
})
console.log(arr);
</script>
3. 数组降序排列 arr.sort(function(a,b){return b - a})
- 降序排列
<script>
let arr = [4, 9, 0, 10, 240, -12, 98]
// arr.sort() 数组排序
// b - a从大到小排序
arr.sort(function (a, b) {
return b - a
})
console.log(arr);
</script>
4. 删除数组当中的指定元素并拼接 arr.splice(从哪里删,删几个,追加元素,追加元素)
<script>
let arr = ['李狗蛋', '张翠花', '赵铁柱', '王小二']
// arr.splice(从哪里删,删几个,追加元素,追加元素)
arr.splice(1, 2, '靓仔', '仙女兔')
// 输出结果: ['李狗蛋', '靓仔', '仙女兔', '王小二']
console.log(arr);
</script>
5. 查找指定内容在数组中第一次出现的位置 arr.indexOf('检索的数组元素')
-
返回值是数组中第一次出现指定内容的索引
- 索引从0开始
-
如果没找到则返回-1
-
跟上面字符串的方法类似, 类比就行了
6. 清空数组
arr.length = 0
arr = []
7. 数组转字符串 arr.join('')
- 括号里面为分隔符，默认为逗号
<script>
let arr = ['ligoudan', 'zhangcuihua', 'zhaotiezhu']
let str = arr.join('-')
console.log(str);
// 输出结果: ligoudan-zhangcuihua-zhaotiezhu
let strs = arr.join('')
console.log(strs);
// 输出结果: ligoudanzhangcuihuazhaotiezhu
</script>
三. 展开运算符 ...
<script>
let arr1 = [1, 2, 3, 4, 5, 6]
/*
let arr2 = arr1
复制的是地址，最后的数据其实都是同一个
*/
// 展开运算符 ...
// 将arr1的数据赋值过来, 相当于复制arr1并且去掉包裹数据的括号
let arr2 = [...arr1]
arr2[0] = 1000
console.log(arr1);
</script>
- 相当于复制的同时去掉包裹数据的括号
- 应用:
let arr = [1,2,3,4,5,6]
Math.max(...arr)
四. 交换变量的值
[a, b] = [b, a]
- 比temp的方法简便多了
let a = 0, b = 1, temp;
temp = a;
a = b;
b = temp;
五. 数组遍历方法
1. Array.forEach(function (v, i){ })，用于调用数组的每个元素，并将元素传递给回调函数。原数组不变
<script>
let arr = [4, 9, 0, 10, 240, -12, 98]
let newArr = []
// for (let i = 0; i < arr.length; i++) {
// newArr.push(arr[i] + 10)
// }
// v -> value值 i -> 索引
arr.forEach(function (v, i) {
// v + 10 推入到新数组中 newArr.push()
newArr.push(v + 10)
})
console.log(newArr);
// 输出结果: [14, 19, 10, 20, 250, -2, 108]
</script>
- eg: 统计字符串中字母出现的字数
<script>
/*
{
a: 4,
b: 3,
c: 6
}
*/
let str = 'aaabbbbbbccdeeeeff'
// 字符串转数组
let arr = str.split('')
console.log(arr);
// 声明一个空对象
let obj = {}
arr.forEach(function (v, i) {
// 判断 如果obj中有对应的属性名 我们就+1 如果没有 就创建一个键值对
if (obj[v]) {
obj[v] += 1
} else {
obj[v] = 1
}
})
console.log(obj);
</script>
2. Array.map(function (v, i){ })，原数组的每一项执行函数后，返回一个新的数组。原数组不变
<script>
// let arr = ['13', '3', '79', '1', '10', '24', '78', '2']
// // 个位数补0返回新数组
// let newArr = arr.map(function (v, i) {
// return +v < 10 ? '0' + v : v
// })
// console.log(newArr);
let arr = [{
name: '李狗蛋',
age: 16,
sex: '男'
}, {
name: '张翠花',
age: 20,
sex: '女'
}, {
name: '赵铁柱',
age: 25,
sex: '男'
}, {
name: '王小二',
age: 19,
sex: '男'
}]
let newArr = arr.map(function (v, i) {
// v.age = v.age + 1
v.age += 1
return v
})
console.log(newArr)
</script>
- eg: 将字符串转换为驼峰命名
<script>
let str = 'GET-elemenTs-bY-cLAss-nAMe'
// getElementsByClassName
function getName(str) {
// 1. 先要统一的变换成小写字母
let newStr = str.toLowerCase()
// 2. 字符串根据-分隔成数组
let arr = newStr.split('-')
// console.log(arr);
let newArr = arr.map(function (v, i) {
// 分支判断语句
// 第一个单词不需要转换大写
if (i !== 0) {
// v 代表遍历的当前项目 -> elements
// v[0] 首字母 -> e
// v[0].toUpperCase() ->E
// console.log(v[0].toUpperCase());
return v[0].toUpperCase() + v.substr(1)
}
return v
})
// 拿到新数组后，需要通过arr.join() 转换成字符串
let res = newArr.join('')
return res
}
console.log(getName(str1));
</script>
3. Array.filter(function(v,i){})，过滤数组中，符合条件的元素并返回一个新的数组
<script>
// filter 过滤
let arr = [13, 0, '', 90, 78, '', '']
// 去掉数组中的空字符串
let newArr = arr.filter(function (v, i) {
// return 符合推入新数组的条件->布尔值(过滤)
return v !== '' && v !== 0
})
console.log(newArr);
// 输出结果: [13, 90, 78]
</script>
- eg: 数组去重
<script>
let arr = ['aa', 'bb', 'aa', 'cc', 'bb']
let newArr = arr.filter(function (v, i) {
// console.log(i);
// i 数组当中每一项的索引值
// console.log(arr.indexOf(v));
// 第一轮 arr.indexOf('aa') -> 0 i -> 0
// 第二轮 arr.indexOf('bb') -> 1 i -> 1
// 第三轮 arr.indexOf('aa') -> 0 i -> 2
// 第四轮 arr.indexOf('cc') -> 3 i -> 3
// 第五轮 arr.indexOf('bb') -> 1 i -> 4
return arr.indexOf(v) === i
})
console.log(newArr);
// 输出结果: ['aa', 'bb', 'cc']
</script>
