ES6教程笔记

ES介绍

什么是ES

ES全称 EcmaScript 是一种脚本语言的规范 Javascript为ES的实现
Ecma 是一个组织 Ecma组织

为什么要学习ES6?

ES6的版本变动内容最多,具有里程碑意义
ES6加入了许多新的语法特性
ES6是前端的发展趋势,就业必备技能

ES6兼容性查看

正式学习

let变量声明以及声明特性

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

</head>
<body>
<script>
//声明变量
let a;
let b,c,d;
let e=100;
let f=521,g='zhangsan',h=[];
</script>
</body>
</html>

变量不能重复声明
块级作用域全局,函数,eval(if , else ,while,for)
不存在变量提升(不允许在未声明前使用)
不影响作用域链

{
	let school = '尚硅谷;
	function fn(){
		console.log(school);
	}
	fn();
}

const定义常量

const SCHOOL='尚硅谷'

必须定义初始值
一般常量命名使用大写
常量值不能修改
块级作用域
对于数组和对象的元素修改,不算对常量的修改,不会报错(主要原因是因为地址的变化)
const TEAM=['UZI','MLXG','Ming','LetMe']; TEAM.push('Meiko');

解构赋值

ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值

        // 1. 数组的结构
        const F4 = ['小沈阳','刘能','赵四','宋小宝'];
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song);

        // 2. 对象的解构
        const zhao = {
            name: '赵本山',
            age: '不详',
            xiaopin: function(){
                console.log("我可以演小品");
            }
        };

        let {name, age, xiaopin} = zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        xiaopin();

        let {xiaopin} = zhao;
        xiaopin();

模板字符串

使用反引号标识 `
内容中可以直接出现换行符
可以直接变量拼接

let lover = '小沈';
let out = `${lover}是最棒的程序员`;

简化对象写法

允许在大括号内直接写入变量和函数,作为对象的属性和方法

        let name = '尚硅谷';
        let change = function(){
            console.log('我们可以改变你!!');
        }
        const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能");
            }
        }

箭头函数

允许使用箭头(=>) 定义函数

#原来
let fn = function(){

}
#现在
let fn = (a,b)=>{
	return a+b;
}

this是静态的.this 始终指向函数声明时所在的作用域下的this的值
不能作为构造实例化对象
不能使用arguments变量
箭头函数简写
- 省略小括号,当形参有且只有一个的时候
```
	let add = n => {
		return n + n;
	}
```
- 省略花括号,当代码体只有一条语句的时候
  let pow = n => n * n;

rest参数

用于获取函数的实参,用来代替arguments(Java可变参数 ...)
能将数组转为逗号分隔的{参数序列} (入参使用)

Symbol

原始数据类型,第七种数据类型,类似字符串的数据类型
特点
- Symbol的值时唯一的,用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用 for...in 循环,但是可以使用Reflect.ownKeys来获取对象的所有键名

迭代器

写法 for(let item of list)

生成器

属于函数
作为异步编程使用

Promise

promise是ES6引入的异步编程的新解决方案(重要)

        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
	p.then(
		//成功回调
		function(value){
			console.log(value);
		},
		//失败回调
		function(reason){
			console.error(reason);
		}
	)

then方法例子

//创建 promise 对象
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            }, 1000)
        });

        //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
        //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

        // const result = p.then(value => {
        //     console.log(value);
        //     //1. 非 promise 类型的属性
        //     // return 'iloveyou';
        //     //2. 是 promise 对象
        //     // return new Promise((resolve, reject)=>{
        //     //     // resolve('ok');
        //     //     reject('error');
        //     // });
        //     //3. 抛出错误
        //     // throw new Error('出错啦!');
        //     throw '出错啦!';
        // }, reason=>{
        //     console.warn(reason);
        // });

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });

catch方法例子

        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });

        p.catch(function(reason){
            console.warn(reason);
        });

Set

es6可以使用类Java中的集合Set

        //声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
         console.log(s2.size);
        //添加新的元素
         s2.add('喜事儿');
        //删除元素
         s2.delete('坏事儿');
        //检测
         console.log(s2.has('糟心事'));
        //清空
         s2.clear();
         console.log(s2);

        for(let v of s2){
            console.log(v);
        }

Set集合实践

数组去重

	let arr = [1,2,3,4,5,4,3,2,1];
		let result = [...new Set(arr)];
		console.log(result);

交集

	let arr2 = [4,5,6,5,6];
	let s2 = new Set(arr2);// 4 5 6
	let result = [...new Set(arr)].filter(item => {
		if(s2.has(item)){
			return true;
		}else{
			return false;
		}
	});
	let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
	console.log(result);

并集

	let arr = [1,2,3,4,5,4,3,2,1];
	let arr2 = [4,5,6,5,6];
	let union = [...new Set([...arr, ...arr2])];

差集

	let arr = [1,2,3,4,5,4,3,2,1];
	let arr2 = [4,5,6,5,6];
	let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
	console.log(diff);

Map

声明Map
let m = new Map();
添加元素

	//基本类型
	m.set('name','黑子桑');
	//object类型
	let key = {
		school:'算力'
	};
	m.set(key,['北京','上海','深圳']);
	//函数
	m.set('show',()=>{
		console.log('ES6真神奇');
	})

获取长度
m.size
删除
m.delete('name');
获取
m.get('show');
清空
m.clear();
由于实现了Symbol.iterator方法所以可以使用迭代

	for(item of m){
		console.log(m);
	}

Class

ES6 中引入了Class(类)概念,接近与传统语言写法
ES6的class 可以看作为语法糖
知识点
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写

	//手机
        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话!!");
        }

        //实例化对象
        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);

        //class
        class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);

        console.log(onePlus);

静态成员

	class Phone{
            //静态属性
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);
        console.log(Phone.name);

继承

	class Phone{
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size){
                super(brand, price);// Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

get/set

	class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';

数值扩展

Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
二进制和八进制

	//二进制
        let b = 0b1010;
	//八进制
        let o = 0o777;
	//十进制
        let d = 100;
	十六进制
        let x = 0xff;
        console.log(x);

Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为 NaN
Number.parseInt Number.parseFloat字符串转整数
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小数部分抹掉
Math.sign 判断一个数到底为正数负数还是零

对象方法扩展

Object.is 判断两个值是否完全相等
Object.assign 对象的合并
Object.setPrototypeOf 设置原型对象 Object.getPrototypeof

模块化

模块化优势
- 防止命名冲突
- 代码复用
- 高维护性
模块化语法
- export 用于规定模块的对外接口
- import 用于输入其他模块提供的功能

资料来源于尚硅谷...

posted @ 2022-08-16 17:25 黑子桑阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部