本文详细介绍了JavaScript ES6中的新特性，包括let关键字的作用，避免了变量污染全局；字符串扩展如模板字符串的使用，支持变量插入和多行显示；解构赋值在数组和对象中的应用，方便地进行值的提取和赋值；数组扩展的解构赋值和操作；以及函数扩展，如默认参数、剩余参数和箭头函数的使用，简化了函数定义和调用。
1----let应用
2—字符创扩展
3—结构
4—数组扩展
5—函数扩展
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btns=document.getElementsByTagName('button');
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
// btns[i].style.color='red';如果使用的是var 此时会报错 因为var声明的变量是全局变量
// this.style.color='red';
btns[i].style.color='red'
// let声明的块级作用域
}
}
</script>
</body>
2----字符串扩展
<body>
<ul id="box">
<li>
<img src="" alt="">
<p>文字</p>
</li>
</ul>
<p id="txt"></p>
<script>
var list=[
{
msg:'hello'
},
{
msg:1123
}
]
for(var i=0;i<list.length;i++){
var tag=document.createElement('li');
// tag.innerHTML='<img src="" alt=""><p>'+list[i].msg+'</p>';
tag.innerHTML=`<img src="" alt="">
<p>${list[i].msg}</p>`
box.appendChild(tag)
}
// 1、模板字符串 在变量和常量拼接的时候使用 整个字符串使用`${变量}`
var stu={
name:'zs',
age:12
}
txt.innerHTML=`学生的姓名是${stu.name}，年龄是${stu.age}`;
// 2、标签模板，模板字符串不仅仅可以按照上面的这种方式使用。还可以跟在一个函数后面。该函数将被调用来处理这个模板字符串
// alert(123);
// alert`123`;
function add(x,y){
console.log(x,y);
console.log(arguments)
}
// add(1,23)
// 如果使用的是模板字符串调用函数，如果参数是一个常量，此时会把参数解析成一个数组合并成一个参数
add`1 23`;
// 只有一个实参 数组['1 23']
let a=10;
let b=2;
// 如果实参有变量有常量的时候，会自动解析 把常量(用变量隔开的)拼接成一个数组，每一个变量依次拼接到后面
add`hello${a}welcome${b}${a+b}`
// 第一个参数['hello','welcome','',''] 第二个参数10 第三个参数2 第四个参数12
</script>
3—结构
<body>
<script>
// 解构：es6中允许按照一定模式，从数组和对象中提取值，按照一定的规则，对变量进行赋值
// es5中，只能按照下面方式赋值
// let a=1;
// let b=2;
// 数组的解构赋值 按照数组的顺序一一赋值
let [a,b,c]=[1,2,4];
console.log(a,b,c);
// 交换值
let m=12;
let n='hello';
// 通过解构可以直接交换值
[m,n]=[n,m];
console.log(m,n);
// 对象的解构赋值
// 对象的解构赋值和数组有一个重要的不同，数组的解构是有顺序的，对象的解构没有顺序，由属性来决定
// 变量名字必须与属性名字一致，才能获取到正确的值
let stu={
name:'zs',
age:12
}
let {age,name,address}=stu;
// address相当于声明了，没有赋值
console.log(name,age,address);
// 字符串的解构赋值 把字符串中的字符解析一一赋值。如果有多余的不会报错，只是没有对应变量赋值
let[x,y,z]='hello';
console.log(x,y,z);
// 字符串都会有一个长度属性，因此可以使用属性解构赋值
let {length:len}='hello';
console.log(len);
// 函数参数的解构赋值，类似于数组的解构赋值
function add([a,b]){
console.log(a,b)
}
add([2,3])
</script>
</body>
4----数组扩展
<body>
<script>
// 解构：es6中允许按照一定模式，从数组和对象中提取值，按照一定的规则，对变量进行赋值
// es5中，只能按照下面方式赋值
// let a=1;
// let b=2;
// 数组的解构赋值 按照数组的顺序一一赋值
let [a,b,c]=[1,2,4];
console.log(a,b,c);
// 交换值
let m=12;
let n='hello';
// 通过解构可以直接交换值
[m,n]=[n,m];
console.log(m,n);
// 对象的解构赋值
// 对象的解构赋值和数组有一个重要的不同，数组的解构是有顺序的，对象的解构没有顺序，由属性来决定
// 变量名字必须与属性名字一致，才能获取到正确的值
let stu={
name:'zs',
age:12
}
let {age,name,address}=stu;
// address相当于声明了，没有赋值
console.log(name,age,address);
// 字符串的解构赋值 把字符串中的字符解析一一赋值。如果有多余的不会报错，只是没有对应变量赋值
let[x,y,z]='hello';
console.log(x,y,z);
// 字符串都会有一个长度属性，因此可以使用属性解构赋值
let {length:len}='hello';
console.log(len);
// 函数参数的解构赋值，类似于数组的解构赋值
function add([a,b]){
console.log(a,b)
}
add([2,3])
</script>
</body>
5—函数扩展
<body>
<script>
// es6之前
// function fn(x,y){
// y=y||3;
// console.log(x*y);
// }
// // 实现的功能是 如果用户传递实参，以实参为准，如果没有传递实参，y的值就是3
// fn(100,4)
// 函数参数的默认值 如果y没有实参，默认值就是3。如果有实参，默认就是实参的值
// function fn(x,y=3){
// console.log(x*y)
// }
// fn(3,20);
// rest剩余参数。 ...参数名 用于获取函数多余的实参,是一个数组 必须要放置在结尾。
function add(x,y,...values){
console.log(x+y);
console.log(values);
var arr=values.push(x,y);
console.log(values)
}
// 获取用户所有输入的实参，放在一个数组里面
add(1,2,3,4);
// 箭头函数 去除function ()和{}之间用=>
// setInterval(()=>{
// console.log(111)
// },1000)
// var fn=(x,y)=>{
// console.log(x+y);
// }
// fn(2,3)
// 如果函数体，只有一句话，可以直接省略{}。如果这句话带有return省略return
// var fn=(x,y)=>console.log(x+y);
var fn=(x,y)=>x+y;
console.log(fn(2,4))
</script>
</body>
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
