一、变量let和const:
var:
- 可以重复声明
- 无法限制修改无法限制修改
- 没有块级作用域没有块级作用域
let:不能重复声明,变量~可以修改,块级作用域
const:不能重复声明,常量~不可以修改,块级作用域
<script>
window.onload = function() {
var aBtn = document.getElementsByTagName('input');
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
alert(i); //全都是3
};
}
//老方法,麻烦,加一层function
for(var i = 0; i < aBtn.length; i++) {
(function (i){
aBtn[i].onclick = function() {
alert(i); //0,1,2
};
})(i);
}
for(let i = 0; i < aBtn.length; i++) { //let块级作用域
aBtn[i].onclick = function() {
alert(i); //0,1,2
};
}
}
</script>
<input type="button" value="按钮1" >
<input type="button" value="按钮2" >
<input type="button" value="按钮3" >
二、箭头函数:
- 如果只有一个参数,()可以省
- 如果只有一个return,{}可以省如果只有一个return,{}可以省
window.onload = function() {
alert('hello');
};
window.onload = ()=> {
alert('hello');
};
let show = function() {
alert('show');
};
let show = ()=> {
alert('show');
};
show();
let show = function(a) {
return a*2;
};
let show = (a) => { //使用箭头函数
return a*2;
};
let show = a => { //省略()
return a*2;
};
let show = a => a*2; //省略{}
alert(show(12));
三、函数的参数:
- 参数扩展/数组展开
- 默认参数
1.参数扩展
- 收集参数:Rest parameter必须是最后一个
function show(a,b,...args) {
alert(a);
alert(b);
alert(args);
}
show(1,23,556,677,34);
- 展开数组:展开后的效果,跟直接把数组的内容写在这儿一样
let arr=[1,2,3];
function show(a,b,c) {
alert(a);
alert(b);
alert(c);
}
show(...arr); // show(1,2,3); 效果一样
let arr1=[1,2,3];
let arr2=[5,6,7];
let arr=[...arr1,...arr2];
alert(arr); //1,2,3,5,6,7
function show(...args){
fn(...args);
}
function fn(a, b){
alert(a+b);
}
show(12, 5);
2.默认参数
function show(a, b=5, c=12){
console.log(a, b, c);
}
show(99, 19, 88);
四、解构赋值:
- 左右两边结构必须一样
- 右边必须是个东西右边必须是个东西
- 声明和赋值不能分开(必须在一句话里完成)声明和赋值不能分开(必须在一句话里完成)
let [a,b,c] = [1,2,3]; //左右两边结构必须一样
console.log(a, b, c);
let {a,c,d} = {a:12, c:5, d:6};
console.log(a, c, d);
let [{a, b}, [n1, n2, n3], num, str]=[{a: 12, b: 5}, [12,5,8], 8, 'cxzcv'];
console.log(a,b,n1,n2,n3,num,str);
//随意拆成想要的粒度
let [json, arr, num, str]=[{a: 12, b: 5}, [12,5,8], 8, 'cxzcv'];
console.log(json,arr,num,str);
注意:
let [a,b]={a: 12, b: 45}; //错误,左边是数组,右边是json
let {a,b}={12,5}; //右边不是个东西
let [a,b];
[a,b]=[12,5]; //声明和赋值不能分开
console.log(a,b);
五、数组:
方法:
- map 映射 一个对一个
- reduce 汇总 一堆出来一个
- filter 过滤器
- forEach 循环(迭代)
map:
let arr = [12,5,8];
let result = arr.map(function (item) {
return item*2;
});
//箭头函数简写 let result = arr.map(item => item*2);
alert(result); //24,10,16
------------------------------------------------------
let score=[19, 85, 99, 25, 90];
let result=score.map(item=>item>=60?'及格':'不及格');
alert(score);
alert(result);
reduce:
//求和
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
//alert(tmp+','+item+','+index);
return tmp+item;
});
alert(result);
//求平均数
let arr=[12,69,180,8763];
let result=arr.reduce(function (tmp, item, index){
if(index!=arr.length-1){ //不是最后一次
return tmp+item;
}else{ //最后一次
return (tmp+item)/arr.length;
}
});
alert(result);
filter:
let arr = [12,5,8,99,27,36,75];
let result = arr.filter(item => {
if(item % 3 == 0){
return true;
} else {
return false;
}
});
//简写
let result = arr.filter(item => {
return item % 3 == 0;
});
//简写
let result = arr.filter(item => item % 3 == 0);
alert(result);
let arr=[
{title: '男士衬衫', price: 75},
{title: '女士包', price: 57842},
{title: '男士包', price: 65},
{title: '女士鞋', price: 27531},
];
let result = arr.filter(json => json.price >= 10000);
console.log(result);
forEach:
let arr = [12,3,6,8];
//不加参数
arr.forEach(item => {
alert(item);
});
//加参数
arr.forEach((item,index) => {
alert(index + ':' +item);
});