变量/赋值
1、新增定义变量的关键字let和const，与var的不同点：
(1)、拥有块级作用域；
(2)、不能够重复声明；
2、拥有块级作用域，无需闭包
//var变量定义的方式只有函数作用域，需要使用闭包解决以下问题
var btnArr = document.getElementsByTagName("input");
for(var i=0;i<btnArr.length;i++){
(function(i){
btnArr[i].onclick = function(){
alert(i);
}
})(i)
}
//let存在块级作用域
let btnArr = document.getElementsByTagName("input");
for(let i=0;i<btnArr.length;i++){
(function(i){
btnArr[i].onclick = function(){
alert(i);
}
})
}
3、解构赋值
(1)、左右两边必须一致，右边的是一个合法的东西；
(2)、必须定义和赋值同步完成；
函数
原先的方式
function (参数,参数){
函数体
}
箭头函数
(参数,参数) => {
函数体
}
(1)、有且仅有一个参数时，()可以省略
(2)、如果函数体只有一句话并且是return语句，{}可以省略
默认参数
原先的方式
function show(a,b,c){
b = b||5;
c = c||12;
console.log(a,b,c);
}
show(12);
输出结果是：12,5,12
show(12,54,65)
输出结果是：12,54,65
es6的新的方式
function show(a,b=5,c=12){
console.log(a,b,c);
}
show(12);
输出结果是：12,5,12
show(12,54,65)
输出结果是：12,54,65
参数展开
两个用途：
(1)、可以用于剩余参数的接收，必须放在参数的最后位置，是一个数组
function show(a,b,...args){
console.log(args);
}
show(45,4,50,52,12,5,4)
输出结果是：[50,52,12,5,4]
(2)、可以用于将数组进行展开操作
let arr = [1,2,3];
let arr2 = [45,...arr,897];
console.log(arr2);
输出结果是：[45,1,2,3,897];
数组/json
数组的方法
(1)、map，映射，一一对应的关系,
有返回值，返回的是操作过后的值，如果没有相关的操作，返回的值是undefined
let arr = [1,2,3,4];
let arr1 = arr.map(item => item*2);
console.log(arr1);
输出结果是：[2,4,6,8]
(2)、fliter，过滤筛选，按照设置的条件过滤相关元素,有返回值，满足条件则返回该元素，注意:返回的是原先数组里面满足条件的元素
//筛选数组里面的奇数
let arr = [1,2,3,4,5,6];
let arr1 = arr.filter(item => item%2;)
console.log(arr1);
输出结果是：[1,3,5];
(3)、forEach，遍历，遍历数组进行相关的操作，相当于for循环
(4)、reduce，汇总，进去一堆 => 出来一个,有三个参数，分别是中间变量，当前结果，索引，有返回值，返回值会被当做中间变量的值重新加入计算
//用reduce计算数组的平均值
let arr = [12,5,54,64,6,78,54,56,464,45,11]；
let ave = arr.reduce((temp,item,index) => {
if(index < arr.length-1){
return temp+item;
}else{
return (temp+item)/arr.length;
}
})
console.log(ave);
输出结果是：77.18181818181819
(5)、from，将伪数组(array like)处理成为数组，使其可以使用数组的相关方法进行处理
json的变化
(1)、简写，值和名字一样的可以省略
let [a,b] = [13,2];
let obj = {a,b};
console.log(obj);
输出结果是：{a: 12, b: 3}
(2)、function可以省略
//以前的方式：
let obj = {
a: 1,
b: 3,
show: function(){
console.log(this.a + this.b);
}
}
obj.show();
输出结果是：4
let obj = {
a: 1,
b: 3,
show(){
console.log(this.a + this.b);
}
}
obj.show();
输出结果是：4
字符串
字符串模板(反单引号`)
可以植入变量和任意换行
let json = {
name: "张三",
age: 20
}
console.log(`我的名字是${json.name},我的年龄是${json.age}岁`);
输出结果是：我的名字是张三,我的年龄是20岁
startsWith和endsWith
判断字符串是什么开头或者以什么结尾的，返回的是布尔类型
面向对象
ES6以前的js的面向对象实现
//官方没有特定的实现方式，通过构造函数的形式实现
function Person(name,age){
this.name = name;
this.age = age;
}
//通用的方法放在原型对象的属性上
Person.prototype.showName = function(){
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
//原先的继承实现方式通过call来完成
function Worker(name,age,job){
Person.call(this,name,age);
this.job = job;
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function(){
alert(this.job);
}
let worker = new Worker("张三",20,"工人");
worker.showName();
worker.showAge();
worker.showJob();
ES6新的面向对象的实现方式
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
alert(this.name);
}
showAge(){
alert(this.age);
}
}
//子类继承
class Worker extends Person{
constructor(name,age,job){
//超类
super(name,age);
this.job = job;
}
showJob(){
alert(this.job);
}
}
let worker = new Worker("李四",20,"工人");
worker.showName();
worker.showAge();
worker.showJob();
this指向
(1)、普通函数属于谁调用this指向谁，而箭头函数里面的this指向是由所处的环境所决定的；
(2)、function里面的bind可以指定方法调用时的this指向
网友评论