ES6新特性学习笔记

转x33g5p2x  于2022-07-13 转载在 其他  
字(21.7k)|赞(0)|评价(0)|浏览(902)

ES6新特性

1.let关键字

  • 不允许重复声明
  1. <script>
  2. 	let a = 10;
  3. 	let a = 20; //let不允许重复声明，Identifier 'a' has already been declared
  5. 	var b = 1;
  6. 	var b = 2; //var可以重复声明
  7. </script>
  • 块儿级作用域
  1. <script>
  2. 	{
  3. 		//let name = '张三';
  4. 		var name = '张三';
  5. 	}
  6. 	console.log(name); //读取不到let声明的变量 能读取到var声明的变量
  7. </script>
  • 不存在变量提升
  1. <script>
  2. 	console.log(age);
  3. 	let age = 20; //报错：Cannot access 'age' before initialization
  4. 	var age = 20;
  5. </script>
  • 不影响作用域链
  1. <script>
  2. 	{
  3. 		let sex = '男';
  4. 		function fn(){
  5. 			console.log(sex);
  6. 		}
  7. 		fn(); //可以正常输出
  8. 	}
  9. </script>

2.const关键字

const关键字总结：

  • 声明必须赋初始值
  • 标识符一般为大写
  • 不允许重复声明
  • 值不允许修改
  • 块儿级作用域

3.变量的结构赋值

  1. <script>
  2.     //1.数组的结构
  3.     const people = ['张三','李四','王五','赵六'];
  4.     let [zs,ls,ww,zl] = people;
  5.     console.log('zs = '+ zs); //zs = 张三
  6.     console.log('ls = '+ ls); //ls = 李四
  7.     console.log('ww = '+ ww); //ww = 王五
  8.     console.log('zl = '+ zl); //zl = 赵六
  10.     //2.对象的结构
  11.     const stu = {
  12.         name: '狗蛋',
  13.         age: 18,
  14.         xuexi: function(){ console.log('学习') }
  15.     }
  16.     //{}的变量和对象属性名保持相同
  17.     let {name,age,xuexi} = stu;
  18.     console.log(name); //狗蛋
  19.     console.log(age); //18
  20.     xuexi(); //学习
  22. 	//3.复杂解构
  23. 	let wangfei = {
  24. 		name: '王菲',
  25. 		age: 18,
  26. 		songs: ['红豆', '流年', '暧昧', '传奇'],
  27. 		history: [
  28. 			{name: '窦唯'},
  29. 			{name: '李亚鹏'},
  30. 			{name: '谢霆锋'}
  31. 		]
  32. 	};
  33. 	let {songs: [one, two, three], history: [first, second, third]} = wangfei;
  34. </script>

4.模板字符串

  1. <script>
  2. 	//1.声明模板字符串 使用``
  3. 	let str = `我是字符串`;
  4. 	console.log(typeof(str)); //string
  6. 	//2.内容中可以出现换行符
  7. 	let str1 = `<ul>
  8. 					<li>苹果</li>
  9. 					<li>香蕉</li>
  10. 					<li>草莓</li>
  11. 				</ul>`;
  12. 	console.log(str1);
  14. 	//3.变量拼接 使用${}
  15. 	let lang = 'javascript';
  16. 	let out = `${lang}是世界上最好的语言`;
  17. 	console.log(out); //javascript是世界上最好的语言       
  18. </script>

模板字符串总结：

  • 内容中可以出现换行符
  • 变量拼接使用${}

5.对象简化写法

  1. <script>
  2. 	//对象的简化写法
  3.     let name = '张三'
  4.     let age = 20
  5.     let xuexi = function(){console.log('我爱学习')}
  7.     //ES6允许大括号内直接写入变量和函数作为对象的属性和方法
  8.     
  9.     let stu = {                         //let stu = {
  10.         name,                           //     name: name,
  11.         age,                            //     age: age,
  12.         xuexi,                          //     xuexi: xuexi
  13.         eat: function(){                //     eat(){
  14.             console.log('吃饭')          //          console.log('吃饭')
  15.         }                               //      }
  16.     }                                   //}
  17.     console.log(stu)
  18. </script>

6.箭头函数

  1. <script>
  2. 	//1.声明箭头函数
  3. 	let fn = ()=>{
  4. 		//函数体
  5. 	}
  6.     
  7. 	//2.箭头函数中的this始终指向声明时所在作用域的this的值
  8. 	let getName = ()=>{
  9. 		console.log(this); //此时this指向Windows对象
  10. 	}
  11.     
  12.     //3.箭头函数不能作为构造函数实例化对象
  13.     let Person = (name,age)=>{
  14. 		this.name = name;
  15. 		this.age = age;
  16. 	}
  17.     let person = new Person('zs',20); //报错，Person is not a constructor
  19.     //4.箭头函数中不能使用arguments变量
  20. 	let fn1 = ()=>{
  21. 		console.log(arguments);
  22.     }
  23.     fn1(1,2,3); //报错,arguments is not defined at fn1
  25.     //5.箭头函数的简写
  26.     //5.1.当参数有且只有一个时可以省略小括号
  27. 	let fn2 = a=> a*a;
  28.     console.log(fn2(3)); //9
  30.     //5.2.当方法体中只有一条语句时可以省略花括号，此时return必须省略
  31. 	let fn3 = (a,b)=> a+b;
  32. 	console.log(fn3(1,2)); //3
  33. </script>

