摘要:基础实践和和的区别输出输出猜猜是否报错,以及输出什么常量模板字符串普通字符串我是一个好人多行字符串我还是可以换行的字符串猜猜的长度是多少猜猜是否相等插入变量张三你好,很高兴认识你,我是,我的性别是男,我今年岁,我想说李四延伸思考解构赋值数组
ES6 基础实践 let 和 const let 和 var 的区别
</>复制代码
var a = 1;
window.a; // 输出:1
let b = 2;
window.b; // 输出:undefined
</>复制代码
{
let a = 1;
// let a = 2;
var b = 2;
}
console.log(a);
console.log(b);
</>复制代码
let a = 1;
{
console.log(a);
let a = 2;
}
</>复制代码
let i = "a";
for(let i = 0; i < 10; i++){
// let i = "b";
console.log(i);
}
// 猜猜是否报错,以及输出什么
const 常量
</>复制代码
const a = [1,2,3];
const b = a;
const c = [1,2,3];
模板字符串
普通字符串
</>复制代码
`我是一个好人`
多行字符串
</>复制代码
console.log(`我还是可以
换行的字符串`);
</>复制代码
let a = `1
2
3
4`;
a.length //猜猜a的长度是多少?
let b = "1
2
3
4";
a === b //猜猜是否相等?
插入变量
</>复制代码
let name = "张三";
let age = 12;
function say(name){
return "你好,很高兴认识你," + name;
}
console.log(`我是${name},我的性别是:${ "男" },我今年 ${ age * 2 }岁,我想说: ${ say("李四") }`);
延伸思考
</>复制代码
let a = "abc";
let b = new String("abc");
a == b?
a === b?
解构赋值
数组解构
let a = 1, b = 2, c = 3;
let [a, b, c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3, 4];
let [a = 1] = [2];
let [a = 1] = [null];
let [a = 1] = [undefined];
let [a] = [null];
let [a] = [];
对象解构let {a, b} = {a: 1, b: 2 };
let {a : newA, b: newB} = {a: 1, b: 2 };
let {a = 1} = {};
let {a = 1} = {a:2};
</>复制代码
1、先两句一起执行:
let a = 1;
{a} = {a: 2}
2、分开一条一条执行
let a = 1;
{a} = {a: 2}
3、反过来执行
{a} = {a: 2}
let a = 1;
a ?
window.a ?
上面的a 和 window.a 各输出什么?
</>复制代码
let a = 1;
({a} = {a: 2})
如果这样的两句一起执行呢?
数组和对象解构?
用途
交换变量的值
</>复制代码
let a = 1;
let b = 2;
[a, b] = [b, a];
从函数返回多个值
</>复制代码
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
</>复制代码
function example() {
return {
a: 1,
b: 2
};
}
let {a, b} = example();
函数参数的定义
</>复制代码
function example([a, b, c]) {
console.log(a, b, c);
}
example([1, 2, 3]);
提取JSON数据
</>复制代码
let myDataList = {
name: "张三",
sex: "男",
age: "24"
};
let { name, sex, age} = myDataList;
函数参数的默认值
</>复制代码
let throwMyErr = (errName) => {
throw new Error(`请传入参数 ${errName}`);
}
let example = (name = throwMyErr("name")) => {
console.log(name);
}
箭头函数
</>复制代码
let example = x => x * 2;
</>复制代码
let myObj = {
funA : function(){
setTimeout(function(){
console.log(this);
}, 500);
}
}
let myObj = {
funA : function(){
setTimeout(() => {
console.log(this);
}, 500);
}
}
class和extends
</>复制代码
function SayHellowES5 (){
this.name = "SARS";
}
SayHellowES5.prototype.say = function () {
console.log(this.name);
};
</>复制代码
class SayHellow {
constructor() {
this.name = "SARS";
}
say(){
console.log(this.name);
}
}
typeof SayHellow
SayHellow === SayHellow.prototype.constructor
</>复制代码
var a = new SayHellow();
a === SayHellow ?
a.constructor === SayHellow ?
</>复制代码
var b = new SayHellow();
a.__proto__ === b.__proto__ ?
原型是否相等?
</>复制代码
b.__proto__.say2 = function(){
alert("say2");
}
a.say2() ?
思考 this 到底指的哪?原型呢?同样下面的继承是否也一样?
(确认下节课内容)
</>复制代码
class SayBey extends SayHellow{
sayBey(){
console.log("beybey!");
}
}
</>复制代码
class toBey extends SayHellow{
sayBey(){
console.log(`${this.name} beybey!`);
}
}
</>复制代码
class toBey2 extends SayHellow{
constructor() {
this.sex = "女";
}
sayBey(){
console.log(`${this.sex} beybey!`);
}
}
//想想为什么报错?
模块化 export import
导出模块
</>复制代码
export let myLetA = 1;
export let myLetB = 2;
export let example = () => {
alert("SARS");
}
</>复制代码
let myLetA = 1;
let myLetB = 2;
let example = () => {
alert("SARS");
}
export {myLetA, myLetB, example as name};
</>复制代码
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
导入模块
</>复制代码
import {myLetA, myLetB, example as name} from "./main";
import SARS from "./main";
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82140.html
摘要:是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分,你将更好地理解并使用它们。到目前为止,你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。 本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如...
摘要:不过今天我希望能够更进一步,不仅仅再抱怨现状,而是从我个人的角度来给出一个逐步深入学习生态圈的方案。最后,我还是想提到下对于的好的学习方法就是回顾参照各种各样的代码库,学习人家的用法与实践。 本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮,顺手翻译了一波。本文从属于笔者的Web Frontend Introduc...
阅读 1594·2021-10-11 10:59
阅读 2039·2021-09-09 11:36
阅读 1565·2019-08-30 15:55
阅读 1403·2019-08-29 11:20
阅读 3136·2019-08-26 13:39
阅读 1550·2019-08-26 13:37
阅读 2066·2019-08-26 12:11
阅读 1400·2019-08-23 14:28