ES6学习--内有视频授课链接

tech2025-02-24  13

1.了解ES6

是ECMAScript 6简称,目标使JavaScript语言可以用于编写复杂的大型应用程序 ,成为企业及开发语言 .

1.1 let 和const 命令

<script> for(var i=0;i<5;i++){ //var 作用于全局 console.log(i); } console.log("循环外:"+i); </script>


将var 改成let 后,循环外变错.


let与const都是只在声明所在的块级作用域内有效。

let声明的变量可以改变,值和类型都可以改变,没有限制。

const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

const a ;//报错,一旦声明变量,应该立即赋值!! const b = 2; b = 3//报错,因为定义常量之后不能成重新赋值!! let a ; a =123; console.log(“a=”+a); //a=123 a=“abc”; console.log(“a=”+a); //a=abc 详细差别

1.2 字符串扩展

includes() :返回布尔值,表示是否找到了参数字符串.startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部endsWith(): 返回布尔值,表示参数字符串是否在源字符串的尾部. console.log(Str,"中是否包含了 wenjian",Str.startsWith("wenjian")); console.log(Str,"中是否包含了 wenjian",Str.endsWith("wenjian"));

字符串模板 `` ,二个` 之间部分都会作为字符串值,可以任意换行

let str2="abc\n" + "233"; let str3= `hello wenjan xuexiES6新特性`; console.log(str); console.log(str2); console.log(str3);

1.3 解构表达式

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

1.3.1 数组解构

let arr=[1,2,3]; console.log(arr[1]); //取数字 2 const [x,y,z] =arr; //x,y,z对应arr中每个位置的值 console.log(y); //2 const [,,a]=arr; console.log(a); //3

1.3.2 对象解构和优化

const person={ name:"jack", age:21, language:['java','js','react.js'] }; let {name,age,language}=person; //let const 都行,{}必须,name age language 名字位置 一一对应, const console.log(name,age,language); //jack 21 (3) ["java", "js", "react.js"] // const {name: n,age: a,language:f}=person; // console.log(n,a,f); //jack 21 (3) ["java", "js", "react.js"] ==========对象优化======= const target = { a:1 }; const source1 = { b: 2 }; {a:1,b:2,c:3} const source2- { c: 3 }; Object.assign(target,source1,source2); console.log(target); //{a:1,b:2,c:3} ====声明对象简写===== const age=123 const name="张三" const person1 ={age: age,name: name} const person2 ={age,name}

1.4 函数优化

1.4.1 函数参数默认值

function add(a,b = 1) { // b =b || 1; 默认值 return a+b; } console.log(add(10));

1.4.2 函数优化

箭头函数 function print(a) { console.log(a); } print("爱你"); let print2 =a =>console.log(a); print2("爱你"); let sun= (a,b) =>console.log(a+b); sun("12",3); //123 let sun1= (a,b) => { return a + b; } console.log(sun1(33,55)); //88 let sayHello = () =>console.log("123"); //无参数,括号作为一个参数占位 sayHello(); 函数属性简写 let person = { name: "jack", eat : function (food) { //原先写法 console.log(this.name+"在吃: "+food); }, //箭头函数 eat2 :food => console.log(person.name+"在吃: "+food), //直接写函数 eat3(food){ console.log(this.name+"在吃: "+food); } } person.eat("西瓜"); person.eat2("冬瓜"); person.eat3("南瓜"); 箭头函数和解构表达式结合 const person = { name: "jack", age: 21, language: ['jvav','js',123] } function hello(person){ console.log("htllo,"+person.name) } hello(person); const hello2 = ({name})=> console.log("hello2,"+name); hello2(person);

1.5 map和reduce,数组新增的方法

map map() :接受一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回 let arr =['1','20','-5','3']; console.log(arr); let newArr = arr.map(s => parseInt(s)); //将字符型转为int console.log(newArr); reduce reduce(): 接收一个函数(必须)和一个初始值(可选),该函数接收两个参数︰ 第一个参数是上一次reduce处理的结果第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数

const arr= [1,20,-5,3]; let result = arr.reduce((a,b) => { return a+b; },1); console.log(result); //有初始值1,则结果为20,没有的话 19

1.6 扩展运算符

spread 是三个点 … ,将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]); //1 2 3 console.log(0,...[1,2,3],4); //0 1 2 3 4 function add(x,y) { return x+y; } var numbers = [1,2]; console.log(add(...numbers)); //3 //数组合并 let arr =[...[1,2,3],...[4,5,6]]; console.log(arr); [1,2,3,4,5,6] //与解构表达式结合 const [first,...rest] = [1,2,3,4,5]; console.log(first,rest); //1 [2,3,4,5] //将字符串转化成数组 console.log([...'hello']) // ["h","e","l","l","o"]; //对象合拼 let age1 = { age:15 } let name1 = { name:"Amy" } let p2 = {...age1, ...name1 } //最后的值会覆盖之前的值 console.log(p2}

1.7 promise

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可同样的方法进行处理。

我们可以通过Promise的构造函数来创建Promise对象,并在内部封装一个异步执行的结果。

const p = new Promise((resolve,reject) =>{ //写异步的操作,通常写ajax 操作 setTimeout( () => { //异步操作(模拟-) let num = Math.random(); if (num < 0.5){ //认为成功了 resolve("成功了"+num); }else{ reject("失败了"+num); } }); }); console.log("ok"); p.then(value => { console.log(value); }).catch(reason => { console.log(reason); // 控制台结果: 先: ok 后: ok2 最后: 成功了0.26380699315303446 }); console.log("ok2"); //1、Promise可以封装异步操作 let p = new Promise((resolve,reject)=>{ //1、异步操作 $.ajax({ url:"mock/user.json", success:function(data){ console.log("查询用户成功:",data) resolve(data); }, error:function(err){ reject(err); } }); }); p.then((obj)->{ $.ajax({ url:^mock/user_corse_${obj.id}.json`, success:function(data){ console.log("查询用户课程成功:",data) }, error:function(err){ } }).catch((err)->{ }) ========简化后======== function get(url,data){ return new Promise((resolve,reject)=>{ $.ajax({ url:url, data:data, success:function(data){ resolve(data); }, error:function((err){ reject(err) } }) }); ) get("mock/user.json") .then((data)=->{ console.log("用户查询成功:",data) return get(`mock/user_corse_${data.id}.json`); }) .then((data)=>{ console.log("课程查询成功:",data) return get(`mock/corse_score_${data.id}.json`); }) .then((data)=>{ console.log("课程成绩查询成功:", data) }) .catch((err)=>{ console.log("出现异常",err) });

1.8 set和map

ES6提供了Set和Map的数据结构。|

Set,本质与数组(js弱类型语言,数组可以有不同类型的数值)类似。不同在于Set中只能保存不同元素,如果元素相同会被忽略。和java中的Set集合非常相似。

let set = new Set(); set.add(2); set.add(5); set.add(2); set.add("liwenjian"); set.forEach(value => { set.add("liwenjian"); console.log(value); // 2 和字符串"liwenjian" 被忽略 }); let set2 = new Set([1,2,"wenjian",2]); //Set(3) {1, 2, "wenjian"} console.log(set2); const arr = [1,2,"23",2]; arr.forEach( value => { console.log(value); //数组就不会抛弃哪一个 });

方法: set . add(1); //添加 set.clear (); //清空 set.delete(2); //删除指定元素 set.has (2);//判断是否存在 set .forEach(function(i3)//遍历元素 set.size; //元素个数。是属性,不是方法。


map,本质与Object类似的结构.不同在于,Object强制规定key只能是String,而Map结构的key可以是任意对象:

object 是<String,object>集合map 是<object,object>集合 const map =new Map([ ["key1","value1"], //单引号 双引号 都行 ['key2',"value2"], ]); console.log(map.get("key1")); //接受一个set const set = new Set([ ['key1','value1'], ['key2','value2'], ]); const map2 =new Map(set); console.log(map2.get('key2')); //或者其他map const map3 =new Map(map); map.forEach((value, key) => { console.log(key,value); });

方法 : map.set(key, value);// 添加 map.clear();// 清空 map.delete(key);// 删除指定元素 map.has(key); // 判断是否存在 map.forEach(function(key,value){})//遍历元素 map.size; // 元素个数。是属性,不是方法 map.values() //获取value的迭代器 map.keys() //获取key的迭代器 map.entries() //获取entry的迭代器 用法: for (let key of map.keys()) { console.log(key); } 或:console.log(…map.values()); //通过扩展运算符进行展开

1.9 class(类) 的基本语法

class User{ //构造函数 constructor (name,age = 20){ this.name= name; this.age=age; } sayHello(){ return "hello, "+this.name; } //静态函数 static isAdult(age){ if (age>=18){ return '成年人'; } return "未成年人"; } } let user =new User("张三"); console.log(user); //User {name: "张三", age: 20} console.log(user.sayHello()); //hello, 张三 //静态方法在class文件被加载时就会分配内存,而非静态方法要在程序运行过程中类实例化后才会存在 console.log(User.isAdult(20)); //成年人 若一个父类中只有一个带参数的构造方法,那么在写其子类的构造方法时必须先通过super调用父类的构造方法才能完成子类的构造方法而且super只能写在子类构造方法体内的第一行。 class Lisi extends User{ constructor(){ super(30,30); //类型可根据需要改变 } test(){ return "test-> "+this.name; } } let lisi = new Lisi(); console.log(lisi); console.log(lisi.test()); console.log(lisi.sayHello()); console.log(Lisi.isAdult(19));

1.10 Generator 函数

Generator 函数是 ES6 提供的 一种异步编程解决方案,语法行为与传统函数完全不同 。

Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield 语句定义不同的 内部状态。

function* hello() { yield 1234; yield "world"; yield 'abc'; return 234; } let h =hello(); // console.log(h.next()); //{value: 1234, done: false} // console.log(h.next()); //{value: "world", done: false} // console.log(h.next()); //{value: "abc", done: false} // console.log(h.next()); //{value: 1234, done: true} // for of 可以循环遍历Generator函数返回的迭代器 for (let y of h){ console.log(y); // 1234 world abc ,为什么没有234? next()方法中的指针先指向下一位判断是否为空,不为空后,再取本位的数值,(迭代器运行原理) }

1.11 修饰器 (Decorator)

修饰器(Decorator)是一个函数, 用来修改类的行为。 ES2017 引入了这项功能, 目前 Babel 转码器己经支持。

@T class User { constructor(name,age=20) { this.name=name; this.age=age; } } function T(target) { //target 被修饰的对象 console.log(target); target.contry = "zhong国";// 通过修饰器添加的属性是静态属性 } console.log(User.contry);

上述会报错, 原因是,在ES6中,并没有支持该用法,在ES2017中才有,所以我们不能直接运行了,需要进行编码后再运行。 转码的意思是:将ES6或ES2017转为ES5执行

1.12 转码器

Babel (babeljs.io)是一个广为使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而 在浏览器或其他环境执 行 。Google 公司的 Traceur 转码器 Cgithub.com/google/traceur-compiler), 也可 以将 ES6 代码转为ES5的代 码。 2款都是非常优秀的转码工具,是会使用阿里的开源企业级react框架:乌米 UmiJS。
1.12.2 部署安装

首先安装node.js,接下来看本篇最后文档.

1.13 模块化

模块化就是把代码进行拆分,方便重复利用。类似java中的导包:要使用一个包,必须先导包。而JS中没有包的概念,换来的是模块。 模块功能主要由两个命令构成:export和import。

export 命令用于规定模块的对外接口,一切js变量都可以导出, 基本类型变量,函数,数组,对象.import 命令用导入其他模块提供的功能

链接:https://pan.baidu.com/s/1bXuvGqzJBQARtzSNPP6IWA 提取码:165r

最新回复(0)