箭头函数总结：

  • 箭头函数中的this始终指向声明时所在作用域的this的值
  • 箭头函数不能作为构造函数实例化对象
  • 箭头函数中不能使用arguments变量
  • 当参数有且只有一个时可以省略小括号
  • 当方法体中只有一条语句时可以省略花括号

7.函数参数的默认值

  1. <script>
  2.     //函数参数的默认值
  3.     //具有默认值的参数一般放在最右边
  4.     function add(a,b,c=10){
  5.         return a+b+c;
  6.     }
  7.     let result = add(1,2);
  8.     console.log(result); //13
  10.     //可以与解构赋值结合
  11.     function connect({host='127.0.0.1',username,password}){
  12.         console.log(host)
  13.         console.log(username)
  14.         console.log(password)
  15.     }
  16.     connect({
  17.         //host: 'localhost',
  18.         username: 'zhansgshang',
  19.         password: '123'
  20.     });
  21. </script>

8.rest参数

  1. <script>
  2. 	//ES5获取实参
  3.     function date(){
  4.         console.log(arguments) //arguments是对象
  5.     }
  6.     date('闪电鸟','火焰鸟','急冻鸟')
  8.     //ES6获取实参 （rest参数）
  9.     //rest参数必须要放在参数的最后
  10.     function date1(...args){
  11.         console.log(args) //agrs是数组
  12.     }
  13.     date1('雷公','水君','炎帝')
  14. </script>

rest参数总结：

  • rest参数的语法：…args
  • rest参数必须要放在参数的最后

9.扩展运算符

  1. <script>
  2. 	const animal = ['固拉多','盖欧卡','裂空座']
  4.     function fn(){
  5.         console.log(arguments)
  6.     }
  7. 	//扩展运算符 ...
  8.     fn(...animal)//等同于fn('固拉多','盖欧卡','裂空座') 
  10. 	//1.数组合并
  11.     const a = ['小火龙','杰尼龟','妙蛙种子']
  12.     const b = ['喷火龙','水箭龟','妙蛙花']
  13.     const ab = a.concat(b)  //方式一
  14.     const ab1 = [...a,...b] //方式二
  15.     
  16.     //2.数组克隆
  17.     const hzw = ['路飞','娜美','布鲁克','索隆']
  18.     const copy = [...hzw]
  20.     //3.将伪数组转为真数组
  21.     const divs = document.querySelectorAll('div')
  22.     const divArr = [...divs]
  23. </script>

10.Symbol数据类型

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。

  • Symbol 的值是唯一的，用来解决命名冲突的问题
  • Symbol 值不能与其他数据进行运算
  • Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用 Reflect.ownKeys 来获取对象的所有键名
  1. <script>
  2. 		//创建Symbol
  3.         let symbol = Symbol();
  4.         let symbol1 = Symbol('张三')
  5.         let symbol2 = Symbol('张三')
  6.         console.log(symbol1 === symbol2) //false
  7.         let symbol3 = Symbol.for('李四')
  8.         let symbol4 = Symbol.for('李四')
  9.         console.log(symbol3 === symbol4) //true
  10. 	</script>

对象添加Symbol类型的属性

  1. <script>
  2.         let game = {
  3.             name: "王者荣耀",
  4.             open: function(){
  5.                 console.log("打开王者荣耀");
  6.             },
  7.             close: function(){
  8.                 console.log("关闭王者荣耀");
  9.             }
  10.         }
  12.         //如果game对象的有open函数就会被这个函数覆盖
  13.         game.close = function(){
  14.             console.log("我是新添加的close函数");
  15.         }
  16. 		game.close(); //我是新添加的close函数
  17.         
  18.         let open = Symbol()
  19.         //对象添加Symbol类型的属性(第一种方式)
  20.         game[open] = function(){
  21.             console.log("我是新添加的open函数");
  22.         }
  24.         game.open(); //打开王者荣耀
  25.         game[open](); //我是新添加的open函数
  27.         let escape = Symbol['escape']
  28.         //对象添加Symbol类型的属性(第二种方式)
  29.         let youxi = {
  30.             name: "三国杀",
  31.             [Symbol('kill')]: function(){ //这种方式定义的方法无法调用
  32.                 console.log("杀");
  33.             },
  34.             [escape]: function(){   //这种方式可以调用，用youxi[escape]()
  35.                 console.log("闪");
  36.             }
  37.         }
  38.         youxi[escape](); //闪
  39. 	</script>

11.迭代器

  • ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费

  • 原生具备 iterator 接口的数据(可用 for of 遍历)

  • Array

  • Arguments

  • Set

  • Map

  • String

  • TypedArray

  • NodeList

  • 工作原理

  • 创建一个指针对象，指向当前数据结构的起始位置

  • 第一次调用对象的next 方法，指针自动指向数据结构的第一个成员

  • 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

  • 每调用 next 方法返回一个包含 value 和 done属性的对象

