es6相关语法

最新推荐文章于 2024-07-19 09:22:07 发布

sceaq

最新推荐文章于 2024-07-19 09:22:07 发布

阅读量109

点赞数 2

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/u013309238/article/details/126144244

版权

这里写自定义目录标题

es6笔记

什么是es6

es6是ecma指定的一种标准 ecma-262标准

1.为什么学es6？

es6内容变动多，有很大意义

2.es6相关的兼容性

ES6的正式内容

1.let声明变量

区别：
- 不能重复声明同一个变量
- let声明的变量只在块级作用域内有效
- 不存在变量提升，不允许变量声明之前来使用变量
- 不影响作用域链
变量提升是指var在变量声明前就可以被调用，相当于是变量被提前收集了。例如：
```
    console.log(num)
    let num = 15//这样会报错
    console.log(num)
    var num = 15//控制台打印undefine
    //什么年代还在用传统变量
```
不影响作用域链是指如果在本层块儿中找不到变量会向外寻找变量，直到找到变量。

关于的let的一个小例子
```
let items = document.getElementsByClassName('item')
for(var i=0;i<items.length;i++){
  items[i].onclick=function(){
    //可以正常生效
    //this.style.background ='pink'
    //出现问题
    //items[i].style.background='pink'
  }
}
//使用let则成功生效
for(let i=0;i<items.length;i++){
  items[i].onclick=function(){
    items[i].style.background='pink'
  }
}
```
为什么会出现问题？？

因为var是全局变量，最后改变的是items[i],而到最后循环完成后i的数值会变成3,全局生效，所以出现问题，而如果使用let就不会有这样的问题，因为这个i是局部的，只在代码块中的i

*所以平常情况下推荐使用let声明

const常量

字面意思就是不能改变的量

const的特点：
- 一定要赋初始值
- 常量的值不能修改
- 只作用在块级作用域
- 可以对常量数组或对象内元素/属性做修改

解构赋值

用某种方式从数组或对象中提取值，对变量进行赋值，称之为解构赋值

对数组解构：

//tra-cigare和e-cigare分别是对数组中华子和锐克五解构
const CIGARETTE= ['华子','锐克五']
let [tra_cigare,e_cigare] = CIGARETTE
console.log(tra_cigare)//华子
console.log(e_cigare)//锐克五
tra_cigare = '王源吸的'
e_cigare = '丁真力推'
console.log(tra_cigare)//王源吸的
console.log(e_cigare) //丁真力推

对象的解构

//解构对象
    const DJ ={
      name:'丁真珍珠',
      song:'zood',
      pony:'珍珠',
      hobby:'测你们码'
    }
    let {name,song,pony,hobby} = DJ
    console.log(name,song,pony,hobby)//丁真珍珠 zood 珍珠 测你们码

优势就是更简便的调用或对对象数组内部元素操作。

字符串操作

多了两种操作：首先是判断字符串开头和结尾的两个字符返回bool，其次是字符串模板:``

判断字符串开头结尾的字符

判断开头的字符是否为a：str.startsWith(‘a’)
判断结尾的字符是否为e：str.endsWith(‘e’)

let str = 'djjz'
    alert(str.startsWith('d'))//true
    alert(str.startsWith('a'))//false
    alert(str.endsWith('z'))//false

字符串模板

使用``反引号在反引号中使用别的内容：${}，支持换行符

      let pony='珍珠'
    let lyric =`我的小马名字叫${pony}
假烟发现就跑路`
    alert(lyric)
    //我的小马名字叫珍珠
      假烟发现就跑路

对象的简化写法：

 let name = '珍珠',
 let ride = function(){
    return '我骑我的' +this.name 
 }
 const school={
  //当对象中名字和引用的名字相同，可以只写一个
  name,
  ride,
  //es6对方法的简写，并且可以直接在对象中写方法
  study(){
    console.log('每天看四小时书')
  }
 }

箭头函数：

简化写法：

将函数简化为()=>{},若传入参数只有一条：()可以省略，若函数体内只有一行：{}也可以省略，并且=>后语句的结果就是函数的返回值

特性:
- this是静态的，this始终指向函数声明时所在作用域下的this
就是始终指向在声明时所在作用域(父作用域),通过call方法无法改变其this指向
- 不能作为构造函数实例化对象
- 不能使用arguments对象
  
  什么是argument对象？
  argument对象是函数中内置的一个数组，里面存放着所有得函数中传入的参数
  
  正常函数中this是动态的，而箭头函数this是静态的，可以根据这个特性分情况使用
  this取值问题

函数默认值可以在声明时给函数传入默认值

可以与解构配合使用

rest参数

与argument很像，也是可以拿到传入的参数，区别时写法和输出结果

argument是作为对象，而rest则是数组。
rest写法：…args
```
function data(...args){
  console.log(args);
}
```
argument则可以直接在函数中调用
优点，可以使用数组相关方法，使用时更有优势

其他问题：

不能写在正常参数前面，只能写在最后

function data(...args,a,b)//报错

写在最后：

function data(a,b,...args)//a = 1,b = 2,args = [3,4,5,6,7,8,9]
data(1,2,3,4,5,6,7,8,9)

拓展运算符…

功能是将数组转化为逗号分隔的参数序列
和rest参数类似，拓展运算符写在函数调用时，加在数组前，使传入的参数从数组变成分别传入数组中内容

const list = ['dj','谷圣','科比','四字']
function chineseSoul(){
  console.log(argument)
}

chineseSoul(list)//传入数组
chineseSoul(...list)//相当于chineseSoul('dj','谷圣','科比','四字')

使用拓展运算符:
1. 合并数组
把两个数组分别…拓展解开再写入同一个数组
```
const hebinArray =[...arrayOne,...arrayTwo]
```
1. 数组的克隆
```
const cloneArray = [...fatherArray]
```
1. 可以将伪数组变成真数组
比如argument