ES6，方法及笔记

最新推荐文章于 2022-10-22 22:01:18 发布

Credere nel destino

最新推荐文章于 2022-10-22 22:01:18 发布

阅读量147

点赞数 1

分类专栏： ES6 文章标签： ES6

本文链接：https://blog.csdn.net/weixin_45021068/article/details/103155336

版权

ES6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ES6

ES6的全称叫做ECMAScript或者ES2015
因为它是2015年出来的排行老六，所以怎么叫都是对的

为什么要用ES6

语言都在更新换代，JDK8、PHP7、Pychon3.7
支持更多语法，使用更方便
1. 不用不知道，一用吓一跳，因为很方便
增强的工程性
1. 写更大工程更方便
  ·

变量

var可以重复声明，
1） var 可以重复定义
2） let 不能重复定义
3） const 不能重复定义
控制修改
1） var GIT_HOST=‘github.com’
2） if(GIT_HOTS='git ')
块级作用域
1）你不用他的时候，他没什么，你用他的时候他能给你带来很多的便利
新增的两个声明方法
let 不可重复声明，块级作用域
const 常量（不能变量）

let 优点：防止重复声明,变量
const 优点：防止重复声明，常量
块级作用域（1）【for循环里面的var】

<script>
      window.onload=function(){
	let oBtn=document.getElementsByTagName('input');
	for(var i=0;i<oBtn.length;i++){
	(function (i){
	       oBtn[i].onclick=function(){
		alert(i);
		}   
	    })(i);
	}
}
</script>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>

块级作用域（2）【for循环里面的let】

<script>
      window.onload=function(){
	let oBtn=document.getElementsByTagName('input');
	for(let i=0;i<oBtn.length;i++){
	       oBtn[i].onclick=function(){
		alert(i);
		} 
	}
}
</script>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>

有什么区别呢！

ES5之前的var的作用域是函数级的

就是我在函数内任意一个地方定义一个i都是等价的，不用管在循环里面还是在循环外面，只要在函数里面定义了，他就有这个东西

ES6的let的作用域是块级的

什么叫块，花括号就是代码块{}

代码块

//1.
if(){

}
//2.
for（）{

}
//3.  
{

}
//4. 
{
	var a=1；
}
alert（a）
//输出结果“1”；
{
	let a=1；
}
alert（a）；
//输出结果“报错”
因为let变量只在块级内使用
只要有个for他就是一个独立的变量

var、let、const、的好处和坏处

var列举了三大罪状，
1）可以重复声明，这个不行，越严格越好，不然的话出错都不会告诉你
2）不能限制修改，设想该谁就改了，这个不行
3）函数级的作用域，要一直用function一直包来包去，很麻烦
let 呢从根本上解决了这个问题
1）不能重复声明，看似麻烦了，其实是在救你，
2）变量，如果你要用常量呢，你就要用const
3）块级的，上面说了块级的作用
const 也是从根本上解决了这个问题
1）不能重复声明，看似麻烦了，其实是在救你，
2）常量
3）块级的，上面说了块级的作用

因为let变量只在块级内使用
只要有个for他就是一个独立的变量

闭包就是咱们这个js的变量，它里面没有块级作用域的情况下，他临时解决的东西

变量
1. var 可以重复声明，不能限制修改，函数及
2. let 不能重复声明，变量，块级
3. const 不能重读声明，常量，块级

解构赋值

json={a:12,b:5}；
let {a,b}=json;


arr=[12,5,8]
let [a,b,c]=arr;

//原来呢是这样写的
$.ajax('xxx')=>{
code:xx,
data:xx,
msg:xx,
....
}
//用解构赋值是这样写的
let {code,data}=$.ajax{'111','222'};

两边结构必须一样

let {a,b}={a:12,b:5}

右边必须是个东西

//json
let {a,b}={a:12,b:5};
//数组
let [a,b]=[5,8];
console.log(a,b)

赋值和解构同时完成必须同时完成。

	let {a,b}=[12,5];
	let {a,b};
	{a,b}={a:12,b:5};

函数

箭头函数和this


let arr=[12,85,65,94,42,32,8]
//普通函数
//function  ABC（参数）{}

//箭头函数
//(参数)=>{}

//普通函数的使用
arr.sotr(function(n1,n2){
return n1-n2;
)};


//箭头函数的使用
arr.sort((n1,n2)=>{return n1-n2;});
arr.sort((n1,n2)=>n1-n2);
alert(arr);

//sort()排序；


//举个列子，只有一个参数和一个语句
//正常写法
function add(n){
	return n+5;
}
function show(n,fn){
	alert(fn(n));
}
show(12，add);

//简单写法
function show(n,fn){
	alert(fn(n));
};
show(12,n=>n+5);

箭头函数只是个简写

简写的注意事项
1. 如果有且仅有一个参数，（）可以不写
2. 如果有且仅有一语句，并且是return，{}可以不写
参数扩展：
1. …arg 展开参数
2. …是用来收集剩余的参数，必须的放在最后，不管后面是不是空的，都不影响使用，前面如果没东西，则是未定义，如果数组里面有东西，则显示，如果没有，则显示空数组
特殊函数：
1. Generator（中间可以暂停）
2. 普通函数（一直执行到头）

