字符串，函数，数组，对象

字符串

---

1.多行字符串

var str = `
hi
mynameis 
e1fang`

2.字符串模板

function sayHello(){
    var name = 'E1FANG'
    var str = 'hello'
    return ` ${str},my name is ${name}`
}

数组

---

1.拓展

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

var b =[...a,3]
b  // [1,2,3]
var c = [0]
c.concat(a)

就是相当于把这个数组的项拿出来

2.应用（函数参数的拓展）

function max(arr){
  return Math.max(...arr) //max方法传入的不能是数组，是一项一项的参数，所以将arr拓展出来就可以了
}
max([1,3,5])

function sort(...arr){
   console.log(arr.sort())
}
sort(1,3,2) // [1,2,3]

sort传入的是三个number，为什么输出的会是一个数组呢
从结果上看，sort本身就是一个数组的排序方法，那么函数内执行的arr.sort，就说明arr是一个数组。
所以的话，在...arr的时候，应该会先let arr =[]，然后...arr的时候，arr就被解开了，就会对应成参数1,3,2

3.类数组对象转数组

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

querySelector 返回的是一个类数组对象
Array.from可以将类数组的对象转换为数组并返回

[...ps].forEach(p =>{console.log(p.innerText)})
把ps拓展打散之后，再用[]括起来，就会变成一个数组。就可以使用forEach方法。

函数

---

1.默认值

function sayName(name = 'E1FANG'){
    console.log( `hi,my name is ${name}`)
}

以下两种写法的区别?

//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 }如果传了对象，就使用你传递的对象

基础：对象的解构赋值，默认值和对值
左边是默认值，右边是对值（传入的参数），如果传入的参数是undefined（空），那么就不是用对值，使用默认值

2.箭头函数

var f = v=>v+1;
等价于var f = funcition(v){return v+1}

看到的时候就直接转换 v=> 就是 function(v)
记得return
如果箭头函数内部不需要return的话 要用{}括住

---

当函数没有参数或有两个及以上的参数时，要加括号

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

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

//  等同于如下ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}
//setTimerout的this会指向window

对象

var name = "E1FANG"
var age = "21"
var people = {name, age} // 相当于 var people={name:"E1FANG", age:"21"}

相当于属性和变量 同名了

如果对象里面有函数的话 ， 函数名是可以做简写的

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

就相当于
init : function (){} 就简写了function