注: 需要自定义遍历数据的时候，要想到迭代器。

  1. <script>
  2. 	const people = {
  3.         name: '张三',
  4.         hobby: [
  5.             '唱歌',
  6.             '跳舞',
  7.             'rap',
  8.             '篮球'
  9.         ],
  10.         //自定义遍历数据
  11.         [Symbol.iterator](){
  12.             let index = 0;
  13.             let _this = this;
  14.             return {
  15.                 next(){
  16.                     if(index<_this.hobby.length){
  17.                         const result = {value:_this.hobby[index],done:false};
  18.                         index++;
  19.                         return result;
  20.                     }else{
  21.                         return{value:undefined,done:true};
  22.                     }
  23.                 }
  24.             }
  25.         }
  26.     }
  28.     //要想使用for of遍历必须要添加iterator属性
  29.     for (const e of people) {
  30.         console.log(e);
  31.     }
  32. </script>

12.生成器函数

生成器函数是 ES6 提供的一种异步编程解决方案

  1. <script>
  2. 	//语法
  3. 	function* 生成器函数名(){}
  4.     
  5. 	//yield相当于是函数代码的分隔符
  6. 	function* fn() {
  7. 		console.log(111);
  8. 		yield '一只没有耳朵';
  9. 		console.log(222);
  10. 		console.log(333);
  11. 		yield '一只没有尾巴';
  12. 		console.log(444);
  13. 		return '真奇怪';
  14. 	}
  15. 	let iterator = fn();
  16. 	iterator.next() //调用console.log(111)
  17. 	iterator.next() //调用console.log(222) 和 console.log(333)
  18. 	iterator.next() //调用console.log(444)
  19. 	console.log(iterator.next())//
  20. </script>
  • 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值
  • yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码
  • next 方法可以传递实参，作为 yield 语句的返回值
  1. <script>
  2.     //生成器函数的参数传递
  3.     function* gen(args){
  4.         console.log(args);  //AAA
  5.         let one = yield 111;
  6.         console.log(one);   //BBB
  7.         let two = yield 222;
  8.         console.log(two);   //CCC
  9.         let three = yield 333;
  10.         console.log(three); //DDD
  11.     }
  13.     let iterator = gen('AAA');
  14.     iterator.next()
  16.     //next函数可以传入实参，第n次调用next(),传入的实参将作为第n-1个yield的返回结果
  17.     iterator.next('BBB')
  18.     iterator.next('CCC')
  19.     iterator.next('DDD')
  20. </script>
  1. <script>
  2. 	//生成器函数的使用
  3.     //1s后控制台输出111，再过2s后控制台输出222...
  4.     
  5.     //使用定时器实现
  6.     setTimeout(()=>{
  7.         console.log(111);
  8.         setTimeout(()=>{
  9.             console.log(222);
  10.             setTimeout(()=>{
  11.                 console.log(333);
  12.                 //回调地狱，代码可读性太低
  13.             },3000);
  14.         },2000);
  15.     },1000);
  17.     //使用生成器函数实现
  18.     function one(){setTimeout(()=>{
  19.         console.log(111);
  20.         iterator.next();
  21.     },1000)}
  22.     function two(){setTimeout(()=>{
  23.         console.log(222);
  24.         iterator.next();
  25.     },2000)}
  26.     function three(){setTimeout(()=>{
  27.         console.log(333);
  28.         iterator.next();
  29.     },3000)}
  30.     
  31.     function* gen(){
  32.         yield one();
  33.         yield two();
  34.         yield three();
  35.     }
  36.     //调用生成器函数
  37.     let iterator = gen();
  38.     iterator.next();
  39. </script>

13.Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

  • Promise 构造函数: Promise (excutor) {}
  • Promise.prototype.then 方法
  • Promise.prototype.catch 方法
  1. <script>
  2.     //实例化Promise对象
  3.     const p = new Promise(function(resolve,reject){
  4.         setTimeout(function(){
  5.             let data = '数据库中的用户数据';
  6.             //调用resolve()函数后这个Promise对象的状态会变为成功
  7.             //resolve(data);
  9.             let error = '数据库读取失败';
  10.             //调用reject()函数后这个Promise对象的状态会变为失败
  11.             reject(error);
  12.         },1000)
  13.     })
  15.     //p的状态为成功这调用第一个回调函数，状态为失败就调用第二个回调函数
  16.     p.then(function(value){
  17.         //成功的回调函数
  18.         console.log(value);
  19.     },function(reason){
  20.         //失败的回到函数
  21.         console.log(reason);
  22.     })
  23. </script>

Promise封装读取文件

  1. //引入fs模块
  2. const fs = require('fs');
  4. //调用方法读取文件
  5. // fs.readFile('./example.txt',(err,data)=>{
  6. //     if(err)
  7. //         //如果失败就抛出异常
  8. //         throw err;
  9. //     //如果没有出错就输出内容
  10. //     console.log(data.toString());
  11. // })
  13. //使用Promis封装
  14. const  p = new Promise(function(resolve,reject){
  15.     fs.readFile('./example.txt',(err,data)=>{
  16.         if(err)
  17.             reject(err);
  18.         resolve(data.toString());
  19.     });
  20. });
  22. p.then(function(value){
  23.     console.log(value);
  24. },function(reason){
  25.     console.log('数据库读取失败');
  26. });
  1. PS C:\Users\uuu\Desktop\项目文件\VSCode\ES6> node .\IOTest.js
  2. 发生什么事了？
  3. 发生什么事了？
  4. 发生什么事了？
  5. 发生什么事了？
  6. 发生什么事了？
  7. PS C:\Users\uuu\Desktop\项目文件\VSCode\ES6>

