尚硅谷前端学习视频 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

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("hel"));   // true    
console.log(str.includes("ly"));    // false 
// 1、多行字符串
let ss = `<div>
                        <span>hello, world</span>
                    </div>`;
console.log(ss);      

// 2、字符串插入变量和表达式. 变量名写在 `${}` 中,  `${}` 中可以放入 JavaScript 表达式
const person = {
  name: "hgw",
  age: 22
}
const {name,age} = person;
let info = `我是${name}, 今年${age + 10}了`;    // 我是hgw, 今年32了
console.log(info);

// 3、字符串中调用函数
function fun(){
      return "这是一个函数";
}
let sss = `哈哈哈哈,${fun()}`;
console.log(sss);   // 哈哈哈哈,这是一个函数



    </script>


</body>

</html>

运行的效果如下：

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
// 多个参数时
// var sum = function (a, b) {
//     c = a + b;
//     return a + c;
// }
let sum2 = (a,b) => a + b;
console.log(sum2(1,2));

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

//------------------------------------------------------------------------------
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);




    </script>


</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
 const person = {
     name: "jack",
     age: 21,
     language: ['java','js','css']
 }
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

// 声明3个对象
const target = { a:1 };
const source1 = { b:2 };
const source2 = { c:3 };
// 把source1、source2中的合在 target中
Object.assign(target,source1,source2);
console.log(target);    // {a: 1, b: 2, c: 3}



// 声明对象简写
const age = 23
const name = "张三"
// 传统写法
const person1 = {age: age, name: name};
// 如果属性名 和 属性值变量名一样, 可以如下简写
const person2 = {age,name};    //声明对象简写
console.log(person2);


 // 对象的函数属性简写
 let person3 = {
    name: "jack",
    // 以前：
    eat: function (food) {
          console.log(this.name + "在吃" + food);
    },
    //箭头函数this不能使用，对象.属性
    eat2: food => console.log(person3.name + "在吃" + food),
    eat3(food) {
          console.log(this.name + "在吃" + food);
    }
}
person3.eat("炸鸡");
person3.eat2("米线");
person3.eat3("鸡蛋灌饼");


 // 对象扩展运算符
// 1. 拷贝对象
let personT1 = {name: "Amy", age: 21};
let someone = {...personT1};
console.log(someone);   // {name: 'Amy', age: 21}

// 2. 合并对象
let ageT = {age: 15};
let nameT = {name:"Amy"};
let personT2 = {name: "张三"}
personT2 = {...ageT, ...nameT}; // 如果两个对象的字段名重复, 后面对象字段值会覆盖前面对象的字段值
console.log(personT2);  // {age: 15, name: 'Amy'}





    </script>


</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

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("hel"));   // true    
console.log(str.includes("ly"));    // false
// 1、多行字符串
let ss = `<div>
                        <span>hello, world</span>
                    </div>`;
console.log(ss);      

// 2、字符串插入变量和表达式. 变量名写在 `${}` 中,  `${}` 中可以放入 JavaScript 表达式
const person = {
  name: "hgw",
  age: 22
}
const {name,age} = person;
let info = `我是${name}, 今年${age + 10}了`; // 我是hgw, 今年32了
console.log(info);

// 3、字符串中调用函数
function fun(){
    return "这是一个函数";
}
let sss = `哈哈哈哈,${fun()}`;
console.log(sss);   // 哈哈哈哈,这是一个函数



    </script>


</body>

</html>
 
 
 
 

posted on 2022-07-03 17:01  luzhouxiaoshuai  阅读(27)  评论(0)  编辑  收藏  举报

导航