锐客网

  1. 首页 > it技术 > >

React|ECMAScript新功能介绍（es6 es2015）

reactNative+Flutt

1.变量的作用域

//1.作用域变量的作用域全局 函数块 作用域 // let 声明 的变量只能在定义的那个块中。 { let fruit = '苹果'; var apple = 'apple'; } console.log(apple); // console.log(fruit);

2.const.恒量

//2 const.恒量声明的是常量 不能被修改constfruits = '苹果'; console.log(fruits); //Identifier 'fruits' has already been declared constfruits = '橘子'; console.log(fruits); const fruitss = []; fruitss.push('苹果'); fruitss.push('橘子'); fruits = []//attempt to assignto const variable

3.解构数组- ArrayDestructuring
//3.解构数组- ArrayDestructuring function breakfast() { return['cake','tea','apple']; } //可以把数组中的值，传递给对应的变量 cake tea apple let [dessert,drink,fruit] = breakfast(); console.log(dessert,drink,fruit);

4.解构对象 -Object Destructuring

//解构对象 -Object Destructuring function breakfast() { return{dessert:'cake',drink:'tea',fruit:'apple'}; } //cake tea apple，解构对象 前面是 原来对象的属性，后面是接收的属性 let {dessert:desserts,drink:drinks,fruit:fruits} = breakfast(); console.log(desserts,drinks,fruits);

5.模板字符串-Template Strings
//模板字符串-Template Strings ,使用$符号 let dessert = 'cake',drink = 'tea'; let breakfast = `今天的早餐是${dessert}与${drink} !`; console.log(breakfast); //今天的早餐是cake与tea !


6.带标签的模板字符串 -Tagged Templates
// 带标签的模板字符串 -Tagged Templates let dessert = 'cake',drink = 'tea'; let breakfast =kitchen`今天的早餐是${dessert}与${drink} !`; functionkitchen(strings,...values) { let result = ''; for(var i = 0; i

7.判断字符串中是否包含其他字符串

//判断字符串中是否包含其他字符串 let state = breakfast.startsWith("今天"); //开头是 let state = breakfast.endsWith("今天"); //结尾是 let state = breakfast.includes("今天"); //包含

8.参数默认值 -Default Parameter Value

function breakfast ( dessert = 'cake',drink = 'tea'){ return `${dessert} ${drink}`; } console.log(breakfast('aaa','bbb'));


9.展开操作符... Spread
//展开操作符... Spread letfruits = ['fruits','banana'],foods =['cake',...fruits]; console.log(foods); //['cake','fruits','banana'];

10.剩余操作符 ... Rest

//剩余操作符 ... Rest function breakfast ( dessert ,drink ,...foods){ console.log(dessert,drink,...foods); } breakfast('cake','orange juice','apple','pear')

11.解构参数 -Destructed Parameters

//解构参数 -Destructed Parameters function breakfast( dessert,drink,{location,restaurant}={}) { console.log(dessert,drink,location,restaurant); } breakfast('cake','orange juice',{location:'济南',restaurant:'董小姐'})

12函数的名字 - name属性

//函数的名字 - name属性 let breakfast = function superBreakfast (argument) {} console.log(breakfast.name); //superBreakfast

13.箭头函数 -Arrow Functions

//箭头函数 -Arrow Functions let breakfast = dessert => dessert; //breakfast ：函数名，dessert ：接收参数名字 ,=> ：返回值 //相当于以下写法 var breakfast = function breakfast(dessert) { return dessert; } let breakfast = (dessert,drink) => { return dessert+drink; }; var breakfast = function breakfast(dessert,drink) { return dessert+drink; }

14.对象表达式

//对象表达式 letdessert = 'cake',drink = 'tea'; let food = { dessert, drink, breakfast(){}, };

15.对象属性名

//对象属性名 let food ={}; let drink = 'hotdrink'; food.dessert = 'cake'; //如果属性包含空格 不能使用对象.属性，需要用方括号 food['hot drink'] = 'tea'; food[drink] = 'tea'; //两种写法一样

16.对比两个值是否相等 -Object.is()

//对比两个值是否相等 -Object.is(); +0 == -0; //true +0 === -0; //true NaN == NaN; //false Object.is(NaN,NaN); //true Object.is(+0,-0); //false

17.把对象的值复制到另一个对象中 Object.assign()
//把对象的值复制到另一个对象中 Object.assign(); let breakfast = {}; Object.assign(breakfast,{drink:'peer'}); //breakfast 里面的东西 就是{drink:'peer'}

18.设置对象的prototype -Object.setPrototypeOf()

