1-let的应用
let声明的变量
<body>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
</body>
<script type="text/javascript">
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
this.style.color = 'red';
}
}
</script>
var声明的变量
<body>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
<button type="button">按钮</button>
</body>
<script type="text/javascript">
let btns = document.getElementsByTagName("button");
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
btns[i].style.color = 'red';
}
}
</script>
2-字符串的扩展
1、模板字符串---在常量和变量拼接的时候,整个字符串使用`${变量}`的方式
var stu = {
name:'张三',
age:25
}
txt.innerText = `学生的姓名:${stu.name},学生的年龄是${stu.age}`;
2、标签模板-----模板字符串不仅仅可以按照上述方式使用,还可以跟在一个函数名后面 --- 该函数将被调用来处理这个模板字符串
function fun(x,y,z){
console.log(x,y,z);
}
let a = 'world';
let b = 'China';
let c = 'Shanghai';
fun`one${a}two${b}three${c}`
let m = 10;
let n = 100;
let j = 1000;
fun`${m}${n}${j}`
fun`10 100 1000`
3-解构赋值
在es6中,允许按照一定的模式,从数组和对象中提取值,按照一定的规则对变量进行赋值
let [a,b,c] = [1,2,3];
console.log(a,b,c);
let m = 'js高级';
let n = 'hello';
[m,n] = [n,m]
console.log(m,n);
let stu = {
name:'zs',
age:28
}
let {name,age,address} = stu;
console.log(stu);
let [x,y,z] = 'hello'
console.log(x,y,z);
let {length:len} = 'hello'
console.log(len);
function fun([x,y]){
console.log(x,y);
}
fun([2,4])
4-数组的扩展
数组的遍历 arr.forEach(function(item,index,arr){})
forEach()只能遍历数组
Array.form(类数组)----可以将类数组转化为数组之后,使用上述方式
new Array(n)---表示输入的是长度为n的数组
Array.of(n)----表示输入的是一个n的元素,不是长度
arr.find(function(){}) --- 得到的是数组中第一个符合条件的值
arr.filter(function(){}) ---可以把所有符合条件的数过滤出来
arr.splice(x,y,z) x --- 开始操作的位置 y --- 删除的个数 z --- 插入的元素
arr.copyWithin(x,y,z) x --- 替换开始的位置 y --- 赋值开始的位置 z --- 赋值结束的位置 含开始不含结束(赋值数组中的一段元素替换)
如果值为正数 从左往右
如果值为负数 从右往左 从-1 依次递减
var arr = [1,2,3,4,5,6,7,8,9,0]
arr.forEach(function(item,index,arr){
console.log(item,index,arr)
})
var btns = document.getElementsByTagName('button');
var arra = Array.from(btns);
arra.forEach(function(item,index){
console.log(item,index)
})
var ar1 = new Array(5)
var ara = Array.of(5)
console.log(ara);
let score = [99,96,84,80,79,75,60]
let sco = score.find(function(m){
return m >= 80;
})
console.log(sco);
let m = score.findIndex(function(n){
return n < 80;
})
console.log(m);
let n = score.filter(function(n){
return n < 80;
})
console.log(n);
let copy = score.copyWithin(-3,-6,-2);
console.log(copy);
5-函数的扩展
function fun(x,y=5){
console.log(x*y);
}
fun(3,2)
fun(3)
function funs(x,y=5,...vaLues){
console.log(x*y*vaLues);
console.log(vaLues);
var arr = vaLues.push(x,y)
console.log(vaLues);
}
funs(1,2,3,4,5,6,7,8,9)
var fn = (x,y) => {
console.log(x+y);
}
fn(2,3)
var f = (x,y) => console.log(x*y);
f(2,3)