JavaScript Es6、Es7、Es8语法总结



es6,es7,es8语法总结

es6部分
1.let,const
    let,const具有块级作用域,不具有变量提升(let用法和var一样,但有区别)

(1)let用法:
1.不会变量提升
2.遇到{} 里面let定义的变量就会变成块级作用域,拿不到里面的值
块级作用域例子
function fn(){
        let num = 5;
        if(true){
            let num = 10;
        }
        console.log(num);//获取到的结果还是5,因为if里面有{},let无法获取里面let=10的值
    }
    
(2)const用法
const定义的都是常量,不能在改变值
const PI = 3.1425;
    PI = 2;
    console.log(PI)//输出结果3.1425


2. 箭头函数
    我们经常要给回调函数给一个父级的this
    常用办法就是 var self = this 定义一个变量接住他
    使用 箭头函数,this 将不会受到影响,可以直接用this调用父级的this

箭头函数的写法和用法:

第一种:对于只有一个形参和一个返回值的情况下,这里的V代表形参和返回值
Es5写法:
function fn(v){
        return v;
    }
    fn(3);
Es6写法:
   var fn = v => v;
    var res = fn(3);
    console.log(res);


第二种:没有形参时,箭头函数加上()代表空形参;
  Es5写法:function fn(){
        return 6;
    }
    fn();
    
   Es6写法:
    var fn = () => 6;
    var  res = fn();
    console.log(res)


第三种:形参为两个时,需要加上(形参1,形参2)
Es5写法:   
function fn(num1,num2){
        return num1 + num2
    }
    fn(3,4);

Es6写法:
var fn = (num1,num2) =>  num1 + num2;
var res = fn(2,3);
    console.log(res);


第四种:两个形参,且函数有多个内容,以及多个返回值时
Es5写法:   
function fn(num1,num2){
        console.log(1);
        console.log(2);
        return num1 + num2;
    }
Es6写法:
var fn = (num1,num2) => {  //多余一条语句  语句要放在 {}里,如果还行有返回值,那么要加return才可以
        console.log(1);
        console.log(2);
        return num1 + num2;
    }
    
    var res = fn(5,4);
    console.log(res)


第五种:函数里面的返回值是一个对象时,返回值需要用()包起来,原来的对象还得需要加上{}
Es5写法:
function fn(name,age){    
        
        return {            
            uname : name,
            uage  : age        
        }
        
    }
    var res = fn('jack',16);
    console.log(res)

Es6写法:
var fn = (name,age) => ({uname : name,uage : age});
    var res = fn('jack',13);
    console.log(res);



3. 字符串
includes:
        const string = 'food';
        const substring = 'foo';
        console.log(string.includes(substring));
    返回的是布尔值。
    string.repeat(str,count)
    如果 string.length < count 即插入str到count == string.length为止

