ES6语法

2020-01-08  本文已影响0人  逝去丶浅秋

一、变量的声明

变量声明:全局变量var、块级变量let、常量const。

二、变量的解构赋值

1、数组的解构赋值

下面看例子:

let [a,b,c] = [1,2,3];
console.log(a,b,c);
结果:1 2 3
let [a,b,c] = [,1,]
console.log(a,b,c);
结果:undefined 1 undefined
#给默认值
let [a=111,b,c] = [,2,];
console.log(a,b,c);
结果:111 2 undefined
2、对象的解构赋值

看例子:

#等号后面的foo和bar位置没要求,根据名字来决定
let {foo,bar} = {foo : 'aaa',bar : 'bbb'}
console.log(foo,bar)
结果:aaa bbb
#给变量重命名,后面都需要使用命名后的变量名
let {foo:rename,bar} = {foo : 'aaa',bar : 'bbb'}
console.log(rename,bar)
结果:aaa bbb
#对象的默认值
let {foo:rename="default",bar} = { bar : 'bbb'}
let {foo="default",bar} = { bar : 'bbb'}
console.log(rename,bar)
结果为: default bbb
#关于内置对象
let {cos,sin,random} = Math; //Math是内置函数
cos  sin  random就是Math里面的属性
3、字符串的解构赋值

看例子:

let [a,b,c,d,e] = "hello"
console.log(a,b,c,d,e)
结果:h e l l o
如果不对应,例如:
let [a,b] = "hello"
则结果是:h e

如果需要字符串长度,应该像下面的写法:

let {length} = "hello"
console.log(length)
结果为:5

三、模板字符串

let obj = {
  username:'aaa',
  password:'aaa'
}

let result = `
  <div>
      <span>${obj.username}</span>
      <span>${obj.password}</span>
  </div>
`;
就是下面这种:
let result = `${obj.username}`

四、函数扩展

1、参数默认值

看例子:

function foo(param='hello'){}
2、参数的解构赋值

看例子:

function foo({username,password}){}
    这种在函数调用的时候必须要传参数,否则会报错,可以通过下面的方式解决:
function foo({username,password}={}){}
    调用时可以直接foo(),不用传参,相当于上面的写法使用foo({})调用
function foo({username='aaa',password}){}
    这种是设置默认值
3、rest参数

也就是 ...param 这种写法:

function foo(a,...param){
  console.log(a,"---",param)
}
foo(1,2,3)
结果是:1 [2,3]
function foo(a,b,c){console.log(a,b,c)}
let arr = [1,2,3]
foo(...arr)
结果为:1 2 3

合并数组:

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3)
结果为:[1,2,3,4,5,6]

五、箭头函数

就是形如 let foo = () => {},下面看例子:

function foo(){}

上面的相当于:
  let foo = () => {}

一个参数,函数体一行时,可以如下面的写法:
  let foo = param = console.log(param);
  let foo = param = param;
  let result = foo(111);
  console.log(result);
  结果是:111
  也就是,当一个参数的时候可以将()省略,当方法体内一行可以省略{}

多个参数时,方法体内多行时:
  let foo = (a,b) => {
    console.log(a)
    console.log(b)
  }
  多个参数()不可以省略,方法体多行时{}不可省略
1、箭头函数中的this

箭头函数中的this指向取决于定义(可以理解为定义时所处的位置),而不是取决于是调用者。

2、箭头函数不可以new
let foo = () => {}
new foo()
使用new则会报错。
3、箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替
let foo = (a,b) => {
  console.log(a,b)  //可以获取到a,b的值
  console.log(arguments)  //获取不到arguments的值
}
foo(1,2)
这种打印arguments获取不到函数传入的参数值,即1,2

let foo = (...param) => {
  console.log(param)  //这种可以获取到函数传进来的参数
}
foo(1,2)
结果:[1,2]
这种才可以获取到函数传入的值,而上面的例子无法获取到

写在最后:

上一篇 下一篇

猜你喜欢

热点阅读