设置对象的prototype -Object.setPrototypeOf(); let breakfast = {getDrink(){ return 'tea'; }}; let dinner = { getDrink(){ return 'peer'; } }; letsunday = Object.create(breakfast); console.log(sunday.getDrink()); //tea console.log(Object.getPrototypeOf(sunday) === breakfast); //trueObject.setPrototypeOf(sunday,dinner); console.log(sunday.getDrink()); //peer console.log(Object.getPrototypeOf(sunday) === dinner); //true


19._proto_

let sunday = { __proto__:breakfast }; console.log(sunday.getDrink()); //tea console.log(Object.getPrototypeOf(sunday) === breakfast); //true sunday.__proto__ = dinner; console.log(sunday.getDrink()); //peer console.log(Object.getPrototypeOf(sunday) === dinner); //true

20.super

let sunday = {__proto__:breakfast, getDrink(){ return super.getDrink()+'milk'; }};




21.迭代器 Iteratorsnext 返回 value

function chef(foods) { let i = 0; return{ next(){ let done = (i>= foods.length); let value = https://www.it610.com/article/!done ? foods[i++]:undefined; return{ value:value, done: done } } } }let wanghao = chef(['tomato','egg']); console.log(wanghao.next()); //tomatodone false console.log(wanghao.next()); //eggdone false console.log(wanghao.next()); //value :undefineddone :true

22.生成器Generators

function* chef(){ yield 'tomato'; yield 'egg'; } let wanghao = chef(); console.log(wanghao.next()); //tomatodone false console.log(wanghao.next()); //eggdone false console.log(wanghao.next()); //value :undefineddone :truelet chef = function* chef(foods){ for(var i =0; i

23.class 类 创建对象

//class 类 创建对象 class Chef{ constructor(food){ this.food = food; }cook(){ console.log(this.food); }} let wanghao = new Chef(); wanghao.cook();


24.set 与 get 【React|ECMAScript新功能介绍（es6 es2015）】

set 与 get class Chef{ constructor(food){ this.food = food; this.dish =[]; }get menu(){return this.dish; } set menu(dish){ this.dish.push(dish) } staticcook(food){ console.log(food); }} let wanghao = new Chef(); wanghao.menu = 'shrimp'; //set wanghao.menu = 'cake'; //set wanghao.menu; //get wanghao.cook();

25.静态方法 static直接调用

Chef.cook('tomato');

26 继承 extends

//继承 extends class Person{ constructor(name,birthday){ this.name = name; this.birthday = birthday; }intro(){ return`${this.name} ,${this.birthday}`; } } class Chef extendsPerson{ constructor(name,birthday){ super(name,birthday); } } let wanghao= new Chef('wanghao','1984-01-01'); wanghao.intro();

27.集合 Set 类似Arrayset 中不能有重复的内容,添加重复的东西加不进去

//集合 Set 类似Arrayset 中不能有重复的内容,添加重复的东西加不进去 let desserts = new Set('cake tea'); console.log(desserts); desserts.add(); //添加 desserts.size//判断size desserts.has('')//是否有某些元素 desserts.delete('')//删除元素 desserts.forEach( dessert =>{ console.log(dessert); }); //遍历元素 desserts.clear(); //清空Set

28.Map

//Map let food = new Map(); //创建 Map let fruit = {},cook = function () {},dessert = '甜点'; food.set(fruit,'apple'); food.set(cook,'fork'); food.set(dessert,'cake'); food.set(); //大小 food.get(fruit); //apple food.get(cook); //fork food.delete(fruit)//删除元素 food.has(fruit); food.forEach((vaule,key)=>{ console.log(`${key} = ${value}`) }) food.clear(); //清空Map

29.Module 模块
//创建模块 导出模块 导入模块
// 重命名导出与导入的东西
// 默认导出的东西

import {fruit,dessert,supper as dinner} from './chef'; //导入全部 import * as chef from './chef'; //chef 是自己命的一个名 console.log(fruit,dessert); console.log(chef.fruit,chef.dessert); dinner(fruit,dessert); //模块默认导出 export default function dinner(fruit,dessert) { console.log(`今天的晚餐是：${fruit} 与${dessert}`); }//导入 importchef from './chef'; chef('apple','Hamburger');


export let fruit = 'apple'; export let dessert = 'cake'; export {fruit,dessert}//导出模块 function dinner(fruit,dessert) { console.log(`今天的晚餐是：${fruit} 与${dessert}`); } export {fruit,dessert,dinner as supper};




    推荐阅读


    上一篇：简单的结构体数组

    下一篇：jxbrowser错误The Chromium profile directory is already used/locked by another BrowserContext instance