4. 模板字符串:  `` 遇到变量: ${变量}
Es6的字符串拼接方法:
var obj = {uname:"jack",age:8}
var str = `
姓名:${obj.uname}年龄:${obj.age}
`; document.body.innerHTML =str; Es5的字符串拼接方法: var obj = {uname:"jack",age:8} var str ='
姓名:'+obj.uname+'年龄: '+obj.age+'
'; document.body.innerHTML =str; 5.解构 结构数组: 一.数组的取值法 1.数组求值写法: Es6的数组求值方法: var arr = [4,2,32]; var [a,b,c] = arr; console.log(a,b,c);//新的求数组的每一项的方法,输出结果是4,2,3 Es5的数组求值方法: var arr = [4,2,32]; var a = arr[0]; var b = arr[1]; var c = arr[2]; var d = arr[3]; console.log(a,b,c,d);输出结果是4,2,3 2.数组默认值: var ary = ["lily",34] let [name,age=16] = ary; console.log(name,age);//输出结果是 lily ,34 var ary = ["lily"] let [name,age=16] = ary; console.log(name,age);//输出结果是 lily ,16 分析:age变量的取值先看数组ary中有没有对应的值,如果有,取数组里面的值34,如果没有取默认值16 结构对象: Es6的对象求值新方法: let {uname : name1, age : age1} = obj ; console.log(name1,age1);//输出结果:jack,10 特殊:变量名和 属性名一样了;可以把属性名省略 let {uname : uname , age : age} = obj; console.log(uname,age)//输出结果:jack,10 Es5的对象求值方法: console.log(obj.uname); console.log(obj.age); 6.对象方法的简写 Es6的对象函数简写:相比较而言,省略了function函数 var obj = { say(){ alert(1); }, play(){ alert(2); } }obj.play(); Es5的对象函数: var obj = { say : function(){ alert(1); }, play : function(){ alert(2); } } obj.play(); 7.rest参数 处理不定数目参数: function logArguments(...args) { for (let arg of args) { console.log(arg); } } 8.归并和扩展运动符 (1)assign用法: objct.assign()方法 归并 objct.assign(target,a,b,c);就是把三个对象归并到target目标对象里面 var target = {pid:1}; var a ={pnam:"华为"}; var b ={price:1200}; var b = {pid:10} console.log(Objctassign(target,a,b,c)) (2)扩展运算符 ... var obj1 = {name:"lily",age:18}; var obj2 = {...obj1}; console.log(obj2); //输出结果是: age: 18 name: "lily" console.log(Object.assign({},{name : "lily"},{age : 18})) console.log(obj2); /输出结果是: age: 18 name: "lily" 扩展运算符和assign()用法很像 9.构造函数: Es5构造函数方法 function Animal(){ // 构造函数中的this否是实例 this.color = "白色"; this.age = 8; this.say = function(){ } } var res = new Animal(); // 对象(实例) 一个属性 方法 console.log(res)*/ Es6构造函数方法 class Animal{//class开头 constructor(){//用的对象简写 this.age = 5; this.color = "黑色" } } var res = new Animal(); console.log(res); 注意:class 定义一个类 属性要放在 constructor里 10.set集合和Map是Es6中提供的新的数据结构 Set类似于数组,但成员的值都是唯一的,数组不能调用它的方法 Set 实例的属性和方法 1.size:所有元素个数(相当于数组中的length) 2.add(value):添加某个值,返回Set结构本身 3.delete(value):删除某个值,返回一个布尔值,表示删除是否成功,删除成功返回true,删除失败返回false 4.has(value):返回一个布尔值,表示该值是否为Set成员 5.clear();清除所有成员,没有返回值 遍历: 6. (1)forEach():使用回调函数遍历每个数组 数组方法 (2)for of:遍历对象 for(var item of set){ console.log(); } 7.Es6新增的数组方法 Array.from() :将每个集合类数组转成数组 Array.of() 8. map集合map类似于对象,也是键值对的集合, 但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键方法有: set():设置 get():获取 delete():删除 has():查找 clear():清除所有 map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意: map() 不会对空数组进行检测。 注意: map() 不会改变原始数组。 var map = new Map(); map.set('pid', "华为123"); map.set("price", "120元"); map.set('address' ,"中南海"); 案例解析: (1).Array.from()方法的使用 var set = new Set([5,3,4,5,6,3,4]); // new出来的 都是一个对象,为了让他变成数组,使用 Array.from() var arr = Array.from(set); arr.push(8);//变成数组后就可以用数组的方法在后面添加8了 console.log(arr);//输出结果为:[5,3,6,4,8] (2).add(value)和size的用法 var set = new Set(); set.add(3); set.add(4); set.add(6); set.add(4).add(5).add(7); console.log(set.size);//相当于数组中的length,输出结果是5 console.log(set);//输出结果是3,4,6,5,7,说明Set方法可以去重复 (3).delete和has(value)和clear() set.delete(4); console.log(set.has(4)); set.clear(); console.log(set) (4).set.forEach() set.forEach(function(item,index,set1){ console.log(item) // 注意 : set是一个集合 index 和 item是一样的 console.log(set1) }) (5).链式写法 arr.slice(1,3) 返回来的还是 数组,所以可以继续调用push方法 var arr = [4,23,2,36,7]; arr.slice(1,3).push(5); 11.Promises 链式调用 func1(value1) .then(func2) .then(func3) .then(func4) .then(func5, value5 => { }); 12.Generators 用同步的代码风格来写异步代码 function* genFunc() { // (A) console.log('First'); yield; //(B) console.log('Second'); //(C) } ES7部分(新增的两个) Array.prototype.includes 它是一个替代indexOf,开发人员用来检查数组中是否存在值,indexOf是一种尴尬的使用,因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字,而不是一个布尔值。开发人员需要实施额外的检查。在ES6,要检查是否存在值你需要做一些如下图所示小技巧,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是当匹配的元素为0位置时候,该数组包含元素,却变成了false。 includes也可以在NaN(非数字)使用。最后 ,includes第二可选参数fromIndex,这对于优化是有好处的,因为它允许从特定位置开始寻找匹配。 1. includes 案例1: 代码: let array = ['1','2','3'] if(array.includes('2')){ console.log('有') } 案例2: console.log([1, 2, 3].includes(2)) // === true) console.log([1, 2, 3].includes(4)) // === false) console.log([1, 2, NaN].includes(NaN)) // === true) console.log([1, 2, -0].includes(+0)) // === true) console.log([1, 2, +0].includes(-0)) // === true) console.log(['a', 'b', 'c'].includes('a')) // === true) console.log(['a', 'b', 'c'].includes('a', 1)) // === false) 2. 指数操作符 案例:2**3 == 8 案例2: let a = 7 ** 12 let b = 2 ** 7 console.log(a === Math.pow(7,12)) // true console.log(b === Math.pow(2,7)) // true 开发者还可以操作结果: ES8部分 1. object.entries() 案例1代码: let obj = {a: 1, b: 2, c: 3}; Object.entries(obj).forEach(([key, value]) =>{ console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3 }) 案例2代码: //·Object.entries·将会返回对象自身可迭代属性key-value对数组(作为一个数组),他们(key-value)分别以数组存放数组中: let obj = {a: 1, b: 2, c: 3} JSON.stringify(Object.entries(obj)) "[["a",1],["b",2],["c",3]]" 案例3代码: let obj = {a: 1, b: 2, c: 3} for (let [key, value] of Object.entries(obj)) { console.log(`${key} is ${value}`) } // a is 1, b is 2, c is 3 2.Async Await 异步 异步函数(或者async/await)特性操作是Promise最重要的功能。这种想法是为了在写异步代码中简化它,因为人类大脑最讨厌这种平行非序号思维了。它只是不会演变这种方式。本来以为Promise的到来已经是摆脱node异步的福音了,在ES8,异步函数是那么给力。开发者定义一个asyc函数里面不包含或者包含await 基于Promise异步操作。在这引擎之下一个异步函数返回一个Promise,无论无何你在任何地方不会看到这样的一个词Promise。 案例1 代码: async fetchData(query) =>{ try { const response = await axios.get(`/q?query=${query}`); const data = response.data; return data; } catch (error) { console.log(error) } } fetchData(query).then(data => { this.props.processfetchedData(data) }) 3.函数参数列表和调用中的尾逗号(Trailing commas) 尾逗号在函数定义中只是一个纯粹语法变化,在ES8中,这种尾逗号是没有问题的: 案例1 var f = function(a, b, c, d, ) { // COMMA? OK! // ... console.log(d) } f(1,2,3,'this') 案例2 var arr = [1, // Length == 3 2, 3, ] // <--- ok let obj = {a: 1, // Only 3 properties b: 2, c: 3, } // <--- ok 4.Object.getOwnPropertyDescriptors 这新的 Object.getOwnPropertyDescriptors返回对象obj所有自身属性描述。这是一个多参数版本的Object.getOwnPropertyDescriptors(obj,propName)将会返回obj中propName属性的一个单独描述。 在我们日常不可变编程(immutable programming)时代中,有了这个方法很方便(记住,Javascript中对象是引用传递)在ES5中,开发者要使用Object.assign()来拷贝对象, Object.assign()分配属性只有copy和定义新的属性。当我们使用更加复杂对象和类原型,这可能会出问题。 Object.getOwnPropertyDescriptors允许创建真实的对象浅副本并创建子类,它通过给开发者描述符来做到这一点.在Object.create(prototype, object)放入描述符后,返回一个真正的浅拷贝。 Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ) 或者可以合并两个对象target和source如下: Object.defineProperties( target, Object.getOwnPropertyDescriptors(source) ) 这里有两种描述符号类型: 1.数据描述符(Data descriptor) 2.存取器描述符(Accessor descriptor) 存取描述符有必须属性:get 或者set或者get和set两个就是如你所想的getter和setter函数,然后存取描述符还有可选属性configurable和enumerable let azatsBooks = { books: ['React Quickly'], get latest () { let numberOfBooks = this.books.length if (numberOfBooks == 0) return undefined return this.books[numberOfBooks - 1] } } 这个例子数据描述符books由Object.getOwnPropertyDescriptor(azatsBooks, 'books')产生结果如下: Object configurable: true enumerable: true value: Array[1] writable: true __proto__: Object 同样的,Object.getOwnPropertyDescriptor(azatsBooks, 'latest')将会展现latest的描述符,这个latest(get)存取器描述符展现如下: Object configurable: truee numerable: true get: latest() set: undefined __proto__: Object 现在我们调用新方法获取所有的描述符: console.log(Object.getOwnPropertyDescriptors(azatsBooks)) 它会给出这个对象两个描述符books和latest: Object books: Object configurable: true enumerable: true value: Array[1] writable: true __proto__: Object latest: Object configurable: true enumerable: true get: latest() set: undefined __proto__: Object __proto__: Object 5.String padding(字符串填充) String.prototype.padStart 和 String.prototype.padEnd在javascript字符操作是一个不错的体验,帮助避免依赖而外的库。 padStart()在开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。从字符串的左边开始(至少大部分西方语言),一个经典例子是使用空格创建列: console.log('react'.padStart(10).length) // " react" is 10 console.log('backbone'.padStart(10).length) // " backbone" is 10 它对于财务方面非常有用: console.log('0.00'.padStart(20)) console.log('10,000.00'.padStart(20)) console.log('250,000.00'.padStart(20)) 如果是为会计做账之类的,这个很实用,帐做的很整齐? 0.00 10,000.00 250,000.00 第二个参数,让我们放一些其他的填充字符替代空字符串,一个字符串填充: console.log('react'.padStart(10, '_')) // "_____react" console.log('backbone'.padStart(10, '*')) // "**backbone" padEnd顾名思义就是从字符串的尾端右边开始填充。第二个参数,你能实际上用一个任何长度的字符串。例如: console.log('react'.padEnd(10, ':-)')) // "react:-):-" is 10 console.log('backbone'.padEnd(10, '*')) // "backbone**" is 10

你可能感兴趣的:(技术分享)