原生对象扩展

Array扩展：

Map 映射一个对一个

列： // let score = [19,85,99,25,90];
// let result = score.map(item=>item>=60?'及格':'不及格');

Reduce 汇总一堆出来一个

列：// let arr =[12,69,180,5500];
// let result = arr.reduce(function(tmp,item,index){
// return tmp+item;
// })

Filter 过滤

列：	let arr = [12,5,6,79,21,11,75];
		let result = arr.filter(item=>item%3==0);

forEach 遍历，选代
普通函数指向window
箭头函数在函数里面指向函数里面的对象
在函数外指向window

参数扩展、数组展开

… 参数展开
1. 收集
2. 展开
… 是用来收集剩余的参数，必须的放在最后
1. 不管后面是不是空的，都不影响使用，前面如果没东西，则是未定义，如果数组里面有东西，则显示，如果没有，则显示空数组
拼接

	let arr1=【123,231,546】；
	let arr=【123,231,546】；
	let arr=【...arr1，...arr2】；
	coonsole.log（arr）

展开json

	let json={a:12,b:5}
	let json2={
	...json,
	c:999
	};
	console.log(json2)

map、映射 --对应

	//进去多少个出来多少个
	[12,32,99,100]=>[不及格，不及格，及格，及格];

	//普通函数
	let arr=[68,53,12,98,65];
	let arr2=arr.map(function (item){
		if(item>=60){
		     return '及格';
		}else{
		     return '不及格';
		}
    });
	console.log(arr);
	console.log(arr2);


	//箭头函数
	let arr=[68,53,12,98,65];
	let arr2=arr.map(item=>item=60?'及格':'不及格')
	console.log(arr);
	console.log(arr2);

reduce 不管进去几个，只会出来一个

	//总数
    let arr=[68,53,12,98,65];
    let arr2=arr.reduce(function (tmp,item,index){
        return tmp+item;
    });
    console.log(arr);
    console.log(arr2);


	//平均数
	let arr=[68,53,12,98,65];
    let arr2=arr.reduce(function (tmp,item,index){
        if(index==arr.length-1){
            return (tmp+item)/arr.length;
        }else{
            return tmp+item;
        }
    });
    console.log(arr);
    console.log(arr2);

filter 过滤

	//偶数
    let arr=[68,53,12,98,65,83,16];
    let arr2=arr.filter(item=>{
        if(item%2==1){
            return false;
        }else{
            return true;
        }
    })
    console.log(arr);
    console.log(arr2);


	//箭头函数    偶数
    let arr=[68,53,12,98,65,83,16];
    // let arr2=arr.filter(item=>{
    //     if(item%2==1){
    //         return false;
    //     }else{
    //         return true;
    //     }
    // })
    let arr2=arr.filter(item=>item%2==0);
    console.log(arr);
    console.log(arr2);

forEach 遍历

	JSON.stringify({a:12,b:5})=>`{"a":12,"b":5}`
	//json的写法名字必须要写双引号，字符串也一样
	//json的标准写法
	let json={"a":12,"b":5,"name":''blue"}
	JSON对象
	//stringifg   转字符串
	//parse   	解析/序列化（要加引号，序列化）

	//遍历  字符串连接
    let arr=[68,53,12,98,65,83,16];
        arr.forEach((item,index)=>{
            console.log('第'+index+'个：'+item);
        })
	//遍历   字符串模板
    let arr=[68,53,12,98,65,83,16];
        arr.forEach((item,index)=>{
            // console.log('第'+index+'个：'+item);
            console.log(`第${index}个:${item}`);
            
        })

JSON

序列化

	JSON.stringify({a:12,b:5})   ====    '{"a":12,"b:5"}'


	let json={a:12,b:5,name:'blue'};
	console.log(JSON.stringify(json))

解序列化

	JSON.parse('{"a":12,"b:5"}')   ====    {a:12,b:5}


	let str='{"a":12,"b":5,"name":"blue"}'
	let json=JSON.parse(str);
	console.log(json)

babel.js编译

方法1：引入JS文件

第一种方法，在线编译，
通过引入一个babel的js文件，在客户端那边来完成编译
但是，他会降低代码的性能，不认可低版本的编译
解决方法，用第二种

在线
1. 引入 browser.js
  注：browser.js就是babel下载下来的文件
2. 在< script >里面引入type=“text/babel”

方法2：编译JS文件

安装Node.js、初始化项目

        cnpm init -y

安装babel-cli

        cnpm i @babel/core @babel/cli @babel/preset-env -D
        cnpm i @babel/polyfill -S

添加执行脚本

        "script":{
            "build":"babel src -d dest"
        }

添加 .babelrc 配置文件

        {
            "presets":["@babel/presets-env"]
        }

执行编译

        cnpm run build

Credere nel destino

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6，方法及笔记

ES6ES6的全称叫做ECMAScript或者ES2015因为它是2015年出来的排行老六，所以怎么叫都是对的为什么要用ES6语言都在更新换代，JDK8、PHP7、Pychon3.7支持更多语法，使用更方便不用不知道，一用吓一跳，因为很方便增强的工程性写更大工程更方便·变量var可以重复声明，1） var 可以重复定义2） let 不能重复定义3） ...
复制链接

扫一扫