ES6基础
1.什么是ES6?
- ES6是javascript的第六代版本,全称为ECMAScript。
变量声明let与const
- let
- 局部变量,在一对{}内有效
- 不能重复声明
- 不能变量提升
if (true) {
let a = 10;
}
console.log(a)
console.log(a);
let a = 10;
- const
- 声明常量
- 声明是必须赋值
- 赋值完不能被修改(值类型,引用类型可修改)
- 变量名建议大写
const TOKEN = 'ABC';
TOKEN = 123;
const MY_HOST = ['www.baidu.com','www.qq.com'];//引用类型(可修改)数组,对象,null
MY_HOST.push('www.jd.com');
console.log(MY_HOST)
- 引用类型
- 数组Array
- 对象Object
- 空null
- 值类型
- 数字number
- 字符串string
- 布尔boolean
- 未定义undefined
解构
1.什么是解构
把数组或对象解析为单独的变量。
2.数组解构
- 基础解构
//1.基础解构
let a =10;
let b =15;
[b,a] = [a,b];
console.log(a,b);
- 交换变量
//2.交换变量
let arr = [1,2,3,4,5];
let [a,b,c] = arr;
console.log(a,b,c);
- 跳过
//3.跳过
let arr = [1,2,3,4,5];
let [a,,,b]=arr;
console.log(a,b);
- .剩余
//4.剩余
let arr = [1,2,3,4,5];
let [a,...b]=arr;
console.log(a,b);
- 默认值
//5.默认值
let arr = [1,2];
let [a,b,c] = arr;
console.log(a,b,c);
- 解构字符串
//6.解构字符串
let [a,b,c] = '我爱我的祖国';
console.log(b);
- .实现浅拷贝(赋值)
//7.实现浅拷贝(赋值)
var arr =[1,3,5];
var arr1 = [...arr];
arr1[1] = 100;
console.log(arr,arr1);
3.对象解构
基础解构对象:
var obj = {name:'木木',age:19,weight:120};
let {weight,name} = obj;
console.log(weight,name);
剩余:
//剩余
let {name,...rest} = obj;
console.log(name,rest)
默认:
//默认值
let {name,eye=2} = obj;
console.log(name,eye);
复制:
var obj2 = {...obj};//...表示解析
console.log(obj2);
4.ES5新增方法
- trim() 去空格
var str =' 我爱 祖国 ';
console.log(str.trim());
console.log(str.trimLeft());
- repeat() 重复
var str = '我爱你';
console.log(str.repeat(10));
ES6方法
- for of 遍历
var str ='我爱我的祖国';
for(let i of str){
console.log(i)
}
- includes 检测是否包含
var str = '我爱你就像老鼠爱大米';
console.log(str.includes('爱'));
- startsWith 检测开头包含
var str = '我爱你就像老鼠爱大米';
console.log(str.startsWith('我'));
- startsWith 检测结尾包含
var str = '我爱你就像老鼠爱大米';
console.log(str.endsWith('米'));
- 字符串模板
var name = '李四';
var age = 21;
var str =`大家好,我是${name},今年${age}岁了`;
console.log(str);
- 填充 padStart() padEnd(总的位数,不够填充的字符)
var str = "1";//001
str = str.padStart(3,"0");
console.log(str);
先总结到这里,接下来会持续更新,望收藏关注,谢谢。