1.ES6
https://es6.ruanyifeng.com/
2.let
用于替代var
区别:
1.let声明的变量不再做预解析
2.在同一个作用域中不能使用let重复声明一个变量
3.let声明的全局变量不再是 window的属性
4.let声明的变量会产生块级作用域
for 循环体包含两个作用域,for本身是一个块级作用域,for的循环体又是for中的一个子级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// // let声明的变量不再做预解析
// alert(a); //undefined
// var a = 3;
// alert(b); //报错
// let b = 4;
// 2.在同一个作用域中不能使用let重复声明一个变量
// var a = 3;
// var a = 4;
// var a = 5;
// alert(a);
// let b = 3;
// let b = 4; //报错
// b = 5;
// alert(b);
// 3.let声明的全局变量不再是 window的属性
// var a = 3;
// var b = 3;
// alert(window.a); //3
// alert(window.b); //undefined
// 4.let声明的变量会产生块级作用域
// {
// var a = 3;
// let b = 4;
// // 只能在所在的块级作用域使用
// }
// alert(a);
// alert(b); //报错
// for(var i = 0; i < 5; i++){
// setTimeout(function(){
// console.log(i) //输出5个5
// },0)
// }
// for(let i = 0; i < 5; i++){
// setTimeout(function(){
// console.log(i) //输出0 1 2 3 4
// },0)
// }
// for 循环体包含两个作用域,for本身是一个块级作用域,for的循环体又是for中的一个子级作用域
for(let i = 0; i < 5;i++,console.log(i)){
let i = 10 //输出 1 2 3 4 5
}
</script>
</body>
</html>
3.const
用来声明常量,一个常量只能声明一次,声明后,后面不能再对该常量进行重复赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const 用来声明常量,一个常量只能声明一次,声明后,后面不能再对该常量进行重复赋值
const PI = 3.14;
const G = 9.8;
const arr = ['aaa','bbb','ccc'];
arr[1] = 'eee'; //可以
arr = [1,2,3] //报错
</script>
</body>
</html>
4.解构赋值
1:数组的解构赋值 [] = []
2: 对象的解构赋值 {} = {}
好处:
1.交换数据;
2.函数传参 给参数设置默认值 不按顺序传参
3.返回值 可以返回多个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// // 1.数组的解构赋值
// let [a,b,c] = [1,2,3];
// // console.log(a,b,c);
// // 交换两个变量的值
// console.log(a,b);
// [a,b] = [b,a];
// console.log(a,b);
// 对象的解构
var {a,b,c,d} = {c:3,b:2,a:4}
console.log(a,b,c,d) //4 2 3 undefined
function fn({a = 2,b = 3,c = 4}){
if(a > b){
[a,b] = [b,a]
}
if(a > c){
[a,c] = [c,a]
}
if(b > c){
[b,c] = [c,b]
}
return [a,b,c]
}
console.log(fn({a:1,b:2,c:3}))
</script>
</body>
</html>
5.字符串的扩展方法
includes(字符串,start)判断父串中是否包含子串的内容,返回布尔值;
startsWith(字符串,start)判断父串中是否以指定的子串开头,返回布尔值;
endsWith(字符串,start)判断父串中是否以指定的子串结尾,返回布尔值;
repeat()重复指定的字符串,返回字符串
repeat的参数:
(1)大于-1的数,如果是小数,自动取整;
(2)如果是非数字的值,则自动转为数字,如果无法转数字,转为NAN,NAN按0重复
(3)小于等于-1的数 报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
includes(字符串,start)判断父串中是否包含子串的内容,返回布尔值;
startsWith(字符串,start)判断父串中是否以指定的子串开头,返回布尔值;
endsWith(字符串,start)判断父串中是否以指定的子串结尾,返回布尔值;
repeat()重复指定的字符串,返回字符串
*/
var str = 'how do you do';
console.log(str.includes('do',4)); //true
console.log(str.startsWith('do',4)); //true
console.log(str.endsWith('do',6)); //true
var ch = 'o';
console.log(ch.repeat(3)); //'ooo'
console.log(ch.repeat(3.3)); //'ooo'
console.log(ch.repeat('a')); //''
// console.log(ch.repeat(-3)); // 报错
console.log(ch.repeat(-0.3)); //''
</script>
</body>
</html>
6.箭头函数
()=>{}
好处:
1.箭头函数中的this会指向该箭头函数所在作用域所绑定的对象;
2.简写;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
箭头函数
1:函数的简写
2:改变this指向
*/
// function fn(){
// console.log(1)
// }
// var fn = ()=>{
// console.log(1)
// }
// function fn1(a){
// return a*8;
// }
// var fn1 = a=>a*8;
// function fn2(a,b){
// return a+b;
// }
// var fn2 = (a,b)=>a+b;
function fn3(a,b){
console.log(123);
return a*b;
}
var fn3 = (a,b)=>{
console.log(123)
return a*b;
}
</script>
</body>
</html>
7.Symbol
是ES6新增的第7种数据类型,是基本数据类型
作用:保证变量中的值一定是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a = Symbol();
var b = Symbol();
console.log(a == b); //false
console.log(a,typeof a); //Symbol() 'symbol'
</script>
</body>
</html>
8.扩展运算符
…扩展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ...扩展运算符
var str = 'hello';
var arr = [...str];
console.log(arr); //0: "h" 1: "e" 2: "l" 3: "l" 4: "o"
var arr1 = ['aa','bb','cc'];
var arr2 = [...arr1,'ddd','ccc'];
console.log(arr2) //['aa', 'bb', 'cc', 'ddd', 'ccc']
var obj = {
name:'张三',
age:12,
}
var o = {
...obj,
sex:'男'
}
console.log(o); //{name: '张三', age: 12, sex: '男'}
</script>
</body>
</html>
9.模板字符串
模板字符串``,可以换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
<script>
var oUl = document.getElementsByTagName('ul')[0];
var obj = {
name:'张三',
age:12,
sex:'男'
}
// 模板字符串``,可以换行
oUl.innerHTML = `
<li>${obj.name}</li>
<li>${obj.age}</li>
<li>${obj.sex}</li>
`
</script>
</body>
</html>