#解构：从数组和对象中提取值，对变量进行赋值，这被称为解构 1 数组解构 let [a,[b,c],d]=[1,[2,3],4]; 形式要统一按次序排列的 let [a,b="JSPang"]=['技术胖'] console.log(a+b); //控制台显示“技术胖JSPang” 2 对象的解构赋值 let {foo,bar} = {foo:'JSPang',bar:'技术胖'}; 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 3 字符串解构 const [a,b,c,d,e,f]="JSPang"; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); console.log(f); #function jspang(first,...arg){} ...表示传入的参数不确定 第一个参数我知道，后面的不清楚。arg.length 返回的是你不知道的长度。 ``` function jspang(first,...ss){ // for(let i=0 ,i<ss.length,i++){ console.log(ss[i]);} for(let val of ss){ console.log(val); } } jspang(0,1,2,3,4,5,6,7); // 1 2 3 4 5 6 7 ``` #扩展运算符的用处：这样改变arr2的值，arr1的值不会改变了 ``` let arr1=['www','jspang','com']; //let arr2=arr1; let arr2=[...arr1]; console.log(arr2); arr2.push('shengHongYu'); console.log(arr2); console.log(arr1); ``` #字符串模版 以前 '+jspang+' 现在 ${jspang} let jspang='技术胖'; //let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。'; let blog = `<b>非常高兴你能看到这篇文章</b>，我是你的老朋友${jspang}。<br/>这节课我们学习字符串模版。`; //这里要注意用的符号 ` ` 不是单引号 里面支持标签 #字符串查找 let jspang='技术胖'; let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'; document.write(blog.indexOf(jspang)); // 返回的是索引位置 document.write(blog.includes(jspang)); // 返回的是true + 判断开头是否存在：blog.startsWith(jspang); // 返回的是true false + 判断结尾是否存在：blog.endsWith(jspang); # 复制字符串 document.write('jspang|'.repeat(3)); //打印3遍 jspang|jspang|jspang| #判断是否为数字Number.isFinite(a) 判断是否为整数Number.isInteger(a) 取整Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx) let a= 11/4; console.log(Number.isFinite(a));//true # Array.from(xxx)方法： JSON数组格式转换——JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式 let json = { '0': 'jspang', '1': '技术胖', '2': '大胖逼逼叨', length:3 } let arr=Array.from(json); console.log(arr) // [ 'jspang', '技术胖', '大胖逼逼叨' ] # Array.of(xxx)方法： 它负责把一堆文本或者变量转换成数组 let arr =Array.of(3,4,5,6); console.log(arr); // [3,4,5,6] let arr =Array.of('技术胖','jspang','大胖逼逼叨'); console.log(arr); // [ '技术胖', 'jspang', '大胖逼逼叨' ] #数组转换字符串 join()方法就是在数组元素中间，加了一些间隔，开发中很有用处。toString()方法，转换时只是是用逗号隔开了。 let arr=['jspang','技术胖','前端教程']; console.log(arr.join('|')); // jspang|技术胖|前端教程 let arr=['jspang','技术胖','前端教程']; console.log(arr.toString()); // jspang,技术胖,前端教程 # find( )实例方法: 如果找到符合条件的数组元素就回该元素，找不到返回undefined。 # findIndex() 函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 + value：表示当前查找的值。 + index：表示当前查找的数组索引。 + arr：表示当前数组。 let arr=[1,2,3,4,5,6,7,8,9]; console.log(arr.find(function(value,index,arr){ return value > 5; })) // 6 console.log(arr.findIndex(function(value,index,arr){ return value > 5; })) // 5 # fill( )实例方法： 把数组进行填充,第二个是开始填充的位置，第三个是填充到的位置。 let arr=[0,1,2,3,4,5,6,7,8,9]; arr.fill('jspang',2,5); //第二位到第五位 console.log(arr); // [ 0, 1, 'jspang', 'jspang', 'jspang', 5, 6, 7, 8, 9 ] # for…of 循环： let arr=['jspang','技术胖','大胖逼逼叨'] for (let item of arr){ console.log(item); } # for…of 数组索引: 有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。 let arr=['jspang','技术胖','大胖逼逼叨'] for (let index of arr.keys()){ console.log(index); } # 对象的函数解构 直接把这个JSON格式数据当作参数，传递到函数内部进行处理 let json = { a:'jspang', b:'技术胖' } function fun({a,b='jspang'}){ console.log(a,b); } fun(json); // jspang 技术胖 # 数组的遍历方法 # 1.forEach forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。 let arr=['jspang','技术胖','前端教程']; arr.forEach((item,i)=>console.log(i,item)); //0 'jspang' //1 '技术胖' //2 '前端教程' # 2.filter 他其实也有循环的功能 过滤、遍历 var arr = [1, 2, 3]; arr.filter(item => { // item为数组当前的元素 return item > 1; // [2, 3] }) # 3.some some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则返回true , 剩余的元素不会再执行检测。 var arr = [1, 2, 3]; arr.some(item => { return item ==2; // true }) var arr = [1, 2, 3]; arr.some((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组 console.log(item); // 1, 2, 3 console.log(index); // 0, 1, 2 console.log(arr); // [1, 2, 3] }) # 4.map map在这里起到一个替换的作用 let arr=['jspang','技术胖','前端教程']; console.log(arr.map(x=>'web')); // [ 'web', 'web', 'web' ] # 5. every() every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。 var arr = [1, 2, 3]; arr.every((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组 return item > 0; // true return index == 0; // false }) # ES6中对象 声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。 var obj={ add:function(val){ return val+10; }, name:'I am Jspang' }; console.log(obj.add(100)); console.log(obj.name); # 对象赋值 var obj = {}; //或者 var obj=new Object(); var key = "name"; var value = "张三丰" obj[key] = value; console.info(obj); // { name: '张三丰' } # 对象Key值构建 //有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们如何构建我们的key值那。比如我们在后台取了一个key值，然后可以用[ ] 的形式，进行对象的构建。 let key='skill'; var obj={ [key]:'web' } console.log(obj.skill); # 自定义对象方法 let key='skill'; var obj={ [key]:'web' } console.log(obj.skill); # Object.assign( )合并对象 var a={a:'jspang'}; var b={b:'技术胖'}; var c={c:'web'}; let d=Object.assign(a,b,c) console.log(d); # Set的声明 只能放数组 Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。 let setArr = new Set(['jspang','技术胖','web','jspang']); console.log(setArr); //Set {"jspang", "技术胖", "web"} # Set值的 增 删 查 + setArr.add('前端职场'); + setArr.delete('前端职场'); + console.log(setArr.has('jspang'));//true + setArr.clear();//清空 # size属性可以获得Set值的数量。 + console.log(setArr.size); # set的循环 let setArr = new Set(['jspang','技术胖','web','jspang']); for (let item of setArr){ console.log(item); } let setArr = new Set(['jspang','技术胖','web','jspang']); setArr.forEach((value)=>console.log(value)); # WeakSet的声明 放对象 这里需要注意的是，如果你直接在new 的时候就放入值，将报错。里边的值也是不允许重复的 let weakObj=new WeakSet(); let obj={a:'jspang',b:'技术胖'} weakObj.add(obj); // 必须用add方法 console.log(weakObj); # 总结：在实际开发中Set用的比较多，WeakSet用的并不多，但是他对传入值必须是对象作了很好的判断，我们灵活应用还是有一定的用处的。 # map数据结构 取值get 删除delete size属性 查找是否存在has 清楚所有元素clear let json = { name:'jspang', skill:'web' } var map=new Map(); map.set(json,'iam'); // set 赋值 console.log(map); // Map { { name: 'jspang', skill: 'web' } => 'iam' } key => value console.log(map.get(json)); // iam ( get 取值 ) map.delete(json); // 删 console.log(map) // Map {} console.log(map.has('jspang')) // 查 #总结：map在现在开发中已经经常使用，它的灵活性和高效性是我们喜欢的。开发中试着去使用map吧，你一定会喜欢上它的。 # 用Proxy进行预处理 newn Proxy（{},{}）; var pro = new Proxy({ add: function (val) { return val + 10; }, name: 'I am Jspang' }, { get:function(target,key){ //get是在你得到某对象属性值时预处理的方法，三个参数 target：得到的目标值,key：目标的key值，相当于 对象的属性 console.log('come in Get'); return target[key]; }, set:function(target,key,value,receiver){ //set属性是值你要改变Proxy属性值时，进行的预先处理 target:目标值。key：目标的Key值。 value：要改变的值。 console.log(` setting ${key} = ${value}`); return target[key] = value; } }); console.log(pro.name); pro.name='技术胖'; console.log(pro.name); 输出： come in Get // 先输出了come in Get。相当于在方法调用前的钩子函数。 I am Jspang setting name = 技术胖 // set属性是值你要改变Proxy属性值时，进行的预先处理。 come in Get 技术胖 let target = function () { return 'I am JSPang'; }; var handler = { apply(target, ctx, args) { console.log('do apply'); return Reflect.apply(...arguments); } } var pro = new Proxy(target, handler); //apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。 console.log(pro()); // do apply // I am JSPang # class类的使用 class Coder{ name(val){ // 类的里面都是函数 console.log(val); return val; // 要注意return 的用法 } // 注意f这里没有逗号 ， skill(val){ console.log(this.name('jspang')+':'+'Skill:'+val); // 这里的 this 指类本身 } constructor(a,b){ // constructor( )进行传参 this.a=a; this.b=b; } add(){ return this.a+this.b; } } let jspang=new Coder(1,2); // 实例化一个类 console.log(jspang.add()); # class的继承 class htmler extends Coder{ } let pang=new htmler; pang.name('技术胖'); # 模块化操作 + 1.export export var a ='jspang'; export function add(a,b){ return a+b; } 对应的导入方式 import {a,add} form './temp';//也可以分开写 + 2.export defalut export default var a='jspang'; 对应的引入方式 import str from './temp'; // 导入的时候没有花括号，然后系统允许你为它取任意名字