文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

书上不教但非常实用的JavaScript实践

2024-11-30 01:03

关注

在学习和实践过程中,我发现有些东西虽然在课程中没有得到明确的教授和解释,但却被开发人员大量使用。

因此,为了帮助JavaScript初学者在掌握基础知识后,能更灵活自如地运用JS知识,我写了这篇文章。

一起来看看吧!

短路运算符

console.log(true || 'something') // 'true'  returns left side expression on the truthy value
console.log(null || 'something') // 'something'

console.log(true && 'somethingNew') // 'something' returns right side expression on the truthy value
console.log(null && 'somethingNew') // 'null' returns left side on falsy value

// nullish operator returns right side only if null or undefined value is on left otherwise it returns right
console.log(null ?? 'printA')
console.log(undefined ?? 'printB')
console.log(false ?? 'printB')
console.log(true ?? 'printB')

//assignment operator
const rest1 = {
  owner: 'Jonas',
  rooms : 15,
  available : true,
}

const rest2 = {
  owner: 'Max',
  rooms : 12,
  available : false,
  booked : 'Yes'
}

rest1.available &&= 'booking done'
rest2.available &&= 'booking done'

console.log(rest1.available) // 'booking done'
console.log(rest2.available) // 'false'

rest1.booked &&= 'yes'
console.log(rest1.booked) //undefined

rest1.booked ||= 'yes'
console.log(rest1.booked) // 'yes' 

rest2.address ??= 'calfornia'
console.log(rest2.address) // 'calfornia' so basically ??= assign the value if not present
rest2.booked ??= 'No'
console.log(rest2.booked) 'Yes' //since the value was already present therefore this No was not updated

可选链接 ?.

可选链接这项JavaScript中的功能,简化了当属性或方法可能不存在时,访问对象上的属性或调用方法的过程。它可帮助防止错误、简化对undefined或null值的条件检查。

可选链接使用?.运算符。请看以下示例:

const person = {
  name: 'John',
  address: {
    street: '123 Main St',
  },
};

// Without optional chaining
const street = person.address ? person.address.street : undefined;

console.log(street); // '123 Main St'

// With Optional chaining
const street = person.address?.street;

console.log(street); // '123 Main St'
const car = {
  startEngine: function () {
    console.log('Engine started');
  },
};

// Without optional chaining
if (car.startEngine) {
  car.startEngine();
}
//with optional chaining
car.startEngine?.(); // 'Engine started'

还可以将可选链接与属性访问和方法调用结合到单个表达式中:

const user = {
  profile: {
    username: 'jsmith',
    greet: function () {
      console.log('Hello, ' + this.username);
    },
  },
};

const greeting = user.profile?.greet?.();

// If `profile` or `greet` are missing, `greeting` will be undefined.

for-of循环

JavaScript中的for… of循环用于遍历可迭代对象,如数组、字符串、映射、集合等的值。与传统的for和while循环相比,语法更简洁、更干净。以下是for… of循环示例:

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}
// Output:
// 1
// 2
// 3
// 4
// 5

遍历字符串示例

const text = "Hello, World!";

for (const char of text) {
  console.log(char);
}
// Output:
// H
// e
// l
// l
// o
// ,
//  
// W
// o
// r
// l
// d
// !

遍历对象示例

const students = [
  { name: "Alice", age: 22 },
  { name: "Bob", age: 25 },
  { name: "Carol", age: 21 },
];

for (const student of students) {
  console.log(student.name, student.age);
}
// Output:
// Alice 22
// Bob 25
// Carol 21

遍历map

const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");

for (const [key, value] of myMap) {
  console.log(key, value);
}
// Output:
// key1 value1
// key2 value2

遍历set

const mySet = new Set([1, 2, 3, 2, 4]);

for (const item of mySet) {
  console.log(item);
}
// Output:
// 1
// 2
// 3
// 4

还可以试试其他循环,例如

const rest2 = {
  owner: 'Max',
  rooms : 12,
  available : false,
  booked : 'Yes'
}

console.log(Object.keys(rest2))
console.log(Object.values(rest2))

for (let prop of Object.keys(rest2)){
  console.log(prop)
}

console.log(Object.entries(rest2))

for(let entry of Object.entries(rest2)){
  console.log(entry)
}

Set

set是唯一数据值的集合。

语法如下所示:

const uniqueSet = new Set(['a','b','b','c','c'])

以下是一些set方法

const uniqueSet = new Set(['a','b','b','c','c'])
console.log(uniqueSet) //Set { 'a', 'b', 'c' }
console.log(uniqueSet.size) //3
console.log(uniqueSet.has('b')) //true
console.log(uniqueSet.has('d')) //false
uniqueSet.add('d')
console.log(uniqueSet.has('d')) //true
uniqueSet.delete('b')
console.log(uniqueSet.has('b')) //false
uniqueSet.clear()
console.log(uniqueSet.size)//0
const animalNames = ["dog", "cat", "lion", "elephant", "dog", "tiger", "cat", "giraffe", "monkey", "elephant"];

const uniqueAnimals = [...new Set(animalNames)];
console.log(uniqueAnimals) //

映射map

映射有点像具有键值对的对象,但有一个区别,在对象中,键始终是字符串类型,而在映射中,键可以具有任何类型。

const rest = new Map();
rest.set('name', 'Dwesis');
rest.set(1,'Prayagraj');
console.log(rest.get('name'))

console.log(rest.set(2, 'Ahmedabad'))

rest.set('categories',['italian','chinese','indian']).set('open',11).set('close',23).set(true,'We are open')
console.log(rest.get(true))
const rest = new Map([

  ['name', 'Dewsis'],
  [true, 'We are open'],
  [false, 'we are close'],
  [1, 'Prayagraj'],
  [2, 'Ahmedabad']
]
)

console.log(rest.get(true)) // 'We are open'
console.log(rest.get(false)) // 'we are close'
console.log(rest.has('open')) // true
console.log(rest.has('close')) // false
console.log(rest.has(3)) // false
console.log(rest.size) // 5

for (let [key,value] of rest){
  console.log(`${key} : ${value}`)
}
//Output
//name : Dewsis
// true : We are open
// false : we are close
// 1 : Prayagraj
// 2 : Ahmedabad

数组 vs set,以及对象 vs Map

数组:

在以下情况下使用数组:

例如:

const colors = ['red', 'green', 'blue'];

set:

在以下情况下使用set:

例如:

const uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]);

对象:

在以下情况下使用对象:

例如:

const person = {
     name: 'John Doe',
     age: 30,
     email: 'johndoe@example.com'
   };

map

在以下情况下使用map:

例如:

const myMap = new Map();
   const key1 = { id: 1 };
   const key2 = { id: 2 };
   myMap.set(key1, 'value1');
   myMap.set(key2, 'value2');

当你需要使用键值对、需要使用各种数据类型作为键、保持插入顺序以及轻松管理数据结构大小等时,Map非常有用。

希望这篇文章能对大家有所帮助。

来源:前端新世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