Promise封装ajax

  1. <script>
  2.     原生ajax
  3.     1.创建XMLHttpRequest对象
  4.     const xhr = new XMLHttpRequest()
  6.     //2.初始化
  7.     xhr.open("GET","https://api.apiopen.top/get")
  9.     //发送ajax请求.
  10.     xhr.send()
  12.     //绑定事件，处理响应结果.
  13.     xhr.onreadystatechange = function(){
  14.         if(xhr.readyState === 4){
  15.             if(xhr.status >= 200 && xhr.status < 300){
  16.                 console.log(xhr.response)
  17.             }else{
  18.                 console.log(xhr.status)
  19.             }
  20.         }
  21.     }
  23.     //使用Promise封装
  24.     const p = new Promise(function (resolve, reject) {
  25.         const xhr = new XMLHttpRequest()
  26.         xhr.open("GET", "https://api.apiopen.top/get")
  27.         xhr.send()
  28.         xhr.onreadystatechange = function () {
  29.             if (xhr.readyState === 4) {
  30.                 if (xhr.status >= 200 && xhr.status < 300) {
  31.                     //成功
  32.                     resolve(xhr.response)
  33.                 } else {
  34.                     //失败
  35.                     reject(xhr.status)
  36.                 }
  37.             }
  38.         }
  39.     })
  41.     p.then(function(value){
  42.         console.log(value)
  43.     },function(reason){
  44.         console.log(reason)
  45.     })
  47. </script>

关于then方法

  1. <script>
  2.     //then函数的返回结果是什么？返回结果是Promise对象
  3.     //1.如果回调函数中返回的是非Promise的值，返回的Promise对象状态为成功，对象的成功值为返回值
  4.     //2.如果回调函数中没有写return语句,默认返回的是undefined,结果同1
  5.     //3.如果回调函数中返回的是Promise对象,返回的Promise对象状态由被返回的Promise对象决定
  6.     //4.如果回调函数中抛出错误,返回的Promise对象状态为失败,错误的值就是抛出的值
  8.     const p = new Promise((resolve,reject)=>{
  9.         setTimeout(() => {
  10.             resolve('用户数据')
  11.         }, 1000);
  12.     })
  14.     const result = p.then(value=>{
  15.         console.log(value)
  16.         //return 123         //result的状态为成功，值为123
  17.         //throw 'fail'       //result的状态为失败，值为"fail"
  18.         return new Promise((resolve,reject)=>{
  19.             //resolve('ok')  //result的状态为成功，值为"ok"
  20.             reject('error')  //result的状态为失败，值为"error"
  21.         }) 
  22.     },reason=>{
  23.         console.log(reason)
  24.     })
  26.     //链式调用
  27.     p.then(value=>{}).then(value=>{}).then(value=>{})
  28.     
  29.     //catch()用来指定Promise对象失败的回调
  30.     p.catch(function(reason){
  31.         console.error(reason)
  32.     })
  33. </script>

14.Set集合

  1. <script>
  2. 	//Set集合常用API：
  3.     //1) size   返回集合的元素个数
  4.     //2) add    增加一个新元素，返回当前集合
  5.     //3) delete 删除元素，返回 boolean 值
  6.     //4) has    检测集合中是否包含某个元素，返回 boolean 值
  7.     //5) clear  清空集合，返回 undefined
  9.     //声明空set集合
  10.     let set1 = new Set();
  11.     //声明set集合并传入初始参数
  12.     let set2 = new Set(['小智','小刚','小霞','小智']);
  14.     //Set集合会自动去重,Set实现
  15.     for (const e of set2) {
  16.         console.log(e)
  17.     }
  18. </script>

set集合实践

  1. <script>
  2. 	let arr = [1,2,3,4,5,1,2,3]
  3.     let arr1 = [1,3,5,7,9]
  4.     
  5.     //1.数组去重
  6.     let result = [...new Set(arr)]
  7.     
  8.     //2.交集
  9.     let result1 = [...new Set(arr)].filter(item => {
  10.         let s1 = new Set(arr1)
  11.         if(s1.has(item)){
  12.             return true
  13.         }else{
  14.             return false
  15.         }
  16.     })
  17.     console.log(result1) //[1, 3, 5]
  18.     //简化版
  19.     let result2 = [...new Set(arr)].filter(item => new Set(arr1).has(item))
  21.     //3.并集
  22.     let union = [...new Set([...arr,...arr1])]
  23.     console.log(union) //[1, 2, 3, 4, 5, 7, 9]
  25.     //4.差集
  26.     let diff = [...new Set(arr)].filter(item => !(new Set(arr1).has(item)))
  27.     console.log(diff) //[2, 4]
  28. </script>

15.Map集合

  1. <script>
  2.     //Map集合常用API：
  3.     // 1) size   返回 Map 的元素个数
  4.     // 2) set    增加一个新元素，返回当前 Map
  5.     // 3) get    返回键名对象的键值
  6.     // 4) has    检测 Map 中是否包含某个元素，返回 boolean 值
  7.     // 5) clear  清空集合，返回 undefined
  9.     //1.声明空map
  10.     let map1 = new Map();
  11.     //2.声明非空map
  12.     let map2 = new Map([
  13.         ['name','张三'],
  14.         ['age','20']
  15.     ]);
  17.     //添加元素
  18.     map2.set('sex','男')
  19.     
  20.     map2.set('hobby',['唱歌','跳舞','篮球'])
  22.     map2.set('sing',function sing(){
  23.         console.log('我会唱歌')
  24.     })
  26.     let school = { name: '浙江大学'}
  28.     map2.set(school,['紫金港校区','玉泉校区','之江校区']) //key可以是对象
  30.     //Map实现了iterator接口,可以使用for of遍历
  31.     for (let e of map2) {
  32.         console.log(e) //e是数组
  33.     }
  34. </script>

