尚硅谷——谷粒商城项目开发记录——2021.11.21

尚硅谷——谷粒商城项目开发记录——2021.11.21

概念:

1.var和let的区别:

• 作用域:
  • var 声明的变量往往会越域
  • let 声明的变量有严格局部作用域
• 声明次数:
  • var 可以声明多次
  • let 只能声明一次
• 变量提升(在方法之前运行):
  • var 会变量提升
  • let 不存在变量提升

2.const关键字:

• 声明之后不允许改变
• 一但声明必须初始化，否则会报错

3.解构表达式:

• 数组解构:

let arr = [1,2,3];
// 数组解构
let [a,b,c] = arr;

console.log(a,b,c)

• 对象结构:

const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
}
//对象解构
const { name: abc, age, language } = person;

4.字符串拓展:

• 几个新的 API:
  • ES6 为字符串扩展了几个新的 API：
    • includes()：返回布尔值，表示是否找到了参数字符串。
    • startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    • endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true

• 字符串模板:

//字符串模板
let ss = `<div>
          	<span>hello world<span>
          </div>`;
console.log(ss);

• 字符串插入变量和表达式。

// 变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
function fun() {
	return "这是一个函数"
}

let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);

5.函数优化:

• 函数参数默认值:

//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
	// 判断b是否为空，为空就给默认值1
    b = b || 1;
    return a + b;
}

// 传一个参数
console.log(add(10));

//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
    return a + b;
}
console.log(add2(20));

• 不定参数:
  • 不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。 具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...values) {
	console.log(values.length)
}
fun(1, 2)      //2
fun(1, 2, 3, 4)  //4

• 箭头函数
  • ES6 中定义函数的简写方式

//以前声明一个方法
var print = function (obj) {
     console.log(obj);
}
// 箭头函数
var print = obj => console.log(obj);
print("hello");

// 以前
var sum = function (a, b) {
     c = a + b;
     return a + c;
}
// 箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));

var sum3 = (a, b) => {
     c = a + b;
     return a + c;
}
console.log(sum3(10, 20))

// const 声明常量(只读变量)
const person = {
	name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}

function hello(person) {
	console.log("hello," + person.name)
}

//箭头函数+解构
var hello2 = ({name}) => console.log("hello," +name);
hello2(person);