ES6学习笔记:第一天,自学ES6开始!

博客 未分类 , ,

环境搭建

ES6由于浏览器支持度不高,所以需要把写好的ES6编译成ES5之后才能使用,需要用到常用的打包工具:webpack、Babel等等。
用Babel打包还需要安装一个:npm install --save-dev babel-preset-es2015 babel-cli
然后还需要在根目录下建立一个'.babelrc'文件,需要在里面写入:

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

然后就可以编译ES6 -> ES5 了。编译命令:babel es6/index.js -o es5/index.js

新的声明变量方式

let 局部变量

let是ES6中的一个新的声明变量方式。相比ES5中的var,let的作用域是局部的,而var则是全局的。

无论你在哪个作用域中声明了var,那你在其他地方都可以调用,所以经常出现变量莫名其妙的值,污染了开发环境。

而let不一样的是它的作用域是局部的,比如在函数内声明了let a,在函数外调用a是会报错的,除非你重新声明一个。

在比如在for循环中常用的for(var i = 0;i<=10;i++),如果我们用的是var,那么在体外调用i,他会是 a=10。如果我们用的let i,那么在体外调用i会把报错。

const 常量

const是es6中的常量,与其他编程一样,常量禁止修改,禁止二次赋值,否则报错。

运用场景:设置一些不变的量、引入一些不变的外部包等等。

变量解构赋值

以前如果我们需要声明多个变量会这样:var a=1;var b=2;var c=3;这样很麻烦。所以es6中新增了解构赋值。

数组解构赋值

如上面的var a=1;var b=2;var c=3我们可以写成:let [a,b,c] = [1,2,3]这样就可以把等号后面的数组中的值一一对应的赋值给等号左边的变量。

这里需要注意的是:等号两边的解构必须一样

当然,解构赋值还可以设置默认值,如:let [a,b,c='shanran'] = [1,2] 这时左边有三个变量,但是右边只有两个值,因为C设置了默认值,所以不会报错,而且c=shanran;

对象解构赋值

除了用数组解构赋值之外,还有对象解构赋值:let {name,age,height} = {age:20,name:'shanran',height:175},可以看到的是这里对象名属性与赋值可以不用一一对应,因为在给它赋值的时候是写了属性名的。

字符串解构赋值

很简单明了:let [a,b,c] = 'sha'这里就会将字符串sha中的三个字符分别赋值给abc,输出的话:a='s';b='h';c='a'

圆括号的作用()

如果我们有一个已经声明了的变量a,然后我们需要对它进行解构赋值,我们就需要用圆括号

let a=8

[a]=['shanran']     //会报错,提示a已经被声明了

([a]=['shanran'])   //成功

({a}={a:'shanran'}) //成功

扩展运算符与rest运算符

在ES6中,如果声明一个方法,但是不知道这个方法的参数到底有多少个,就可以用扩展运算符。

扩展运算符(...)

扩展运算符的符号是三个点...

function shanran(...arr){
    console.log(arr[0])
    console.log(arr[1])
    console.log(arr[2])
    console.log(arr[3])
}

简单的作用一:复制一个数组(非内存指向),如果我们有一个数组arr1=[0,1,2] 如果我们要复制它 arr2=arr1 这样其实只是把arr1的内存地址指向了arr2,并没有复制这个数组,如果我们修改arr2arr1也会被修改。
但是如果我们用:arr2=[...arr1]那么这个就是完全复制一个数组,开辟了一块新的内存,我们在修改arr2将不会影响arr1

rest运算符

rest运算符其实和扩展运算符一样,都是...,我们没必要去区分它,为什么呢。因为我也不知道。。。。

ES6中对字符串操作的新知识点

模板字符串

在ES5中,我们声明字符串用的是单引号或者双引号,如果我们需要拼接字符串则需要用字符串拼接符号+号连接字符串,这种方式非常麻烦,因为如果一旦字符串太长,我们拼接起来非常容易出错,而且这种还不支持字符串中变量运算。

而在ES6中,给了一种叫模板字符串的东西,它不再是用单双引号来包过字符串,而是用`号来包裹,如:

let b = '山然'
let a = `这是一长短字符串<br>
    它是${b}写的,
    而且这个还支持计算,1+2=${1+2}
    而且还能换行哟
`

查找字符串

在ES5中我们要判断一个字符串中是否存在一个特定的字符串,我们需要用indexOf()来判断,indexOf返回的是特定字符串在字符串中出现的位置,如果>0则存在,否则不存在。

而ES6中给出了一种新的查找字符串的方法:includes(),它返回的是bool值,我们就不用再次去判断了。

let a = '山然';
let b = '你说山然在不在??'

console.log(b.includes(a)) // true

在开头查找字符串

有了查找字符串就有了在开头查找字符串
startsWith()

在结尾查找字符串

有了开头就有结尾
endsWith()

复制字符串

复制字符串 repeat()

评论 (1)

测试一下评论

智能推荐