ES6新功能学习总结

其他 2018-10-24 20:11:26 阅读次数: 0
版权声明：原创文章，未经博主同意，不得擅自转载！ https://blog.csdn.net/qq_36718999/article/details/81258645

一、准备

1.1 安装依赖 

//浏览器不能直接解析es6，需要安装以下依赖包

\desktop\mkdir xiaoyang-js
\desktop\cd xiaoyang-js
\desktop\xiaoyang-js>npm init
\desktop\xiaoyang-js> npm install [email protected] webpa
[email protected] [email protected] [email protected] b
[email protected] --dev

1.2 配置

1.2.1 新建：xiaoyang-js/webpack.config.js 内容如下：

const wenpack = require('webpack')

module.exports = {
  entry:'./script.js',
  output:{
    filename:'./bundle.js'
  },
  module:{
    rules:[
      {
      test:/\.js?/,
      exclude:/node_modules/,
      use:{
        loader:'babel-loader',
        options:{
          presets:['env']
        }
      }
    }]
  }
}

1.2.2 新建：xiaoyang-js/.babelrc 内容如下：

{"presets":["env"]}

1.2.3 新建：xiaoyang-js/index.js、xiaoyang-js/index.html(index.html中 引入 bundle.js)

//index.html 中引入：

<script src="./bundle.js"></script>

1.2.4 修改package.json(添加scripts脚本命令)

"description": "",
  "main": "index.js",
  "scripts": {
    "start":"./node_modules/.bin/webpack-dev-server"
  },

1.2.5 cmd运行：npm run strat  >> 再打开 localhost：8080

二、作用域

//script.js
'use strict';

//块级 作用域
/*{
  let i = 0;
}
console.log(i);//报错
*/

//恒量 const
/*
const  abc = [];
abc.push('123');
const  abc=[];  //报错，不能再次申明
*/

三、解构

//script.js
'use strict';

//解构数组
/*
function breakfast (){
  return ['蛋糕','茶','苹果']
}
const [dessert,drink,fruit] = breakfast()

console.log(dessert,drink,fruit);//'蛋糕','茶','苹果'
*/
// 解构对象
 function breakf (){
  return {dessert:'蛋糕',drink:'茶',fruit:'苹果'}
}
const {dessert:dessert,drink:drink,fruit:fruit} = breakf ()
console.log(dessert,drink,fruit);//'蛋糕','茶','苹果'

四、字符串模板

4.1 模板字符串

//script.js
'use strict';
let dessert = '蛋糕',
    drink = '茶';
let breakfast = `您的早餐是：
${dessert}与${drink}！`;//字符串模板
console.log(breakfast);

4.2 带标签的模板字符串

//script.js
'use strict';
let dessert = '蛋糕',
    drink = '茶';
//字符串模板 添加标签 可以处理字符 和 变量
let breakfast = kitchen`您的早餐是：
${dessert}与${drink}！`;

function kitchen(strings,...values){
  console.log(strings);//数组["您的早餐是：","与","!"]
  console.log(values);//数组["蛋糕","茶"]
  //输出模板字符串
  let result ='';
  for (let i=0;i<values.length;i++){
    result += strings[i];
    result += values[i]
  }
  result += strings[strings.length-1];
  return result
}
console.log(breakfast);

4.3  判断字符串含有某字符

//script.js
'use strict';

let dessert = 'adc',drink = '13';
let breakfast = `您的早餐是${dessert}与${drink}!`

//判断字符串 开头  结尾  含有
console.log(breakfast.startsWith('您'));//true
console.log(breakfast.endsWith('!'));//true
console.log(breakfast.includes('早'));//true

五、函数

5.1 函数参数 默认值

//script.js
'use strict';
//函数  设置默认值
function food (name = 'adv',value = '123'){
  console.log(name ,value);
}

 5.2 展开操作符 spread

//script.js
'use strict';
//展开操作符 ...
let food = ['ab','cd'];
let chef = ['12','34',...food];
console.log(food);//['ab','cd']
console.log(...food);//ab cd
console.log(chef);//["12", "34", "ab", "cd"]

5.3 剩余操作符 rest

//script.js
'use strict';
//剩余操作符  ... rest
function fast(dessert,drink,...foods){
  console.log(dessert,drink,foods);
}
console.log(fast('a','b','c','d','e'));//a b ["c", "d", "e"]

