ES6部分新增内容学习

最新推荐文章于 2022-09-01 20:03:19 发布

CCYS666

最新推荐文章于 2022-09-01 20:03:19 发布

阅读量292

点赞数 2

分类专栏：学习文章标签： ES6

本文链接：https://blog.csdn.net/qq_40212505/article/details/99506973

版权

学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、ES6是什么？

ES6就是JS的第六版，在ES5基础上新增了一些特性

二、let和const

作用：声明变量
let有作用域局限，且作用域不会被提升，相同作用域下不能申明相同变量，父子作用域使用时十分规范
const只是在当前代码块有效，且作用域不会被提升，不能被重复申明，申明的常量必须赋值

三、解构赋值

解构：ES6允许按照一定模式从数组及对象中提取值，对变量赋值
基本用法：let [name,age,sex] = [‘李四’,’18’,’男’];
对象解构赋值：（key值要一一对应，键值对不能解析）
let{name，age} = {name:”超超”,20};
console.log(name); //超超
数组的解构赋值(可以在数组中嵌套数组)
基本数据类型也可以解构

四、数据集合-set（和数组类似）

特点：无重复数据、开发中用于去除重复数据、key和value都是相等的
创建：let set = new Set( [“张三”，“李四”，“王五”] ) ; //会自动去掉重复数据
一个属性：获取长度---- set.size
四个方法：
add： set.add（“HHH”）.add（“WWW”）； //支持链式操作
delete: set.delete（“HHH”）；
has: set.has（“HHH”）；//true
clear: set.clear( ) ；//会清空集合，无返回值

五、数据集合-map（和对象类似）

特点：
本质是键值对的集合
“键”不局限于字符串,各种类型的值都可以当做键
是一种更加完善的Hash结构
创建map：
const map = new Map([
[“name”,”张三”],
[“age”,”20”],
[“sex,”女”],
[[1,2],”hhh”]
]);
常用属性：size（会自动去重）

常用方法：

 set：向map设置键值对，可以链式使用
 get：获取map的值
 delete：删除
 has：判断是否存在
 clear：清除数据集合的所有内容
 keys：拿到所有键
 values：拿到所有值
 entries:拿到所有键值对

遍历

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

set设置数据集合时，若键值对中的键为空，值为对象，无论设置多少空键，都会生成对应的键值对

六、Symbol（JS的第七种数据类型）

场景：ES5中对象的属性名都是字符串，容易混乱冲突，ES6中引入新的原始数据类型Synbol，表示独一无二的值
对象的属性名可以有两种数据类型（string和symbol）

描述：

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

应用：对象属性名

七、Class的基本运用

通过class面向对象

 class Person{
 constructor(name,age){
 this.name = name;
 this.age = age;
 }
     print(){
 console.log('我叫'+this.name+'今年'+this.age+'岁');
 }
 }
 let person = new Person('超超',20);
 console.log(person);
 person.print( );

八、内置对象扩展

模板字符串

 let str = '适合敲代码!';
 let className = 'test';
 let html = `<html>
            <head></head>
            <body>
                 <p>今天的天气很好!</p>
                 <div class="${className}">${str}</div>
            </body>
         </html>`;

数组的扩展（转数组）
Array.from

 let allLis = document.querySelectorAll('li');
   console.log(allLis);
   console.log(Array.isArray(allLis));

 console.log(Array.from(allLis));
 console.log(Array.isArray(Array.from(allLis)));

Array.of（零散值转成数组）

	console.log(Array.of(1, 2, 3, 4));
	console.log(Array.of('张三', '李四', '王五'));

对象的扩展

  let name = '张三';
 let age  = 18;
 let person = {
     name,
     age
 };

Object.assign( )多个对象合并成一个对象

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

延展操作符（…）

使用延展操作符去重：

  let myArr = [1, 2, 10, '张三', 20, 2, 1];
  console.log([...new Set(myArr)]);

九、函数的扩展

形参设置默认值
在ES6可以通过设置默认值来设置形参的默认参数

ES5：

	 function sum(num1, num2) {
    num1 = num1 || 10;
    num2 = num2 || 10;
    console.log(num1 + num2);
}

ES6：

	function sum(num1 = 20, num2 = 10) {
    console.log(num1 + num2);
    }

参数形式多样化（可以同时传递多种形式参数）延展操作符

  function sum(name, sex, ...nums) {
 let result = 0;
 console.log(name);
 console.log(sex);
 for(let value of nums){
     result += value;
 }
 return result;
 }
 console.log(sum('张胜男', '男', 10, 20, 30, 50));

箭头函数
格式： () => {函数体}
eg1：

 let sum = (num1, num2)=>{ return num1 + num2;};
 console.log(sum(100, 300)); // 400

eg2：

let nameArr = ['AA', 'BB', 'CC'];
nameArr.forEach((value, index)=>{
console.log(index + ':' + value);
});

解决问题：函数中调用this，经常会不精准

eg3：

	 function demo() {
    setTimeout(function () {
        console.log(this);
    }, 1000); //指向window

    setTimeout(()=>{
        console.log(this);
    }, 1000); //指向object对象
}

let obj = {};
demo.call(obj);