Es6语法笔记(部分)
Es6语法笔记(部分)
Es6语法介绍 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box-item{ width:100px; background-color: aquamarine; height: 50px; text-align: center; line-height: 50px; margin: 10px; } #ad{ width: 200px; height: 200px; background-color: bisque; } </style> <body> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div id="ad"></div> <script> //let小demo item = document.getElementsByClassName("box-item"); for (let i = 0; i < item.length; i++) { item[i].onclick=function(){ this.style="background-color:red"; this.innerText="我被点击了" } } // 数组的解构 const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song]=F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song); // 对象的解构 const zhaobs = { name:'赵本山', age:'不详', xiaoping:function(){ console.log("我也可以演小品") } } let {name,age,xiaoping}=zhaobs; console.log(name); console.log(age); console.log(xiaoping); xiaoping(); // es6引入新的声明字符串的方式【``】 // 1.声明 let str = `我是字符串`; console.log(str,typeof str) // 2.内容中可以直接出现换行符 let strTwo = ` <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul>`; // 3.变量拼接 let lovest = '杨幂'; let out = `${lovest}是我最喜欢的演员`; console.log(out) // Es6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 // 这样写更简洁 let namee = '大彭Sir'; let change=function(){ console.log('我贼能吃!!!') } const bi ={ namee,change} console.log(bi) // Es6允许使用箭头(=>)定义函数。 let fn = (a,b) => { return a+b; } let sum = fn(10,20) console.log(sum) // this是静态的.this始终指向函数声明时所在作用域下的this得值 function getName(){ console.log(this.name); } let getName2 = () =>{ console.log(this.name);//无法改变指向 } window.name = '彭Sir' const es = { name:'PengSir' } getName.call(es); getName2.call(es); // 不能作为构造函数实例化对象 // let person = (name,age) =>{ // this.name = name; // this.age = age; // } // let me = new person('xiao',30); // person is not a constructor // console.log(me); // 箭头函数的简写,当型参有且只有一个可以省略括号 let add = n =>{ console.log(n+n) } add(1) // 当代码体只有一条语句的时候可以省略花括号,return必须省略 // 语句执行结果就是函数的返回值 let pow = n =>n*n; console.log(pow(10)); // 箭头函数demo // 需求一:点击div 2s 后颜色变成 粉色 let ad = document.getElementById('ad'); ad.onclick = function(){ setTimeout(()=>{ this.style.background="pink" },2000) } // 需求二:从数组中返回偶数的元素 const arr = [1,6,9,10,100,25]; // 普通方法 // const result = arr.filter(function(item){ // if (item % 2 === 0) { // return true // } else{ // return false; // } // }); // 箭头函数 const result =arr.filter(item=>item%2===0) console.log(result) // 箭头函数适合与this无关的回调。定时器、数组方法的回调 // 箭头函数不适合与this有关的回调。时间回调,对象的方法 </script> </body> </html>
 2022-5-21
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录