ES6 let const 变量的解构赋值 模板字符串 简化对象写法 箭头函数 rest spread

赋值 模板字符串 简化对象写法 箭头函数 rest spread"/>

ES6 let const 变量的解构赋值 模板字符串 简化对象写法 箭头函数 rest spread

关键字

let 关键字

1.变量不能重复声明
let star = ‘罗志祥’;
let star = ‘小猪’;
2. 块级作用域 全局 函数 eval

{
let girl = ‘tom’;
}
3. 不存在变量提升
console.log(song);
let song = ‘你好’
4. 不影响作用域链

{let school = '大学';function fn() {console.log(school);}fn();}

let 实例
在 每一次的for 循环中 let 绑定一个 事件 春块级作用域

 let items = document.getElementsByClassName('item');//遍历并绑定事件for (let i = 0; i < items.length; i++) {items[i].onclick = function() {items[i].style.background = 'pink'}}

const 关键字

1 一定要赋初始值
2 一般常量使用大写
3. 常量的值不能修改

4 块级作用域5 . 对于数组和对象的元素修改,不算做对常量的修改 不会报错

const TEAM = ['uzi', 'mlxg'];TEAM.push('daye')console.log(TEAM);

变量的解构赋值

ES6 允许按照一定模式从数组和对象中提取值, 对变量进行赋值。
频繁的使用对象方法 数组元素 就可以使用解构赋值形式
这被称为解构赋值
数组的解构

const F4 = ['小沈阳', '刘能', '赵四', '宋小宝'];let [xiao, liu, zhao, song] = F4console.log(xiao);console.log(liu);console.log(zhao);console.log(song);

对象的解构

        const tom = {name: 'tom',age: 18,xiaopin: function() {console.log('你好');}};let {name,age,xiaopin} = tom;console.log(name);console.log(age);console.log(xiaopin);

模板字符串

ES6 引入新的声明字符串的方式 ``
1 声明
let str = 我也是一个字符串;
2 内容中可以直接出现换行符

let str1 = `<ul><li>tom</li><li>lisa</li><li>gg</li></ul>`

3 变量拼接

let lovest = 'tom';let out = `${lovest}我最爱的是`;console.log(out);

简化对象写法

ES6 允许在大括号里面 直接写入变量和函数 作为对象的属性和方法
这样书写更加简洁

let name = 'tom';let change = function() {console.log('will be change');}const name2 = {name,change,improve() {console.log('简单');}}console.log(name2);

箭头函数

ES6 允许使用 箭头函数 => 定义函数

let fn = (a, b) => {return a + b;}

1 this 是静态的 this 始终指向函数声明时所在作用域下的 this的值都不会改变

function getName() {console.log(this.name);  // 输出 mark}let getName2 = () => {console.log(this.name); // 输出mark}name = 'tom';window.name = 'mark';const sxt = {name: 'eve'}getName();getName2();

2 不能作为构造函数 实例化对象
let person = (name, age) => {
// this.name = name;
// this.age = age;
// }
// let me = new person(‘xiao’, 18)
3 不能使用 arguments 变量
4 箭头函数的简写

//1 省略小括号 当形参有且只有一个的时候let add = n => {return n + n;}console.log(add(9));// 2 省略花括号 当代码体只有一条语句时 此时 ruturn 必须省略// 而且语句的执行结果就是函数的返回值let pow = n => n * n;console.log(pow(9));

实例

// 点击 div 2s 后变为红色let ad = document.getElementById('ad');ad.addEventListener('click', function() {setTimeout(() => {this.style.background = 'pink';console.log(this);}, 1000)})// 从数组中返回偶数的元素const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];// const result = arr.filter(function(item) {//     if (item % 2 == 0) {//         return true//     } else {//         return false//     }// });const result = arr.filter(item => item % 2 == 0)console.log(result);//箭头函数适合与  this 无关的回调 定时器 数组方法的回调// 不适合 与this有关的回调 事件回调,对象的方法

参数默认值

// ES6 允许给函数参数赋值初始值// 1. 形参初始值 具有默认值的 参数默认值一般都要靠后(潜规则)function add(a, b, c = 10) {return a + b + c;}let resu = add(1, 2, 3);console.log(resu);//2. 与解构赋值结合function connect({host = '127.0.0.1',username,password,port}) {console.log(host);console.log(username);console.log(password);console.log(port);}connect({username: '003',password: '000',port: '3306'})

rest 参数

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

// ES5 获取方式function date() {console.log(arguments);}date('tom', 'gg', 'ggg')// rest参数function data(...args) {console.log(args); // filter some every map}data('tom', 'gg', 'ggg')// rest 参数 必须要放在参数最后function fn(a, c, ...args) {console.log(a);console.log(c);console.log(args);}fn(1, 2, 3, 4, 5, 6, )

spread扩展运算符

//  扩展运算符能将 数组 转换为逗号分隔的 参数xulie// 声明数组 const arr = ['tom', 'jim', 'jhon'];//函数function persons() {console.log(arguments);}persons(...arr);

扩展运算符应用

// 数组的合并const names = ['Tom', 'Jhon', 'Jack']const names2 = ['Eve', 'Jney', 'Bock']console.log(names.concat(names2));const ban = [...names, ...names2];console.log(ban);// 数组的kelongconst san = ['E', 'G', 'M'];const three = [...san];console.log(three);// 将伪数组转为真正的数组const divs = document.querySelectorAll('div');const divarr = [...divs]console.log(divarr);