1. let、const
1.1 var存在的问题
- var有作用域问题（会污染全局作用域）
- var可已重复声明
- var会变量提升预解释
- var不能定义常量
1.2 let、const特性
- let、const不可以重复声明
- let、const不会声明到全局作用域上
- let、const不会预解释变量
- const做常量声明（一般常量名用大写）
1.3 试一试
//1. 作用域
//var
var a = 5;
console.log(window.a); //5
//let、const
let a = 5;
console.log(window.a); //undefined
//有一个问题，let定义的a声明到哪里了呢？欢迎解释（：
//2. 重复声明
//var
var a = 5;
var a = 6;
//let、const
let a = 5;
let a = 6; //Identifier 'a' has already been declared 不能重复声明
//3. 预解释
//var
console.log(a); //undefined 相当于 var a;
var a = 5;
//let const
console.log(a)//Uncaught ReferenceError: a is not defined 语法错误，没有预解释
let a = 5;
//4. 常量
//var
var a = 5;
a = 6;
//const
const a = 5;
a = 6;//Uncaught TypeError: Assignment to constant variable. 语法错误
2.解构
解构是es6新特性，可以对数组对象内容直接解析。
//1.数组解构
let [a1,a2,a3] = [1,2,3]; //a1 = 1; a2 = 2; a3 = 3;
//2.对象解构
let {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8};//n = 'meteor' 可以用“：”的形式修改变量名
//3.复杂解构
let [{age}] = [{age:8,name:'xx'},'深圳',[1,2,3]]; //age = 8 注意对象解构
//4.默认赋值
let {age=5} = {age:8,name:'xx'}; //age=8 如果没有age字段 age=5
//常用函数参数给默认值
//以前
function(){var a = a || 5}
//现在
function(a=5){}
3.字符串
es6中加入了“`”反引号，反引号中${}处理模版字符串。
3.1 反引号
- 更人性的字符串拼接
let name = 'xx';
let age = 9;
let str = `${name}${age}岁了`;
console.log(str); //xx今年岁了
- 使用正则+eval的简单模拟
let name = 'xx';
let age = 9;
let str = "${name}${age}岁了";
str = str.replace(/\$\{([^}]+)\}/g, function ($1) {
return eval(arguments[1]);
})
console.log(str); //xx今年岁了
- 带标签的模版字符
//反引号前使用方法，方法按模版变量把字符串分成两个数组
//第一个为固定值组成的数组
//第二个值为替换变量组成的数组
let name = 'xx';
let age = 9;
function tag(strArr, ...args) {
var str = '';
for (let i = 0; i < args.length; i++) {
str += strArr[i] + args[i]
}
console.log(strArr,args);
//[ '', '今年', '岁了' ] [ 'xx', 9 ]
//
str += strArr[strArr.length - 1];
return str;
}
let str = tag`${name}今年${age}岁了`;
console.log(str);
3.2 incluedes 方法
//判断字符串中是否包含某个字符串
let str = 'woaini';
str.includes('ai'); //true
3.3 endsWith、startsWith 方法
//判断字符串是否以某一个字符串开始或结束
var a = '1AB2345CD';
console.log(a.startsWith('1A')); //true
a.endsWith('cD') //false
4. 函数
4.1 函数参数可赋值，可解构
function({a=5}){}
4.2 箭头函数
- 如果参数只有一个，可以省略小括号
- 如果不写return，可以不写大括号
- 没有arguments变量
- 不改变this指向
//求和
let sum = (a,b)=>a+b;
5. 数组
5.1 数组新方法
- Array.from(); //将类数组转化成数组
- Array.of(); //创建数组
- Array.fill();//填充数组
- Array.reduce();//传入回调适合处理 临近数组元素
- Array.filter();//数组过滤
- Array.find();//查找返回值
- Array.includes();//判断数组是否有某值
5.2 Array.from()
//Array.from();
let arr = Array.from({'0':1,'1':2,length:2});
console.log(arr);//[1,2]
5.3 Array.of()
Array.of(2,3); //[2,3]
5.4 Array.reduce()
[1, 2, 3, 4, 5].reduce((prev, next, index, current) => {
//prev 如果reduce传入第二个参数，prev为第二个参数；否则prev为数组第一个元素 往后累加
//next 如果reduce传入第二个参数，next为第数组第一个元素；否则next为数组第二个元素 依次累加
//index 函数第几次执行1开始
//current当前数组
return prev + next;
})
//reduce方法简单实现
Array.prototype.myReduce = function (cb, pre) {
let prev = pre || this[0];
for (var i = pre ? 0 : 1; i < this.length; i++) {
prev = cb(prev, this[i], i, this);
}
return prev;
}
5.3 Array.filter();
let result = [1,2,3,4,5].filter(function(item){
return item>3;
})
console.log(result);//[4,5]
//filter简单实现
Array.prototype.myFilter = function(cb){
var arr = [];
for(var i=0; i<this.length; i++){
var item = this[i];
if( cb(item) ) arr.push(item);
}
return arr;
}
5.4 Array.find();
let result = [1,1,1,2,3].find(function(item){
return item == 2;
})
console.log(result);//2
6 对象
6.1 如果key和value相等则可以简写
let name = 'xx';
let obj = {name};
6.2 解构
7 Class 类
- Class 定义类
- extends 实现继承
- 支持静态方法
- constructor构造方法
class Parent{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
static fn(){
return 9;
}
}
class Child extends Parent{
constructor(name,age){
super(name);//子类有构造函数必须有super
this.age = age;
}
}
let child = new Child('xingxing',9);
console.log(child.getName());//xingxing
console.log(child.name);//xingxing
console.log( Child.fn() );//9
网友评论