16.class类

ES5和ES6创建对象的方式对比

  1. <script>
  2.     //ES5创建对象
  3.     function Phone(brand,price){
  4.         this.brand = brand;
  5.         this.price = price;
  6.     }
  8.     //添加方法
  9.     Phone.prototype.call = function(){
  10.         console.log(this.brand+'打电话')
  11.     }
  13.     //实例化对象
  14.     let Huawei = new Phone('华为',4999);
  16.     Huawei.call();
  18.     //ES6创建对象
  19.     class Phone_class{
  20.         //构造方法，必须叫这个名
  21.         constructor(brand,price){
  22.             this.brand = brand;
  23.             this.price = price;
  24.         }
  26.         //添加对象方法
  27.         call(){
  28.             console.log(this.brand+'打电话');
  29.         }
  30.     }
  32.     //实例化对象
  33.     let xiaomi = new Phone_class('小米',3999);
  35.     xiaomi.call();
  36. </script>

class静态成员

  1. <script>
  2. 	class Phone{
  3.         static price = 4399;
  4.     }
  6.     Phone.brand = '小米';
  7.     Phone.prototype.size = '5.5inch';
  9.     let xiaomi = new Phone();
  10.     
  11.     console.log(Phone.brand);  //小米
  12.     console.log(Phone.price);  //4399
  13.     console.log(Phone.size);   //undefined
  14.     console.log(xiaomi.brand); //undefined
  15.     console.log(xiaomi.price); //undefined
  16.     console.log(xiaomi.size);  //5.5inch
  18.     //结论：通过static和直接类名.属性定义的属性属于类，通过prototype定义的属性属于对象
  19.     //注意：static只能在class中使用 无法在function中使用
  20. </script>

关于对象的属性权限

  1. <script>
  2. 	//public成员
  3.     //1.构造函数的“this”变量用来给对象添加public成员 2.prototype添加的属性也是public
  4.     function Person(name,age){
  5.         this.name = name;
  6.         this.age = age;
  7.     }
  8.     Person.prototype.sex = '男';
  10.     let zs = new Person('张三',20);
  12.     console.log(zs.name); //张三
  13.     console.log(zs.age);  //20
  14.     console.log(zs.sex);  //男
  16.     //private成员
  17.     //private成员由构造函数产生,普通的var变量和构造函数的参数都称为private成员
  18.     function User(name){
  19.         this.username = name;
  20.         var password = '123';
  21.         var telephone = '13956481254'
  23.         this.getPhone = function(){
  24.             //retrun this.password; 不能这样写，返回的是undefined
  25.             return telephone;
  26.         }
  27.     }
  29.     let xm = new User('小明');
  30.     console.log(xm.username);   //小明
  31.     console.log(xm.name);       //undefined
  32.     console.log(xm.password);   //undefined
  33.     console.log(xm.telephone);  //undefined
  34.     console.log(xm.getPhone()); //13956481254
  36.     console.log(User.password); //undefined
  37.     console.log(User.telephone);//undefined
  38.     console.log(User.username); //undefined
  39. </script>

ES5和ES6继承类语法

  1. <script>
  2.     //ES5构造函数继承
  3.     //父级构造函数
  4.     function Phone(brand,price){
  5.         this.brand = brand;
  6.         this.price = price;
  7.     }
  8.     Phone.prototype.calltel = function(){
  9.         console.log('我可以打电话');
  10.     }
  12.     //子类构造函数
  13.     function SmartPhone(brand,price,color,size){
  14.         Phone.call(this,brand,price);
  15.         this.color = color;
  16.         this.size = size;
  17.     }
  19.     //设置子类构造函数的原型对象
  20.     SmartPhone.prototype = new Phone;
  21.     SmartPhone.prototype.constructor = SmartPhone;
  23.     SmartPhone.prototype.playGame = function(){
  24.         console.log('我可以玩游戏');
  25.     }
  27.     const xiaomi = new SmartPhone('小米',3999,'绿松蓝','5.5inch');
  28.     
  29.     xiaomi.calltel();
  30.     xiaomi.playGame();
  32.     //ES6继承
  33.     //父类
  34.     class Phone1{
  35.         constructor(brand,price){
  36.             this.brand = brand;
  37.             this.price = price;
  38.         }
  40.         calltel(){
  41.             console.log('我可以打电话');
  42.         }
  43.     }
  45.     //子类
  46.     class SmartPhone1 extends Phone1{
  47.         constructor(brand,price,color,size){
  48.             super(brand,price);
  49.             this.color = color;
  50.             this.size = size;
  51.         }
  53.         playGame(){
  54.             console.log("我可以玩游戏")
  55.         }
  56.     }
  58.     const iqoo = new SmartPhone1('iqoo',3999,'黑色','5.7inch');
  60.     iqoo.calltel();
  61.     iqoo.playGame();
  62. </script>

