ES6基本语法_es6 的|-CSDN博客

本文链接：https://blog.csdn.net/Ride_The_Wind/article/details/124967559

一、声明变量

1.let:ES6中新增的用于声明变量的关键字

let声明的变量有严格局部作用域,所谓的块级作用域
let只能声明一次
let不存在变量提升

2.const声明变量相当于声明了一个常量

声明之后不允许改变
声明常量时必须赋值
具有块级作用域

二、解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

1. 数组解构

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

2.对象解构

const obje= {
     name: "zhangsan",
     age: 22,
     language: ['C+', 'JS', 'CSS']
   }
   const { name, age, language } = obje
   console.log(name, age, language) //zhangsan 22 ["C+", "JS", "CSS"]

三、剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组(剩余参数和解构配合使用)

let arr = ['lisi','wanger','xiaoming'];
let [s1,...s2] = arr;
console.log(s1);//'lisi'
console.log(s2);//['wanger','xiaoming']

四、扩展运算符

将数组或者对象转为用逗号分隔的参数序列

//对数组的操作
	let arr = [1,2,3];
	console.log(...arr)  //1,2,3
	//合并数组
	let arr1 = [1,2,3]
	let arr2 = [3,4,5]
	let arr3 = [...arr1,...arr2];
	console.log(arr3);//[1,2,3,3,4,5]
//在对象上的运用
    //拷贝对象（深拷贝）
    let p1 = { name: "shiba", age: 23 }
    let obj = { ...p1 }
    console.log(obj)//{name: "shiba", age: 23}

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

五、字符串扩展

 let str = "HelloWorld";
    console.log(str.startsWith("Hello")) //true
    console.log(str.endsWith("World")) //true
    console.log(str.includes("e")) //true
    console.log(str.includes("Hello"))//true

六、字符串模板

模板字面量使用反引号 (``) 而不是引号 (“”) 来定义字符串：

let text = `Hello World!`;

模板字面量允许多行字符串

let text =
`The quick
brown fox
jumps over
the lazy dog`;

模板字面量提供了一种将变量和表达式插入字符串的简单方法。该方法称为字符串插值

// ${...}
let firstName = "Bill";
let lastName = "Gates";

let text = `Welcome ${firstName}, ${lastName}!`;//Welcome Bill, Gates!

七、箭头函数

1.ES6中新增的定义函数的方式
2.在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，函数体大括号可以省略

//原先写法
function num(num1,num2){
return num1 + num2;
}
//箭头函数
const num = (a, b) => a + b;
console.log(num(2, 4)) // 6

八、Map和Set

ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set

const s = new Set();
const set = new Set([1,1,1,2,3,4,3,5]);
console.log(set ) //{1, 2, 3, 4, 5}

四个操作方法：

add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

Map

Map 实例的属性和方法如下:
1.size：获取成员的数量
2.set：设置成员 key 和 value
3.get：获取成员属性值
4.has：判断成员是否存在
5.delete：删除成员
6.clear：清空所有

 let arr = ["1", "3", "4", "23"]
  arr = arr.map(item => item * 2)
  console.log(arr) //[2, 6, 8, 46]

九、对象优化

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

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

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

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 = 'shiba'
    const age = 21
    //将属性值name，age分别赋给person1对象的name，age,后面是属性值
    const person1 = { name: name, age: age }
    console.log(person1) //{name: "shiba", age: 21}

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