ES6语法

169 阅读2分钟

###ES6的三种声明方式: var:它是variable的简写,可以理解成变量的意思。用来升级全局变量 let:它在英文中是“让”的意思,也可以理解为一种声明的意思。做局部声明 const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量。

###变量的解构赋值:分数组,对象和字符串的结构赋值 数组: let [a,b,c]=[1,2,3]; let [a,[b,c],d]=[1,[2,3],4]; 按照位置的对象关系对变量赋值,等号左边和等号右边的形式要统一 可以从数组中提取值,可以直接取到a(打印出来) 解构赋值是允许使用默认值 let [a,b="JSPang"]=['技术胖'] console.log(a+b); //控制台显示“技术胖JSPang” 对象: 如果在解构之前就定义了变量,这时候你再解构会出现问题。这时候只要在解构的语句外边加一个圆括号就可以了。 let foo; ({foo} ={foo:'JSPang'}); console.log(foo); //控制台输出jspang 对象的解构赋值与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。 字符串: const [a,b,c,d,e,f]="JSPang"; console.log(a); //J console.log(b); //S console.log(c); //P

###函数参数指定默认值 没有实参才用默认值,有实参就用实参 function test({x=1, y=x}){ return x+y } console.log(test({})); //2 console.log(test({x:10})); //20 console.log(test({y:10})); //11 console.log(test({x:10, y:20})); //30

###扩展运算符 当编写一个函数方法时,我们允许它传入的参数是不确定的。 function jspang(...arg){ console.log(arg[0]); console.log(arg[1]); console.log(arg[2]); console.log(arg[3]); } jspang(1,2,3); 这时我们看到控制台输出了 1,2,3,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。

###字符串模版 字符串拼接,取”+“的方法,类似于vue里的插值,${bianliangming}代替 注意,外面需要用``包裹,声明模板的语法 ES6直接用includes判断是否存在某些值,以前用indexOf查找然后比较,这里直接返回一个布尔结果 let jspang='技术胖'; let blog = '我是你的老朋友技术胖。我们来学字符串模版。'; console.log (blog.includes(jspang)); 判断开头是否存在(真假):blog.startsWith(jspang); 判断结尾是否存在(真假):blog.endsWith(jspang);注意加s 复制字符串:str.repeat(n) let title="这是一篇优秀作文!"; let titleall = title.repeat(3).slice(0,15); console.log(titleall) //复制3次插入,截取前15个

###数字 判断是不是数字:Number.isFinite( xx ),是数字不论是浮点型还是整形都会返回true let a= 11/4; console.log(Number.isFinite(a));//true console.log(Number.isFinite('jspang'));//false console.log(Number.isFinite(NaN));//false console.log(Number.isFinite(undefined));//false Number.isNaN()来进行验证结果不是一个非数 console.log(Number.isNaN(NaN)); //true 判断是否为整数Number.isInteger(xx) 转换成整数Number.parseInt(xxx) 转换成浮点数Number.parseFloat(xxx) 最大安全整数consolec .log(Number.MAX_SAFE_INTEGER); 相当于Math.pow(2,53)-1 最小安全整数Number.MIN_SAFE_INTEGER 判断是否是安全整数isSafeInteger( ) 判断是不是一个数字isNaN(a),返回布尔 判断数据类型,和Number做对比,typeof(a) //Number

###Symbol的用法 作为常量看似相同,但实际包含着不同的哈希,是不同的值。 const a = Symbol("zyw"); const b = Symbol("zyw"); console.log(a==b); //false

###进制转换 把字符串转成数字,两种方法 let a="25"; let p=parseInt(a); let n=Number(a); 把数字转成字符串 let a=20; let temp=a.toString(); 如果需要进制转换,后面加参数即可 let a=25; let temp=a.toString(2); //转换成2进制11001 let temp=a.toString(10); //转换成10进制25,不传参默认就是10进制 let temp=a.toString(8); //转换成8进制31

##for of和for in循环 for of,只能遍历数组的值,不能遍历对象 for in,可以遍历数组的下标,数组的值,或者对象的键值对 let arr = [1, 2, 3, 4, 5]; for (let i of arr) { console.log(i); // 1, 2, 3, 4, 5 } 下面是for in的例子,既可以遍历数组,也可以遍历对象 let arr = ["a", "b", "c", "d", "e"]; for (let i in arr) { console.log(i); // 0,1,2,3,4 console.log(arr[i]); //a,b,c,d,e } for in循环对象 let obj = {"name":"zyw","age":32,"job":"web"}; for (let i in obj) { console.log(i); // name,age,job console.log(obj[i]); //zyw,32,web }

###对象定义,对象简写

let title = "ES6从入门到学会";
let price = 25;
let publish = "小马出版社";
let book = {
    title, price, publish,
    toString(){
        console.log(`<<${title}>> 售价 ${price}元。`);   //book的新增方法
    }
};
book['lang'] = "简体中文";  //新增一个lang属性

console.log(book);
//{title: "ES6从入门到学会", price: 25, publish: "小马出版社", toString: ƒ, lang: "简体中文"}

console.log(book.toString());  
//<<ES6从入门到学会>> 售价 25元。

判断两个对象是不是相等
console.log(Object.is("aa","aa"),"a"==="a");  //true  true
console.log(Object.is([],[]),[]===[]);  //false false
Object.is()可以判断两个值是不是完全相等
原始数据类型,数值相等
引用数据类型,引用地址不同,故而不完全相等

Object.assign浅拷贝合并两个对象
let temp = Object.assign({a:"aa"},{b:"bb"});
console.log(temp);   //{a: "aa", b: "bb"}
Array
let arr=Array.of(1,2,3,4,5);
console.log(arr);  //[1, 2, 3, 4, 5]
 Array.of(),把一组数值转换成数组

let  str = 'hello';
console.log(Array.from(str));//["h", "e", "l", "l", "o"]
Array.from(),把一组数值转换成数组