JS 和 ES6 补充学习

简介: 【8月更文挑战第21天】

1、JS对象-自定义对象
let 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
属性名3:属性值3,
函数名称:function(形参列表){},
函数名称(形参列表){}
};
2、JS对象-JSON对象
JSON概念:本质是通过JavaScript对象标记法书写的文本。

使用场景:现多用于作为数据载体,在网络中进行数据传输。

JSON定义
//两种定义
let 变量名 = {"key":value, "key":value, "key":value,...}

let json = [value,value,value];
value的数据类型为:数字、字符串、逻辑值、数组、对象、null。

js对象转为JSON字符串
let str = JSON.stringify(json);
JSON字符串转为js对象
let json = JSON.parse(str);
3、JS对象-BOM对象
概念:BOM浏览器对象模型,指的是JS将浏览器的各个组成部分封装为对象,使用对象可以操作浏览器。
组成:
Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
Window对象:浏览器窗口对象,可以直接使用,使用的时候也可以省略不写。
alert(msg):显式带有一段消息和一个确认按钮的警告框。
confirm(msg) - 对话框 -- 确认:true,取消:false
setInterval(function,毫秒值) - 定时器 --按照指定的周期(以毫秒计)循环调用函数
setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
location对象:地址栏对象,获取或者设置地址栏地址,设置地址栏地址可以实现页面跳转效果。
// confirm(msg) - 对话框 -- 确认:true,取消:false
let flag=confirm("您确定要删除吗?");
if(flag){
alert("开始删除数据...");
}

    //setInterval(function,毫秒值) - 定时器 --按照指定的周期(以毫秒计)循环调用函数
    setInterval(function(){
        console.log("循环定时器执行");
    },2000);

    //setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
    setTimeout(function(){
        console.log("一次定时器执行");
    },2000);

    //获取地址栏地址
    let href=location.href;
    location.href="http://www.baidu.com"//效果:会页面跳转
    console.log(href);

4、JS对象-DOM对象
1、概念
DOM是文档对象模型,将HTML的各个组成部分封装为对应的对象:

Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript通过DOM,就能够对HTML进行操作:

改变HTML元素的内容
改变HTML元素的属性
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
2、DOM操作-获取元素对象
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
获取:使用Document对象的方法来获取(ES5提供的方法)
document.getElementById:根据id属性值获取,返回一个Element对象
document.getElementsByTagName:根据标签名获取,返回Element对象数组
document.getElementsByName:根据name属性值获取,返回Element对象数组
document.getElementsByClassName:根据class属性值获取,返回Element对象数组
获取:使用Document对象的方法来获取(ES6提供的方法)
document.querySelector("css选择器"):根据css选择器获取一个Element对象
document.querySelectorAll("css选择器"):根据css选择器获取一个Element对象数组
3、DOM操作-使用元素对象
Element:元素对象的使用(查阅文档)
常用操作:
访问内容体:元素对象.innerHTML h2.innerHTML="scc";
访问输入框内容:元素对象.value console.log(usernameInput.value);
访问属性:元素对象.属性名 img.src="img/on.gif";
访问样式:元素对象.style.样式属性名 h2.style.color="red";
步骤:
获取元素对象
操作内容、属性、样式

教育

程序员

电影
旅游
游戏


1、变量、常量、数据类型
变量可以用let定义,常量用const定义
常量定义后不能被重新赋值
// 字符串类型 string
let name="sss";
// 数字类型 number
let balance=100;
// 布尔类型 boolean
let tv=true;
// 对象 object
let boy={
name:"sss",
age:20,
weight:88.7
}
// 键值对 Map
let girl=new Map([
["name","luna"],
["age",18]
])
console.log(girl);//Map(2) {'name' => 'luna', 'age' => 18}
// 元素不重复 Set
let number=new Set([1,2,3,2,'2']);
console.log(number);//{1, 2, 3, '2'}
// 数组 Array
let arr=['a',100,'b'];
// 函数 function
function add(a,b){
console.log(a+b);
}
// 类 class
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
info(){
console.log(this.name,this.age);
}
}
let person=new Person("sss",18);
person.info();

2、函数
// 定义函数
function add(){
let i=5;
return i;
}

    // 传参
    function sub(number){
        return number-1;
    }

    // 默认值
    function getPage(page = 10){
        return page;
    }

    // 匿名函数
    let arr = function(x,y){
        return x+y;
    }

    // 箭头函数(匿名函数的一种)
    let plus = (x,y)=>{
        return x+y;
    }

    // 隐式返回
    let nun = (x,y)=> x+y;

