MENU

es6 一些用法

June 26, 2019 • web阅读设置

es6常用 语法

1.遍历数组

var arr = [10,20,30]
arr.forEach((item,index) => { 
    console.log(item,index)
});

2.map()映射

同时也具有遍历数组的功能

let arr = [10,20,30,50,70,90]

var arr1 = arr.map((item,index)=>{  //权限控制
    if(item>60){
        return true;
    }else{
        return false;
    }
})

console.log(arr1)

//简写
var arr1 = arr.map((item,index)=>item>60) //返回值是布尔值可以这样写

3.filter()过滤

let obj = [{user:001,age:25},{user:001,age:18},{user:001,age:22}]

let newobj = obj.filter((item,index)=>item.age>20)

console.log(newobj)

4.every()比对所有数组元素

当有一个数组元素不满足时返回false 否则true 应用于全选反选

let arr = [20,50,30,60,55,70]

let arr1 = arr.every((item,index)=>item>15)
console.log(arr1) //返回true

5.some()比对所有数组元素

当其中有一个数组元素满足时返回true 否则false 应用于购物车商品选中价格计算

let arr = [20,50,30,60,55,70]

let arr1 = arr.some((item,index)=>item>90)
console.log(arr1)
//返回false  

6.reduce()计算

let arr = [20,50,30,60,55,70]
let arr1 = arr.reduce((sum,item,index)=>{  //第一个参数为累计器 
    return sum + item;
})
console.log(arr1)

7.数组去重

let arr=[1,1,1,3,3,2,3,2,1,3,2]
 let newarr=Array.from(new Set(arr));
 console.log(newarr)

let newarr=[...new Set(arr)];
console.log(newarr)

es6进阶

1.promise() 异步编程的一种解决方案

可以让结构清晰 执行互不影响

    let a=()=>{
        return new Promise(resolve=>{
            console.log(1)
            setTimeout(() => {
                resolve("我是成功的异步值") //成功的结果  reject为失败结果
            }, 1000);
            console.log(3)
        })    
    }
    
    a().then(res=>console.log(res))//只能通过.then获取promise中成功和失败时的值

    console.log("-------------------------------------------------")

    a()

    console.log(a())//.then 是该函数下promise实例的一个方法 用来取promise中成功值和失败值

2.promise .all()方法

可将所有的异步请求同时进行并返回所有结果

Promise.all(
        [
            $.get("./st1.json"),
            $.get("./st2.json"),
            $.get("./st3.json")
        ]
    )
    .then(arr=>console.log(arr));//打印所有数据在一个对象里

Promise.all(
        [
            $.get("./st1.json"),
            $.get("./st2.json"),
            $.get("./st3.json")
        ]
    )
    .then(([arr1,arr2,arr3])=>console.log(arr1,arr2,arr3));//逐一打印

.all( ) 方法请求数据必须所有的请求都是成功,否则就会报错

3.promise .race()方法

与.all( ) 不同在于只要有一个请求成功就可以返回数据

Promise.race(
        [
            $.get("./st1.json"),
            $.get("./st2.json"),
            $.get("./st30.json")
        ]
    )
    .then((arr)=>console.log(arr));

4.promise .catch()方法

可以捕获到任何一次请求失败的数据 放.then( )方法后使用

 Promise.all(
        [
            $.get("./st1.json"),
            $.get("./st2.json"),
            $.get("./st3.json")
        ]
    )
    .then((arr)=>console.log(arr)).catch(err=>console.log(err))

5.es7 解决异步执行顺序问题

//使用async 声明这个函数中有异步请求要执行

//使用await 声明该执行内容为异步,等该内容执行完成之后 再执行后面的代码

let func = async()=>{
    let a= 10;
    let b= 20;
    let c= await new Promise((resolve,reject)=>{resolve("我要在b的前面")})
    console.log(a)
    console.log(c)
    console.log(b)
}
func()

6.class 类

class Person{
    constructor(name,age){  //定义属性 
        this.name=name,
        this.age=age
    }
    showname(){ //定义方法
        console.log(this.name)
    }
    showage(){
        console.log(this.age)
    }
}

var p = new Person("xxxxxxxxxxxxxxxxx",100)

p.showname()
p.showage()

console.log(p)

7.class 继承

class Person{
    constructor(name,age){
        this.name=name,
        this.age=age
    }
    showname(){
        console.log(this.name)
    }
    showage(){
        console.log(this.age)
    }
}


class Girls extends Person{     //通过extends关键字将要继承的构造函数进行关联
    constructor(name,age,sex,des){
        super(name,age)   // 将继承的属性参数,用super() 引入
        this.sex=sex,
        this.des=des
    }
    func(){
        console.log(this.sex,this.des)
    }
}

var g = new Girls("迪丽热巴",25,1,"xxxxxxxxxxxxx")

console.log(g)

es6环境配置

如何搭建es6开发环境

node.js安装

  1. 此过程没有难点,略过
  2. 下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后

webpack 安装

  1. 新建一个目录(项目名称), 进入该项目,npm init, 然后一路回车即可。(会生成一个package.json文件)
  2. 在根目录下创建src目录,并在src目录下创建index.js文件
  3. 在项目的根目录下执行 npm install webpack webpack-cli --save-dev
  4. npm install webpack-dev-server html-webpack-plugin --save-dev

webpack-dev-server是启动一个本地的服务,html-webpack-plugin是一个插件,用来使用html的模板

  1. 在根目录下创建webpack.dev.config.js文件
  2. 编辑package.json文件:
"scripts": {

"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

}

安装babel相关插件

  1. npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
  2. 在项目的根目录下创建.babelrc
{

"presets": ["es2015", "latest"],
"plugins": []

}

修改webpack.dev.config.js 并运行

  1. 在webpack.dev.config.js种添加内容
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: './src/index.js',// 入口文件
    output: {
        path: __dirname,
        filename: './release/bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devServer: {
       contentBase: path.join(__dirname,'./release'), //运行的目录
       open: true, // 自动刷新浏览器
       port: 9002 // 端口号
    }
}
  1. 现在就可以在src下的index.js中写es6代码了
  2. 运行npm run dev; 可以看到会自动访问 localhost:9002

1.export&import

// 导出
export function get() {
    console.log("我是get函数")
}


export let get2=()=>{
    console.log("第二个函数")
}

//导入
import{get,get2} from './2' 
// 导入 必须用 { }  目的是解构  并且导入和导出的名字一致
get()
get2()

import * as gets from './2'  // 导出所有 比较耗性能 不建议使用


export default {  //此方法导出一个页面只能用一次  但可以导出多个方法体
    function,
}

import function from '../' //导入default的东西时 不需要 { } 并且名字不需要对应