方法重写

  1. <script>
  2. 	//父类
  3.     class Phone1{
  4.         constructor(brand,price){
  5.             this.brand = brand;
  6.             this.price = price;
  7.         }
  9.         calltel(){
  10.             console.log('我可以打电话');
  11.         }
  12.     }
  14.     //子类
  15.     class SmartPhone1 extends Phone1{
  16.         constructor(brand,price,color,size){
  17.             super(brand,price);
  18.             this.color = color;
  19.             this.size = size;
  20.         }
  22.         playGame(){
  23.             console.log("我可以玩游戏")
  24.         }
  25.         calltel(){
  26.             console.log("我可以视频通话")
  27.         }
  28.     }
  30.     const iqoo = new SmartPhone1('iqoo',3999,'黑色','5.7inch');
  32.     //iqoo.calltel();//如果子类没有重写calltel()方法，则输出我可以打电话
  33.     iqoo.calltel();//我可以视频通话
  34.     iqoo.playGame();
  35. </script>

class中的setter和setter

  1. <script>
  2.     class Phone{
  3.         get price(){
  4.             console.log('价格属性被读取了');        
  5.         }
  6.         set price(newVale){
  7.             console.log('价格属性被修改了');
  8.         }        
  9.     }
  11.     let phone = new Phone();
  13.     phone.price         //价格属性被读取了
  14.     phone.price = 4999  //价格属性被修改了
  16. </script>

17.数字扩展

  1. <script>
  2. 	//Number.EPSILON:是JavaScript中表示的最小精度
  3.     //2.220446049250313e-16
  4.     function equal(a,b){
  5.         if(Math.abs(a-b) < Number.EPSILON){
  6.             return true;
  7.         }else{
  8.             return false;
  9.         }
  10.     }
  12.     console.log(Number.EPSILON)
  13.     console.log(0.1+0.2 === 0.3);   //false
  14.     console.log(equal(0.1+0.2,0.3));//true
  16.     let b = 0b1010; //二进制
  17.     let o = 0o777;  //八进制
  18.     let x = 0xff;   //十六进制
  20.     console.log(b); //十进制数为10
  21.     console.log(o); //十进制数为511
  22.     console.log(x); //十进制数为255
  23.     
  24.     //判断数值是否为有限数
  25.     console.log(Number.isFinite(100));      //true
  26.     console.log(Number.isFinite(Infinity)); //false
  27.     
  28.     //判断数值是否为NaN
  29.     console.log(Number.isNaN(123)); //false
  30.     console.log(Number.isNaN(NaN)); //true
  32.     //将字符串转换为整数和浮点数
  33.     console.log(Number.parseInt('123abc')); //123
  34.     console.log(Number.parseFloat('3.1a')); //3.1
  36.     //将数字的小数部分抹掉
  37.     console.log(Math.trunc(3.1415926)); //3
  39.     //判断数值为正数,0还是负数。1表示正数，0表示0，-1表示负数
  40.     console.log(Math.sign(100));   //1
  41.     console.log(Math.sign(0));     //0
  42.     console.log(Math.sign(-100));  //-1
  43. </script>

18.对象方法扩展

  1. <script>
  2.         //1.Object.is(a,b) 判断两个数值是否完全相等
  3.         console.log(Object.is(NaN,NaN)); //true
  4.         console.log(NaN === NaN);        //false
  6.         //2.object.assign 对象的合并
  7.         const config1 = {
  8.             host: 'localhost',
  9.             username: 'root',
  10.             password: 'root',
  11.             port1: 3306
  12.         }
  13.         const config2 = {
  14.             host: '127.0.0.1',
  15.             username: 'root',
  16.             password: '1234',
  17.             port2: 3307
  18.         }
  19.         console.log(Object.assign(config1,config2))
  21.         /*
  22.         合并结果,如果出现同名属性，后面的对象将会覆盖前面的对象
  23.         {
  24.             "host": "127.0.0.1",
  25.             "username": "root",
  26.             "password": "1234",
  27.             "port1": 3306,
  28.             "port2": 3307
  29.         }
  30.         */
  32.         //3.Object.setPrototypeOf(a,b) 将b对象设置为a的原型对象
  33.         const school = {
  34.             name: '浙江中医药大学'
  35.         }
  36.         const area = {
  37.             xiaoqu: ['滨江','富春']
  38.         }
  39.         Object.setPrototypeOf(school,area);
  40.         //4.Object.getPrototypeOf(a)获取a的原型对象
  41.         console.log(Object.getPrototypeOf(school));
  42.         console.log(school);
  44. 	</script>

19.模块化

模块化的优势有以下几点：

  • 防止命名冲突
  • 代码复用
  • 高维护性

export 暴露语法

  • 分别暴露 （module1.js）
  1. //分别暴露
  2. export let school = '浙江大学'
  4. export function fn(){
  5.     console.log('我是一个函数');
  6. }
  • 统一暴露 （module2.js）
  1. let name = 'zs'
  3. function sayHi(){
  4.     console.log('hello');
  5. }
  7. //同一暴露
  8. export{name,sayHi}
  • 默认暴露 （module3.js）
  1. export default{
  2.     username: 'root',
  3.     password: '1234',
  4.     login: function(){
  5.         console.log('登陆中...');
  6.     }
  7. }

