ES6

作者: 宋song一 | 来源:发表于2020-01-04 11:23 被阅读0次

虚拟在线REST API,可用作本地测试

自执行函数console.log(((x, y) => x + y)(1, 2))
参数默认值
let 定义变量也会提升,但是不会自动赋值一个undefined,而var定义变量的同时会自动赋值undefined
let和const:块级作用域,暂时性死区
const复杂数据类型内部可修改值,内存(数据类型)地址不可更改

一、Object.assign()

Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

直接打印Object(多个对象),将只输出 第一个对象
console.log(Object.assign(true)) 结果为 [Boolean: true],与直接打印Object(true)结果相同
console.log(Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' }))

二、异步

ES6/7/8新特性Promise,async,await,fetch带我们逃离异步回调的深渊

fs.copy('/tmp/myfile', '/tmp/mynewfile')
  .then(() => console.log('success!'))
  .catch(err => console.error(err))

可以转换为
await fs.copy('/tmp/myfile', '/tmp/mynewfile')
使用try...catch捕获异常

三、prototype对象(类的原型)

作用:共享方法,节约内存
一般情况下,公共属性定义到构造函数,公共方法放到原型对象身上

四、对象原型__proto__(双下划线)(实例的隐式原型)

自动添加,(实例对象)指向构造函数的原型对象。非标准属性,内部指向,不能直接使用(赋值)

五、constructor

如果修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动利用constructor指回原来的对象 constructor:Star

六、数组方法

map/reduce

//利用reduce求数组的积
function product(arr) {
  return arr.reduce((x, y) => x * y);
}
console.log(product([1, 2, 3, 0]));

js parseInt和map函数

forEach,
filter

let p1 = products.filter(product =>
    product.type === 'vegetable'
)

//reduce.判断纯(或)的输入是否对称
function balancedParens(string) {
    return !string.split('').reduce((pre, char) => {
        if (char < 0) { return pre }
        if (char === '(') {
            return ++pre
        }
        if (char === ')') {
            return --pre
        }
    }, 0)
}
console.log(balancedParens(')(())())())()(('))

七、this指向

es5内部函数指向成员变量使用let self = this;或 .bind(this)。es6箭头函数默认指向成员变量(上一级的作用域)
es6函数内部的this指向当前函数的执行环境(函数挂靠的实例对象)
函数内部的super指向当前函数的执行环境(函数挂靠的实例对象)所属类的原型(prototype)
super只能写在实例的方法里面,不能写在单独的函数中

const team = {
  members: ["Henry", "Elyse"],
  teamName: "es6",
  teamSummary() {
    // let self = this;
    return this.members.map(
      (member)=> {
        return `${member}属于${this.teamName}小组`;
      }
    //   .bind(this) //es5普通函数
    );
  },
};
console.log(team.teamSummary());

修改this指向的方法:call,apply(两个都让调用的函数执行,第一个参数是this指向。call直接传参,apply数组传参)
bind:不会让调用的函数执行,会生成一个新的函数

八、展开运算符(剩余)

数组合并可以替代concat或push

function addNumbers(...numbers) {
  return numbers.reduce((sum, number) => {
    return sum + number;
  }, 0);
}
console.log(addNumbers(1, 2, 3, 4, 5, 6));

九、解构赋值

数组,对象
分解数据结构,对变量赋值

let points = [
  [4, 5],
  [5, 6],
  [3, 1],
];
//  期望
// [
//   { x: 4, y: 5 },
//   { x: 5, y: 6 },
//   { x: 3, y: 1 },
// ];

// let newPoints = points.map((pair) => {
//     let x = pair[0]
//     let y = pair[1]
//     // let [x, y] = pair
//     return {x, y}
// });
let newPoints = points.map(([x, y]) => {
  return { x, y };
});
console.log(newPoints);

十、箭头函数

不绑定this。箭头函数中的this指向定义位置的上下文的this

十一、内置对象扩展

11.1 Array

from将类数组或可遍历对象转换为真正的数组。...也可以
find查找第一个满足条件的值。findIndex第一个索引
includes是否包含给定的值。indexOf也可以

let arrayLike={
    0:'1',
    1:'2',
    length:3
}
let arr2 = Array.from(arrayLike,item=>item*2)

11.2 String

startsWith,repeat

11.2 Set(es6新增)

唯一值。可以用作数组去重

十二、generator生成器

可以返回多次的函数。function*

  1. 原理.迭代器方法
function nameIterator(names) {
    let nextIndex = 0
    return {
        next: function () {
            return nextIndex < names.length ?
                {value: names[nextIndex++], done: false} :
                {value:undefined,done: true}
        }
    }
}

const nameArray = ['A', 'B', 'C']
const names = nameIterator(nameArray)
console.log(names.next().value)
console.log(names.next())
console.log(names.next())
console.log(names.next())
  1. 使用
    yield后面是yield或末尾时,;可省略。其它情况下,不可省略
    2.1
function* sayNames() {
    yield 'A';
    yield 'B';
    yield 'C';
}

const name = sayNames();
console.log(name.next())
console.log(name.next())
console.log(name.next())
console.log(name.next())

2.1 id自增

//id自增
function* creatIds() {
    let index = 1
    while (true) {
        yield index++
    }
}

const gen1 = creatIds()
for (let i = 0; i < 10; i++) {
    console.log(gen1.next().value)
}

十三、map

key和value可以是任意类型

14. let,const

  • 不存在变量提升
  • 暂时性死区({}内为局部变量,var只在function内为局部变量)
  • 不允许重复声明
  • 块级作用域
1. 
var a=[]
for (let index = 0; index < 10; index++) {
    a[index]=function(){
       console.log(index);
       
    }
}
a[6]()   //6 . for循环为index为var时,值为10

//2. 变量提升
var tmp=new Date()
function f() {
    console.log(tmp);
    if(false){
        var tmp='hello world'
    }
}
f()  //undefined

15.标签模板

const name='zy'
const age=26
function add(...a) {
    console.log(a);  // [ [ '', '今年', '了' ], 'zy', 26 ]
    
}
// add(...arr)
add`${name}今年${age}了`

相关文章

网友评论

      本文标题:ES6

      本文链接:https://www.haomeiwen.com/subject/qupxactx.html