箭头函数.模板字符串.连续运算符
箭头函数.模板字符串.连续运算符
Es6 本章内容： 箭头函数 箭头函数中this的指向 数组的新方法 模板字符串 三点运算符 结构赋值 具体内容： 箭头函数的声明： Es6允许使用箭头函数（=>）定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>箭头函数</title> </head> <body> <script> //声明一个变量接受我们的函数 let f = v =>v*v; //上面的函数等值于我们原来的写法 let ff = function (v) {
return v*v;
}
//我们呢来打印一下这个箭头函数
console.log(f(3))
//我们来定义一个多个参数的箭头函数
let fff = (v,s) =>v+s;
//如果说函数里有多条语句怎样写
let ffff = (v,s) =>{
console.log("ssss");
return v+s;
}
//如果说使用箭头函数传入对象的话，也就是json的格式
var p =name =>({name:"杨过a",age:18})
console.log(p("a"))
</script></body> </html> 上面是箭头函数的语法和例子 箭头函数的作用：简化断码，使用方便 关于箭头函数中this的指向： 普通函数中的this： This总是表示他的直接调用者（js的this是执行上下文）例如:obj.func，那么func中的this值得就是obj 在默认情况下（非严格模式下，未使用‘user starict’），没找到直接调用者，则this指的是window（约定俗成） 在严格模式下，没有直接调用者的函数中的this，是undefined 使用call，apply，bind（es5新增）绑定的，this指的是绑定的对象 //如果说使用箭头函数传入对象的话，也就是json的格式 var p =name =>({name:"杨过a",age:18}) console.log(p("a"))
//声明一个对象
function Person(name,age) {
this.name = name;
this.age = age;
}
let v = new Person("wyh",30);
p.say = function () {
console.log(this.name+"==="+this.age);
}
p.say();
console.log(v)</script>
我们在来写个例子看一下我们所说的哪两种情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this</title> </head> <body> <script> var circle1 = { r:10, getr(){ console.log("圆的半径是："+this.r);
}
}
circle1.getr();
//从上面的例子我们可以清晰的看到，this代表的是circle这个对象
//那么我们下面改造一下上面的这个方法
var circle2 = {
r:10,
//我定义个一个外层函数
oo(){
var ii = function(){
console.log(this.r);
}
ii();
}
}
circle2.oo();
</script></body> </html> 我们使用绑定的形式可以解决这个问题
这样我们在控制台就可以看到不在是undefined的找不到了 箭头函数中的this： 在箭头函数中，没有自己的this，他的this是继承而来的；默认的指向在定义他时的对象（宿主对象），而不是执行时的对象，定义他的时候，可能环境时window；箭头函数可以方便的让我们在setTimeout，setInterval中方便的使用this 箭头函数中this指向的固定化，并不是因为箭头函数的内部有this绑定机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this 那我们可以改变一下我们的代码看看
数组的新方法： Map 映射 Reduce 汇总 Filter 过滤器 forEach 循环（迭代） Some() 一个为true就会返回true every() 必须所有都为true才会返回true <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>array</title> </head> <body> <script> let arr = [1,2,3,4,5,6]; //下面我们使用数组的map方法做测试 /* let narr = arr.map(function (item) { console.log(item); return itemitem; }) console.log(narr);/ //从这个例子我们可以看出来，数组的map方法会把数组的值， // 传入map中的回到函数的参数中，有几个传入几个 //使用箭头函数写法更简单 /* let narr = arr.map(item => itemitem); console.log(narr);/
//使用reduce方法
//通常使用reduce进行总和
let rarr = arr.reduce((a,b,c)=>{
console.log(a,b,c);
return a+b;
})
console.log(rarr);
//filter过滤器，返回真假，真的留下，假的过滤掉
let farr = arr.filter(item => item%3 == 0);
console.log(farr);
//forEach用来遍历数组
arr.forEach(value => {
console.log(value);
})
//也可以遍历两个，我们把下标也遍历一下
arr.forEach((value,index) =>{
console.log(value,index);
})
//some()方法，参数条件中，只要又一个判断为真，全部返回真
let sarr = arr.some(item => item>5);
console.log(sarr);
//every()方法，只要又一个为假，都是假的
let earr = arr.every(item =>item>2);
console.log(earr);
</script></body> </html> 模板字符串和字符串中新增的方法： StartsWith 以什么什么开始 endsWith 以什么什么结束 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>string</title> </head> <body> <script> //startsWith //endsWith let url="http://www.baidu.com"; if(url.startsWith("http://")){ console.log("普通的url"); }else if(url.startsWith("https://")){ console.log("加密的url"); }else if(url.startsWith("ftp://")){ console.log("文件传输协议"); }
let str = "logo.jpg";
if(str.endsWith(",jpg")){
console.log("这是图片");
}else if (str.endsWith(".txt")){
console.log("这是个文本");
}
//模板字符串
let name = "wyh";
let modestr ='<div>abd</div>' +
'<div>abd</div>' +
'<div>abd</div>';
console.log(modestr);
//另一种解决方式
let modestr1 ='<div>abd</div>\
<div>'+name+'</div>\
<div>abd</div>';
console.log(modestr1);
//es6中使用反引号和$ 符号
let modestr2 =`<div>abd</div>
<div>${name}</div>
<div>${name}</div>`;
console.log(modestr2);</script> </body> </html> 函数的参数三点运算符号： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dot</title> </head> <body> <script> let arr1 = [1,2,3,4]; let arr2 = [5,6,7,8];
let narr = [...arr1,...arr2];
console.log(narr);
//通过打印的例子我们看到，...代表的是把上面的数组展开，复制过来了
//我们在函数参数中这样用
console.log("=======================================");
function demo(...args) {
console.log(args);
}
demo(1,2,3,4,5,6,7);//调用的时候我们的参数随便存
console.log("=======================================");
//我们也可以把他放在最后使用
function f(a, b, ...c) {
console.log(a,b,c);
}
f(1,2,3,4,5,6);</script> </body> </html> 解构赋值： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jgfz</title> </head> <body> <script> //这个知识点是在讲什么？下面我们来写一段代码 let arr = [1,2,3,]; //这时候我们看一下 /* let a = arr[0]; let b = arr[1]; let c = arr[2];*/ //我们使用解构赋值的方式,这种赋值的方式简单，但是要求左右两边对应 let [a,b,c] = [1,2,3]; console.log(a,b,c);
let {e,f,g} = {"e":1,f:2,g:4};
console.log(e,f,g);</script> </body> </html> 注意：
- 左右两边结构必须一样
- 右边必须有值
- 声明和赋值不能分开
腾讯云开发者
