ES6语法总结

最新推荐文章于 2024-08-29 15:33:50 发布

码上有钱哦吼

最新推荐文章于 2024-08-29 15:33:50 发布

阅读量152

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_41244721/article/details/126243361

版权

ES6语法总结

一.什么是ES6？

ES 全称 ECMAScript，它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。

这家伙说白了就是给 JavaScript 制定的一种语法规范，你写 js 的时候如果按照 ES6 中的规范去写，写的代码不仅简洁而且效率很高。

ES6 发行于 2015 年 6 月，由于这个版本的语法规范极大地提高了前端开发人员的效率，所以在前端圈子中流行开来，时至今日热度依旧不减。

二.let 和 const

1、var声明的变量往往会越域；let声明的变量有严格局部作用域

{
  var a = 1;
  let b = 2;
}
console.log(a)  // 1
console.log(b)  // Uncaught ReferenceError: b is not defined

2.var 可以声明多次；let只能声明一次

var m = 1;
var m = 2;
let n = 1;
let n = 2;
console.log(m) //2
console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared

3.var会变量提升；let不存在变量提升

console.log(x);
var x = 10; // undefined
console.log(y);
let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

三.const声明变量相当于声明了一个常量(const常量)

const声明的常量具有以下特点:

1.声明之后不允许更改

const a = 1;
console.log(a) //1
a = 2;
console.log(a) // Uncaught TypeError: Assignment to constant variable.

2.使用是必须初始化

const a;
a = 1;
console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

四.结构表达式

1.数组结构

let arr = [1, 2, 3];
 let [a, b, c] = arr;
 console.log(a, b, c)

2.对象结构

const person = {
  name: "qiyue",
  age: 23,
  language: ['java', 'js', 'css']
}
const { name, age, language } = person 
console.log(name, age, language)

五.字符串扩展

let str = "hello.vue";
console.log(str.startsWith("hello")) //true
console.log(str.endsWith("vue")) //true
console.log(str.includes("e")) //true
console.log(str.includes("hello")) //true

六.字符串模板

let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

七.字符串插入变量和表达式。变量写在 {}中，{}中可以放入js表达式

let info = `我是${abc},今年${age}`
console.log(info)

   function fun() {
      return "这是一个函数";
    }
    let info = `我是${abc},今年${age + 10},我想说：${fun()}`
    console.log(info)

八.函数优化

1、函数默认值：直接给参数写上默认值，没传就会自动使用默认值

function add(a, b = 1) {
      return a + b;
    }
    console.log(add(10)) //11

2、不定参数：不定参数用了表示不确定的参数个数，形如…变量名，由…加上要给具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数

 function fun(...params) {
      console.log(params.length)
    }
    fun(1, 2) // 2
    fun(1, 2, 3, 4) //4

3、箭头函数

//以前
var sum = function (a, b) {
      c = a + b
      return c
    }
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6

4、箭头函数结合解构表达式

//以前
function hello(person) {
  console.log("hello" + person.name)
}
hello(person); 
//箭头函数
let hello2 = params => console.log("hello" + person.name)
hello2(person) 
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person)

九.对象优化

1、es6给Object扩展了许多新的方法，如

key(obj)：获取对象的所有key形成的数组
value(obj):获取对象的所有value形成的数组

entries(obj):获取对象所有的key和value形成的二维数组

  const person = {
      name: "quanquan",
      age: 23,
      language: ["java", "js", "css"]
    }
    console.log(Object.keys(person)) 
    console.log(Object.values(person)) 
    console.log(Object.entries(person))

2、Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；将源对象的属性赋值到目标对象中

onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}

3、声明对象简写

//以前
const name = 'sanyue'
const age = 21
//将属性值name，age分别赋给person1对象的name，age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21}

//es6:属性名和属性值变量名一样，可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}

4、对象的函数属性简写

 let person3 = {
      name: "qiyue",
      //以前
      eat: function (food) {
        console.log(this.name + "在吃" + food);
      },
      //箭头函数中this不能使用，用对象.属性
      eat2: food => console.log(person3.name + "在吃" + food),
      eat3(food) {
        console.log(this.name + "在吃" + food)
      }
    }
    person3.eat("苹果") 
    person3.eat2("香蕉")
    person3.eat3("西瓜")

5、对象的扩展运算符

扩展运算符（…)用于取出参数对象所有可遍历属性然后拷贝到当前对象

//拷贝对象（深拷贝）
let p1 = { name: "quanquan", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "quanquan", age: 23}

//合并对象
let age1 = { age: 24 }
let name1 = { name: "quanquan" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "quanquan"}
//如果p2中原本有name,age属性会被覆盖