【前端基础--6】

对象 object

        // 定义一个obj来接收对象
        let obj = {
            name: '咪咪',
            type: '布偶猫',
            like: ['小鱼干', '猫条']
        }
        console.log(obj);
        // 取到obj里面name属性的值
        console.log(obj.name);
        // 使用大括号取值    括号内若不带引号，优先识别为变量
        console.log(obj['type']);
        // 通过等号进行赋值（修改）
        obj.name = '乖乖';
        console.log(obj);
        // 新增
        obj.age = 2;
        console.log(obj);
        // 使用delete来删除对象中的属性
        delete obj.like;
        console.log(obj);

添加循环  for ...in 

            let obj1 = {
                name: 'XX',
                age: 20,
                sex: '女'
            };
            var text = '';
            for (let key in obj1) {
                text = text + obj1[key];
                console.log(text);
            }

            let arr = ['一花','二乃','三玖']
            // item:循环这个数组里面每一项的下标
            for(let item in arr){
                console.log('当前下标为：'+item,arr[item]);
            }

字符串方法

        let text='abc';
        // 转大写字母
        console.log(text.toUpperCase());

        let text1='ABC';
        // 转小写字母
        console.log(text1.toLowerCase());

        let str='很高兴遇见你！';
        // 返回下标为3的字符
        console.log(str.charAt(3));   //遇
        console.log(str[4]);    //见
        // 返回unicode编码
        console.log(str.charCodeAt(5));   //20320

        // 返回字符串的下标位置
        // 可以有两个参数，第一个是要查的字符串，第二个表示从哪里开始查
        console.log(str.indexOf('高'));   //1

        // 截取字符串 第一个参数表示从哪里开始，第二个是结束位置（左开右闭区间）
        console.log(str.substring(0,3));   //很高兴

        // 简便写法 第一个参数表示从哪里开始，第二个表示截取长度
        console.log(str.substr(3,3));     //遇见你

        let str1='一花，二乃和三玖';
        // 替换 replace 第一个参数是要被替换的内容 第二个是替换的内容
        console.log(str1.replace('一花','四叶'));
        // split 使用分隔符
        let arr = str1.split();
        console.log(arr);   //['一花，二乃和三玖']  打印字符数组
        let arr1 = str1.split('，');
        console.log(arr1);  //['一花', '二乃和三玖']  以逗号分隔开分成两个字符串数组
        let arr2 = str1.split('');
        console.log(arr2);  //['一', '花', '，', '二', '乃', '和', '三', '玖'] 拆分每一个字符串
        console.log(str1.split('一花'));  //['', '，二乃和三玖']

        let str2 = 'abcdefg';
        // 返回一个数组，里面存放对应查找的内容
        console.log(str2.match('c'));  //['c', index: 2, input: 'abcdefg', groups: undefined]

---

运算符

        // 加法运算
        let x = 1 + 1;
        console.log(x);   //2

        // 减法运算
        let y = x - 1;
        console.log(y);   //1

        // 乘法运算
        let a = 3 * 4;
        console.log(a);   //12

        // 除法运算
        let b = 4 / 2;
        console.log(b);   //2

        // 取余数
        let num = 10 % 8;
        console.log(num);   //2

特殊运算符

        // 特殊运算符 ++（自身加一） --（自身减一）
        let num1 = 4;
        console.log(++num1);   //5
        console.log(num1++);   //5
        console.log(num1);   //6
        let num2 = 5;
        console.log(num2-- + num1);   //11   (5+6)
        console.log(--num2);   //3
        // 由此可见，后置++(--)，先参与运算，后加(减)1

赋值运算符

        let c = 1;
        console.log(c += 1);   //2  同：c=c+1
        let d = 3;
        console.log(d -= 1);   //2  同：d=d-1
        console.log(d *= 3);   //6  同：d=d*3
        console.log(d /= 2);   //3  同：d=d/2
        console.log(d %= 2);   //1  同：d=d%2

比较运算符

通过比较返回布尔值，条件成立时返回true，不成立时返回false。

        // 大于> 小于< 大于等于>= 小于等于<= 不等于!= 等于== 全等于===
        let num3 = 5 != 4;
        console.log(num3);   //true

        console.log('55' == 55);    //true
        console.log('55' === 55);   //false
        console.log('555' === '555');   //true  全等于 要数值和类型相同

逻辑运算符

        // 与  &&
        let count = true && false;
        console.log(count);   //false  两个必须都为真

        // 或  ||
        let count1 = true || false;
        console.log(count1);   //true  两个只要有一个为真结果就为真

        // 非  !
        let count2 = !true;
        console.log(count2);   //false  true的非就是false

        // 自动转换为false的值：NaN null undefined 0

---

流程控制

顺序结构

程序从头到尾依次执行每一条代码，不跳过任何代码也不重复执行代码

分支结构

