ES6

最新推荐文章于 2025-09-10 20:18:23 发布

weixin_30379531

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/hyf120/p/10179211.html

变量/赋值

变量：
- var 可以重复定义/不能限制修改/函数级作用域/没有块级作用域
- let 变量/不能重复定义/（块级）
- const 常量/不能重复定义/限制修改（块级）

解构赋值：

左右两边必须一样，右边得是合法的

必须定义和赋值同步完成

    let [a,b,c] = [1,2,3]
    console.log(a,b,c) => 1,2,3

    let [a,b,c] = [1,[4,5],3]
    console.log(a,b,c) => 1,[4,5],3

函数

箭头函数:

function (参数,参数) {} == (参数,参数) =>{};

如果有且仅有一个参数可以省略(); 参数 => {};

如果函数体仅有一句话,而且是return,{}可以省略;
默认参数:
function (a,b) {a = a||5}
(a=5,b) => {a}
参数展开:
** 剩余参数必须在参数最后 **
- 三个点的第一个用途：接收剩余参数
```
function show(a,...args) {
    alert(a,args)
}
show(2,3,4,5,56) => 2,[3,4,56]
```
- 第二用途：展开一个数组
```
let arr = [1,2,3,4]
...arr => 1,2,3,4
```

数组/json

Array.from([array-like]) => 将类数组转为为数组

map: 映射

let arr = [1,2,3,4,5];
let arr1  = arr.map(item=>item>3) // 数值大于3的为true
arr1 => [false, false, false, true, true]

reduce: 汇总

    let arr = [1,2,3,4,5];

    let sum  = arr.reduce((tmp,item,index)=>tmp+item) // 求和

    // tmp:临时值,items:当前值,index:下标
    // tmp第一次为第一个数值,然后tmp = tmp+item
    // 平均值
    let ave  = arr.reduce((tmp,item,index)=>{
        if (index < arr.length-1){
            return tmp+item
        } else {
            return (tmp+item)/arr.length
        }
    }) 
    sum => 15
    ave => 3

filter: 过滤

    let arr = [1,2,3,4,5];
    let arr1 = arr.filter(item=>item>3);
    arr1 = > [4,5]

forEach: 遍历

    let arr = [1,2,3,4,5];
    let sum = 0

    // 没有返回值，只是过一遍数据
    arr.forEach(item=>sum+=item);
    sum => 15

json

简写：名字和值一样的，可以省略
function 可以不写

    let a = 1,
        b = 2;
    let json1 = {a:a,b:b};
    json1 => {a: 1, b: 2}

    // 简写
    let json2 = {a,b}
    json2 => {a: 1, b: 2}

字符串模板

反斜杠``：植入变量、任意折行 ---- 例子：这是变量${xxx}

startsWith : 以什么开头 startsWith('xxx',n) n开始位置

endsWith ：以什么结尾 endsWith('xxx',n) 前n个字符

includes: 返回布尔值，是否找到参数字符串

repeat: 重复n次

padStart: 补全，省略第二个值默认为空格， padStart(n,'xxx') n表示字符长度

padEnd: 补全 padEnd(n,'xxx') n表示字符长度

matchAll(): 返回正则表达式的所有匹配 (类数组) Array.from(xxx.matchAll(regex)) [...'xxx'.matchAll(regex)]

面向对象

优点：底层支持、标准

class Person{
    constructor (name,age) {
        this.name = name;
        this.age = age;
    }
    showName () {
        alert(this.name)
    }
    showAge () {
        alert(this.age)
    }
}
let person = new Person('张山'，16);
person.showName() => 张山
person.showAge() => 16

继承

```javascript
class Person{
    constructor (name,age) {
        this.name = name;
        this.age = age;
    }
    showName () {
        alert(this.name)
    }
    showAge () {
        alert(this.age)
    }
}
class Worker extends Person{
    constructor(name,age,obj){
        super(name,age);
        this.obj = obj;
    }
    showWork(dd=this.obj){
        alert(dd)
    }
}
let work = new Worker('张山',19,'asdf');
work.showName(); => 张山
work.showAge(); => 16
work.showWork('dasdf') => dasdf
work.showWork()  => asdf
```

this指向通过bind()绑定

普通函数：根据调用者确定this指向（老变）

箭头函数：根据所在环境确定this指向（恒定）

Promise:

优点：解决异步操作

缺点：对逻辑操作麻烦

用法：需要在服务器环境下测试

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 第一种
    let p = new Promise((resolve, reject)=>{
        $.ajax({
            url:'1.txt',
            dataType:'json',
            success(json){

                resolve(json)
            },
            error(err){
                reject(err)
            }

        })
    })
    p.then(json=>{
        console.log(json)
    }, err=>{
        console.log(err)
    })

    // 第二种使用
    // Promise.all([p,p1,p2,p3]).then(arr=>{}); 与操作
    Promise.all([
        $.ajax({url:'1.txt',dataType:'json'}),
        $.ajax({url:'2.txt',dataType:'json'}),
        $.ajax({url:'3.txt',dataType:'json'}),
    ]).then((arr)=>{
        let [a,b,c] = arr;
        console.log(arr)
    })

    // 第三种使用
    // Promise.race([p,p1,p2,p3]).then(arr=>{}); 或操作（不常用）
</script>

注意： 测试中的1.txt等文本中的json {"name":66,"obj":"te"}使用双引号

generator函数

*号
yield -- 暂停

obj.next() -- 向下执行

function *show(){
    console.log('aaa');
    yield;
    console.log('bbb');
}
// show()是一个generator对象
let gen = show();

gen.next(); => aaa
gen.next(); => bbb

yield:

参数：

function *show(){
    let a = yield; // a获取的参数为第二次next()传递的值
    console.log(a);
}
// show()是一个generator对象
let gen = show();
gen.next(2); 
gen.next(3);

function *show(){
    console.log('aaa');
    yield 55;
    console.log('bbb');
}
// show()是一个generator对象
let gen = show();

let a = gen.next(); // {value: 55, done: false}
let b = gen.next(); // {value: 89, done: true}

generator+promise的配合：

外来的runner辅助执行 ---- 不统一、不标准、性能低
generator函数不能写入(=>) 箭头函数

async/await

async function show(){
    try{
        let data1 = await $.ajax({url:'1.txt',dataType:'json'});
        let data2 = await $.ajax({url:'2.txt',dataType:'json'});
        let data3 = await $.ajax({url:'3.txt',dataType:'json'});
        console.log(data1,data2,data3)
    }catch(e){
        console.log(e);
        alert('Erro in show')
    }
}
show(); // {a: 2, b: 4} {name: 3, age: 12} {name: 66, obj: "te"}