es6小结

2017-10-17  本文已影响0人  Love小六六
  1. 模板字符串
    字符串拼接不需要+,而是用``,变量用${变量名}表示
function makeListHTML(arr) {
    return `<ul>${arr.map(function(item){
            return `<li><a href="${item.href}">${item.text}</a></li>`
        }).join('')}</ul>`
}

Tips:模板字符串里的变量的值取模板字符串定义时,变量的值,以后变量的值改变,模板字符串的值并不会变

  1. let 和 var
    let为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。
var name = 'zach'
while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  //obama
var name = 'zach'
while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  /zach
  1. 函数默认参数
function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
const p = new Point();
  1. 解构赋值
    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
let dog = {type: 'animal', hobbies:['eat','walk','sleep']}
let {type:a,hobbies:[,b,c]} = dog
console.log(a, b,c)   //animal walk sleep

解构可以和默认参数一起使用

function average({x=0,y=1}={}) {
    return `${x}和${y}平均值为${(x+y)/2}`;
}
average();//0和1平均值为0.5;
average({x:3,y:4})//3和4平均值为3.5
// 参数为对象
  1. 箭头函数
var f = function(v) {
  return v;
}
var f = v=>v;
var result = values.sort((a, b) => a - b);
() => ... // 函数值内容只要一行,可省略 {}
() => { ... } // 零个参数用 () 表示;
x => { ... } // 一个参数可以省略 ();
(x, y) => { ... } // 多参数不能省略 ()
  1. 扩散操作符和剩余操作符(...)
var arr = [1, 2, 3]
// 复制数组
var arr2 = ...arr 
// 数组合并
var arr3 = [0, ...arr, 4] // [0, 1, 2, 3, 4]
// 对象合并
var obj = {a:1,c:4}
var obj2 = {b:2, ...obj} // {b:2,a:1,c:4}
//写一个填充数组内容的函数 fillArray。第一个参数是要填充的数组,其余参数是填充的内容
var fillArray=(arr, ...values)=>arr.push(...values);
var arr = [1,2,3]
fillArray(arr, 3, 4, 5)
arr // [1,2,3,3, 4, 5]

Tips:剩余操作符之后不能再有其他参数(即只能是最后一个参数)

  1. 对象拓展
//相同属性会被合并
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, f: 2 ,d:4};
var o3 = { c: 3 };
var o4 = {a:4,g:5};
var obj = Object.assign({}, o1, o2, o3);
//obj={a: 1, b: 2, c: 3, f: 2, d: 4}
Object.assign(o4, o1);
//o4={a: 1, g: 5, b: 1, c: 1}
不同点是
+0 === -0 //true
Object.is(+0, -0) // false
NaN === NaN // false
Object.is(NaN, NaN) // true
上一篇 下一篇

猜你喜欢

热点阅读