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); } } }
代码改变了我们,也改变了世界