javascript中的部分ECMA6写法（ES6）

javascript中的部分ECMA6写法（ES6）

定义变量的新方法

let定义变量

let i = 10；
console.log(i)//输出10

值得一提的是let定义的变量有独立的块作用域 它只在块作用域中有效

{
let i = 10;
}
console.log(i);//i is not defined

const定义变量

const i = 10;
i = 20;

const定义的变量不可以改变值

let i = 10;
i = 2;
console.log(i);//报错

const定义的变量也有独立的块作用域 它只在块作用域中有效

{
const i = 10;
}
console.log(i);//i is not defined

箭头函数

用来该写函数(简化)

let fn = function(){
	console.log(123)
}
//改写
let fn = ()=>{
console.log(123)
}
//带参数的写法
let fn = (a,b)=>{
console.log(a,b)
}
//只有一个形参可以省略括号
let fn = a =>{
console.log(a)
}
//如果箭头函数函数块只有一行代码，可省略大括号 并且代码块中的值会被return
let fn = a => a+1;

匿名函数

匿名函数不能独立存在，要么命名，要么赋值给变量、事件

//匿名函数自调用
!function(){//匿名函数前加感叹号
console.log(123)
}()
~function(){//匿名函数前加波浪号
console.log(456)
}()
(function(){//把匿名函数包在小括号里
console.log(456)
})()

解构赋值

解构对象
对象的解构赋值：定义变量+{你要对象里的键}=所在对象
解构赋值并且命名变量：定义变量+{你要对象里的键：命名}=所在对象

let obj={
	name:"张三",
	age:"18"
}
let {name} = obj;//定义变量+{你要对象里的键}=所在对象
let{name:a}=obj;//定义变量+{你要对象里的键：命名}=所在对象
console.log(name)//张三
console.log(a)//张三 

多重解构
定义变量+{你要对象里的对象：二级对象的键}=所在对象
定义变量+{你要对象里的对象：二级对象的键：命名}=所在对象

let obj={
	name:"张三",
	age:18,
	wife:{
		name:"赵四",
		age:"18"
	}
}
let {wife:a}=obj;
console.log(a)//{name: "赵四", age: "18"}
let{wife:{name:b}}=obj
console.log(b)//赵四

解构数组
普通数组解构

let arr = [1,2,3];
let [a] = arr;
console.log(a)//输出1  在数组里拿出第一个值给a
let [a,b] = arr;
console.log(a,b)//输出1 2 arr数组会拿出第二个值给第二个变量b

多维数组解构

let arr = [1,2,3,[4,5,6]]
let [a,b,c,[aa]]=arr;
console.log(aa)//输出4

模板字符串

使用反引号书写 简便不用添加拼接符号 变量用${变量}写入 可换行书写

var name ="张三";
var i=
`
<tr>
	<td>${name}<td>
<tr>
`
console.log(i)//输出字符串中所有的字符 与文本书写一模一样

展开运算符

将一个数组展开传参给一个函数（类似于遍历）

let arr =[1,2,3]
let fn = function(a,b,c){
	console.log(a,b,c)
}
fn(...arr)//输出123  ...arr代表展开数组 传入fn 触发fn

合并运算符

将多个实参合并为一个数组

function fn(...arr){
	console.log(arr);
}
fn(1,2,3)//输出数组[1,2,3]

一些字符串方法

字符串.startsWith(“字符”) 判断字符串是否是某个字符开头
字符串.endsWith(“字符”) 判断字符串是否是某个字符结尾
字符串.includes(“字符”) 判断字符串中是否有某个字符

this关键字

div.onclick=function(){
	console.log(this)//此时的this是div
}

function fn(){
	console.log(this)//此时的this是window
}
setTimeout(function(){
  	console.log(this)//此时的this指向window
}, 1000)
~function(){
	console.log(this)//指向window
}()

总结：
1、普通函数中，this代表window（自调用函数）
2、事件函数中，this代表事件源
3、定时器函数中，this代表window
4、在对象的方法中，方法中的this 指向对象{1，2，方法}

改变this的指向
call方法调用函数

function fn(){
	console.log(this);//此时是window
}
fn.call(1);//输出{1} 改变指向为call因为是call调用的函数

apply方法调用函数

let arr = [10,20]
function fn(a,b){
	console.log(this);//此时是window
	console.log(a+b);
}
fn.apply(1);//输出{1} 改变指向
fn.apply(0,arr)//输出30 apply第二个值可以传参数组或伪数组

伪数组和数组的区别：
伪数组含有一个length属性，并且不能使用数组的方法