ES6基础

最新推荐文章于 2024-06-11 18:58:36 发布

柠檬茶啊

最新推荐文章于 2024-06-11 18:58:36 发布

阅读量120

点赞数

文章标签： ES6

本文链接：https://blog.csdn.net/qq_42239459/article/details/95947421

版权

什么是ES6：JavaScript的第六版

一、let和const

let和const声明：变量和常量

let的使用：

1. 作用域只限于当前代码块

2. 使用let声明的变量作用域不会被提升

3. 在相同的作用域中下不能声明相同的变量

4. for循环体现let的父子作用域

const的使用:

1.只在当前代码块中使用

2.作用域不会被提升

3.不能被重复声明

4.声明的常量必须赋值，而且不能够修改，相当于java中的 final，但是如果const声明的是一个对象，则可以再次修改对象中的某一个属性。

所以在ES6中，将不在用var声明，声明变量使用let，声明常量使用const

二、ES6中的解构解析

1、基本用法

在ES6中声明多种变量可以写成：

let [name. sex, aage] = ['李四', '女', 20]

此种写法等于

let name = '李四'
let sex = '女'
let age = 20

2、对象的结构解析

let {name, age, sex} = {name: '张三', age: 55, sex: '男'}

此种写法等于

var obj = {name: '张三', age: 55, sex: '男'};

如果此对象存在一个数组或者另外一个对象：

let {name, age, friends, pet} = {name: '张三', age: 55, friends: ['lulu', 'wangwu'], per: {name: '土豆', age: 5}}

3、数组的结构解析

let [] = [1, [2, 3, [4, 5 ]]];

解析之后：

let [arr1, [arr2, arr3, [arr4, arr5 ]]]

4、基本类型的解构赋值

let [a, b, c, d, e] = '我是中国人';
console.log(a);   //我
console.log(b);   //是
console.log(c);   //中
console.log(d);   //过
console.log(e);   //人

三、数据集合-set

1、创建一个集合

 //创建一个集合
let set = new Set(); 
 //创建一个带有值集合
let set = new Set(["张三"， “李四”， “王五”]);

集合中不会存在重复的值

2、一个属性

set.size   //长度

3、四个方法

3.1、add 该方法返回原本的对象 set.add().add()....

set.add("刘德华");

3.2、delete 该方法返回一个boolean值

set.delete("刘德华");

3.3、has 该方法返回一个boolean值

set.has("张三")；

3.4、clear 清除集合中的所有元素，该方法没有返回值

set.clear();

四、数据集合-Map

1、介绍

1.1、类似于对象，本质上是键值对的集合

1.2、“键”不局限于字符串，各种类型的值都可以

2、一个属性 size()

map.size()

3、五个方法

3.1、set和get set返回map本身

map.set(key, value)
map.get(key)

3.2、delete 返回一个boolean值

map.delete(key)

3.3、has 返回一个boolean

map.has(key)

3.4、clear 无返回值

map.clear()

3.5、keys(), values(), entries() 获得所有键，获得所有值，获得所有键值

map.keys()  
map.values() 
map.entries()

4、遍历一个map

map.forEach(function(value, index){
    console.log(value + ":" + index)
})

5、注意事项

map.set("{}", "111")
map.set("{}", "222")

此种写法将会设置两个map,因为对象{}为复杂数据类型，他们的地址并不相同，所有并不是同一个对象

五、Symbol

场景：

ES5的对象属性名都是字符串，容易造成属性名冲突

ES6引入新的原始数据雷兄Symbol，表示独一无二的值

1、定义

let str1 = Symbol();
let str2 = Symbol();
console.log(str1 == str2)    //false

2、描述

let str3 = Symbol('name');
let str4 = Symbol('name');
console.log(str3  === str4 )    //false

3、对象的属性名

const obj = {};
obj.name = "张三";
obj.name = "李四";    //此种写法对象只会有一种name
obj[Symbol("name")] = "张三"
obj[Symbol("name")] = "李四"  //此种写法将会存在两种name

六、Class的基本运用

1、构造函数

function Persion(name, age){
    this.name = name;
    this,age = age;
}

Persion.prototype = {
    constructor: Persion,
    print(){
        console.log(this,name + ":" + this.age)
    }
}

let persion = new Persion(“张三”， 19)

2、通过class面向对象

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    print(){
        console.log(this,name + ":" + this.age)
    }

}

let person = new Person("张三", 19);
console.log(person);
console.log(person.print);

七、内置对象扩展

1、模板字符串

let html = '<html><head><body><p>今天天气很好</p><div>适合敲代码</div></body></head></html>'

此种写法没有格式，可以改成一下写法将引号改为· （Esc下方的按键）

let html = ·<html><head><body><p>今天天气很好</p><div>适合敲代码</div></body></head></html>·

2、数组的扩展

2.1、Array.form 讲一个伪数组转换为一个正式的数组

let allLis = '伪数组'
Array.form(allLis)   将会转为一个正式数组

2.2、Array.of 将一些零散的东西转化为数组

Ayyay.of(1, 2, 3)

3、对象的扩展

Object.assign() 将对象合并为一个对象

let obj1 = {name: '张三'}
let obj2 = {age: 15}
let obj3 = {sex: '男'}
let obj4 = {friends: '李四'}
Object.assign(obj, obj1, obj2, obj3, obj4, obj5)

4、延展操作符将一个对象或者字符串等分割成数组中的一个个元素

可以用来去重

let myArr = [1, 2, 3, 1, 5, 4, 3]
转化为一个set可以去重
console.log(new Set(myArr))   //结果为一个集合
console.log([...new Set(myArr)])  //结果为一个数组

八、函数的扩展

1、形参设置默认值

function(num1 = 10, num2 = 10){
	console.log(num1)
}

2、参数形式，结合延展操作符

function sum(...nums){
	let result = 0;
	for (let value of arguments) {
		result += value;
	}
	return result;
}

console.log(sum(10, 20, 30, 40))

九、箭头函数

let sum = (num1, num2) => {return num1 + num2}
console.log(sum(100, 500))


let nameArr = ["张三", "李四", "王五"];

nameArr.forEach(function(value, index){
	console.log(index + ":" + value)
})


也可以使用箭头函数如下写法：

nameArr.forEach((value, index) => {
	console.log(index + ":" + value)
})

柠檬茶啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6基础

什么是ES6：JavaScript的第六版一、let和constlet和const声明：变量和常量let的使用：1. 作用域只限于当前代码块2. 使用let声明的变量作用域不会被提升3. 在相同的作用域中下不能声明相同的变量4. for循环体现let的父子作用域const的使用:1.只在当前代码块中使用2.作用域不会被提升3.不能被重复声明4.声明的...
复制链接

扫一扫