import 引入语法的三种方式

  1. <script type="module">
  2.     //1.通用的引入方式
  3.     import * as m1 from './module1.js';
  4.     import * as m2 from './module2.js';
  5.     import * as m3 from './module3.js';
  6.     console.log(m1);
  7.     console.log(m2);
  8.     console.log(m3);
  9.     //m3.login() 对于这种引入方式,default暴露的方法无法直接使用
  10.     m3.default.login() //正确方法（其他两种可以正常调用）
  11.     
  12.     //2.解构赋值形式(可以使用as重新命名)
  13.     import {name as username,sayHi} from './module2.js';
  14.     console.log("name = "+username+',sayHi = '+sayHi);
  15.     import {default as m33} from './module3.js';
  16.     m33.login();
  18.     //3.简便形式（只针对默认暴露）
  19.     import m333 from './module3.js';
  20.     console.log(m333);
  21.     m333.login();
  22. </script>

20.ES6转码

1.安装工具 babel-cli 、babel-preset-env 、browserify （或webpack）

2.初始化 npm init --yes

3.安装 npm i babel-cli babel-preset-env -D

4.转化代码 npx babel model -d dist/js --presets-babel-preset-env

5.打包 npx browserify dist/js/app.js -o dist/bundle.js

ES7新特性

  1. <script>
  2.     //ES7新特性
  3.     //1.Array.prototype.includes,includes方法用来检测数组中是否包含某个元素，返回布尔类型值
  4.     const arr = ['西游记','红楼梦','三国演义','水浒传'];
  5.     console.log(arr.includes('三国演义')); //true
  6.     console.log(arr.includes('聊斋志异')); //false
  8.     //2.指数操作符,在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同
  9.     console.log(10**2);             //100
  10.     console.log(Math.pow(10,2));    //100
  11. </script>

ES8新特性

1.async函数

  1. <script>
  2.     //async函数,返回结果为Promise对象
  3.     async function fn(){
  4.         //return '123';//如果返回的不是Promise对象则函数返回的Promise对象状态为成功
  5.         //throw new Error('出错啦!');//如果抛出错误则函数返回的Promise对象状态为失败
  6.         return new Promise((resolve,reject)=>{
  7.             //如果返回的是Promise对象，则函数返回的Promise对象状态由被返回的Promise对象决定
  8.             resolve('成功'); 
  9.             //reject('失败');
  10.         })
  11.     }
  12.     const result = fn();
  13.     console.log(result);
  14. </script>

2.await表达式

  1. <script>
  2.     // 4.1.2.await 表达式
  3.     // 1. await 必须写在 async 函数中
  4.     // 2. await 右侧的表达式一般为 promise 对象
  5.     // 3. await 返回的是 promise 成功的值
  6.     // 4. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
  8.     const p = new Promise((resolve,reject)=>{
  9.         //resolve('成功');
  10.         reject('失败');
  11.     });
  13.     async function fn(){
  14.         // let result = await p;
  15.         // console.log(result); 成功
  17.         try {
  18.             let result = await p;
  19.         } catch (error) {
  20.             console.log(error) //失败
  21.         }
  22.     }
  24.     fn();
  25. </script>

async和await结合读取文件

  1. //1. 引入 fs 模块
  2. const fs = require("fs");
  4. //读取『为学』
  5. function readWeiXue() {
  6.     return new Promise((resolve, reject) => {
  7.         fs.readFile("./resources/为学.md", (err, data) => {
  8.             //如果失败
  9.             if (err) reject(err);
  10.             //如果成功
  11.             resolve(data);
  12.         })
  13.     })
  14. }
  16. function readChaYangShi() {
  17.     return new Promise((resolve, reject) => {
  18.         fs.readFile("./resources/插秧诗.md", (err, data) => {
  19.             //如果失败
  20.             if (err) reject(err);
  21.             //如果成功
  22.             resolve(data);
  23.         })
  24.     })
  25. }
  27. function readGuanShu() {
  28.     return new Promise((resolve, reject) => {
  29.         fs.readFile("./resources/观书有感.md", (err, data) => {
  30.             //如果失败
  31.             if (err) reject(err);
  32.             //如果成功
  33.             resolve(data);
  34.         })
  35.     })
  36. }
  38. //声明一个 async 函数
  39. async function main(){
  40.     //获取为学内容
  41.     let weixue = await readWeiXue();
  42.     //获取插秧诗内容
  43.     let chayang = await readChaYangShi();
  44.     // 获取观书有感
  45.     let guanshu = await readGuanShu();
  47.     console.log(weixue.toString());
  48.     console.log(chayang.toString());
  49.     console.log(guanshu.toString());
  50. }
  52. main();

3.对象方法扩展

  1. <script>
  2.     //声明对象
  3.     const school = {
  4.         name:"尚硅谷",
  5.         cities:['北京','上海','深圳'],
  6.         xueke: ['前端','Java','大数据','运维']
  7.     };
  9.     //获取对象所有的键
  10.     console.log(Object.keys(school));
  11.     //获取对象所有的值
  12.     console.log(Object.values(school));
  13.     //entries
  14.     console.log(Object.entries(school));
  15.     //创建 Map
  16.     const m = new Map(Object.entries(school));
  17.     console.log(m.get('cities'));
  19.     //对象属性的描述对象
  20.     console.log(Object.getOwnPropertyDescriptors(school));
  22.     const obj = Object.create(null, {
  23.         name: {
  24.             //设置值
  25.             value: '尚硅谷',
  26.             //属性特性
  27.             writable: true,
  28.             configurable: true,
  29.             enumerable: true
  30.         } 
  31.     });
  32. </script>

