1.变量
使用let声明变量，代替之前的var
使用const关键字声明常量
var可以重复声明变量，这本身感觉就有点瞎搞，因为在其他语言里这根本是不可能存在的，像Java...
let出现之后解决了这个问题，不能重复声明,如果重复声明会报错
Uncaught SyntaxError: Identifier 'a' has already been declared
有了块级作用域：下面是最经典的例子：我们需要分别点击按钮1，2，3，弹出0，1，2，结果却弹出的都是3，为什么呢？因为ES6之前的作用域是函数级的作用域，所以外层循环先结束,此时的i已经变成了3。
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
<script>
var btn = document.querySelectorAll("button");
for(var i=0;i<btn.length;i++){
btn[i].onclick = function () {
alert(i);
}
} // 分别弹出3
</script>
解决办法1：
var btn = document.querySelectorAll("button");
for(var i=0;i<btn.length;i++){
(function(i){
btn[i].onclick = function () {
alert(i);
};
})(i);
}
解决办法2，使用let代替var，代码如下：
let btn = document.querySelectorAll("button");
for(let i=0;i<btn.length;i++){
btn[i].onclick = function () {
alert(i);
}
}
2.箭头函数
箭头函数的出现其实就是为了方便
let ary = [33, 7, 89, 45, 2, 15];
ary.sort((a, b) => {
return a - b;
});
alert(ary); // 2,7,15,33,45,89
如果只有一个参数，()可以省
如果只有一个return，{}也可以省
修正了this的问题，相对好点
let demo = a => a*2;
alert(demo(2)); // 4
3.参数扩展
// 收集参数
function fn(a,b,c,...args){
alert(a);
alert(b);
alert(c);
alert(...args);
}
fn(2,3,4,5,6,7);
let arr = [3,45,6,67];
// 默认参数
function test(a,b=3,c=4){
console.log(a,b,c);
}
test(1,2,5);
4.数组方法
1.map -----映射
let arr = [89,54,75,47,99];
let result = arr.map(function(item){
return item*2;
});
alert(result); // 178,108,150,94,198
2.reduce -----汇总 汇总：一堆对一个
/*reduce ->汇总*/
let arr = [67,56,89,54,90];
let result = arr.reduce(function (temp,item,index) { //求平均数
if(index!==arr.length-1){
return temp+item;
}
return (temp+item)/arr.length;
});
console.log(result); // 71.2
- filter -----过滤器 过滤：一堆 ->剩下的
/*filter过滤器*/
let arr = [89,56,23,67,87,90,79];
let result = arr.filter(item =>item%2==0);
alert(result); // 56,90
4.forEach 循环
let arr = [90,45,6,76,23,567,65,78];
arr.forEach(function (item,index) {
alert(index+':'+item);
})
5.字符串
startsWith/endsWith ----以什么开头，以什么结尾
字符串模板写法：`${a}cde${f}`
let url = 'git://www.baidu.com';
if (url.startsWith('http')) {
alert("http网址");
} else if (url.startsWith('https')) {
alert("加密网址");
} else if (url.startsWith("git")) {
alert("git网址");
}
5.Promise
Promise----异步操作使用同步写法 因为异步操作的写法比较复杂
function createPromise(url) {
return new Promise(function (resolve, reject) { //实例化Promise对象
$.ajax({
url: url,
dataType: 'json',
success(data) {
resolve(data);
},
error(err) {
reject(err);
}
});
});
} Promise.all([createPromise('data/test1.txt'),createPromise('data/test2.txt')]).then(function (arr) {
let [res,res1] = arr; // 解构赋值
alert("全部成功了");
console.log(res);
console.log(res1);
},function (err) {
alert("至少有一个失败了");
});
6.generator:生成器
写法：函数名前加 （星号），生成器的yield可以让函数在任意位置暂停运行
function *show(num1,num2) {
alert(`${num1},${num2}`);
alert("a");
let a = yield;
alert(a);
alert("b");
}
let obj = show(33,56); //obj是一个生成器对象
obj.next(10);
obj.next(6); // 33,56，a,6,b
7.解构赋值
要求： 左右结构一样， 右边是个合法的东西，声明、赋值一次完成
let arr = [12,45,66];
let [a,b,c] = arr;
console.log(a,b,c); // 12 45 66
8.面向对象
class User {
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
let u1 = new User("naruto",123456);
u1.showName(); // naruto
u1.showPass(); // 123456
9.json
JSON.stringify({a:12,b:5}) => '{"a":12,"b":5}'
JSON.parse('{"a":12,"b":5}')=> {a:12,b:5}
网友评论