JavaScript 高级篇-04 (ES6新语法/数组迭代方法)

1.ES6新语法

1.1-变量声明let与const

1.没有预解析 : 变量必须要先声明,才能使用
2.有块级作用域 : if for 大括号里面声明的变量是局部变量
let 变量 : 可以修改变量中的数据
const 常量 : 只能在声明的时候赋值一次,不可修改

1.2-解构赋值语法

1.对象解构赋值

1.1 取出对象的值赋值给变量

ES6 解构赋值
let { name, age, sex } = obj

      //1：取出 对象的属性 赋值 给变量

      let obj = {
   
        name: '张三',
        age: 18,
        sex: '男'
      }

      /* ES5 */
     let name = obj.name;
     let age = obj.age;
     let sex = obj.sex;
     console.log(name,age,sex);

      /* ES6 */
      /* a.这行代码本质:声明三个变量 name，age，sex。取出右边obj对象对应的属性名赋值给左边的变量*/
      let {
   name,age,sex} = obj;
      console.log(name,age,sex);

      /* b.由于obj对象没有score属性，所以变量score的值为undefined。 */
      let {
   name,score} = obj;
      console.log(name,score);

      /* c. sex:gender 的含义 ： let gender = obj.sex */
      let {
   name,sex:gender} = obj;
      console.log(name,gender);

1.2 取出变量的值 赋值给对象的属性

ES6 解构赋值
let obj = { name, age, sex, }

//2：取出变量的值 赋值给对象的属性

     let name = '李四';
     let age = 20;
     let sex = '男';
     let sayHi = function(){
   
        console.log('你好');
     }

      /* ES5  */
      let person = {
   
          name : name,
  	      age : age,
      	  gender : sex,
          sayHi :sayHi
      }
     console.log(person);

      /* ES6 */
     let person = {
   
      	name,//等价于 name:name
      	age,
	    gender:sex,//如果属性名和变量名不一致，还是按照以前ES5的写法来赋值
     	sayHi,
    	play(){
   //等价于：play:function(){}
             console.log('学习使我快乐');
        }
   	};
		console.log(person);

2.数组解构赋值

 <script>
      //数组解构赋值

      let arr = [10, 20, 30]

      /* ES5 */
      // let n1 = arr[0];
      // let n2 = arr[1];
      // let n3 = arr[2];

      // console.log(n1,n2,n3);

      /* ES6 */
      let [n1, n2, n3 = 50, n4 = 100]