es6 字符串-函数-数组-对象

之前没有学习es6，跟随老师的课程写vue项目，有些许不理解。现在学习了es6想起之前vue的写法恍然大悟 。
先看一下字符串。
1.多行字符串

let str =`
Hi,
This is jirengu.com.
You can study frontend here.
`

2.字符串的拼接${}

let website = 'jirengu'
let name = 'wuxuwei'
let  str = `Hi
This is ${website}.
${name} can study frontend here!
`

image.png
image.png

数组

1 ...数组去壳

var a = [1, 2]
console.log(...a)  // 1, 2
var b = [...a, 3]
b // [1, 2, 3]

var c = b.concat([4, 5])  //之前的方法
var d = [...b, 4, 5]   //es6

2 数组参数的扩展

function sort(...arr){
  console.log(arr.sort())
}
sort(3, 1, 5)  //[1, 3, 5]
function max(arr){
  return Math.max(...arr)
}
max([3, 4, 1])  // 4

3 类数组对象转数组

let ps = document.querySelectorAll('p');
Array.from(ps).forEach(p=> {
  console.log(p.innerText);
});
[...ps].forEach(p=>{console.log(p.innerText)});

函数

1 默认值

function sayHi(name='jirengu') {
  console.log(`hi, ${name}`)
}
sayHi() //jirengu
sayHi('ruoyu')  //ruoyu

在sayHi的参数中传入了name='jirengu',意思是如果调用这个函数没有传参数，默认就是jirengu，传了参数就用传的参数。

function fetch(url, { body='', method = 'GET', headers = {} } = {}) {
  console.log(method);
}
fetch('http://example.com')

同上
2 两种写法的区别

//ex1
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

//ex2 
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

ex1： 调用函数需要你传递一个对象，如果你没传对象就用默认值对象{}，默认值对象里面都是 undefined， 所以属性使用初始值

ex2：参数需要是一个对象，如果没传对象，就用默认值对象{ x: 0, y: 0 }如果传了对象，就使用你传递的对象

3 箭头函数

var f = v => v+1
//等价于
var f = function(v){return v+1}

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

var arr = [1, 2, 3]
var arr2 = arr.map(v=>v*v)
arr2 //[1, 4, 9]

箭头函数里面的 this

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

var obj = {
    birth: 1997,
    getAge: function () {
        var b = this.birth; // 1997
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
obj.getAge() // NaN

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

var obj = {
    birth: 1997,
    getAge: function () {
        var b = this.birth; // 1997
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 22

对象

var name = 'jirengu'
var age = 3
var people = {name, age} //{name:'jirengu', age:3}

let app = {
selector: '#app',
init() {
},
bind() {
}
}
app.init()

箭头函数和字符串拼接的一个例子，在写页面的时候经常用到：

image.png