一、为什么要封装函数
- 函数可以把某些代码逻辑”封装“起来，在需要的时候通过调用函数来使用这些逻辑。
- 函数可以复用代码，让开发可以写更少的代码，翻遍后期维护代码。
1.0 数组拼接
toUpperCase():用于把字符串转换成大写，往str变量的值来看，把每个单词首字母转换成了大写
split():方法用于把一个字符串分割成字符串数组。
slice(start, end): 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
join():这个方法用于数组中的所有元素拼接在一起。
let str = "get-elements-query-selector-all"
let arr = str.split("-")
for (let i = 1; i < arr.length; i++) {
arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1)
}
str = arr.join("")
console.log(str) //getElementsQuerySelectorAll1.1
let str2 = 'get-elements-query-selector-all';
let arr1 = str2.split('-');
for(let i = 1; i < arr1.length; i++){
arr1[i] = arr[i][0].toUpperCase()+arr[1].slice(1);
}
str2 = arr1.join('');二、封装转驼峰逻辑
toUpperCase:方法用于把字符串转换为大写。
<script>
let str1 = fn("get-elements-by-class-name")
let str2 = fn("get-elements-query-selector-all")
let str3 = fn("get-girlfriend-my-amazing-lover")
function fn(str) {
let arr = str.split("-")
for (let i = 1; i < arr.length; i++) {
arr[i] = arr[i][0].toUpperCase() + arr[i].slice(1)
}
str = arr.join("")
return str
}
console.log(str3)
</script>三、封装函数
//编程数组
//倒序数组 .reverse
//在编程字符串
let str1 = fn('我爱你');//你爱我
let str2 = fn('ABC');//CBA
let str3 = fn('猪马牛羊');//羊牛马猪
function fn(str){
return ste.split('').reverse().join();
}四、参数类型
4.0
function fn(x){
console.log(x);
}
fn(10);
fn(1+1);
fn(100 && 200);
fn(Math.random());//任意随机数4.1
function fn(x){
console.log(x);
}
fn('你好');//string
fn(true);//boolean
fn(null);//NULL
fn([11,22,33]);//arr(数组)
fn({name:'小崔'});//Object
fn(function(){});//回调函数五、回调函数
5.0
function fn(num, y){
y(num);
}
fn(200,function(x){
console.log(x);
})5.1
事件赋值的函数,一般叫事件句柄(事件回调函数)
- oBtn.onlick = function(){}
- 函数 => 一套的逻辑的封装 => 每套逻辑都有若干步骤 => 一套动作的封装. => 一个函数代表一套动作
- 例：我们吃饭把 => 吃饭就是一种函数封装 =》封装的吃饭的一套动作
<body>
<!-- 封装一个函数，用于给任意元素添加任意事件，触发任意事件逻辑
-->
<div id='div'> 1111</div>
<button>按钮</button>
</body><script>
let oDiv = document.querySelectorAll('div')[0];
let oBtn = document.querySelectorAll('button')[0];
fn(oDiv,'onclick',function(){
alert('谁点我了');
});
fn(oBtn, 'onmouseover', function(){//onmouseover 鼠标移入事件
console.log('鼠标移入');
console.log('干饭了');
});
function fn(el,event, callback){
el[event] = callback
}
</script>六、对象的中括号
<script>
const obj ={
name:'赵五',
age:'18'
}
let name = 'age';
console.log(obj[age]);
console.log(obj[name]);
// console.log(obj.name);
function fn(obj,key){
console.log(obj[key]);
}
fn(obj, 'name');
fn(obj, 'age');
</script>七、数组遍历
数组遍历 => 数组循环 => 不用for循环来遍历数组的方法。
<script>
let arr = ['我', '他', '你']
// 如何用forEach改写for
// 把循环体内的代码放到forEach的回调函数内。
// arr.forEach(function (item, i, arr){
// console.log(item, i);
// })
arr.forEach((item, i , arr) =>{
console.log(item, i);
console.log(arr);
})
</script>八、forEach处理DOM
html
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>js
<script>
let aLi = document.getElementsByTagName('li');
// aLi.oforEach((item, i) =>{
// console.log('item');
// item.style.backgroundColor = 'red';
// })
Array.from(aLi).forEach((item, i) =>{
item.style.backgroundColor = 'red';
});
</script>九、forEach封装
<body>
<div id="wrap">111</div>
</body>for循环方式
<script>
let oDiv = document.getElementById('wrap');
let arr = [11, 22, 33]
for(let i = 0; i < arr.length; i++){
console.log('arr[i]');
document.body.innerText += arr[i];
}
</script>for循环方式
for(let i = 0; i < arr.length; i++){
alert(arr[i]);
oDiv.innerHTML += arr[i];
}forEach循环方式
myForEach((item, i, arr) =>{
console.log(arr[i]);
document.body.innerText += arr[i];
});
myForEach((item, i, arr) =>{
oDiv.innerHTML += arr[i];
alert(arr[i]);
}); function myForEach(fn){
for(let i = 0; i < arr.length; i++){
fn(arr[i], i, arr);
}
}十、map
- map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
- map() 方法按照原始数组元素顺序依次处理元素。
let arr = [11, 22, 33]
arr.forEach((item, i, arr) =>{
console.log(item);
arr[i] += 1;
}) arr = arr.map((item, i, arr) =>{
return item + 1;
}) let arr = [100, 200, 300];
for(let i = 0; i < arr.length; i++){
arr[i] = arr[i] = '';
}
arr = arr.map((item, i, arr) =>{
arr[i] = arr[i] + '';
})
arr = arr.map((item, i, arr) =>{
return item + '';
})十一、map封装
<script>
let arr = [100, 200, 300];
function myMap(fn){
let newArr = [];
for(let i = 0; i < arr.length; i++){
newArr.push(fn(arr[i],i))
}
return newArr
}
arr = myMap ((item, i) =>{
return item + ''
})
</script>十二、filter
filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。
<script>
let arr = [1, 2, 3, 4];
let newArr = arr.filter((item, i, arr) =>{
return item % 2 === 0
});
</script>十三、every和some
<script>
let arr = [1, 3, 4, 5];
// 如何判断arr中的所有元素都是奇数?
// revery用来做判断
// 返回布尔值
let flag = arr.every((item, i) =>{
return item % 2 !== 0;
});
if(flag){
alert('全是计数')
}
</script> // 如何判断数组中是否有奇数=>some
let flag = arr.some((item, i) =>{
return item % 2 !== 0
});
if(flag){
alert('有至少一个奇数');
}十四、reduce
reduce => 把所有(部分)元素,经过某个逻辑处理后,返回一个结果
reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。
参数：
prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
cur 必需。表示当前正在处理的数组元素；
index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
arr 可选。表示原数组；
init 可选。表示初始值。
<script>
let arr = ['1', '2', 3];
// 默认的循环次数是length-1
// 第一次循环
// total默认是第一个元素
// item默认是第二个元素(默认从第二个元素开始循环)
// 非第一次循环
// total的只是回调函数return的值
// item就是当前元素
// num的返回值就是最后一次循环total的值
let num = arr.reduce((total, item, i) =>{
// console.log('total',total);
// console.log('item',item);
// console.log('i',i);
return total + item;
})
</script>十五、reduce
<script>
let arr = [{num:10}, {num:20}, {num:30}]
// let num = arr.reduce((total, item) =>{
// return total.num + item.num
// });
// 如果reduce有第二个参数,则total默认就等于这个参数.(total的默认值就不再是第一个元素)
// 这是reduce的循环次数就是数组的元素个数
let num = arr.reduce((total, item) =>{
return total + item.num
}, 0);
</script>
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