ES9新特性

  1. <!-- 
  2.         Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，
  3.         在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
  4.      -->
  5.     <script>
  6.         //rest 参数
  7.         function connect({host, port, ...user}){
  8.             console.log(host);
  9.             console.log(port);
  10.             console.log(user);
  11.         }
  13.         connect({
  14.             host: '127.0.0.1',
  15.             port: 3306,
  16.             username: 'root',
  17.             password: 'root',
  18.             type: 'master'
  19.         });
  21.         //对象合并
  22.         const skillOne = {
  23.             q: '天音波'
  24.         }
  25.         const skillTwo = {
  26.             w: '金钟罩'
  27.         }
  28.         const skillThree = {
  29.             e: '天雷破'
  30.         }
  31.         const skillFour = {
  32.             r: '猛龙摆尾'
  33.         }
  35.         const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
  36.         console.log(mangseng)
  38.         // ...skillOne   =>  q: '天音波', w: '金钟罩'
  39.     </script>

ES10新特性

1.Object.fromEntries

  1. <script>
  2.         //二维数组
  3.         const result = Object.fromEntries([
  4.             ['name','尚硅谷'],
  5.             ['xueke', 'Java,大数据,前端,云计算']
  6.         ]);
  8.         //Map
  9.         const m = new Map();
  10.         m.set('name','ATGUIGU');
  11.         const result = Object.fromEntries(m);
  13.         //Object.entries ES8
  14.         const arr = Object.entries({
  15.             name: "尚硅谷"
  16.         })
  17.         console.log(arr);
  18.     </script>

2.trimStart 和 trimEnd

  1. <script>    
  2.         let str = '   iloveyou   ';
  3.         console.log(str);              //iloveyou后面无空格
  4.         console.log(str.trimStart());  //iloveyou后面有空格
  5.         console.log(str.trimEnd());	   //   iloveyou
  6.     </script>

3.Array.prototype.flat 与 flatMap

  1. <script>
  2.         //flat 平
  3.         //将多维数组转化为低位数组
  4.         // const arr = [1,2,3,4,[5,6]];
  5.         const arr = [1,2,3,4,[5,6,[7,8,9]]];
  6.         //参数为深度 是一个数字
  7.         console.log(arr.flat(2));
  9.         //flatMap
  10.         const arr = [1,2,3,4];
  11.         const result = arr.flatMap(item => [item * 10]);
  12.         console.log(result);
  13.     </script>

4.Symbol.prototype.description

  1. <script>
  2.         //创建 Symbol
  3.         let s = Symbol('尚硅谷');
  4.         console.log(s.description);
  5.     </script>

ES11新特性

1.私有属性

  1. <script>
  2.         class Person{
  3.             //公有属性
  4.             name;
  5.             //私有属性
  6.             #age;
  7.             #weight;
  8.             //构造方法
  9.             constructor(name, age, weight){
  10.                 this.name = name;
  11.                 this.#age = age;
  12.                 this.#weight = weight;
  13.             }
  15.             intro(){
  16.                 console.log(this.name);
  17.                 console.log(this.#age);
  18.                 console.log(this.#weight);
  19.             }
  20.         }
  22.         //实例化
  23.         const girl = new Person('晓红', 18, '45kg');
  24.         console.log(girl.name);
  25.         console.log(girl.#age); //无法访问
  26.         console.log(girl.#weight); //无法访问
  27.         girl.intro();
  28.     </script>

2.可选链操作符

  1. <script>
  2.         // 可选链操作符:  ?.
  3.         function main(config){
  4.             // const dbHost = config && config.db && config.db.host;
  5.             const dbHost = config?.db?.host;
  6.             console.log(dbHost);
  7.         }
  9.         main({
  10.             db: {
  11.                 host:'192.168.1.100',
  12.                 username: 'root'
  13.             },
  14.             cache: {
  15.                 host: '192.168.1.200',
  16.                 username:'admin'
  17.             }
  18.         })
  19.     </script>

3.BigInt

JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度

  1. <script>
  2.         //大整形
  3.         // let n = 521n;
  4.         // console.log(n, typeof(n));
  6.         //函数
  7.         // let n = 123;
  8.         // console.log(BigInt(n));
  9.         // console.log(BigInt(1.2));
  11.         //大数值运算
  12.         let max = Number.MAX_SAFE_INTEGER;
  13.         console.log(max);
  14.         console.log(max + 1);
  15.         console.log(max + 2);
  17.         console.log(BigInt(max))
  18.         console.log(BigInt(max) + BigInt(1))
  19.         console.log(BigInt(max) + BigInt(2))
  20.     </script>

4.globalThis

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）

  1. <script>
  2.         console.log(globalThis); //Window
  3.     </script>

5.动态import

  1. <script type="module">
  2.     const btn = document.getElementById("btn");
  4.     btn.onclick = function(){
  5.         import("./m1.js").then(module => {
  6.             module.study();
  7.         });
  8.     };
  9. </script>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/m0_60117382/article/details/125753967

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptes6学习

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com