JavaScript高级之ES6

JavaScript高级之ES6

let

• 变量不能重复声明（var 可以）
• 块级作用域（var不是）
• 不存在变量提升（var存在变量提升，能在声明之前使用变量（undefined））
• 不影响作用域链

const

声明常量

• 一定要赋初始值
• 变量名一般使用大写
• 常量的值不能修改
• 块级作用域
• 对数组和对象里的元素修改，不算对常量的修改（常量指向的地址没有发生变化），不会报错

变量的解构赋值

1. 数组的解构

   const F4 = ['A', 'B', 'C', 'C']
   let [a, b, c, d] = F4
   

2. 对象的解构

   const zhao = {
   	name: '赵本山',
   	age: '不详',
   	xiaopin: function() {
   		console.log("我可以演小品");
   	}
   };
   let {name, age, xiaopin} = zhao;
   

模板字符串

1. 声明

   let str = `我也是字符串哦`;
   console.log(str, typeof str);
   

2. 内容中可以直接出现换行符

   let str = `<ul>
                   <li>aaa</li>
               </ul>`
   

3. 变量拼接

   let lovest = '胡歌';
   let out = `${lovest}是我最喜欢的演员！`;
   

对象的简化方法

允许直接写入变量和和函数，作为对象的属性和方法

let name = 'zhangsan'
let change = function() {
	console.log("change");
}
const school = {
	name,
	change
}

箭头函数及声明特点

let fn1 = function(a, b) {
	return a + b;
}
let fn2 = (a, b) => {
	return a + b;
}

• this是静态的，始终指向函数声明时所在的作用域下的this值

• 不能作为构造函数去实例化对象

• 不能使用arguments变量

• 箭头函数的简写

  • 省略小括号，当且仅当形参只有一个的时候

    let add1 = (n) => {
    	return n + n;
    }
    let add2 = n => {
    	return n + n;
    }
    

  • 省略花括号，当代码体只有一条语句的时候，同时省略return

    let pow1 = (n) => {
    	return n*n;
    };
    let pow2 = (n) => n*n;
    let pow3 = n => n*n;
    

• 箭头函数应用

  <div id="app"></div>
  <script>
      let app = document.getElementById("app");
      app.addEventListener("click", function(){
          setTimeOut(() => {
              this.style.background = 'pink'
          }, 2000);
      });
  </script>
  

  const arr = [1, 2, 3, 4, 5, 6]
  const result = arr.filter(item => item % 2 == 0)
  

函数参数的默认值设置

• ES6允许给函数参数赋初始值，一般具有默认值的参数位置靠后

  function add(a, b, c = 10) {
  	return a + b + c;
  }
  

• 与解构赋值结合

  function connect({host = "127.0.0.0", username, password, port}) {
  	console.log(host)
  	console.log(username)
  	console.log(password)
  	console.log(port)
  }
  connect({
  	username: 'huaozhi',
  	password: 'password',
  	port: '8080'
  })
  

rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

• ES5获取实参的方式

  function data() {
  	console.log(arguments); // 打印对象
  }
  data('a', 'b');
  

• ES6 rest参数

  function data(...args) {
  	console.log(args); // 打印数组
  }
  data('a', 'b'); 
  

  rest参数必须放到参数最后

  function data(a, b, ...args) {
  	console.log(a);
  	console.log(b);
  	console.log(args); // 打印数组
  }
  data(1, 2, 3, 4);
  

扩展运算符

扩展运算符能够将数组转换为逗号分隔的参数序列

const tfboys = ['a', 'v', 'd', 'w'];
function chunwan() {
	console.log(arguments);
}
chunwan(...tfboys) // chunwan('a', 'v', 'd', 'w')

扩展运算符的应用

// 1.数组合并
arr1 = [1,2]
arr2 = [3,4]
arr3 = [...arr1, ...arr2] // [1,2,3,4]

// 2.数组克隆
arr4 = [...arr1] //浅拷贝（引用类型）