初识ES6(一)

初识ES6


let

let是一种类型的声明 有以下几个特性

  • let声明的变量不存在预解析
  • let声明的变量在一个作用域内不允许重复,但不同作用域之间没有影响

关于作用域问题

ES6声明了块级作用域 特点为

  • 块级作用域可以理解为被两个大括号括起来的语句块
  • 在块级作用域内定义的变量,外部是无法访问的 如for循环括号中let的变量只能在循环中使用
  • let存在暂时性死区,在let声明一个变量之前是不允许访问这个变量的(还是因为不存在预解析问题)

const

const也是一种类型声明,不过是声明常量的

  • const声明的常量不允许被重新赋值
  • const声明的常量必须初始化

解构赋值

传统的赋值方法是这样的

var a = 1,b = 2,c = 3

但ES6中提供了一种新的变量赋值方法

可以用数组来存储变量及其初始化的值,可进行解构赋值

数组的解构赋值

var [a,b,c] = [1,2,3]

对象的解构赋值

let {a,b} = {a:'hello',b:'world'}
//对象属性别名
let {a:c,b} = {a:'hello',b:'world'}
console.log(c,b)    //如果打印a会出错,因为a:c代表将a改名为c,此时a相当于未声明
  • 如果有了别名,原来的名字就无效了

字符串的解构赋值

let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e)
//一个变量一个字符,一一对应

let {length} = 'hello'
console.log(length) //可输出字符串长度,大括号 + length是固定格式

字符串扩展

ES6中新增了一些字符串的扩展

  • includes

    console.log("hello world".includes("hello"))
    //会返回一个布尔值,以判断主串中是否含有子串
    

    includes还可有第二个参数,决定从主串中第几个索引开始判断

  • startsWith

    判断字符串是否以对应的子串开始

    a = 'hello world%#d'
    console.log(a.startsWith('hello'))
    //返回一个布尔值
    
  • endsWith

    判断字符串是否以对应的子串结束

模板字符串

如果要在html中加入字符串,以前需要这样做

let obj = {
    username:'xiaoming',
    age:'18'
    gender:'male'
}
let  tag = '
' + obj.username + '' + obj.age + '' + obj.gender + '
'

但在ES6中,我们可以使用模板字符串

let tpl = `
    
${obj.username} ${obj.age} ${obj.gender}
`

函数扩展

参数默认值

一般来讲,如果我们需要一个函数存在默认值,我们可能会如下操作

function demo(param){
    let b = param || 'hello world'
    console.log(b)
}

在ES6中,我们可以这样做

function demo(param = 'hello world'){
    console.log(param)
}

参数解构赋值

在ES6中,我们给多个参数赋初值也是有方法的

function demo({uname = 'lisi',age:18} = {}){
    console.log(uname,age);
}

rest参数

function demo(a,...param){
    console.log(a,param);
}
//param是一个数组
demo(1,2,3)

...+一个变量,可以接收除前面的参数外剩余的参数

扩展运算符

它的功能与rest相反,它能将数组进行拆解

function demo(a,b,c,d){
    console.log(a + b + c + d)
}
let arr = [1,2,3,4]
demo(...arr)

合并数组:

扩展运算符可以合并数组

let arr1 = [1,4,5];
let arr2 = [2,6,8];
let arr3 = [...arr1,...arr2];

箭头函数

如果我们要声明一个函数,可能需要这样

function foo(){
    console.log(111);
}
foo();

但在ES6中,我们可以尝试箭头函数

let foo = () => console.log(111)
foo();

二者是等效的,那么可能有人会有疑问,这只是一条语句,如果有多条语句时该怎么办呢?

我们只需要加上一个花括号就可以完美解决了

let foo = (a,b) => {let c = a + b ;console.log(c) }
foo(1,2)

举例,打印数组的索引及其值

let arr = [121 , 232 , 343];
//正常情况
arr.forEach(function(element,index){
    console.log(element,index);
});
//应用箭头函数
arr.forEach((element,index) => {
    console.log(element,index);
});

注意事项:

  • 箭头函数的this的指向取决于函数的定义,而不是调用
  • 箭头函数不可以new
  • 箭头函数不可使用arguments获取参数列表,可以使用rest参数代替

你可能感兴趣的:(初识ES6(一))