ES5 ES6
2009年12月，ECMAScript 5.0版正式发布
2011年6月，ECMAscript 5.1版发布
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。
2016年6月，ECMAScript6.1发布， 与ECMAScript6差异较小
ES5
ES5的严格模式：
所谓严格模式，从字面上就很好理解，即更严格的模式 在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。
怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。
Javascript 为什么要设立严格模式：
1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2.代码运行的一些不安全之处，保证代码运行的安全；
3.提高编译器效率，增加运行速度；
严格模式增加哪些?
1. 不可以省略var声明变量
2. 禁止函数使用this关键字指向全局变量
3. 禁止函数使用八进制方法
4. 不允许在非函数的代码块内声明函数 if (true) function fn() { } , if没有大括号就报错
5. 严格模式下, arguments变量, 形参是不会变(不同步)
6. eval作用域 var x = 20 eval(“ 'use strict'; var x = 10 ”); console.log(x) //20
7. delete 变量 报错, 严格模式必须写在第一行代码
"use strict";//全局严格
myname = "周杰伦";
console.log(myname);
"use strict";//全局严格
function fn2() {
console.log(this); //默认指向window
}
fn2()
"use strict";//全局严格
var n = 023;
console.log(n);
"use strict";//全局严格
if (true) {
function fn4() {
console.log("44444");
}
}
fn4();
"use strict";//全局严格
function fn5(num) {
// console.log(arguments); //[20]
// arguments[0]=30;
// console.log(num); // 20
num = 40;
console.log(arguments);
}
fn5(20);
'use strict';
var age = 20;
console.log(window);
console.log(window.age);
delete (window.age);
console.log(window);
eval作用 把字符串当做js代码被解析
eval + use strict ,eval函数作用域
作用域
1.全局 2.局部 3.eval + use strict ,形参eval函数作用域
var x = 20;
eval(" 'use strict'; var x=30; console.log(x) ");//30
console.log(x)// 20
btn.onclick = function () {
eval(txt.value); 不安全
还能把json 转换成对象或数组
var str = '{"name":"刘德华"}';
console.log(JSON.parse(str));
var o = eval("[" + str + "]");
console.log(o[0]);
把json转换成对象或数组 1. JSON.parse 2. eval() 执行数组
}
forEach、map以及reduce的不同点：
forEach 方法是将数组中的每一个值取出做一些程序员想让他们做的事情
map 方法是将数组中的每一个值放入一个方法中做一些程序员想让他们做的事情后可以返回一个新的数组
reduce 方法 将数组中的每一个值与前面的值处理后得到的最终值
//对象
var obj = {
name: "刘德华"
}
//变量
var name = "周杰伦"; // window.name
function fn(str) {
//this window window.name
console.log(this.name);
console.log(str);
}
// fn();
fn.bind(obj, "你好")("他好")
bind 改变this指向,它不会立即执行,需要函数执行,它才会生效
简单总结 与this相关的?
1. 函数内部的this,默认指向window
2. 在严格模式下,函数内部的this指向undefined
3. 事件绑定函数,内部的this指向当前绑定的元素
4. 对象内,方法里的this指向当前的对象
5. ES5的bind函数,改变this指向
异常捕获,非常大的性能影响,
网络连接的地方一定要try..
try {
aaaaa
} catch (err) {
//try 里面报错了,我就被执行
console.log(err);
}finally{
//始终会被执行
console.log("始终会被执行");
}
try {
aaaaaaa;
} catch (error) {
console.log(error);
}
console.log("我..还曾经的那个少年..没有一丝丝改变");
let
let 是ES6中新增关键字。它的作用类似于var，用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。
块级作用域
ES6之后加入块级作用域，一个大括号{}我们称之为一个代码块，一个大括号{}的内部就是块级作用域
利用块级作用域可以有效解决以下问题
1.防止全局变量泄露
2.防止变量提升带来的覆盖问题
const 声明的是常量，一旦声明，值将是不可变的,声明变量赋予初始值,它的类型是值类型,就不能修改,可以修改数组的值,如果是引用类型,可以修改它值,不能修改类型
,它的其他特性与let一样
1.如果是代码块内声明,只能在块里使用
2.先定义,后使用 (避免变量提升问题)
3.let 声明的变量,只能被声明一次
let oBtns = document.querySelectorAll("button");
//方式1
for (var i = 0; i < oBtns.length; i++) {
//在遍历(循环)的过程中,给每一个按钮设置一个属性,并且给i的值
oBtns[i].tempIndex = i;
oBtns[i].onclick = function () {
// console.log(i);
console.log(this.tempIndex);
}
}
//方式2
for (let i = 0; i < oBtns.length; i++) {
//在遍历(循环)的过程中,给每一个按钮设置一个属性,并且给i的值
oBtns[i].onclick = function () {
console.log(i);
}
}
//方式3
oBtns.forEach(function (item, index) {
item.onclick = function () {
console.log(index);
}
})
字符串
includes 是否包含指定的字符串
var str = "abc123";
console.log(str.includes("ac"));
console.log(str.indexOf("c") != -1);
startsWith 是否在开始位置
var str = "abc123";
console.log(str.startsWith("a")); //true
endsWith 是否在结束位置
var str = "abc123";
console.log(str.endsWith("3"));//true
repeat 让字符串重复n次
var str = "我爱你!";
console.log(str.repeat(100));
填充
var str = "我爱你";
console.log(str.padStart(10, "."));
console.log(str.padEnd(10, "."));
字符串模板
var str = "不好";
let str1 = `今天天气真的${str}`;
console.log(str1);
数组
Array.from()把伪数组转换成真数组
var oBtns = document.getElementsByTagName("button");
遍历获取下标
Array.from(oBtns).forEach(function (item, index) {
item.onclick = function () {
console.log(index);
}
})
Array.of() 将一组值,变成数组
var arr = Array.of(1, 3, 4, 5, 7);
console.log(arr);
find
var arr = [
{
name: "刘德华",
age: 19
}, {
name: "周杰伦",
age: 19
}, {
name: "蔡依林",
age: 19
}, {
name: "马季",
age: 19
}];
var name = "周杰伦"
var obj = arr.find(function (item, index) {
return item.name == name;
})
console.log(obj);
findIndex 找到了返回下标
var name = "周杰伦" //找到周杰伦,删除周杰伦
var index = arr.findIndex(function (item) {
return item.name == name
})
console.log(index);
arr.splice(index, 1)
console.log(arr);
for-of 遍历集合：
这是目前遍历数组最简洁和直接的语法；
它避免了for-in的所有缺陷；
与forEach()不一样，它支持break，continue和return
函数
函数的默认参数
function fn1(n = 10) {
console.log(n);
}
fn1(40);
function fn(n) {
if (n == undefined) {
n = 10;
}
console.log(n);//10
}
fn(50)
2.箭头函数 拉姆达(Lambda )表达式
函数的语法糖
场景1---
var fn = function (n) {
return n * 10;
}
console.log(fn(5));
箭头函数
var fn = (n) => { return n * 10 };
var fn = n => { return n * 10 }; //由于只有一个参数,可以省略参数的()
var fn = n => n * 10; //由于函数体只有一个句代码,可以省略 {}
场景2---
var fn = function (n, m) {
return n + m;
}
箭头函数
const fn = (n, m) => n + m; //多个参数,不能省略()
场景3---
const fn = function (name) {
return { name: name }
}
console.log(fn("刘德华"));
箭头函数
const fn = name => { return { name: name } }
console.log(fn("周杰伦"));
箭头函数
const fn = name => ({ name: name }) //返回的是一个对象,用()包裹起对象 看做整体
console.log(fn("周杰伦"));
var arr = [3, 5, 7, 2, 67, 8];
arr.sort(function (n, m) {
return n - m;
})
console.log(arr);
arr.sort((n, m) => m - n);
console.log(arr);
let fn = n => m => n * m;
let fn = function (n) {
return function (m) {
return n * m
}
};
箭头函数的this,指向所在的运行环境(上下文对象)
var obj = {
fn1: function () {
console.log(this); //obj
let ff = () => {
console.log(this); //obj
}
ff();
},
fn2: () => {
console.log(this) //window
let ff = () => {
console.log(this); //window
}
ff();
}
}
obj.fn1()
obj.fn2()
对象
属性的简写:
var foo = 'bar';
var baz = {foo}; // 等同于 var baz = {foo: 'bar'};
方法的简写:
var o = {
method() {
return "Hello!";
}
};
属性名表达式:
let obj = {};
obj['a'+'bc'] = 123;
console.log(obj);
方法名表达式:
let obj = {
['h'+'ello']() {
return 'hi';
}
};
obj["abc"] = 10;
Object.is( , )
1 == 1
-0 == +0
console.log(Object.is(-0, 0)); //false
重点
console.log(Object.is(NaN, NaN)); //true
其他情况 和 == 是一样的
1.合并对象
2.拷贝对象 浅拷贝
Object.assign()
var o1 = { name: '刘德华', sex: "男" };
var o2 = { age: 60, name: "蔡依林" };
var o = {};
Object.assign(o, o1, o2);
console.log(o);
