js语法入门与dom操作-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75863942/article/details/146381338

一、js语法

（3）Object.create() 方式

10.常用内置对象JSON、Date、Math

一、js语法

1.变量声明

（1）var 声明的变量具有函数作用域，意味着在函数内部声明的变量在函数外部无法访问，但在函数内部的任何位置都可以访问。

使用 var 声明的变量会被提升到其所在作用域的顶部，这意味着可以在变量声明之前访问该变量，但此时变量的值为 undefined。

（2）let 声明的变量具有块级作用域，块级作用域由 {} 界定，如 if 语句、for 循环等。在块级作用域内声明的变量在块外部无法访问。

let 声明的变量不会被提升到作用域顶部，在变量声明之前访问会导致引用错误。

（3）和 let 一样，const 声明的常量也具有块级作用域

一旦常量被赋值，就不能再重新赋值。

2.数据类型

数据类型：undefined number string boolean null(object)

3.运算符

算数运算符：+ - * / % **

赋值运算符：= += -= *= /= %= **= ++a a++

++a:先加1再返回

a++:先返回再加1

比较运算符：> < >= <= ==(值等于即为真如：10="10"为真) != ===(全等于：值与类型均等于为真)

逻辑运算符：&& || !

三元运算符：如：console.log(a > b ? "hello" : "hi")，若a>b返回hello，若a<b返回hi。

4.分支语句

`（1）if...else` 语句

if (condition) {
    // 当 condition 为 true 时执行的代码块
} else {
    // 当 condition 为 false 时执行的代码块
}

（2）嵌套 `if...else` 语句

let score = 85;
if (score >= 90) {
    console.log("成绩优秀");
} else if (score >= 80) {
    console.log("成绩良好");
} else if (score >= 60) {
    console.log("成绩及格");
} else {
    console.log("成绩不及格");
}

（3）`switch` 语句

switch (expression) {
    case value1:
        // 当 expression 的值等于 value1 时执行的代码块
        break;
    case value2:
        // 当 expression 的值等于 value2 时执行的代码块
        break;
    default:
        // 当 expression 的值与所有 case 都不匹配时执行的代码块
}

5.循环语句

（1）`for` 循环

// 打印 1 到 5 的数字
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

（2）`while` 循环

// 打印 1 到 5 的数字
let j = 1;
while (j <= 5) {
    console.log(j);
    j++;
}

（3）`do...while` 循环

// 打印 1 到 5 的数字
let k = 1;
do {
    console.log(k);
    k++;
} while (k <= 5);

（4）`for...in` 循环

const person = {
    name: 'John',
    age: 30,
    occupation: 'Engineer'
};

for (let key in person) {
    console.log(key + ': ' + person[key]);
}

（5）`for...of` 循环

// 遍历字符串
const str = 'hello';
for (let char of str) {
    console.log(char);
}

6.字符串

let s = "heLLo wOrld";

（1）字符串长度：console.log(s.length);

（2）根据索引找元素：console.log(s.charAt(6),s[6]);

（3）根据元素找索引：console.log(s.indexOf("w"));

（4）判断字符串是否包括元素：console.log(s.includes("e"));

（5）获取指定范围元素（不包括右边）：console.log(s.slice(6,8));

（6）替换（不改变元字符串）： console.log(s.replace("hello","hi",s));

（7）切割console.log(s.split(" "));

（8）判断是否一某元素开头结尾： console.log(s.startsWith("h"),s.endsWith("d"));

（9）全小写全大写：console.log(s.toLowerCase(),s.toUpperCase());

（10）剔除空格 trimStart（剔除左边） trimEnd（剔除右边）： console.log(" 123456 ".trim()," 123456 ".trimStart()," 123456 ".trimEnd());

7.数组

let l = [1, 3, 5];

（1）获取数组元素索引：l.indexOf(3);

（2）末尾插入：l.push(7);

（3）头部插入：l.unshift(0);

（4）末尾删除： let r = l.pop()

（5）头部删除：let r = l.shift()

（6）索引删除个数插入的元素：l.splice(1, 0, 2);

（7）对数组的每个元素执行一次（数组项索引数组）

l.forEach((item, index, array)=>{

console.log(item, index, array);

})

（8）判断所有元素是否满足条件

let r = l.every((item, index)=>{

return item > 0;

})

（9）判断是否有元素满足条件

let r = l.some((item, index)=>{

return item > 4;

})

（10）找到一个满足条件的元素

let r = l.find(function(item, index){

return item > 2;

})

（11）过滤所有满足条件的元素

let r = l.filter(function (item, index) {

return item > 2;

})

（12）数组逆序

l.reverse();

（13）正序

l.sort()

（14）逆序

l.sort((a, b)=>{

if (a > b){

return -1;

}

return 1;

})

（15）数组是否包括该元素

l.includes(5)

（16）切割

一个数默认到最后：

l.slice(1);

两个数限定切割范围(不包括右边)：

l.slice(1,2);

8.对象

对象是一种无序的数据集合，由键值对构成，键通常是字符串，值可以是任意数据类型，包括其他对象。

（1）对象的创建

// 创建一个简单的对象
const person = {
    name: 'John',
    age: 30,
    isStudent: false
};

（2）构造函数方式

// 使用构造函数创建对象
function Person(name, age, isStudent) {
    this.name = name;
    this.age = age;
    this.isStudent = isStudent;
}

const anotherPerson = new Person('Jane', 25, true);

（3）`Object.create()` 方式

// 创建一个原型对象
const proto = {
    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// 使用 Object.create() 创建对象
const yetAnotherPerson = Object.create(proto);
yetAnotherPerson.name = 'Bob';
yetAnotherPerson.sayHello();

（4）访问属性

const person = {
    name: 'John',
    age: 30
};

// 点号表示法
console.log(person.name); 

// 方括号表示法
console.log(person['age']);

（5）添加属性

person.gender = 'Male';
person['hobby'] = 'Reading';

（6）删除属性

delete person.gender;

9.原型与原型链

// 创建一个普通对象
const person = {
    name: 'John',
    age: 30
};

// 访问对象的原型
const prototype = person.__proto__;
console.log(prototype === Object.prototype);

10.常用内置对象JSON、Date、Math

（1）JSON

JSON.stringify(value, replacer, space)：将对象或值转换为 JSON 字符串。
JSON.parse(text, reviver)：将 JSON 字符串解析为对象。

（2）Date

new Date()：创建一个表示当前日期和时间的对象
getFullYear()：返回年份
getMonth()：返回月份
getDate()：返回日期
getHours()：返回小时
getMinutes()：返回分钟
getSeconds()：返回秒
setFullYear(year)：设置年份
setMonth(month)：设置月份
setDate(date)：设置日期

（3）Math

Math.abs(x)：返回 x 的绝对值
Math.ceil(x)：向上取整
Math.floor(x)：向下取整
Math.max(x1, x2, ..., xn)：返回一组数中的最大值
Math.min(x1, x2, ..., xn)：返回一组数中的最小值
Math.pow(x, y)：返回 x 的 y 次幂
Math.sqrt(x)：返回 x 的平方根
Math.random()：返回一个介于 0（包含）和 1（不包含）之间的随机数