ES6-ES11(未完待续)
块级作用域:let
声明常量:const
变量解构赋值:


模板字符串:
var str = `模板字符串`;
console.log(str);//模板字符串
// 可以直接出现换行符
var str2 = `<ul><li>地獄</li><li>回调</li></ul>`
console.log(str2);//<ul><li>地獄</li><li>回调</li></ul>
// 变量拼接
var str3 = '电影'
var str4 = `我想看${str3}`
console.log(str4);//我想看电影
对象简洁化:
es6允许在大括号内直接写入变量和函数,做为对象的属性和方法
let name = '张三'
let age = 11;
let demo = ()=>{
console.log('这是一个方法');
}
const school = {
name,
age,
demo
}
console.log(school);

箭头函数:
箭头函数不能做为构造函数实例化对象
只有一个形参时省略小括号

// let fn =function(a,b){
// return a+b;
// }
let fn = (a,b)=>{
return a+b;
}
let res=fn(11,20);
console.log(res);t
window.name = "张三";
const fn = {
name:"123"
}
let getName = ()=>{
console.log(this.name);
}
function Name(){
console.log(this.name);
}
getName()
Name()
// 只有一个形参时省略小括号
let add = n =>{
return n+n;
}
console.log(add(9));//18
// 只有一条语句时,可以缩写
let pow = n =>n+n;
console.log(pow(9));//18
// 只有一条语句时,可以缩写
函数参数的默认值:

可以与解构赋值结合
let add = (a,b,c=10)=>{
return a+b+c;//11
}
console.log(add(1,9,1));
rest参数:


let add = (...age)=>{
return age;// [1, 9, 1]
}
console.log(add(1,9,1));
// 必须放到最后
let add2 = (a,b,...age)=>{
console.log(a);//1
console.log(b);//2
console.log(age);//[6, 6, 3]
}
add2(1,2,6,6,3)
扩展运算符:
可以合并数组,克隆数组,将伪数组转为数组
let arr = [1,2,3,4,5,6];
function add(){
console.log(arguments);
}
add(...arr)
// 数组的合并 let arr = [1,2,3,4,5,6]; let arr2 = [2,3,4,5,6,7]; let arr3 = [...arr,...arr2]; console.log(arr3);//[1, 2, 3, 4, 5, 6, 2, 3, 4, 5, 6, 7]
// 数组的克隆 let arr = [1,2,3,4,5,6]; let arr2 = [...arr]; console.log(arr2);//[1, 2, 3, 4, 5, 6]
<body>
<div></div>
<div></div>
<div></div>
</body>
<script>
// 将伪数组转为数组
const divs = document.querySelectorAll('div')
const divs2=[...divs]
console.log(divs2); //[div, div, div]
</script>
Symbol:
Symbol的值是唯一的,且不能做运算,包括加减乘除
// Symbol的值是唯一的,且不能做运算,包括加减乘除
let s = Symbol();
let s2 = Symbol('测试');
let s3 = Symbol('测试');
console.log(s);
console.log(s2==s3);
迭代器:
for ...of 遍历
在对象中,需要自己自定义,较为麻烦
let arr = ['张三','张三2','张三3','张三4','张三5','张三6'];
// 正常遍历
for (let i = 0; i < arr.length; i++) {
arr[i]
console.log(arr[i]);
}
// es6遍历 for ...of 遍历
for(let v of arr){
console.log(v);
}
console.log(arr);//只要该对象有Symbol.iterator
生成器:
function *demo(){
console.log(111);
console.log(222);
console.log(333);
}
let v = demo();
console.log(v.next());
promise:
主要解决回调地獄,还可以反转ajax请求
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化接口
xhr.open("GET","接口");
// 发送接口
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
console.log(xhr.response);
}else{
console.log(xhr.status);
}
}
}
代码改变了我们,也改变了世界

浙公网安备 33010602011771号