ECMAScript新功能介绍（es6 es2015）

最新推荐文章于 2022-06-12 19:11:47 发布

CodingForAndroid

最新推荐文章于 2022-06-12 19:11:47 发布

阅读量683

点赞数

分类专栏： React Native+Flutter

本文链接：https://blog.csdn.net/u011733020/article/details/73857974

版权

React Native+Flutter 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

1.变量的作用域

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

2.const.恒量

//2 const.恒量  声明的是常量 不能被修改

const  fruits = '苹果';
console.log(fruits);
//Identifier 'fruits' has already been declared
const  fruits = '橘子';
console.log(fruits);
const fruitss = [];
fruitss.push('苹果');
fruitss.push('橘子');
fruits = []//attempt to assign  to const variable

3.解构数组- Array Destructuring

//3.解构数组- Array  Destructuring
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} !`;
function  kitchen(strings,...values) {
    let result = '';
    for(var i = 0;i<values.length;i++){
        result += strings[i];
        console.log(result);

        result += values[i];
        console.log(result);
    }
    result += strings[strings.length -1];
    return result ;
}
// ecmascript.js:52 今天的早餐是
// ecmascript.js:55 今天的早餐是cake
// ecmascript.js:52 今天的早餐是cake与
// ecmascript.js:55 今天的早餐是cake与tea
// ecmascript.js:61 今天的早餐是cake与tea !
console.log(breakfast);

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
let  fruits = ['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.对象表达式

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

15.对象属性名

//对象属性名
let food ={};
let drink = 'hot  drink';
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';
    }
};

let  sunday = Object.create(breakfast);
console.log(sunday.getDrink());//tea
console.log(Object.getPrototypeOf(sunday) === breakfast); //true

Object.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.迭代器 Iterators next 返回 value

function chef(foods) {
    let i = 0;

    return{
        next(){
            let done = (i>= foods.length);
            let value = !done ? foods[i++]:undefined;

          return{
              value:value,
              done: done
          }
        }
    }
}

let wanghao = chef(['tomato','egg']);
console.log(wanghao.next());//tomato  done false
console.log(wanghao.next());//egg  done false
console.log(wanghao.next());//value :undefined  done :true

22.生成器Generators

function* chef(){
    yield 'tomato';
    yield 'egg';
}
let wanghao = chef();
console.log(wanghao.next());//tomato  done false
console.log(wanghao.next());//egg  done false
console.log(wanghao.next());//value :undefined  done :true

let chef = function* chef(foods){
   for(var i =0;i<foods.length;i++){
       yield foods[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

set 与 get
class Chef{
    constructor(food){
        this.food = food;
        this.dish =[];
    }

    get menu(){
        
        return this.dish;
    }
    set menu(dish){
        this.dish.push(dish)
    }
    static  cook(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 extends  Person{
    constructor(name,birthday){
        super(name,birthday);
    }
}
let wanghao  = new Chef('wanghao','1984-01-01');
wanghao.intro();

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

//集合 Set 类似Array  set 中不能有重复的内容,添加重复的东西加不进去
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}`);
}

//导入
import  chef 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};