#解构：从数组和对象中提取值，对变量进行赋值，这被称为解构
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'; // 导入的时候没有花括号，然后系统允许你为它取任意名字原文地址：https://www.cnblogs.com/sweet-ice/p/10591330.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。