JS(第二十四课)JS高级Es6语法

ECMAScript 6_百度百科 (baidu.com)

第一部分:百度简介

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 [1] 。

另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

1 let变量名的基本内容解释

1 变量不能重复的声明
2 块级的作用域全局函数 evel 只在代码块中有效
3 不存在变量的提升
4 不影响的作用域链的效果

1 声明变量的格式

javascript">  let a;
  let b,c,d;
  let f=567,g="liveyou",h=[];

2 块级的作用域全局函数 evel 只在代码块中有效

javascript"> {
     let  gair="李四"
     // console.log(gair)
 }
console.log(gair)

3 不存在变量的提升

javascript"> console.log(aaa)
 var aaa="先鸟"；
 let aaa="先鸟"

4 不影响的作用域链的效果

javascript"> {
     let school="上高速"
     function fn(){
         console.log(school)
     }
     fn()
 }

2 const 常量

1 一定要有初始值
2 一般常量用大写
3 常量的值不能修改
4 const 也是块级作用域
5 对于数组和对象的元素修改不算对常量的修改不会报错

javascript">	const SCHOOL = "我要上高速"
	const TEAM = ['UZR', 'MXLG', 'MING', 'LETME'];
	// TEAM.push('Meiko')
	console.log(TEAM)

3 数组解构

javascript"> <!-- 数组解构-->
 <!--! 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 模板字符串[``]

javascript">  // 声明
  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 对象的简化写法

javascript"> <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 箭头函数的简写省略()有且只有一个

() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体

javascript"> <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 形参的初始值与结果赋值使用

javascript"> // 形参的初始值
 // 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 扩展运算符能将数组转换为逗号分开参数序列化

javascript">  <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 扩展运算符的应用

javascript"> <!-- 扩展运算符的应用 -->
 <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>