ECMA5和ECMA6笔记
call
格式：函数名.call();
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始：将原函数的参数往后顺延一位。
// show.call("call", 20, 40);
apply
格式：函数名.apply()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组 数组，放入我们原有所有的参数
show.apply("apply", [20, 40]);
bind 预设this指向
function show(x, y){
alert(this);
alert(x + ", " + y);
}
var res = show.bind(“bind”);
res(40, 50);
show.bind(“bind”)(40, 50);
apply方法使用的小技巧
Math.min(); //传入所有参数中的最小值
Math.max(); //传入所有参数中的最大值
alert(Math.min(10, 20, 30, 40, 50));
alert(Math.max(10, 20, 30, 40, 50))
var arr = [10, 20, 30, 40, 50];
alert(Math.min.apply(null, arr));
alert(Math.max.apply(null, arr));
let 关键字是用来声明变量 更过分，只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在作用域叫做块级作用域。
var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理。
const 声明变量，变量值只能在声明的时候确定，后续是没有办法修改的。
【注】const声明常量(变量没有办法改);
const IP = “10.30.152.33”;
alert(IP);
IP = ‘xx’;
alert(IP);
箭头函数：新潮的函数写法。
【注】适当的省略函数中的function和return关键字。
箭头函数需要注意的部分
1、箭头函数，不能用new
2、箭头，如果返回值是一个对象，一定要加()；
3、箭头函数中的this，指向的是上一层函数的主人。
function add(x){
return x + 10;
}
var add = x => x + 10;
alert(add(5));
//1、无参数，无返回值
function show(){
alert(“hello world”);
}
var show = () => {
alert("hello world");
}
//2、有一个参数，无返回值
function xxx(num){
alert(num);
}
var xxx = num => {
alert(num);
}
//3、有一个参数，有返回值
function add(x){
return x + 10;
}
var add = x => {
//代码
return x + 10;
};
//4、多个参数，有返回值
function show(x, y){
alert(x + y);
}
var show = (x, y) => {
alert(x + y);
}
filter 过滤
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter(function(item){
return item > 20;
})
var newArr = arr.filter(item => item > 20);
alert(newArr);
var newArr = arr.map(item => item * 1.3);
alert(newArr);
中括号解构
// var x = 10, y = 20, z = 30;
/* var [x, y, z] = [10, 20, 30];
大括号解构
var {name, age, sex} = {
age: 18,
name: “钢铁侠”,
sex: “男”
};
使用解构的好处：
1、交换两个数
var [x, y] = [10, 20];
[x, y] = [y, x];
2、函数可以返回多个值
function show(){
return [“结果1”, “结果2”, “结果3”];
}
var [a, b, c] = show();
alert(a + ", " + c);//结果1 ， 结果3
3、函数定义参数，和传入参数的顺序改变
【注】参数可以带默认值
/* function showSelf(name, age, sex){
alert(“我叫” + name + “，今年” + age + “,是一位” + sex + “性”);
}
// showSelf("小明", 18, "男");
showSelf(18, "男", "小明"); */
/* function showSelf({name, age, sex = "男"}){
alert("我叫" + name + "，今年" + age + ",是一位" + sex + "性");
}
showSelf({
age: 18,
name: "小明",
sex: "女"
}) */
4、快速取出数组中的某一个元素。
var arr = [10, 20, 30, 40, 50];
var {0:first, 4:last} = arr;
alert(first);
alert(last == arr[4]);
传统字符串：所有单引号，双引号括起来的都叫做字符串。
ECMA6字符串：反引号 ``
1、ECMA6字符串，想怎么写怎么写，换行，代码缩进，都能在字符串中体现出来
2、${变量/表达式/函数调用}
var str = “hello
world”; *///hello world
var str = hello world;
alert(str);//hello
//world
ECMA6字符串拼接
function showSelf({name, age, sex = “男”}){
alert(“我叫” + name + “，今年” + age + “,是一位” + sex + “性”);
alert(我叫${name},今年${Math.max(age, 20, 30)}岁,是一位${sex}性);
}
showSelf({
age: 18,
name: "小明",
sex: "女"
})
Array.from() 将伪数组转成真数组
window.onload = function(){
var aLis = document.getElementsByTagName("li");
alert(aLis.length);
aLis = Array.from(aLis);
aLis.push("hello");
alert(aLis)
}
find()
功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历。
返回值：找到的元素。
findIndex()
返回值：找到的元素的下标。
var arr = [10, 20, 30, 40, 50];
var res = arr.find(function(item, index, arr){
//查找条件
return item > 20;
})
alert(res);
alert(arr.find(item => item > 20));
alert(arr.findIndex(item => item > 20));
arr.copyWithin
第一个参数：从哪个下标开始
第二个参数和第三个参数是：范围 [start, end)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.copyWithin(2, 4, 9);
alert(arr); //1,2,3,8,9,6,7,8,9
//1,2,5,6,7,8,9,8,9,10
Object.assign 合并对象
【注】将所有传入的对象，都合并到第一个对象中。
浅拷贝:只拷贝地址
深拷贝:将复合数据类型重新生成一份，进行拷贝
var obj1 = {
a: 10
}
var obj2 = {
b: 20,
c: 30
}
var obj3 = {
d: 40,
f: [“hello”, “world”, true]
}
Object.assign(obj1, obj2, obj3);//object1{a:10, b:20, c:30, d:40, f:Array(3) //{’‘hello’’,“world”,true}}
obj2.b = 100;
console.log(obj2);//object{ b:100, c:30}
console.log(obj1); //object1{a:10, b:20, c:30, d:40, f:(3) {’‘hello’’,“world”,true}}
obj3.f.push(“xxx”);
console.log(obj3);//object3{d:40, f: (4) {’‘hello’’,“world”,true,xxx}}
console.log(obj1); //object1{a:10, b:20, c:30, d:40, f:Array(4) {’‘hello’’,“world”,true,xxx}}
集合：
1、不重复
2、无序
Set
Map
let imgs = new Set();
//添加元素
imgs.add(100);
imgs.add(100);
imgs.add("hello");
imgs.add("hello");
imgs.add(true);
imgs.add(new String("world"));
imgs.add(new String("world"));
console.log(imgs);//Set(5) {100, "hello",true,String,String}
集合遍历
for…of 遍历集合
for(let item of imgs.keys()){
console.log(item);
}
for(let item of imgs.values()){
console.log(item);
}
imgs.entries
for(let item of imgs.entries()){
console.log(item);
}
//数组变集合
var set = new Set([10, 20, 30, 40, 50, 40, 30, 20, 10]);
// console.log(set);
//集合变数组 将数据结构展开成数组
var arr = [...set];
alert(arr);
var arr = [10, 20, 30, 40, 50, 40, 30, 20, 10];
arr = [...new Set(arr)];
alert(arr);
map映射
let map = new Map();
//添加数据
map.set("张三", "打渔的");
map.set("李四", "种地的");
map.set("王五", "挖煤的");
map.set("李四", "打猎的");
console.log(map);
/*
取值
*/
alert(map.get("王五"));
/*
map遍历 通过for of
*/
for(let [key,value] of map){
console.log(key,value);
}
Symbol
【注】通过Symbol声明的数据只和自己相等，和其他任何数据都不相等。
【注】让你的程序变得可读性更强，更加形象化的。
var a = Symbol();
var b = Symbol();
var c = Symbol(100);
var d = Symbol(100);
var e = Symbol("hello");
var f = Symbol("hello");
alert(a == b);
alert(c == d);
alert(e == f);
alert(a == a);
数组
for循环
for…in
foreach
for…of
对象
for...in
set for...of
map for...of
*/
var arr = [10, 20, 30, 40, 50];
for(var i = 0; i < arr.length; i++){
document.write("for循环：" + arr[i] + ", " + i + "
");
}
for(var i in arr){
document.write("for...in遍历：" + arr[i] + ", " + i + "
");
}
arr.forEach(function(item, index){
document.write("forEach：" + item + ", " + index + "
");
})
//通过for...of遍历数组
for(var item of arr){
/*
item是当前遍历到的元素
*/
document.write("for...of：" + item + "
");
}
var person = {
username: "钢铁侠",
age: 20,
sex: "男"
};
for(var attr in person){
/*
attr 遍历到的对象的属性
*/
document.write("对象：" + attr + person[attr] + "
");
}