1.LET和CONST
JS语言var的缺点:
- 可重复声明
- 无法限制修改
- 没有块级作用域
if(true){
var a = 12;
}
alert(a); //12
ES6:
变量let
, 常量const
- 都不能重复声明
- 都有块级作用域
块级作用域示例
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<script>
window.onload= function(){
var aBtn = document.getElementsByTagName('input');
for (let i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function(){
alert(i)
}
}
}
</script>
2.箭头函数
- 如果只有一个参数,()可以省
- 如果只有一个
return
,{}可以省
window.onload = () => {
alert(1);
}
let show = () => {
alert(1);
}
show();
(),return 省略后
let show = function(a){
return a+1;
}
alert(show(2));
//箭头函数改写后
let show = a => a+1;
alert(show(2));
3.函数-参数
参数扩展/展开
作用:
- 收集剩余的参数
function func(a, b, ...args){}
...args
必须放在参数的最后
function show(a, b, ...args){
alert(a);
alert(b);
alert(args);
}
show(12,34,55,35,20);
//12
//34
//55,35,20
- 展开一个数组,就和直接把数组的内容写在这一样
展开后与
show()
的参数想对应
let arr = [1,2,3]
show(...arr)
function show (a,b,c) {
alert(a)
alert(b)
alert(c)
}
数组展开合并
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr4 = [...arr1, ...arr2]
alert(arr4)
相当于把参数展开传入
show()
中
function show(...args){
fn(...args)
}
function fn(a,b){
alert(a+b);
}
show(12,5) //17
默认参数
直接括号内赋值即可
function show(a,b=5,c=12){
console.log(a,b,c)
}
show(99,19) //99 19 12
4.解构赋值
- 左右两边结构必须一样
- 右边必须是个东西(语法正确)
- 声明和赋值不能分开(必须在一句话里面完成)
数组
let arr = [1,2,3]
let [a,b,c] = [1,2,3]
console.log(a, b, c) //1,2,3
json
let {a,c,d} = {a:12, c:15, d:23}
console.log(a, c, d) //12 15 23
混合结构
let [{a,b},[n1,n2,n3],num,str] = [{a:12, b:5},[12, 5, 8], 8, "scsee"];
console.log(a,b,n1,n2,n3,num,str) //12 5 12 5 8 8 "scsee"
调整粒度
let [json,arr,num,str] = [{a:12, b:5},[12, 5, 8], 8, "scsee"];
console.log(json,arr,num,str) //{a: 12, b: 5} [12, 5, 8] 8 "scsee"
5.数组
- map ———— 映射:一个对一个,进去多少返回多少
let arr = [12,5,8]
let result = arr.map(item => item*2);
alert(result); //24,10,16
为成绩分类
let score = [19,85,99,25,90]
let result = score.map(item => item >= 60 ? "及格" : "不及格");
console.log(score) //[19, 85, 99, 25, 90]
console.log(result) //["不及格", "及格", "及格", "不及格", "及格"]
- reduce ———— 汇总:一堆对应一个
三个参数为(中间结果,下一项,次数索引),第一次执行时由于没有前一次的计算,那么中间结果为 arr[0] ,第二次执行时中间结果即为上一次中间结果 arr[0] + 下一项 69 的和为 81,执行到最后一次时,没有下一项,那么当前的中间结果即为 result 的值。
let arr = [12, 69, 180, 8763]
let result = arr.reduce(function(tmp,item,index){
alert(tmp+ ',' +item+ ','+index)
return tmp+item;
})
alert(result) //9024
- filter ———— 过滤器
过滤被3整除的数,参数代表要过滤的项
let arr = [12,5,7,99,27,36,75,11,23]
let result = arr.filter(item => item % 3 == 0)
console.log(result) //[12, 99, 27, 36, 75]
- forEach ———— 循环(迭代)
循环输出数组项
let arr = [23,45,323,12];
arr.forEach((item,index)=>{
console.log(index + ':' + item)
//0:23
//1:45
//2:323
//3:12
})
6.字符串
- 多了两个新方法
startsWith
判断网址类型
var site = 'https://www.baidu.com';
if(site.startsWith('http://')){
alert('普通网址');
}else if(site.startsWith('https://')){
alert('加密网址');
}else if(site.startsWith('git://')){
alert('git地址');
}else if(site.startsWith('svn://')){
alert('svn仓库');
}
endsWith
判断文件后缀名
let str = "1.txt"
if(str.endsWith('.txt')){
alert('文本文件')
}else if(str.endsWith('.jpg')){
alert('jpg图片')
}
- 字符串模板
使用一对反单引号 ``, 可以折行, 用 ${} 在其中插值,
let a = 12;
let str = `a${a}bc`;
alert(str) //a12bc
7.面向对象
- 新增class关键字、构造器和类分开, class 里面直接加方法
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
//class 没有冒号和 function
showName(){
alert(this.name)
}
showPass(){
alert(this.pass)
}
}
var ul = new User('aj','233')
ul.showName();
ul.showPass();
- 继承
原版的继承
function User(name,pass){
this.name = name;
this.pass = pass;
}
User.prototype.showName = function(){
alert(this.name)
}
User.prototype.showPass = function(){
alert(this.pass)
}
var ul = new User('aj','233')
ul.showName();
ul.showPass();
//——————————继承——————
function VipUser(name,pass,level){
User.call(this,name,pass);
this.level = level;
}
VipUser.prototype = new User();
VipUser.prototype.costructor = VipUser;
VipUser.prototype.showLevel = function() {
alert(this.level);
};
var v1 = new VipUser('aaa','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();
ES6的继承
class User {
constructor(name, pass) {
this.name = name;
this.pass = pass;
}
//class 没有冒号和 function
showName() {
alert(this.name)
}
showPass() {
alert(this.pass)
}
}
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass);
this.level = level;
}
showLevel(){
alert(this.level);
}
}
var v1 = new VipUser('aaa', '123456', 3);
v1.showName();
v1.showPass();
v1.showLevel();
- 面向对象应用——React
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.34/browser.js"></script>
<title>Document</title>
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li>
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
let aItems = [];
for(let i = 0; i<this.props.arr.length;i++){
aItems.push(<Item str={this.props.arr[i]}></Item>);
}
//let aItems = this.props.arr.map(a=><Item str={a}></Item>);
return <ul>
{aItems}
</ul>
}
}
window.onload = function(){
let oDiv = document.getElementById('div1');
ReactDOM.render(
<List arr= {['abc','erw','sdfasdf']}></List>,
oDiv
);
}
</script>
8.json
对象转JSON
let json = {a:12, b:5}
let str = "www.baidu.com" + JSON.stringify(json);
console.log(str) //www.baidu.com{"a":12,"b":5}
JSON转对象
let str2 = '{"a":12,"b":5,"c":"abc"}';
let json2 = JSON.parse(str2);
console.log(json2); //{a: 12, b: 5, c: "abc"}
简写,名字和值一样时,保留一个就好,有方法时
:function
一块删
let a = 12;
let b = 5;
let json = {a,b,c:55}
console.log(json) //{a: 12, b: 5, c: 55}
Promise
- 异步:操作之间没啥关系,同时进行多个操作
- 代码更复杂
- 同步:同时只能做一件事
- 代码更简单
特点:用同步一样的方式,来书写异步代码
generator-生成器
- 普通函数 —— 一路到底
- generator —— 中间能停
function *show(){
alert('a')
yield;
alert('b')
}
let genObj = show();
genObj.next();
genObj.next();
本质上generator 是切分成了许多小函数
yield
- 传参
function *show(num1,num2){
alert(`${num1},${num2}`)
alert('a'); //a
let a = yield;
alert('b'); //b
alert(a); //5
}
//第一个 yield 之前直接在函数中传值即可
let gen = show(99,88);
// 第一个 next 执行的是函数开始到第一个yield之间的代码。
// 第一个 next() 内传的参数是废的。
gen.next(12);
// 第二个 next 执行的是第一个 yeild 开始之后的代码。
// 因此 5 会传给 a 。
gen.next(5);
- 返回值
function *show(num1,num2){
alert('a')
yield 12;
alert('b')
return 55;
}
let gen = show();
let res1 = gen.next();
console.log(res1) //{value: 12, done: false}
let res2 = gen.next();
console.log(res2) //{value: 55, done: true}
形象一点
function * 炒菜(菜市场买回来的菜) {
洗菜 -> 洗好的菜
let 干净的菜 = yield 洗好的菜
干净的菜 -> 切 -> 丝
let 切好的菜 = yield 丝
切好的菜 -> 炒 -> 熟菜
return 熟菜
}