网站推广网站制作网站建设公司,跨境电商公司招聘岗位及要求,山西手机版建站系统哪家好,计算机网络规划与设计报告前端之ES6语法 1. ES6简介2. ES6新特性3.ES6不支持#xff0c;使用babel3.1 参考文献 4.let和const命令5. 模版字符串6.函数之默认值、剩余参数7. 函数之扩展运算符、箭头函数8.箭头函数this指向和注意事项9.解构赋值10.对象扩展11.Symbol类型12.Set集合类型13.Map数据类型14.… 前端之ES6语法 1. ES6简介2. ES6新特性3.ES6不支持使用babel3.1 参考文献 4.let和const命令5. 模版字符串6.函数之默认值、剩余参数7. 函数之扩展运算符、箭头函数8.箭头函数this指向和注意事项9.解构赋值10.对象扩展11.Symbol类型12.Set集合类型13.Map数据类型14.数组的扩展_115.数组的扩展_2 1. ES6简介
ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实现不完善等为了后面vue、尤其是react框架做好了准备目前大部分公司的项目都在使用es6 ECMAScript6.0(l以下简称ES6)是JavaScript语言的下一代标准已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言。 ES6既是一个历史名词也是一个泛指含义是5.1版以后的JavaScript的下一 代标准涵盖了ES2015、ES2016、ES2017等等而ES2015则是正式名称特 指该年发布的正式版本的语言标准。 2. ES6新特性
let和const命令es6的模板字符串增强的函数扩展的字符串、对象、数组功能解构赋值SymbolMap和Set迭代器和生成器Promise对象Proxyi对象async的用法类class模块化实现
各大浏览器的最新版本对ES6的支持可以查看 点我随着时间的推移支特度已经越来越高了超过90%的ES6语法特性都实现了。
3.ES6不支持使用babel
被称为下一代的JavaScript编译器。可以将es6的代码转换成es5的代码从而让浏览器获得支特这个课程我们只需要知道前端工具babe这个工具的作用在这里不做过多的赘述这里不讲解babel只讲述es6语法
3.1 参考文献
ES6阮一峰教程 http://es6.ruanyifeng.comMDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
4.let和const命令
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelet_const/title
/head
bodyscript// var// console.log(a) //输出 undefined// var a 2;// a 2;//1.let声明变量, 没有变量提升,报错// console.log(a)// let a 2;//2.是一个块级作用域,报错:Uncaught ReferenceError: b is not defined// console.log(b)// if(11) {// let b 10;// }// 3. let不能重复声明(Uncaught SyntaxError: Identifier c has already been declared )// let c 1;// let c 2;// 4.const定义变量,不能重新修改const NAME 热爱学习编程;// NAME 我不喜欢学习; // 直接报错// 5.const修饰的对象只能修改其属性不能对对象重新赋值。const obj {name: 张三,age: 18}// 可以obj.age 19;// 不可以/* obj {name: 李四,age: 20}*/const arr [];for(let i 0 ; i 10; i) {arr[i] function(){return i;}}console.log(arr[5]()) // 输出10不对呀不应该是5吗/*解决方法: 使用let*/// 不会污染全局变量let RegExp 10;console.log(RegExp)console.log(window.RegExp)/** 建议在默认情况下用const;* 而只有你知道变量会改变值的时候用let.*//script
/body
/html5. 模版字符串
!DOCTYPE html
html langen
headmeta charsetUTF-8title模版字符串/title
/head
bodydiv classbox/divscript// 模板字符串使用tab键上面的反引号插入变量时使用$(变量名)const oBox document.querySelector(.box);let id 1,name ypy;// 麻烦版本// oBox.innerHTML ullip idid name /p/li/ul;// 方便版本oBox.innerHTML ullip id${id}${name}/p/li/ul/script
/body
/html6.函数之默认值、剩余参数
!DOCTYPE html
html langen
headmeta charsetUTF-8title函数默认参数_剩余参数/title
/head
bodyscript// es5/*function add(a,b) {a a || 10;b b || 20;return ab;}*/// console.log(add()); // 30function add(a 10, b 20) {return a b;}console.log(add())console.log(-----------------------)//es5写法/*function pick(obj) {let result Object.create(null);for (let i 1; i arguments.length; i) {result[arguments[i]] obj[arguments[i]];}return result;}const book {title: es6教程,author:yeskip,year:2019}let bookData pick(book,author,year)console.log(bookData)*/// 剩余参数由三个点和一个紧跟着的具名参数指定 ...keys// 解决了argument的问题function pick(obj, ...keys) {let result Object.create(null);for (let i 0; i keys.length; i) {result[keys[i]] obj[keys[i]];}return result;}const book {title: es6教程,author:yeskip,year:2019}let bookData pick(book,author,year)console.log(bookData)/script
/body
/html7. 函数之扩展运算符、箭头函数
!DOCTYPE html
html langen
headmeta charsetUTF-8title扩展运算符_箭头函数/title
/head
bodydiv/div
script// 剩余参数把多个独立的参数合并成一个数组// 扩展运算符把数组展开成独立的参数并将值作为参数传递给函数const maxNum Math.max(20, 30)console.log(maxNum)// 处理数组的最大值使用applyconst arr [10, 20, 30, 40, 50, 60, 70, 100]console.log(Math.max.apply(null, arr))// 使用es6扩展运算符const maxNumber Math.max(...arr);console.log(maxNumber, maxNumber)console.log(--------------------------------)//箭头函数/** 使用 定义 function(){} 等价于 () {}*/let addWithArrow (a,b) ab;console.log(arrow function compute result: ,addWithArrow(1, 2));;/*let getId id {return {id: id,name: 小袁子}}*/// 》 等价于let getId id ({id: id, name: 小袁子});let obj getId(1)console.log(obj)// 闭包函数/*声明一个函数fun1此函数fun1返回一个函数fun2,执行fun1()*/let fn (function() {return function() {console.log(hello es6);}})();fn();let fnWithArrow () (function(){console.log(hello es6 with arrow!)})()let fnWithArrow2 ((){return (){console.log(hello es6 with arrow!!!)}})();// fnWithArrow();fnWithArrow2();/script
/body
/html8.箭头函数this指向和注意事项
!DOCTYPE html
html langen
headmeta charsetUTF-8title箭头函数需要注意/title
/head
bodyscript// this指向没有// es5中this指向取决于该函数的上下文对象// function.bind() 是将function绑定到其他对象身上的做法,绑定到参数上的thislet PageHandle {id: 123,init: function (){document.addEventListener(click, function (event){//Uncaught TypeError: this.doSomething is not a function// this documentthis.doSomething(event.type);}.bind(this), false);},doSomething: function (type) {console.log(事件类型: ${type},当前id: ${this.id})}}// PageHandle.init();// 使用箭头函数let pageHandler {id: 123,init: () {// 箭头函数是没有this指向的箭头函数内部this值只能通过查找作用域链来确定// 一旦使用箭头函数当前就不存在作用域链全部没有的话就找到了window对象document.addEventListener(click, (event) {//Uncaught TypeError: this.doSomething is not a function// this documentthis.doSomething(event.type);});},doSomething: function (type) {console.log(事件类型: ${type},当前id: ${this.id})}}pageHandler.init();// 如果上边的pageHandler.init定义方法都是箭头函数那么就会找到这一层的scopefunction doSomething(type) {console.log(this is window scope. ${type});}// 使用箭头函数注意事项/** 1.使用箭头函数的注意事顶1使用箭头函数函数内部没有arguments*/// let getVal (a, b) {// console.log(arguments)// 没有作用域了相应的argument也不在// return a b;// }// console.log(getVal(1, 3))let getVal2 function (a, b) {console.log(arguments)return a b;}console.log(getVal2(5, 8));// 箭头函数能使用new关键字实例化对象// let Person () {//// }// 这样可以创建new Personlet Person function(a,b) {return {age: a,name: b}}// function函数也是一个函数但是箭头函数不是一个对象其实就是一个语法糖(表达式)let p new Person(11,tom);console.log(p)/script
/body
/html9.解构赋值
!DOCTYPE html
html langen
headmeta charsetUTF-8title解构赋值/title
/head
body
script// 解构赋值是对赋值运算符的一种扩展// 它针对数组和对象来进行操作// 优点: 代码书写上简洁易读let node {type: iden,name: foo}// 完全解构let {type, name} node;console.log(type, name)let obj {a: {name:张三},b:[],c:hello world}// 不完全解构let {a,b,c} obj;// console.log(a)// console.log(b)// console.log(c)// 剩余运算符,起别名let {a:ss,...res} obj;// console.log(aa,res)console.log(ss)console.log(res)// 数组解构let arr [1,2,3]let [t,m,p] arr;console.log(t,m,p)// 嵌套let [r,[w],v] [12,[13],49];console.log(r,w,v)
/script
/body
/html10.对象扩展
!DOCTYPE html
html langen
headmeta charsetUTF-8title扩展的对象/title
/head
body
scriptconst name yeskip, age 20;const person {name: name, age: age, sayName() {}}// 对象扩展const person1 {name, // 等价于name:nameage, // 等价于age:agesayName() {console.log(this)console.log(this.name)}}person1.sayName();// 特殊的写法const names aconst obj {isShow: true,[f names]() {console.log(this)},[names bc]: 123}console.log(obj)// is() 比较两个对象严格相等 assign()console.log(Object.is(NaN, NaN));console.log(NaN NaN);// assign对象的合并let target {}let obj1 {name: 李四}let obj2 {age: 34}Object.assign(target, obj1, obj2)console.log(target)/script
/body
/html11.Symbol类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titlesymbol类型/title
/head
bodyscript// 原始数据类型 Symbol它表示独一无二的值// 最大的用途用来定义对象的私有变量const name Symbol(name)const name2 Symbol(name)console.log(name name2)let s1 Symbol(s1);console.log(s1)let obj {[s1]:小袁}//let obj {}// obj[s1] 小袁console.log(obj)// 如果用symbol定义的对象中的变量取值时一定要用[变量名]console.log(obj[s1])console.log(obj对象所有的keys:Object.keys(obj)); // 看不到// 获取自己的属性获取let s Object.getOwnPropertySymbols(obj);console.log(s)// 反射获取let m Reflect.ownKeys(obj);console.log(m)console.log(m[0])console.log(obj[m[0]])/script
/body
/html12.Set集合类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSet集合类型/title
/head
body
script// 集合let set new Set();set.add(张三)set.add(12)set.add(123)// set.delete(12)// 校验某个值是否在集合set中let exist set.has(张三);// console.log(exist)// console.log(set)// 集合长度// console.log(set.size);set.forEach((item, index) {console.log(item, index)})// 将set转换为数组,扩展运算符let arr [...set]console.log(arr)//了解即可 1.set中对象的引用无法被释放let set3 new Set(),obj1 {}set3.add(obj1)obj1 null;console.log(set3) // 还存在一个元素无法释放// 使用弱引用let set4 new WeakSet(),obj2 {name:张三};set4.add(obj2)obj2 null;console.log(set4)// WeakSet// 1. 不能传入非对象类型的参数// 2. 不可迭代// 3. 没有forEach()// 4. 没有size属性/script
/body
/html13.Map数据类型
!DOCTYPE html
html langen
headmeta charsetUTF-8titleMap数据类型/title
/head
body
scriptlet map new Map();map.set(name, 张三)map.set(age, 12)map.set([0, 1, 2], hello);let map2 new Map([[1, 2], [3, 4]]);console.log(map2:, map2)console.log(map)let existAge map.has(age);console.log(existAge)map.forEach((value, key) {console.log(key, value)})// 删除key为name的项map.delete(name)//清空mapmap.clear()let weakMap new WeakMap();/script
/body
/html14.数组的扩展_1
!DOCTYPE html
html langen
headmeta charsetUTF-8title数组的扩展/title
/head
body
ulli1/lili2/lili3/lili4/li
/ul
script// 数组的方法 from() of()// from() 将伪数组转换为真正的数组function add() {let args Array.from(arguments)console.log(args)}add(1, 2, 3)// from应用let lis Array.from(document.querySelectorAll(li));console.log(lis)// 扩展运算符let les [...document.querySelectorAll(li)]console.log(les)// from 接收第二个参数用于对每个元素进行处理let list [1, 2, 3]let newList Array.from(list, ele ele ** 2);console.log(newList)// of将一组值转换为一个数组(将任意类型的数据转为一个数组)let arr2 Array.of(3, 11, 20, 30, {id: 12})console.log(arr2)// 3.copywithin()// 从3位置往后的所有数值替换从0位置往后的三个数值console.log([0, 1, 2, 4, 5, 6, 7, 8, 9].copyWithin(0, 3));// find findIndex()// find 找出第一个符合条件的数组成员// findIndex找出第一个符合条件的数组成员索引let number [1, 2, -10, 5, -8].find(n n 0);let index [1, 2, -10, 5, -8].findIndex(n n 0);console.log(number,index)
/script
/body
/html15.数组的扩展_2
!DOCTYPE html
html langen
headmeta charsetUTF-8title数组的扩展2/title
/head
bodyscript// entries() keys() values() 返回一个遍历器可以使用for...of循环遍历let arr [1,2,3,4]let entries arr.entries();let keys arr.keys();let values arr.values();for (let key of keys) {console.log(key)}for (let value of values) {console.log(value)}for (let [index,ele] of entries) {console.log(index ele)}// 还可以使用遍历器下一部分讲// includes()返回一个布尔表示某个数组是否包含给定值console.log([12,56,55].includes(12))console.log([12,56,55].includes(51))/script
/body
/html
