ES6的学习记录
提示：根据视频学习的一些记录
文章目录
一、day1的学习内容
1.let关键字
1).变量不能重复声明
//1.变量不能重复声明
// let star = '杨幂';
// let star = '小狐狸'
2).块儿级作用域
//2.块儿级作用域
//if else while for
// {
// let body = '魏大勋';
// }
// console.log(body);
//会报错Uncaught ReferenceError: body is not defined at 01.let关键字.html:65
3).不存在变量提升
// console.log(song);
// let song = '爱的供养';
//会报错Uncaught ReferenceError: Cannot access 'song' before initialization at 01.let关键字.html:69
4).不影响作用域链
//4.不影响作用域链
{
let school= '尚硅谷';
function fn(){
console.log(school);
}
fn();
}
//会打印出尚硅谷
2.const关键字
1).一定要赋初始值
//1.一定要赋初始值
const a;
2).一般常量使用大写（潜规则）
// 2.一般常量使用大写（潜规则）
const a = 100;
3).常量的值不能修改
const SCHOOL = '西南石油大学';
// 3.常量的值不能修改
SCHOOL = '西南交通大学';
//会报错Uncaught TypeError: Assignment to constant variable. at 02.const关键字.html:64
4).块儿级作用域
{
const PLAYER = 'xiaochen';
}
console.log(PLAYER);
//会报错Uncaught ReferenceError: PLAYER is not defined at 02.const关键字.html:70
5).对于数组和对象元素的修改
// 5.对于数组和对象元素的修改，不算做对常量的修改，不会报错
const TEAM = ['China','American'];
TEAM.push('Canada');
//是不会报错的
3.变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
1).数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);
2).对象的解构
const zhao = {
name: '赵本山',
age: '未知',
xiaopin: function(){
console.log("我可以演小品");
}
}
// let {name,age,xiaopin} = zhao;
// console.log(name);
// console.log(age);
// console.log(xiaopin);
// xiaopin();
let {xiaopin} = zhao;
xiaopin();
4.模板字符串
ES6引入新的声明字符串的方式 ``
1).内容可以直接出现换行符
let str = `<ul>
<li>沈腾</li>
<li>马丽</li>
<li>常远</li>
<li>艾伦</li>
</ul>`
2).变量的拼接
let lovest = '马丽';
let out = `${lovest}是我心中最好的喜剧演员`;
console.log(out);
//打印结果：马丽是我心中最好的喜剧演员
5.对象的简化写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写会更加简洁
<script>
let name = 'xiaochen';
let change = function(){
console.log('你是最棒的！');
}
// const people = {
// name : name,
// change:change,
// speak:function(){
// console.log('是的，我是最棒的！');
// }
// }
//等价于
const school = {
name,
change,
speak(){
console.log('是的，我们是最棒的！');
}
}
console.log(school);
</script>
控制台运行结果：
6.箭头函数
ES6允许使用箭头（=>）来定义函数
1).声明函数的两个方式
let fn = function(){
}
let fn1 = (a,b) => {
return a + b;
}
调用函数
let result = fn1(1,2);
console.log(result); //控制台结果为3
2).this是静态的
this是静态的，this始终指向的是函数声明时所在的作用域下的 this 的值
function getName(){
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
window.name = '小陈';
const school = {
name:'陈陈'
}
//直接调用
getName(); //打印结果：小陈
getName2(); //打印结果：小陈
// call 方法调用
getName.call(school); //打印结果：陈陈
getName2.call(school); //打印结果：小陈
3).不能作为构造实例化对象
let person = (name,age) => {
this.name = name;
this.age = age;
}
let me = new person('小陈',19);
console.log(me);
//打印结果：Uncaught TypeError: person is not a constructor at 06.箭头函数.html:90
4).不能使用 arguments 变量
let fn= () => {
console.log(arguments);
}
fn(1,3,2);
//打印结果：Uncaught ReferenceError: arguments is not defined at fn (06.箭头函数.html:95) at 06.箭头函数.html:97
5).箭头函数的简写
// 1).省略小括号，当形参有且只有一个的时候
let add = (n) => {
return n + n;
}
//等价于
let add = n => {
return n + n;
}
console.log(add(8)); //打印结果16
//2).省略花括号，当代码体只有一条语句的时候，此时 return 语句必须省略，而且语句的执行结果就是函数的返回值
let pow = (n) => {
return n * n;
}
//等价于
let pow = n => n * n;
console.log(pow(6)); //打印结果36
7.参数默认值
1).形参初始值
//1.形参初始值 具有默认值的参数，一般位置要靠后(潜规则)
function add(a,b,c) {
return a + b + c;
}
console.log(add(1,2)); //打印结果 NaN
console.log(add(1,2,3)); //打印结果 6
function add(a,c = 10,b) {
return a + b + c;
}
console.log(add(1,2)); //打印结果 NaN
2).与解构赋值结合
function connect({host,username,password,port}){
console.log(host); //localhost
console.log(username); //root
console.log(password); //root
console.log(port); //3306
}
connect({
host:'localhost',
username:'root',
password:'root',
port:3306
})
function connect({host = '127.0.0.1',username,password,port}){
console.log(host); //127.0.0.1
console.log(username); //root
console.log(password); //root
console.log(port); //3306
}
connect({
username:'root',
password:'root',
port:3306
})
function connect({host = '127.0.0.1',username,password,port}){
console.log(host); //baidu.com
console.log(username); //root
console.log(password); //root
console.log(port); //3306
}
connect({
host:'baidu.com',
username:'root',
password:'root',
port:3306
})
8.rest参数
1).ES5获取实参的方式
function data (){
console.log(arguments); //不是数组，是一个对象
}
data('小红','小明','小玲');
2).rest参数
function data(...args){
console.log(args);
}
data('小橙','小黄','小蓝'); //返回的是数组，就可以使用 filter some every map等
//rest 参数必须放在参数的最后
function fn(a,b,...args){
console.log(a); //1
console.log(b); //2
console.log(args); //[3,4,5,6]
}
fn(1,2,3,4,5,6);
9.spread扩展运算符
扩展运算符能将 数组 转换为逗号分隔的 参数序列
1).扩展运算符的使用
//声明一个数组
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'
//声明一个函数
function chunwan(){
console.log(arguments);
}
chunwan(tfboys); //0: (3) ["易烊千玺", "王源", "王俊凯"]
chunwan(...tfboys); //Arguments(3) ["易烊千玺", "王源", "王俊凯", callee: ƒ, Symbol(Symbol.iterator): ƒ] 0: "易烊千玺" 1: "王源" 2: "王俊凯"
2).扩展运算符的应用
数组的合并
数组的克隆
将伪数组转为真正的数组
<script>
//1.数组的合并
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
//等价于
const zuixuanxiaopingguo = [...kuaizi,...fenghuang];
console.log(zuixuanxiaopingguo); //["王太利", "肖央", "曾毅", "玲花"]
//2.数组的克隆
const sanzhihua = ['8','5','7'];
const sanyecao = [...sanzhihua];
console.log(sanyecao); //["8", "5", "7"]
//3.将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divarr = [...divs];
console.log(divarr); //[]
</script>
10.Symbol
1).Symbol数据类型
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，了它是JavaScript语言的第七种数据类型，
是一种类似字符串的数据类型。
特点：
1.Symbol 的值是唯一的，用来解决命名冲突问题
2.Symbol 值不能与其他数据进行运算
3.Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名
JS中的数据类型
u undefined
s string symbol
o object
n null number
b boolean
<script>
//创建Symbol（函数创建）
let s = Symbol();
console.log(s,typeof s);//Symbol() "symbol"
let s2 = Symbol('小陈');
let s3 = Symbol('小陈');
console.log(s2 === s3); //false 地址不一样
//用 Symbol.for() （对象创建）
let s4 = Symbol.for('xiaochen');
let s5 = Symbol.for('xiaochen');
console.log(s4 === s5); //true 指向同一个对象，所以地址是一样的
//不能与其他数据类型进行运算
let result = s + 100;
//Uncaught TypeError: Cannot convert a Symbol value to a number at 11.Symbol数据类型.html:72
let result2 = s > 100;
//Uncaught TypeError: Cannot convert a Symbol value to a number at 11.Symbol数据类型.html:72
let result3 = s + '100';
//Uncaught TypeError: Cannot convert a Symbol value to a number at 11.Symbol数据类型.html:72
</script>
2).Symbol创建对象属性
//向对象中添加方法 up down
let game = {
name:'樱桃小丸子',
up: function(){
console.log('向阳生长的樱桃');
},
down: function(){
console.log('垂涎欲滴的樱桃');
}
}
//方法一：声明一个对象
let methods = {
up: Symbol(),
down: Symbol()
};
game[methods.up] = function(){
console.log('我是一个新的向上的方法');
}
game[methods.down] = function(){
console.log('我是一个新的向下的方法');
}
console.log(game)
console.log(game.down)
// ƒ (){
// console.log('垂涎欲滴的樱桃');
// }
console.log(game[methods.down]);
// ƒ (){
// console.log('我是一个新的向下的方法');
// }
console.log("------------------")
//方法二
let youxi = {
name:'狼人杀',
[Symbol('say')] : function(){
console.log('我可以发言');
},
[Symbol('zibao')] : function(){
console.log('我可以自爆');
}
}
console.log(youxi);
</script>
结果如下图所示：
3).Symbol的内置对象属性
这里仅列出两个，其他可在文档查阅
<script>
class Person{
static [Symbol.hasInstance](para){
console.log(para)
console.log("我被用来检测类型了")
// return true
return false //这里返回true，和false都一样，可以自己控制
}
}
let o = {};
console.log(o instanceof Person)
const arr = [1,2,3]
const arr1 = [4,5,6]
console.log(arr.concat(arr1))
</script>
结果如下图所示;
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
