es6的一些知识点
前言:es6(ECMAscript2015)标准
let、const、var的一些区别
let、const 块级作用域、全局作用域、函数作用域
var 全局作用域、函数作用域
变量提升的问题:
var : true
let、const : false
例子:
console.log(a);//undefind
let a=1;
块级作用域:例如在一个函数,for循环。。。区块之内!
const 常量,值不可更改。
let、var 变量,值可以更改
严格模式
消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
“use strict”
模板字符串(Template Strings)
规定了一种新的string方法可用 `` 斜引号来创建字符串的代码块
绑定变量用${}来绑定。
let name="xiaosan";
let age=22;
let home="china"
let str1=`she's name ${name},
she age ${age},
she homes's ${home}`
alert(str1)
字符串内可直接换行
let str1=`she's name ${name},
she age ${age},
she homes's ${home}`
alert(str1)
标签模板字符串。
function tag(strings,...args){ //...扩展运算符
//console.log(strings);
//console.log(args);
let str='';
for(var i=0,l=strings.length-1;i<l;i++){
str=str+strings[i]+args[i];
}
str+=strings[l];
return str
}
let name1="xiaomi";
let age1=23;
let str3=tag`
she's nam1 ${name1}
she age ${age1}
`
console.log(str3)
增强的对象字面量(自变量)
对象属性能够简写;
对象方法可以简写function关键字
let name="张三";
let age=22;
let zhangshan={
name,
age,
runing(){
console.log("我会跑")
}
}
对象属性名可以书写自动计算形式
原型继承__proto__
let people={
eat(){
console.log("我会吃")
},
speak(){
console.log("我会说话")
},
feeling(){
console.log("我有感情")
}
}
let caowei={
name:name,
__proto__:people,//设置对象原型,用来继承
study(){
console.log("I have sutying ok!")
}
}
console.log("my name's"+caowei.name)
caowei.study();
caowei.eat();
caowei.speak();
caowei.feeling();
console.log(caowei)
解构赋值
es6允许我们按照一定结构提取数组与对象里的值,赋给变量
函数的解构赋值
说的明白一点解构赋值它的类型就是数组跟对象
例子
//数组
let [a,,c]=[1,2,3];
console.log(a,c)
//对象
let obj={
x:1,
y:2
}
let {x,y}=obj
console.log(x,y)//1 2
//函数操作
//函数传对象
function fn(person){
let name=person.name;
let age =person.age;
console.log(name,age)
}
let aa={name:"xiaosan",age:18}
fn(aa)*/
/* function fn({uname:name,age,sex="女人"}){
console.log(name,age,sex)
}
let bb={uname:"xiaosan",age:18}
fn(bb)*/
//es5 函数传数组
/*function fn(Arr){
let x=Arr[0];
let y=Arr[1];
let z=Arr[2];
console.log(x,y,z)
}*/
/*function fn([x,y,z,d=22]){
console.log(x,y,z,d)
}
let arr=[9,5,8]
fn(arr)
//字符串解构赋值
let str="123456";
let [a,b,c,d,e,f,g=50]=str;
console.log(a,b,c,d,e,f,g)
扩展运算符
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
操作数组操作对象(自变量对象ps:兼容问题)
//展开数组
let arr=[1,2,3]
let arr2=arr;
// console.log(arr2);
document.write(arr2) //1,2,3
let arr3=[...arr] //也可以看做是拷贝
console.log(arr3)//( 3) [1 2 3]
//展开对象
let obj={
name:"zhangsan",
age:19,
}
let obj1={
...obj,
sex:"man"
}
console.log(obj1) //报错 现在浏览器不支持但是方法确实可行可以采用babel编译一下使用
//展开函数
function myFunction(x, y, z) {
console.log(x,y,z)//0 1 2
}
var args = [0, 1, 2];
myFunction(...args);
function myFunc(a, b, ...rest) {
console.log(rest.length);//3
}
myFunc(1,2,3,4,5); // => 3
function myFunction(x, y, z,...l) {
console.log(x,y,z,l)//0 1 2
}
var args = [0, 1, 2,4,5,6];//0 1 2 (3) [4,5,6]
myFunction(...args);
//数组 与 扩展运算符结合
let c = ["abc",11,12]
let a = [1, 3, 4, 5,c],
b = [...a, 6, 7, 8, 9]
// b=a;
console.log(b)//(8) [1,2,3,4,5,6,7,8,9];
箭头函数=>
ES6允许使用“箭头”(=>)定义函数
var f = v => v
上边的函数可以书写为
var f = function(v) {
return v;
};
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
默认参数,剩余参数,扩展参数
参数的默认参数,剩余参数,拓展参数
//默认参数
let sayHello=(name,age=25)=>{
let str=`my name's ${name},age's ${age} old`
//console.log(name,age)
console.log(str)//my name's chenxu,age's 25 old
}
sayHello("chenxu")
//扩展参数
let sum=(a,b,c)=>{
console.log(a,b,c)
}
let arr=[4,5] //扩展
sum(1,...arr)
//剩余参数
let sum1=(a,b,...c)=>{
console.log(c);
console.log(a,b)
> 引用文字
; //剩余
}
sum1(1,2,3,4,5,7,9)
*/
let sum2=(a,b,...c)=>{
console.log(c);
var result=c.reduce((a,b)=>a+b);
console.log(result);
console.log(a,b);
}
sum2(1,2,3,4,5,7,9)