JavaScript极简速成

2.JS入门&Vue脚手架搭建

菜鸟教程:https://www.runoob.com/JS/JS-tutorial.html

JS对象

对象操作
1.对象增删改查
创建对象 let 变量名称(obj)= {}
新增对象 obj.a = 1
修改对象 obj.a = ‘a’
查询对象 obj.a
删除对象 delete obj.a

<script>
        /* 创建对象 */
        let obj = {}
        /* 新增对象 */
        obj.a = 1
        obj.b = 2
        /* 修改对象 */
        obj.a = 'chun'
        /* 删除对象 */
        delete obj.a
        /* 查询对象 */
        console.log(obj);
    </script>

2.其他操作

obj[a]=1:另外一种添加方式

 user['自定义变量名'] = '小春'

Object.assign()

let { name } = user 解构语法

<script>
        /* 第一种添加方法 */
        let user = {}
        user.name = '张三'
        user.age = 15
        console.log(user);

        /* 第二种添加方法 */
        user['自定义变量名'] = '小春'
        console.log(user);



        let chun = {}
        /* 深拷贝:转换 */
        Object.assign(chun, user) /* Object.assign转换(chun(装换到哪(目标)),user(转换的来源)) */
        console.log("==========");
        console.log(chun);
        chun.a = 1
        console.log("=====chun=====");
        console.log(chun);
        console.log("=====user=====");
        console.log(user);
        /* 另一种方法 */
        let chun1 = Object.assign({}, user) /* Object.assign转换({}(装换到哪/目标),user(转换的来源)) */
       
        /* 深拷贝:第二种方法 */
        /* 
        JSON.parse(JSON.stringify(user)):
        JSON.stringify(user)(把user转成了字符串)
        JSON.parse()把已经转换成的字符串 再转换成Json对象
         */
        let chun3 = JSON.parse(JSON.stringify(user))
        chun3.yyy = '呦吼'
        console.log('====chun3=====');
        console.log(chun3);
        console.log("=====user=====");
        console.log(user);


        let chun2 = user /* 浅拷贝:直接赋值 */
        chun2.xxx = '哈哈'
        console.log("=====chun2=====");
        console.log(chun2);
        console.log("=====user=====");
        console.log(user);




let { name } = user 解构语法...

        console.log('=====User拿出一个属性======');
        console.log(user.name);
        console.log(user['name']);
        console.log('=====解构语法======');
        /* let { name } = user 解构语法 */
        let { name} = user
        console.log(name);
    </script>

?.
排除接收的数据是否是错误(null或者是undefined)的状态 排除错的代码,让代码运行下去
<script>
        let a = {}
        let b = a ?.x
        console.log(b);
    </script>

??
类似Java中的三元运算符  左边错误(null或者是undefined)会取右边的值
    <script>
        let a = null
        let c = 1
        let b = a ?? c
        console.log(b);
        假如从我的浏览器拿一个  user 的这个数据 如果没有就返回空的对象
        let b = JSON.parse(localStorage.getItem('user') ?? '{}')
    </script>


|| 假设 res 从服务端数据库没拿到数据 则取 {} 对象
<script>

// 从服务端数据库拿到数据
        let res;
        let res1 =res || {}
        console.log(res.name);
</script>



??=  固定两边的值进行一样
<script>

        let a;
        let b;
        console.log(a ??= b);
</script>


键 也可以使用数字代替
<script>
 let jsObj = {
            1: 'a',
            2: 'b'
        }
        console.log(jsObj[1]);


for循环
let jsObj = {
            1: 'a',
            2: 'b'
        }
        console.log(jsObj[1]);
        // 循环jsObj 中的key(键)  获取全部的键值
        for(const key in jsObj){
            console.log(key +'='+jsObj[key]);
        }



if 判断
let jsObj = {
            1: 'a',
            2: 'b'
        }
        //console.log(jsObj[1]);
        // 循环jsObj 中的key(键)
        for (const key in jsObj) {
            //console.log(key + '=' + jsObj[key]);

            if (key === '1') {
                jsObj[key] = jsObj[key] + '123' + 'xiaochun'
                console.log(jsObj[key]);
            }
        }
         console.log(jsObj);
</script>


Debugger 检测代码错误

JS 数组

/*   //第一种创建数组
        let arr = []
        console.log(arr);
        //第二种创建数组
        let arr1 = new Array()
        console.log(arr1);

        //第一种新增数据方法
        arr1[1] = 'nihao'
        //第二种新增数据方法
        arr1.push('小春')

        //修改数据
        arr1[2] = 'xiugai'

        //第一种删除数据 splice(从哪个数据开始,删除几个)
        arr1.splice(0, 1)

        //第二种删除数据 shift(从头部扔出去一个)
        arr1.shift()

        //第二种删除数据 pop(从尾部扔出去一个)
        arr1.pop()

        //查看
        console.log(arr1);


        //切割  slice(切割初始值,切割到第几个(得到的值是第几个减一)) 包头不包尾
        let s = [1, 2, 3, 4, 5] //0 1 2 3
        let c = s.slice(2, 4) //想要 3,4 下标为2的到下标为4的前一个数字
        console.log(c);


         //合并 concat连接 把第一数组的元素和第二个数组的元素进行合并
         let a = [3, 4, 5]
         let b = [1, 2]
         let d = a.concat(b)
         console.log(d);


          // split(以什么进行分割转换数组) 把字符串转化成数组
         let s = '小小春真帅'
         console.log(s.split(''));

        // join('') 把数组的元素 变成字符串
        let a = [1, 2, 3, 4, 5]
        console.log(a.join(''));

        // 正序 sort() [有坑] [1,2,10] ->[1,10,2] .sort((a,b) => a-b)
        let a = [1, 2, 10, 8, 6, 11, 23]
        let s = a.sort((a, b) => a - b) //unicode编码进行排序(需要使用函数运算进行阿拉伯数字排序)
        console.log(s);

        // 倒序  .sort((a,b) => b-a)
        let a = [1, 2, 10, 8, 6, 11, 23]
        let s = a.sort((a, b) => b - a) //unicode编码进行排序(需要使用函数运算进行阿拉伯数字排序)
        console.log(s); */


// indexOf(查询的数据) 查询的元素没有的是 0  有的是按照0开始的下标进行排序获取元素的下标号
        // lastindexOf()  反着进行
        let a = [1, 23, 4, 5]
        console.log(a.indexOf(5)); //2 没有的时候是-1 有这个元素就从0 开始编号

神器

filter() 可以筛选和删除元素

find 筛选
通过find筛选找到李四的数据
通过findindex筛选找到了张三的下标号

map()
把所有名字变成字符串数组 本来是对象现在不想要对象想要把对象变成字符串数组

foreach

reduce 进行统计相加或相减

pre 在之前
current 当前

JSON-数据传输格式(前台页面与后天数据交互的一种格式)

检测JSON对象 https://www.json.cn/

JSON 可以存对象、数组、字符串、数字、布尔型、可以一直嵌套数组套对象，对象里面可以继续嵌套数组下去