<html>
<head>
<title>标题</title>
</head>
<body>
<button>b1</button>
<button>b2</button>
<button>b3</button>
<button>b4</button>
<button>b5</button>
</body>
<script>
// ES6(2015年)为什么新增let和const声明变量的关键字:
// var不好用: 1.var可以重复声明
var a='9'
var a='10'
console.log(a)
// var不好用: 2.没有块级作用域(var 对function才有块级作用域)
if(true){
var a=90
}
(function(i){var a=i})(99)
console.log(a)
var btns=document.getElementsByTagName("button")
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(){
console.log(i)
})
}
// var不好用: 3.var无法限制修改
const b=99
// b=88 //浏览器会报错
//obj声明为复合数据类型
const obj={"name":"hello","age":18}
// obj={}//修改obj的引用会报错
console.log(obj)
obj.name="ss"//修改引用对象的属性就不会报错
console.log(obj)
</script>
</html>
const与let声明的简单变量的存储格式:
复合数据类型的存储方式:
es6箭头函数与普通函数区别(包含this的区别):
<html>
<head>
<title>标题</title>
</head>
<body>
<div id="box"></div>
</body>
<style>
#box{
background:red;
padding: 10px;
display: inline;
}
#box.box{
background: yellowgreen;
}
</style>
<script>
//javascript定义函数
function fun1(x){
return x**2;
}
//javascript定义匿名函数
const fun2=function(x){
return x**2;
}
//es6 新增箭头函数:
//function换成'=>',箭头放在形参和函数体中间
//1.如果没有参数或有多个参数就需要使用()来定义参数列表
//2.如果有一个参数,可以不用()
//3.如果函数体中只有一条语句,就可以不用{}并且会自动加上return
const fun3=x=>x**2;
const fun4=(x1,x2)=>{x1+=1;x2+=2;return x1+x2}
console.log("普通函数 "+fun1(1))
console.log("匿名函数 "+fun2(2))
console.log("箭头函数 "+fun3(3))
// --------------------
//箭头函数在回调函数中很好用
a=[2,1,5,4,3]
a.sort(function(a,b){return a-b}) //等价a.sort()
a.sort((a,b)=>a-b) //使用箭头函数比直接function更简洁
console.log(a)
//箭头函数在返回json对象时,必须在json对象外加()
const fun = id=>({id:id,name:"zhangsang"});
console.log(fun(10).name)
//-----------------------
//普通函数的this:指向它的调用者,如果没有调用者则默认指向window
const fun_this={
fun:function(){
console.log(this)
}
}
fun_this.fun()//该函数中的this是fun_this
// const box=document.getElementById("box")
// box.onclick=function(){
// this.className="box"
// console.log(this.className)
// }
// box.onclick=function(){
// obj=this
// setTimeout(function(){
// //该函数的this指向是window对象
// obj.className="box"
// console.log("-")
// },3000)
// }
//箭头函数的this:指向箭头函数定义时所处的对象,
// 而不是箭头函数使用时所在的对象,默认使用父级的this
// 箭头函数没有自己的this,它的this是继承而来的
const arrow_this={
fun:()=>{console.log(this)}
}
arrow_this.fun()//此处的this指向是window对象非arrow_this对象
const box=document.getElementById("box")
box.onclick=function(){
//这儿的this是box对象
setTimeout(()=>{
//这儿的this继承了它声明所在的父级对象(box)
console.log(this)
this.className="box"
},1000)
}
</script>
</html>
es6数组新增高级用法
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<script>
//数组的新增高级用法 filter(过滤器)、map(映射)、reduce(汇总)
goodsPrice=[10,5,30,20,9]//商品价格数组
//取出价格大于10的商品,filter有几个数组就会回掉几次,
//每次将返回值为true的数组值保存下来
let goodsPrice_10=goodsPrice.filter(price=>price>10)
//此处代码(传统方式)作用相当于以上代码
// let goodsPrice_10=[]
// for(let i of goodsPrice){
// goodsPrice_10.push(i)
// }
console.log(goodsPrice_10)
//将价格大于10的商品打5折,map函数将每个数组中的值处理后返回
let goodsPrice_5=goodsPrice_10.map(price=>0.5*price)
console.log(goodsPrice_5)
//求价格的和
//last第一次的值是0,从第二次开始每次取到的值都是上一次的返回值。price每次从数组中取值
let sumPrice = goodsPrice_5.reduce((last,price)=>last+price,0)
console.log(sumPrice)
//链式调用,一行代码代表上面的过程
console.log(goodsPrice.filter(price=>price>10).map(price=>price*0.5).reduce((last,price)=>last+price,0))
</script>
</html>
map和set
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<script>
//Set是集合类型,与数学中的集合是一致的
let v=new Set()
v.add(1)
v.add(2)
v.add(1)
console.log(v.size)//返回元素的个数
console.log(v)
v.forEach(n=>console.log(n))//遍历集合中的元素
console.log(v.has(1))//集合中是否有1的元素
v.delete(1)//删除集合中为1的元素
v.clear()//全部删除
console.log(v)
//map是存储键值对的
let k=new Map()
k.set("k1",1)//增加一个键值对
console.log(k.get("k1"))
</script>
</html>
字符串中的新方法
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<script>
//字符串中的新方法 startsWith和endsWith
let url="https://www.baidu.com"
if(url.startsWith("https"))
console.log("是以https开头")
else
console.log("不是以https开头")
if(url.endsWith(".com"))
console.log("是以.com结尾")
else
console.log("不是以.com结尾")
//增强版字符串:支持换行并且可以嵌入变量
let str1="es6"
let str2="learn"
console.log(`
<h1>${str1}</h1>-<h2>${str2}</h2>
`)
</script>
</html>
解构赋值与三点运算符
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<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]//数组解构赋值,可替换上方
let{name,age,sex}={name:"zhangsan",age:10,sex:"男"}//json对象的解构赋值
console.log(a,name)
let[{a1,b1},[x,y,z],three,four] = [{a:10,b:20},[1,2,3],8,'hello']
//三点运算符
let coor=[1,2,3]
let coor1=[...coor,0]
function coor2(a,...b){
//a是一个数值,b会是一个列表
console.log(a,b)
}
console.log(coor1)
coor2(0,1,2,3,4)
</script>
</html>
面向对象
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<script>
class Person{
constructor(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
tostring(){
console.log(this.name,this.age,this.sex);
}
}
const p=new Person("张三",19,"男");
p.tostring();
//
class Student extends Person{
constructor(name,age,sex,school){
super(name,age,sex);
this.school=school;
}
tostring(){
super.tostring();
console.log(this.school);
}
}
const s=new Student("小米",16,"男","小学");
s.tostring()
</script>
</html>
json对象新特性
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<style>
</style>
<script>//json对象新应用
const name="张三"
const age=14
const sex="男"
//json对象
console.log({name:name,age:age,sex:sex})//传统这样写太麻烦
console.log({name,age,sex})//es6中变量名的简写,如果key和变量名一样可以这样简写
//方法作为json对象的值
let m={say:function(){console.log("say goodbye.")}}//传统写法
let m1={say(){console.log("say goodbye..")}}//es6中的方法的简写,如果方法名与kdy名一样可简写
console.log(m.say(),m1.say())
//串行化:将json对象转为字符串,这样方便在网络中传输
let x1=JSON.stringify({name,age,sex});
let x2=JSON.parse(x1)//反串行化
console.log(x2.name);
</script>
</html>
模块化编程(一个js文件可按需使用其它js文件中的变量和方法等)
a.js:
let name="小红"
function add(){
return 1+1;
}
class Person{
constructor(name){
this.name=name
}
}
//每个js文件可看成一个模块,模块间是相互独立的
//export让这个对象对外暴露,以便外部的js文件能够使用该js文件中的方法和对象
export {name,add,Person};//json简写
// export {name as name1} 导出也可起别名
b.js:
export let name = "小米"
export function mutex(){
return 9*4;
}
//缺省导出,一个模块中只能有一个export default
//default 导出时不定义名字,而是在导入时起别名
export default function(){
return "hello world."
}
index.js:
//这儿使用的是解构赋值
import {name,add} from "./a.js" //将a.js中暴露的对象导入:可按需导入
import {name as name1,Person} from "./b.js" //可将name取别名,因为两个js文件中都有相同的名字会出现变量重复定义
import default_method1 from "./b.js"
add()
p=new Person()
console.log(default_method1())
//-----------------------------------
//整体导入并起别名
// import * as p from "./a.js";
// p.add()
// p.name
// new p.Person()
a.html:
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
<!-- module定义引入的js文件为模块 -->
<script src="index.js" type="module"></script>
</html>