也成为选择结构。可以选择性的执行代码

分支语句： if语言  switch语言

分支语句有三种使用：单分支、双分支、多分支

单分支：

if(条件){

条件成立时执行的代码;

}

if(1>0){

alter('条件成立');

}

---

双分支：

if(条件){

条件成立时执行的代码;

}else{

条件不成立时执行的代码;

}

---

多分支：

if(条件1){

条件1成立时执行的代码;

}else if(条件2){

条件2成立时执行的代码;

}else if(条件3){

条件3成立时执行的代码;

}else{

上面条件都不满足时执行的代码;

}

 

 switch(条件){

        case 值1;

        语句1;

                break;

        case 值2;

        语句2;

                break;

        default:      //用来处理特殊情况

                break;

}

循环结构

可以是程序中的某段代码重复执行多次。

for循环

for(初始化条件;结束条件;递增条件){

循环体;

}

for(let i=0;i<5;i++){

console.log(i);

}

        for(let i = 1;i<5;i++){
            let text=`当前数字为${i}`
            console.log(text);
        }

while循环

定义一个循环变量值

while(循环条件){

条件满足时执行的代码块;

更新循环变量;

}

let num=1;

while(num<10){

console.log(num);

num++;

}

// 先判断再执行

---

do-while循环

do{

循环体

}while(条件)

// 先执行后判断

控制循环

1.break 强制结束循环

2.continue 结束当前循环，开始执行下一次循环 

        // 从100里面找到一个能被14整除的数（除自身）
        for (let i = 1; i <= 100; i++) {
            // console.log('当前为'+i);
            if (i % 14 == 0 && i != 14) {
                console.log(i);   //28
                break;
            }
        }

        // 打印1~20内的奇数
        for(let x=1;x<=20;x++){
            // 判断是不是偶数
            if(x%2==0){
                // console.log(x);
                continue;
            }
            console.log(x);
        }

---

函数

函数声明

        // 方法一 函数声明

        function 函数名(){

            // 函数主体

        }

 

        // 方法二 函数表达式

        let 变量名 = function(){

            // 函数主体

        }

函数调用

函数名();

 在对象中调用函数

        let obj={
            name:'乖乖',
            // 定义fn属性名
            fn:function(){
                console.log('打印内容');   //打印内容
            }
        }
        // 打印函数体
        console.log(obj.fn);  //ƒ (){console.log('打印内容');}
        obj.fn();  //调用函数

操作基础 函数封装

        // 打印多次
        function sum(){
            let num = 0;
            for (let i = 1;i <= 100;i++){
                num += i;
            }
            console.log(num);
        }
        sum();
        sum();

函数参数 

        // 函数参数分为形式参数和实际参数，即形参和实参
        // 带形参的函数声明
        function 函数名(形参1,形参2等){

        }
        // 形参hello=实参1
        function XX(hello){
            console.log(hello);
        }
        XX(1);    //1
        // 带实参的函数的调用
        函数名(实参1,实参2等);

注意：

• 函数最终运算结果是实参决定的
• 函数里面的形参和实参都不需要声明
• 函数的参数只能在函数内部进行访问
• 可以通过传参的方式将外部的值传到函数内部

函数返回值

        function count(x,y){
            let sum = x + y;
            return sum;
        }
        // 函数没有返回值，可以用变量来接收
        let re = count(10,20);
        console.log(re);

        // 函数里面调用函数
        function fn(){
            function fn1(){
                console.log('wow~');
            }
            return fn1();
        }
        fn();

匿名函数

(function(形参){

}(实参)

        // 匿名函数 省略函数名
        (function(a){
            console.log(a);
        })('good!')

箭头函数

(形参)=>{函数体}

        // 箭头函数
        let fun = (str) =>{
            console.log(str);
        }
        fun('这是箭头函数');

---

作用域

全局作用域

函数作用域

        // 函数作用域 （每个函数的花括号内的部分）
        function fn(){
            let num = 555;  //声明在函数作用域下的局部变量
            console.log(num); 
        }
        fn();

块作用域

        // 块作用域  除了函数外，其他的花括号空间都是块作用域
        {
            let x = 20;
            console.log(x);   //20
        }
        console.log(x);   //报错（在外部打印没有意义）

作用域是有很多层，一层一层包裹着的 变量会顺着作用域一层一层向上寻找变量。

        let str=22;
        {
            let str='字符串'
            function fnn(){
                console.log(str);
            }
            fnn();   //字符串（就近寻找）
        }

this指向

谁调用了这个函数，this就指向谁。

        console.log(this);  //指向window 浏览器窗口

        function f(){
            console.log(this);
        }
        f();   //依然指向window

        let obj={
            name:'happy!',
            Fn:function(){
                console.log(this);
            }
        }
        obj.Fn();  //指向obj  （指向这个函数(Fn)的调用者）