模板网站如何做优化,建立中文网站的英文,上海建筑建材业地址,网站恶意注册ECMASript是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。 新特性目录 笔记出处#xff1a;b站ES6let 关键字const关键字变量的解构赋值模板字符串简化对象写法箭头函数rest参数spread扩展运算符Promise模块化 ES8async 和 await E…ECMASript是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。javaScript也是该规范的一种实现。 新特性目录 笔记出处b站ES6let 关键字const关键字变量的解构赋值模板字符串简化对象写法箭头函数rest参数spread扩展运算符Promise模块化 ES8async 和 await ES9Rest/Spread属性 笔记出处b站
尚硅谷Web前端ES6教程涵盖ES6-ES11 阮一峰大佬的ECMAScript 6 入门
ES6
let 关键字 使用let关键字声明变量的特点 不允许重复声块儿级别作用域不存在变量提升不影响作用域链 const关键字 const关键字用来声明常量const声明由以下特点 声明必须赋初始值标识符一般为大写不允许重复声明值不允许修改块儿级作用域 变量的解构赋值 ES6允许按照一定的模式从数组和对象中提取值对变量进行赋值 //数组的解构赋值const arr [张学友, 刘德华, 黎明, 郭富城];let [zhang, liu, li, guo] arr;//对象的解构赋值const lin {name: 林志颖,tags: [车手, 歌手, 小旋风, 演员]};let {name, tags} lin;模板字符串 模板字符串template string是增强版的字符串用反引号标识特点 字符串中可以出现换行符可以使用 ${xxx} 形式输出变量 // 定义字符串let str ulli沈腾/lili玛丽/lili魏翔/lili艾伦/li/ul;// 变量拼接let star 王宁;let result ${star}在前几年离开了开心麻花;简化对象写法 ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。这 样的书写更加简洁。 let name 尚硅谷;
let slogon 永远追求行业更高标准;
let improve function () {console.log(可以提高你的技能);
}
//属性和方法简写
let atguigu {name,// 属性名和变量名相同可以简写slogon,// 属性名和变量名相同可以简写improve,// 属性名和函数变量名相同可以简写change() {// change:function(){}的简写方式console.log(可以改变你)}
};箭头函数 ES6 允许使用「箭头」定义函数。 // 1. 通用写法
let fn (arg1, arg2, arg3) {return arg1 arg2 arg3;
}
// 2. 省略小括号的情况,只有一个参数
let fn2 num {return num * 10;
};
// 3. 省略花括号,省略花括号的同时要省略return
let fn3 score score * 20;
// 4. this指向2声明所在作用域中this的值
let fn4 () {console.log(this);//Windows
}
let school {name: 尚硅谷,getName(){let fn5 () {console.log(this);// this指向school}fn5();}
};箭头函数不会更改 this 指向用来指定回调函数会非常合适
rest参数 ES6 引入 rest 参数用于获取函数的实参用来代替 arguments // 类似java中的可变参数
function add(...args){console.log(args);
}
add(1,2,3,4,5);
// rest参数必须是最后一个形参在其他参数都确定之后才是rest参数
function minus(a,b,...args){console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);spread扩展运算符 扩展运算符spread也是三个点…。它好比 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列对数组进行解包。在ES9之后也可对对象进行扩展 // 展开数组
let tfboys [德玛西亚之力,德玛西亚之翼,德玛西亚皇子];
function fn(){console.log(arguments);// 输出不是数组对象而是德玛西亚之力, 德玛西亚之翼, 德玛西亚皇子
}
fn(...tfboys)
// 展开对象
/**
* 展开对象
*/
let skillOne { q: 致命打击,};
let skillTwo { w: 勇气};
let skillThree { e: 审判};
let skillFour { r: 德玛西亚正义};
let gailun {...skillOne, ...skillTwo,...skillThree,...skillFour};Promise Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数 用来封装异步操作并可以获取其成功或失败的结果. //实例化 Promise 对象const p new Promise(function(resolve, reject){resolve(data);// 成功时使用这个方法reject(err);// 失败时使用这个方法});//调用 promise 对象的 then 方法p.then(function(value){// then后面的第一个函数是成功的回调第二个函数是失败时的回调console.log(value);}, function(reason){console.error(reason);})// 程序发生错误的时候调用p.catch(function(reason){console.warn(reason);});模块化 模块化是指将一个大的程序文件拆分成许多小的文件然后将小文件组合起来。 好处 防止命名冲突提高代码复用增强维护性出问题只需要调整对应模块即可 模块化功能主要由两个命令构成 export 命令用于规定模块的对外接口import 命令用于输入其它模块提供的功能 // 在m1.js中导出// 分别暴露export let school 尚硅谷;export function teach() {console.log(我们可以教给你开发技能);}// 统一暴露export {school, teach};// 默认暴露export default {school: ATGUIGU,change: function(){console.log(我们可以改变你!!);}}
// 在app.js中使用import {school, teach} from ./src/js/m1.js;// 针对默认暴露可以这样写import m1 from ./src/js/m1.js;ES8
async 和 await async 和await 目的是为了简化promise中api的使用,两种语法结合可以让异步代码和同步代码一样。 解决回调地狱问题 async函数 async 函数的返回值为 promise 对象 promise 对象的结果由 async 函数执行的返回值决定 await 函数 await 必须写在 async 函数中await 右侧的表达式一般为 promise 对象await 返回的是 promise 成功的值await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理 async function main() {try {let result await p;console.log(result);} catch (e) {console.log(e);}}ES9
Rest/Spread属性 Rest 参数与 spread 扩展运算符在 ES6 中已经引入不过 ES6 中只针对于数组 在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符 function connect({host, port, ...user}) {console.log(host);console.log(port);console.log(user);// 可以直接将后三个参数封装到user中
}
connect({host: 127.0.0.1,port: 3306,username: root,password: root,type: master
});
