之前没有学习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
