es6的学习
关键字（var、let和const）
var 是函数作用域
let 和 const 是块级作用域
什么是块级作用域
花括号{}内部为块级作用域
函数作用域是函数里的内容
var和let用来声明变量
const用来声明常量，并且必须赋值，赋值后声明的的数据(值类型)不能修改
// let
var a = 1;
let b = 2;
//var 全局变量
//let 局部变量只能在声明let的{}中使用
//let 声明的变量不会变量提升
//let 在同一个作用域不能重复声明
console.log(a, b);
{
var c = 1;
}
console.log(c);
{
let d = 1
}
// console.log(d);//报错找不到d
for (var i = 100; i < 5; i++) {
}
console.log(i);
for (let j = 100; j < 5; j++) {
}
// console.log(j);//报错找不到j
var lis = document.querySelectorAll('li')
// for (var m = 0; m < lis.length; m++) {
// lis[i].onclick = function () {
// alert(i)
// }
// }
for (let m = 0; m < lis.length; m++) {
lis[m].onclick = function () {
alert(m)
}
}
{
let e = 1;
// let e = 2;//let 在同一个作用域不能重复声明
}
const k = [1, 2, 3];
k = []
console.log(k);
// const
// 1.和let基本一致（局部，不会变量提升，不能重复声明)
// 2.声明必须赋值
// Uncaught没有捕捉到SyntaxError语法错误
// const PI;
const PI = 3.1415926;
console.log(PI);
// 3.声明的数据不能修改（值类型)
// PI = 3.14;
const PERSON = {
name: "Baize", age: 18
};
//引用类型常量
PERSON.age = 24;
//引用类型只要不是重新赋值，都是引用同一块内存地址
// PERSON = {};
console.log(PERSON);
// 4.建议变量名大写
结构数组
就是把数组解析为单个的变量
1.把数组解析单个的变量
2.可以逗号跳过某个元素
3.通过...接收剩余内容(不定参)
let arr = [1, 3, 5, 7, 9, 11, 12, 13];
let [a, , b, ...c] = arr;
console.log(a);
console.log(b);
console.log(c);
// 4. 可以给默认值
let arr2 = [1, 2, 3, 4];
let [d, e, f, g = 88] = arr2;
console.log(d, e, f, g)
// 5.可以交换变量
var k = 100;
var j = 50;
[k, j] = [j, k];
console.log(k, j);
对象解构
1.对象解构就是把对象解析为单独的变量
2.不用按顺序解构
let obj = { name: "baize", age: 22 }
let { age, name } = obj;
console.log(name);
console.log(age);
新增字符串方法
检测:
includes是否包含,
startsWith以..开头
endsWith以...结尾
includes检测是否包含字符串,包含返回true不包含返回false
var str = "我爱我的祖国，我的祖国，是中国的国";
console.log(str.includes('他乡'));
console.log(str.includes('祖国'));
console.log(str.startsWith("我恨"));
console.log(str.endsWith("国"));
填充和去空白
string字符串
1.padStart填充在前面, padEnd填充后面
2.trim移除两端空白,trimLeft,trimRight移除左右空白
3.表单交互先移除空白
4.遍历的新方式for of
var str = "1";
//补齐3位数，不够用0来填充
console.log(str.padStart(3, "0"));
//补齐3位数，不够用_来填充
console.log(str.padEnd(4, "_"))
//时间01 22
var mystr = " 你好,东三街怎么走";
console.log(mystr);
console.log(mystr.trim())
//特别生僻字是占两个字节(导致str.length与字符不匹配异常）
var str = "田里的水太多了，你做𠮷口，把水放出来!";
// for (var i = e; i < str.Length; i++) {
// console.Log(str[i]);
// }
for (let s of str) {
console.log(s);
}
新增数组方法
ES3: sort
ES5:高阶,forEach filter map reduce some every
ES6:find查找符合条件的元素,findIndex查找符合条件元素的下标
var arr = [2, 4, 6, 7, 8];
//find查找符合条件的元素
// var el = arr.find(function (item) {
//if (item > 5) { return true }
//})
// var el = arr.find(item => item > 5);
// console.Log(el);
// findIndex查找符合条件元素的下标
// var index = arr.findIndex(function(item){
//return item > 5;
// })
// alert(index );
// forEach遍历元素
var arr1 = ["小红", "小绿", "小蓝", "小紫", '小黑'];
// item当前遍历的元素, index当前元素的下标，self当前遍历的数组
arr1.forEach(function (item, index, self) {
// consoLe.Log(item, index, seLf)
})
// filter 过滤不符合条件的元素(返回true保留，返回faLse过滤掉)
var arr2 = arr.filter(function (item) {
return item % 2 === 6;
})
// consoLe.Log( "arr2 " , arr2)
//filter通常可以实现数组的去重
var arr3 = [1, 1, 2, 2];
// 1 item 0 0 true保留
// 1 item 0 1 false过滤
// 2 item 2 2 true保留
// 2 item 2 3 false 过滤
var arr4 = arr3.filter(function (item, index) {
//获取元素查找出来的下标
var ind = arr3.indexOf(item); if (ind === index) {
//如果查找出的下标与遍历下标一致，元素保留
return true
} else {
return false;
}
})
console.log("arr4", arr4)
// reduce类型,上次的结果是当次的条件
// 数组的求和
var total = arr.reduce(function (a, b) {
return a + b;
})
// a:2 b:4 return 6
// a:6 b:6 return 12
// a:12 b:7 return 19
// a:19 b:8 return 27
console.log(total);
var big = arr.reduce(function (a, b) {
return a * 10 + b;
})
console.log("big", big);
// some有一返回真，着整体为真
var arr6 = [5, 1, 2, 12, 3, 7];
//判arr6里面是否有一个大于10的数
var isbig = arr6.some(function (item) {
return item > 10;
})
console.log("isbig", isbig);
// every所有的回调函数返回为真，才返回真
// 查找所有的数是否都大于5
var bigF = arr6.every(function (item) {
return item > 5;
})
console.log("bigF", bigF)
箭头函数
1.箭头函数:函数的简写
2.如果不是一个参数需要添加()
3.如果有多行语句用{}，返回用return
4.如果需要返回对象用({})
var fun = function () {
console.log("love");
}
var fun1 = () => console.log("love");
//=>左侧是参数
//=>右侧是执行语句也是返回值
fun();
fun1();
var fun2 = age => console.log("love" + age);
var fun2s = (age, name) => console.log("love" + age + name);
fun2(18);
fun2s(18, 'baize');
var fun3 = age => {
if (age) {
console.log("love" + age)
}
else {
console.log(age);
}
}
fun3(19)
var fun4 = (age, name) => ({ name: name, age: age, msg: "大家好我是" + name })
console.log(fun4(19, 'baize1'));
箭头函数this指向
箭头函数的this指向的是函数的上一层作用域的this
var age = 50;
var obj = {
age: 18,
grow: () => {
setInterval(() => {
this.age++;
console.log(this.age);//51
}, 3000)
}
}
// obj.grow();
// var grow = obj.grow;
// window.grow()
var arr = [2, 4, 6, 7, 8];
//过滤出大于5的数
var arr1 = arr.filter(item => item > 5);
console.log(arr1)
var total = arr.reduce((a, b) => a + b);
console.log(total);
函数默认参、不定参(形参，定义的时候)、拓展参(实参，执行的时候)
//当参数是undefined时候取默认参数
function say(name, age = 28) {//age=28函数默认参数
console.log("大家好我的名字是" + name + "今年" + age)
}
say("baize", 17);
say("baize", undefined);
//并不确定函数的参数是几个(定义函数的时候)
// ...变量名，接收所有的参数列表
function add(...args) {//...args是不定参
var total = args.reduce((a, b) => a + b);
console.log(total);
}
add(2, 3);
add(1, 2, 5);
function metting(p1, p2, p3) {
console.log("今天来的" + p1 + p2 + "和" + p3)
}
metting("水煮鱼", "老王", "老张")
var arr = ["老王", "老郑", "老张", "水煮鱼"];
// metting.apply(null, arr);
metting(...arr);//...arr拓展参
对象
对象新增
1.Object.create()通过现有对象创建一个新的对象
2.Object.keys()获取对象所有键的集合成为一个数组
3.Object.values()获取值的集合
4.Object.assign(）合并数据
<script>
var obj1 = { name: "baize", age: 18, leg: 2 };
var obj2 = { age: 17, job: "bo" };
//合并复制对象
var obj3 = Object.assign(obj1, obj2);
console.log(obj3);
var vals = Object.values(obj3);
console.log(vals);
var keys = Object.keys(obj3);
console.log(keys);
var obj4 = Object.create(obj3);//继承
console.log(obj4);
对象的简写、属性简写、函数的简写、属性名可以用变量拼接
var name = "baize";
var age = 18;
var n = "nick";
var m = "name";
// var obj = { name: name, age: age, leg: 2, say: function () { aLert(this.name) } };
var obj = { name, age, leg: 2, [n + m]: "小" + this.name, say() { alert(this.name) } }
console.log(obj);