es6小结

作者: Love小六六 | 来源:发表于2017-10-17 17:04 被阅读0次
  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}
  • 剩余操作符
    用于获取函数的多余参数,这样就不需要使用 arguments 对象了
//写一个填充数组内容的函数 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. 对象拓展
  • Object.assign(target,...source)
    用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
//相同属性会被合并
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}
  • Object.is()
    Object.is方法用来判断两个值是否相等,和 === 类似,比较时不会进行类型转换。
不同点是
+0 === -0 //true
Object.is(+0, -0) // false
NaN === NaN // false
Object.is(NaN, NaN) // true

相关文章

  • ES6小结

    原文链接 es6中有很多特性,使javascript语法更加丰满,总结一波常用的es6知识点。 1.变量声明con...

  • es6小结

    模板字符串字符串拼接不需要+,而是用``,变量用${变量名}表示 Tips:模板字符串里的变量的值取模板字符串定义...

  • ES6小结

    ES6 javascript 最新版 下面列出常用的一些 声明变量 声明常量 声明对象 箭头函数 小例子 解构 数...

  • es6 对象小结

    es6 对象 super关键字 super这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的...

  • ES6用法小结

    1.let和const 都具有块级作用域 const定义的值不可变 2.变量的解构赋值 按一定的模式从数组和对象、...

  • ES6 promise 用法小结

    ES6 promise 用法小结 Js 是一⻔单线程语言,早期解决异步问题,大部分是通过回调函数进行。 比如我们发...

  • [JavaScript] ES6语法小结

    1. var versus let/const 2. Replacing IIFEs with Blocks 3....

  • React-Native之Props(属性)

    效果如下: 小结如下: 1.定义组件的属性类型和默认属性(ES5 和ES6中的区别) 在ES5里,属性类型和默认属...

  • React-Native之State(状态)

    小结如下初始化STATE ES5下情况类似, ES6下,有两种写法: 推荐:另一种在构造函数中初始化(见demo)

  • JS 作用域,闭包,箭头函数,普通函数中this指向问题

    文章序 本文就标题的问题,小结一下本人的观点与想法,如有错误欢迎指正交流. 作用域 在ES6之前只有两个作用域,全...

网友评论

      本文标题:es6小结

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