第一部分:百度简介
ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。
另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。
这又是ES6 JS高级Es6语法
1 let变量名的基本内容解释
- 1 变量不能重复的声明
- 2 块级的作用域 全局 函数 evel 只在代码块中有效
- 3 不存在变量的提升
- 4 不影响的作用域链的效果
1 声明变量的格式
let a; let b,c,d; let f=567,g="liveyou",h=[];
2 块级的作用域 全局 函数 evel 只在代码块中有效
{ let gair="李四" // console.log(gair) } console.log(gair)
3 不存在变量的提升
console.log(aaa) var aaa="先鸟"； let aaa="先鸟"
4 不影响的作用域链的效果
{ let school="上高速" function fn(){ console.log(school) } fn() }
2 const 常量
- 1 一定要有初始值
- 2 一般常量用大写
- 3 常量的值不能修改
- 4 const 也是块级作用域
- 5 对于数组和对象的元素修改 不算对常量的修改 不会报错
const SCHOOL = "我要上高速" const TEAM = ['UZR', 'MXLG', 'MING', 'LETME']; // TEAM.push('Meiko') console.log(TEAM)
3 数组解构
<!-- 数组解构--> <!--! ES6按照一定的模式从数组对象中提取值 对变量赋值 这被称为解构赋值--> <!-- !数组结构 --> <script> const F4=['A','B','C','D','E'] let [a,b,c,d,e]=F4 console.log(a+b+c+d+e) </script> <!-- !对象的结构 --> <script> const zhaomienan={ name:"静态", age:'89', eat:function(){ console.log("吃饭") }, sleep:function(){ console.log("睡觉吧") } }; let {name,age,eat,sleep}=zhaomienan; console.log(name+"_"+age+"_"+eat+"_"+sleep) eat() sleep() </script>
4 模板字符串[``]
// 声明 let str=`我是字符串的内容解析` console.log(str,typeof str) // 内容直接有换行符 let str1=`<ul> <li>1</li> <li>2</li> <li>3</li> </ul>` // document.write(str1) // 变量的直接拼接 let lover='上述' let out=`${lover}是我心中的偶像` console.log(out)
5 对象的简化写法
<script> let name = "李四玩有幸" let change = function () { console.log("我可以改变你的内容信息") } const school = { // name:name name, change, imporve: function () { console.log("我深蓝了") }, eat() { console.log("Hellow word") } } console.log(school) </script>
6 箭头函数
- 1 this 是静态的 始终指向函数声明的作用域下的this 的值
- 2 不能作为构造函数 实例化对象
- 3 不能使用arguments对象
- 4 箭头函数的简写 省略()有且只有一个
- () => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
<script> let fn = function () { } let fn1 = (a, b) => { return a + b; } let results = fn1(1, 1) console.log(results) // 箭头函数 // 1 this 是静态的 始终指向函数声明的作用域下的this 的值 function getName() { console.log(this.name) } let getName2 = () => { console.log(this.name) } // 设置Window对象 window.name = '加油' const school = { name: "ASDFGHJ" } // 直接调用 // getName() // getName2() // call 方法的调用 改变this的值 getName.call(school) getName2.call(school) // 2 不能作为构造函数 实例化对象 // let Person=(name,age)=>{ // this.name=name; // this.age=age; // } // let me=new Person("销毁",90); // console.log(me) // 3 不能使用arguments对象 // let fn23=()=>{ // console.log(arguments) // } // fn23(1.2,3) // 4 箭头函数的简写 省略()有且只有一个 let add=n=>{ return n+n; } console.log(add(9)) // 省略{} return let pow =(n)=>n*n console.log(pow(9)) </script>
7 形参的初始值与结果赋值使用
// 形参的初始值 // function add(a,b,c,d,e){ // return a+b+c+d+e; // } // let result=add(1,2,3,4); // console.log(result) // 与结果赋值使用 function connect(host = "127.0.9.0", username, password, port) { console.log(host) } connect({ host: "123456", username: "李四上栅", password: "12345678", port: "33060987" }) // ES5 function date1() { console.log(arguments) } date1("1张三", "2李四", "3空", "4思考", "5小康", "6订单") // rest 参数 必须放在最后 这是为什么? function date(...args) { console.log(args) } date("1张三", "2李四", "3空", "4思考", "5小康", "6订单") function fn4(a, b, c, d, e, f, ...args) { console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); console.log(f); console.log(args); } fn4("1张三", "2李四", "3空", "4思考", "5小康", "6订单","47思考", "58小康", "69订单","4思考", "5小康", "6订单")
8 扩展运算符 能将数组转换为逗号分开 参数序列化
<script> const tyop=['XXX','YYY','RRR','HHH','LLL','WWW','DDD','FFF','SSS'] function chunwan(){ console.log(arguments) } chunwan(...tyop) </script> <script> //定义一个集合 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; //转成数组 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] console.log((arr2)) </script>
9 扩展运算符的应用
<!-- 扩展运算符的应用 --> <div></div> <div></div> <div></div> <!--! 数组的并和 亲生 误删 唐安 --> <script> const kuaizi=['效率','小明',"小王","小鸡"] const fangkuang=['小坡','老婆','欧赔'] constfangkuang1=kuaizi.concat(fangkuang) // ES5 console.log(constfangkuang1) // ES6 const hebing=[...kuaizi,...fangkuang] console.log(hebing) // 数组克隆 const san=['A','B','C'] const sane=[...san] console.log(sane) // 3 将伪数组转为真正的数组 const divs=document.querySelectorAll("div"); const divArr=[...divs]; console.log(divArr) </script>