5.4 解构参数

//script.js
'use strict';
//解构参数
function fast (dessert,drink,{locala,resta}={}){
  console.log(dessert,drink,locala,resta);
}
fast('a','b',{locala:'12',resta:'34'});//a b 12 34

 5.5 函数的name属性

//script.js
'use strict';
//函数  名字 属性name
function food(){}
console.log(food.name);//food

let foods = function (){}
console.log(foods.name);//foods

let foodes = function foodb (){}
console.log(foodes.name);//foodb

5.6 箭头函数

//script.js
'use strict';
//箭头函数 () =>
let breakfast = dessert => dessert;
/*等效于
let breakfast = function breakfast(dessert){return dessert}
 */
console.log(breakfast('123'));//123

// 多个参数
let food = (dessert,drink) =>dessert + drink;
let foods = (dessert,drink) =>{console.log(dessert + drink);};

 六、对象

6.1 对象表达式

//script.js
'use strict';
//对象表达式  省略简写
let dessert = 'ad',drink='123';

let food = {
  dessert,
  drink:drink,
  cook (){
    console.log('cook');
  }
}
console.log(food);

6.2 对象属性名

//script.js
'use strict';
//对象 属性
let food = {};
food.dessert = 'as';  //添加对象属性
console.log(food);//{dessert: "as"}

food['hot drink'] = '123';// 属性名 含有空格
let cook = 'hot cook';

food[cook] = 'df';//变量 作为属性名
console.log(food);//{dessert: "as", hot drink: "123", hot cook: "df"}

 6.3 判断两个值是否相等 Object.is()

//script.js
'use strict';
//判断两个值 相等 Object.is();
//判断两个值  == ===  存在问题；
console.log(+0 == -0);//true
console.log(+0 === -0);//true

console.log(NaN == NaN);//false
console.log(NaN === NaN);//false

console.log(Object.is(NaN,NaN));//true
console.log(Object.is(-0,+0));//false

6.4 把一个对象的值复制给另一个对象 Object.assign() 

//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfast = {};
let food={dessert:"345",drink:'ads'}

Object.assign(
  breakfast,{dessert:'123'},food
)

console.log(breakfast);
//{dessert: "345", drink: "ads"}，相同的值会覆盖

6.5 设置对象的prototype

//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfase = {
  getSome (){
    console.log('123');
  }
}
let dinner = {
  getSome () {
    console.log('abc');
  }
}

let food = Object.create(breakfase);

food.getSome();//123
console.log(Object.getPrototypeOf(food)===breakfase);//true

Object.setPrototypeOf(food,dinner);//改变food的proto
food.getSome();//abc

 6.6 __proto__

//script.js
'use strict';
//把一个对象的值复制给另一个对象 Object.assign();
let breakfase = {
  getSome (){
    console.log('123');
  }
}
let dinner = {
  getSome () {
    console.log('abc');
  }
}
let food = {
  __proto__:breakfase
};
food.getSome();//123
console.log(Object.getPrototypeOf(food) === breakfase);//true

food.__proto__ = dinner; //设置proto
food.getSome();//abc
console.log(Object.getPrototypeOf(food) === dinner);//true

6.7 super

//script.js
'use strict';
//super 执行原型的方法
let breakfase = {
  getSome (){
   return '123'
  }
}

let food = {
  __proto__:breakfase,
  getSome() {
    return super.getSome() + 'abc';
  }
};
console.log(food.getSome()); //123abc

七、生成器与迭代器

7.1 迭代器 Iterators 

//script.js
'use strict';
//Iterators 每次执行时，next() 方法 返回一个对象 {value:xx,done:false/true}
//手动创建迭代器
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 xiaoyang = chef(['13','ac']);
console.log(xiaoyang.next());//{value: "13", done: false}
console.log(xiaoyang.next());//{value: "ac", done: false}
console.log(xiaoyang.next());//{value: undefined, done: true}

 7.2 生成器 Generators

//script.js
// 'use strict';
//创建生成器，yield是每次next()返回的值
function* chef(){
  yield 'a';
  yield 'b';
}
//新建迭代器
let xiaoyang = chef();
console.log(xiaoyang.next());//{value:'a',done:false}
console.log(xiaoyang.next());//{value:'b',done:false}
console.log(xiaoyang.next());//{value:undefinde,done:true}