3、数组
// 定义数组
let arr=[10,11];

    // push 向数组末尾添加一个或多个元素,并返回修改后数组的长度
    let arrlength=arr.push(12,13);

    // unshift 向数组开头添加一个或多个元素,并返回修改后数组的长度
    let arrlength2=arr.unshift(19);

    // shift 删除数组中的第一个元素,并返回被删除元素
    let delet1=arr.shift();

    // pop 删除数组中的最后一个元素,并返回被删除元素
    let delet2=arr.pop();

    // splice 删除元素,并返回包含被删除元素的数组 splice(要删除元素的索引位置,要删除的元素数量)
    let delet3=arr.splice(2,1);

    // reverse 反转数组
    arr.reverse();

    // sort 数组中的元素按首字母排序
    arr.sort();

    // 数组中的元素按数字排序
    let arr2=[1,5,6,7,2];
    arr2.sort((a,b)=>a-b);

    // filter 符合筛选条件的元素,返回一个新的数组
    let arr3=arr2.filter((value,index)=>{
        return value>5;
    })

    // concat 合并数组
    arr.concat(arr2);

    // 使用for...of遍历数组
    for (let i of arr) {
        console.log(i);
    }

    // 使用forEach遍历数组
    arr.forEach(value=>{
        console.log(value);
    })

4、Set集合、扩展运算符
// 创建Set集合
let set=new Set();
let set2=new Set(['a','b','c']);

    //add 添加新的元素
    set2.add("n");

    // delete 删除元素
    set2.delete("b");

    // has 检查Set集合是否包含指定元素
    console.log(set2.has("b"));

    // size 获取Set集合的大小
    console.log(set.size);

    // Array.from()将Set集合转换为数组
    let arr=Array.from(set2);

    // 扩展运算符...将Set集合转换为数组
    let arr2=[...set2];

    // 扩展运算符是用于展开可迭代对象(如数组、字符串等)
    let arr3="sssskkkals";
    console.log([...arr3]);//['s', 's', 's', 's', 'k', 'k', 'k', 'a', 'l', 's']

    // for...of循环遍历
    for (let ik of arr3) {
        console.log(ik);
    }

    // forEach方法遍历
    arr3.forEach((value) => {
        console.log(value);
    });

    // clear 清空Set
    set2.clear();

    // 数组去重
    let num=[1,20,392,329,1,1,3,20];
    let set3=new Set(num);

5、Map集合
// 创建Map集合
let map=new Map();
let map2=new Map([
["name","sss"],
["age",20],
["gender","girl"]
])

    //set 添加新的元素
    //在Map集合中, 每个键都是唯一的, 当使用相同的键再次调用set()方法时, 会替换原来键对应的值
    map2.set("height",170);

    // delete 删除元素
    map2.delete("gender");

    // has 检查Map集合是否包含指定元素
    console.log(map2.has("gender"));

    // size 获取Map集合的大小
    console.log(map2.size);

    // Array.from()将Map集合转换为数组
    let arr=Array.from(map2);

    // 扩展运算符...将Map集合转换为数组
    let arr2=[...map2];

    // for...of循环遍历
    //解构可以从数组或对象中提取值并赋给变量
    //[key, value] 就是一种解构语法, 用于将 Map 集合中的键值对解构为 key 和 value 两个变量
    for (let [key,value] of map2) {
        console.log(key,value0)
    }

    // forEach方法遍历
    map2.forEach((value,key) => {
        console.log(key,value);
    });

    // clear 清空Map
    map2.clear();

6、对象
// 创建对象
let person={
name:"sss",
gender:"girl",
age:26
};

    // 向对象中添加新的属性
    person.height=170;

    //  在对象中,每个键都是唯一的,当使用相同的键再次赋值时,会替换原来键对应的值
    person.age=20;

    //  删除属性
    delete person.gender;

    //  检查对象是否包含指定属性
    let i = "age" in person;
    console.log(i);

    //  获取对象属性名的数组
    Object.keys(person);

    //  获取对象的属性数量
    console.log(Object.keys(person).length);

    //  获取对象的键值对数组
    Object.entries(person);

    // 使用for...in循环遍历对象 
    // for...of 用于遍历可迭代对象[如数组、Set、Map、字符串等]
    // for...in 用于遍历对象的可枚举属性
    for (let key in person) {
        console.log(key,person[key]);
    }

    // 使用forEach方法遍历
    Object.entries(person).forEach(([key,value])=>{
        console.log(key,value);
    })

    // 清空对象
    person={};

7、类class、模板字符串、私有属性、存取器、继承
class Person{
name;
// 私有属性,仅在类内部可访问和操作的属性, 外部无法直接访问和修改

        #age;

        // 构造函数
        constructor(name,age){
            this.#age=age;
            this.name=name;
        }

        // 使用存取器getter获取私有属性
        get age(){
            return this.#age;
        }
相关文章
|
16天前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
1月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
6天前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
7天前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
6天前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
25 9
|
7天前
|
JavaScript 前端开发 算法
紧跟月影大佬的步伐,一起来学习如何写好JS(下)
该文章延续了上篇的内容,进一步探讨了编写优秀JavaScript代码的实践,强调了代码风格一致性、性能优化、团队约定的重要性,并通过实际案例分析了如何在不同场景下写出合适的代码。
|
17天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
11天前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
19 3
|
11天前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
15 2
|
22天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载