var chef02 = function* (foods) {
  for (let i=0;i<foods.length.i++){
    yield foods[i];
  }
}

八、类

8.1 class

//script.js
'use strict';
/* jshint esversion: 6 */

//创建类
class Chef {
  contstructor(food){//定义属性
    this.food= food;
  }

  cook() {//定义方法
    console.log(this.food);
  }
}

let xiaoyang = new Chef('123');//实例化
xiaoyang.cook();

8.2 get 与 set

//script.js
'use strict';
/* jshint esversion: 6 */

//创建类
class Chef {
  contstructor(food){//定义属性
    this.food= food;
    this.dish=[];
  }

  get menu() {
    return this.dish;
  }

  set menu(dish) {
    this.dish.push(dish);
  }

  cook() {//定义方法
    console.log(this.food);
  }
}

let xiaoyang = new Chef();
console.log(xiaoyang.menu = 'a');
console.log(xiaoyang.menu = 'b');

8.3 静态方法static

//script.js
'use strict';
/* jshint esversion: 6 */

//创建类
class Chef {
  contstructor(food){//定义属性
    this.food= food;
    this.dish=[];
  }

static cook(food) {//static 定义静态方法，不用实例化就能使用
    console.log(food);
  }
}

Chef.cook('123');

8.4 继承 - extends

//script.js
'use strict';
/* jshint esversion: 6 */

//创建类 Person
class Person {
  constructor(name,birth) {
    this.name = name;
    this.birth = birth;
  }

  intro() {
    return `${this.name},${this.birth}`;
  }
}

class Chef extends Person { //extents 继承类
  constructor(name,birth) {
    super(name,birth);//使用super  调用父类
  }
}

let xiaoyang = new Chef('xy','123');
console.log(xiaoyang.intro());// xy 123

九、集合

9.1 set

//script.js
'use strict';

//set 一个集合，类似于数组，但不能有重复的项
let desserts = new Set('12a蛋糕');
console.log(desserts);//Set(5) {"1", "2", "a", "蛋", "糕"}
desserts.add('b');//add 增加项
desserts.add('b');//set 不能有重复的项

console.log(desserts.size);//6 size 多少项
console.log(desserts.has('蛋'));//has 是否含有项
desserts.delete('a');//delete  删除

desserts.forEach(dessert =>{
  console.log(dessert);
});//forEach 循环

console.log(desserts);

desserts.clear();//clear  清空

9.2 map

//script.js
'use strict';

//map 一个集合，类似于对象，key => value
//key 可以是函数 字符串 对象
let food = new Map();//创建map集合
let fruit ={},cook =function () {},dessert = 'str';

food.set(fruit,'a');// set 设置值value
food.set(cook,'b');
food.set(dessert,'c');

console.log(food);//Map(3) {{…} => "a", ƒ => "b", "str" => "c"}

console.log(food.size);//3 size项数
console.log(food.get(fruit));//a get()得到某项值
food.delete(dessert);//delete  删除某项
console.log(food.has(dessert));//false has是否含有某项

food.forEach((value,key) =>{
  console.log(`${value} => ${key}`);
})//forEach 循环

food.clear();//clear 清空food

十、模块 (借用工具 jspm 或 webpack)

10.1 导出或导入

//chef.js 导出模块
export let a = '1';

//chef.js 导出模块
let b = '2';
let c = '3';
export {b,c};

//script.js 使用 导入模块
import {b,c} from "./chef"
console.log(b, c);

//script.js 使用 导入模块
import * as chef from "./chef"
console.log(chef.b,chef.c);

10.2 重命名 as

//chef.js 导出模块 as重命名
let b = '2';
let food = function(){} ;
export {b,food as fruit};

//script.js 导入模块 as重命名
import {b,c as d} from "./chef"
console.log(b, d);

10.3 默认导出导入

//chef.js 导出 默认
export default function food(){
  console.log('food');
}
//chef.js 导出 默认
function food (){
  console.log('food');
}
export {food as default}


//script.js 导入 默认模块  
import zidingyi  from "./chef"

猜你喜欢

转载自blog.csdn.net/qq_36718999/article/details/81258645
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022