当前位置：文档之家 › js七个重点

js七个重点

  • 格式：docx
  • 大小：23.73 KB
  • 文档页数：8

JavaScript初学者应注意的七个细节每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。

本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。

（1）简化代码JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：var car = new Object();car.colour = 'red';car.wheels = 4;car.hubcaps = 'spinning';car.age = 4;下面的写法可以达到同样的效果：var car = {colour:'red',wheels:4,hubcaps:'spinning',age:4}后面的写法要短得多，而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法，过去我们声明数组是这样写的：var moviesThatNeedBetterWriters = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');更简洁的写法是：var moviesThatNeedBetterWriters = ['Transformers','Transformers2','Avatar','Indiana Jones 4'];对于数组，还有关联数组这样一个特别的东西。

你会发现很多代码是这样定义对象的：var car = new Array();car['colour'] = 'red';car['wheels'] = 4;car['hubcaps'] = 'spinning';car['age'] = 4;这太疯狂了，不要觉得困惑，“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符，举个例子：var direction;if(x < 200){direction = 1;} else {direction = -1;}我们可以使用如下的代码替换这种写法：var direction = x < 200 ? 1 : -1;（2）使用JSON作为数据格式伟大的Douglas Crockford发明了JSON数据格式来存储数据，你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换，例如：var band = {"name":"The Red Hot Chili Peppers","members":[{"name":"Anthony Kiedis","role":"lead vocals"},{"name":"Michael 'Flea' Balzary","role":"bass guitar, trumpet, backing vocals"},{"name":"Chad Smith","role":"drums,percussion"},{"name":"John Frusciante","role":"Lead Guitar"}],"year":"2009"}你可以使用在JavaScript中直接使用JSON，甚至作为API返回的一种格式，在许多的API中被应用，例如：<div id="delicious"></div><script>function delicious(o){var out = '<ul>';for(var i=0;i<o.length;i++){out += '<li><a href="' + o[i].u + '">' +o[i].d + '</a></li>';}out += '</ul>';document.getElementById('delicious').innerHTML = out;}</script><scriptsrc="/v2/json/codepo8/javascript?count=15&c allback=delicious"></script>这里调用delicious 的Web服务获取最新书签，以JSON格式返回，然后将它们显示成无序列表的形式。

从本质上讲，JSON是用于描述复杂的数据最轻量级的方式，而且直接它运行在浏览器中。

你甚至可以在PHP中调用json_decode（）函数来使用它。

（3）尽量使用JavaScript原生函数要找一组数字中的最大数，我们可能会写一个循环，例如：var numbers = [3,342,23,22,124];var max = 0;for(var i=0;i<numbers.length;i++){if(numbers[i] > max){max = numbers[i];}}alert(max);其实，不用循环可以实现同样的功能：var numbers = [3,342,23,22,124];numbers.sort(function(a,b){return b - a});alert(numbers[0]);而最简洁的写法是：Math.max(12,123,3,2,433,4); // returns 433你甚至可以使用Math.max来检测浏览器支持哪个属性：var scrollTop= Math.max(doc.documentElement.scrollTop,doc.body.scrollTop);如果你想给一个元素增加class样式，可能原始的写法是这样的：function addclass(elm,newclass){var c = elm.className;elm.className = (c === '') ? newclass : c+' '+newclass; 而更优雅的写法是：function addclass(elm,newclass){var classes = elm.className.split(' ');classes.push(newclass);elm.className = classes.join(' ');}（4）事件委托事件是JavaScript非常重要的一部分。

我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：<h2>Great Web resources</h2><ul id="resources"><li><a href="/wsc">Opera Web StandardsCurriculum</a></li><li><a href="">Sitepoint</a></li><li><a href="">A List Apart</a></li><li><a href="">YUI Blog</a></li><li><a href="">Blame it on thevoices</a></li><li><a href="">Oddly specific</a></li></ul>脚本如下：// Classic event handling example(function(){var resources = document.getElementById('resources');var links = resources.getElementsByTagName('a');var all = links.length;for(var i=0;i<all;i++){// Attach a listener to each linklinks[i].addEventListener('click',handler,false);};function handler(e){var x = e.target; // Get the link that was clickedalert(x);e.preventDefault();};})();更合理的写法是只给列表的父对象绑定事件，代码如下：(function(){var resources = document.getElementById('resources');resources.addEventListener('click',handler,false);function handler(e){var x = e.target; // get the link thaif(x.nodeName.toLowerCase() === 'a'){alert('Event delegation:' + x);e.preventDefault();}};})();（5）匿名函数关于JavaScript的最头疼的事情之一是，它的变量没有特定的作用范围。

合集下载

后盾人：JS第七章-（Map类型）

后盾人：JS第七章-（Map类型）

后盾⼈：JS第七章-（Map类型）1.map类型特点键名可以是任意类型2.增删改查操作map.set() //添加元素map.get() //获取元素map.delete() //删除某个元素map.clear() //删除全部元素map.has() //检测是否存在3.遍历MapMap.keys() //获取所有键Map.values() //获取所有值Map.entries() //获取所有键值对for of ⽅法遍历foreach ⽅法遍历4.类型转换使⽤展开语法转换为数组 [...map]5.Map管理DOM节点<body><div name="后盾⼈"></div><div name="开源内容"></div></body><script>let map = new Map()document.querySelectorAll("div").forEach(item => {map.set(item, {content: item.getAttribute('name')})})map.forEach((config, element) => {element.addEventListener("click", () => {alert(config.content)})})</script>6.使⽤Map类型控制表单提交<body><form action="" onsubmit="return post()">接受协议：<input type="checkbox" name="agreement" error="请接受协议">我是学⽣：<input type="checkbox" name="student" error="只对学⽣开放"><input type="submit" /></form></body><script>function post() {let map = new Map()let inputs = document.querySelectorAll("[error]") inputs.forEach(item => {map.set(item, {error: item.getAttribute("error"),status: item.checked})});return [...map].every(([elem, config]) => {config.status || alert(config.error)return config.status})}7.WeakMap 语法let map = new Weakmap()Weakmap 是弱引⽤类型。

程序员必须掌握的10个编程语言

程序员必须掌握的10个编程语言

程序员必须掌握的10个编程语言随着信息技术的不断发展，编程语言也在不断涌现。

作为一名程序员，学习多种编程语言不仅可以提升自己的技能水平，也可以扩展自己的视野和职业发展机会。

以下是程序员必须掌握的10个编程语言。

第一章：JavaJava是应用最广泛的编程语言之一。

几乎所有类型的应用，从企业级应用、移动应用到嵌入式系统，都可以使用Java进行开发。

Java强大的跨平台性能，使得它可以在不同的操作系统和硬件平台下运行。

第二章：PythonPython是一种高级脚本语言，具有简单易学、高效率和可读性强等优点。

Python应用广泛，可以用于Web开发、数据分析、科学计算、系统自动化、人工智能等领域。

近年来Python凭借在机器学习、数据分析等领域的表现逐渐成为热门的编程语言。

C#是一种面向对象、类型安全、简单、先进且具有高性能的编程语言，被广泛用于Windows应用程序开发。

C#和.NET框架一起，提供了一种高效的开发环境，可以创建各种类型的应用程序。

第四章：JavaScriptJavaScript是一种广泛使用的编程语言，主要用于前端开发。

它可以帮助程序员在Web页面中实现动态效果、表单验证、数据处理等功能。

JavaScript也可以用于服务器端编程，例如Node.js的应用。

第五章：SQLSQL是结构化查询语言的缩写，是一种用于管理关系型数据库的标准语言。

SQL可以用于定义表格、查询数据、更新数据、删除数据等操作。

程序员学习SQL可以帮助他们更好地理解数据库系统，从而提高应用程序的性能和可靠性。

C++是一种高级编程语言，具有高性能和低级别的控制能力。

C++可以用于开发桌面应用程序、游戏、操作系统和嵌入式系统等。

然而，由于C++对程序员的要求比较高，对于初学者来说可能比较困难。

第七章：SwiftSwift是一种由苹果公司开发的编程语言，主要用于开发iOS和macOS应用程序。

Swift语言具有易学性、速度快、安全性高等特点。

js的七大原则--单一原则、开闭原则、替换原则（一）

js的七大原则--单一原则、开闭原则、替换原则（一）

js的七⼤原则--单⼀原则、开闭原则、替换原则（⼀）⼀.前⾔：js 的七⼤设计原则：1.单⼀原则2.开闭原则3.⾥⽒替换原则4.依赖倒转原则5.接⼝隔离原则6.合成复⽤原则7.迪⽶尔法则⼆.单⼀原则1.定义：单⼀原则就是⼀个对象或者⼀个⽅法，只做⼀件事。

⽐如，⽬前公司的前端框架，如下图：在src中api只是做接⼝层，assets⾥⾯是公共的⽅法，components是⽤来放组件的,⾥⾯的base和business分别存放的是基础组件和业务组件，mixins是⽤来存放混⼊的东西的。

store⽂件时⽤来放vuex中的东西的，style⽂件是⽤来存放样式的。

每个⽂件都有各⾃的职责，也都只负责⼀件事情。

这就符合单⼀职责的。

遵循单⼀职责的优点：1.可以降低类的复杂度，⼀个类只负责⼀项职责，其逻辑肯定要⽐负责多项职责简单的多。

2.提⾼类的可读性，提⾼系统的可维护性。

3.变更引起的风险降低，变更时必然的，如果单⼀职责原则遵守的好，当修改⼀个功能时，可以显著降低对其他功能的影响。

三.开闭原则尽量通过扩展软件实体来解决需求变化，⽽不是通过修改已有的代码来完成变化。

⼀个软件产品的⽣命周期内，都会发⽣变化，既然变化是⼀个既定的事实，我们就应该在设计的时候，尽量的适应这些变化。

以提⾼项⽬的稳定性和灵活性。

四.⾥⽒替换原则严格的定义：如果对每⼀个类型为T1的对象o1,都有类型为T2的对象o2,使得以T1定义的所有程序p在所有的对象o1都换成o2的时候，程序p的⾏为没有变化，那么类型T2就是类型T1的⼦类型。

通俗的定义：所有引⽤基类的地⽅必须能透明地使⽤其⼦类的功能。

更通俗的定义：⼦类可以扩展⽗类的功能，但是不能改变⽗类原有的功能。

⾸先来看⼀个例⼦，看它是否满⾜“⾥⽒替换”的原则//定义⼀个矩形类class Rectangle {constructor() {this.width=0;this.height=0;}setWidth(width) {this.width = width}setHeight(height) {this.height = height}getArea() {return this.width * this.height}}//定义⼀个正⽅形类，继承于矩形类class Square extends Rectangle {constructor() {super();}setWidth(width) {this.width = width;this.height = width;}setHeight(height) {this.height = heightthis.width = height}}// 执⾏的⽅法function result(rectangles) {rectangles.forEach((rectangle) => {rectangle.setHeight(5)rectangle.setWidth(4)let area = rectangle.getArea()console.log('area', area)})}let rectangles = [new Rectangle(), new Rectangle(), new Square()];result(rectangles) //结果是20 ，20， 16在我当初看到这个代码的时候，我的疑惑点在于为什么正⽅形求⾯积是16。

七种JS数据类型---Symbol

七种JS数据类型---Symbol

七种JS数据类型---Symbol七种JS数据类型六种基本类型：string、number、boolean、null、undefined、symbol（ES6新增）⼀种引⽤数据类型：boject、array、function// 1、symbol函数前不能使⽤new关键字，否则会报错，这是因为symbol是原始数据类型，⽽不是对象，所以不能添加属性。

let s = Symbol();typeof s;//"symbol"//2、 symbol可以接受⼀个字符串作为参数，表⽰对Symbol的描述，主要是在控制台显⽰时容易区分//3、这个参数可以不加，如果不加在控制台输出就是两个Symbol()不利于区分，加上参数就是为了加以区分。

var s1 = Symbol("foo");var s2 = Symbol("bar");s1 // Symbol("foo")s2 // Symbol("bar")s1.toString() // "Symbol(foo)"s2.toString() // "Symbol(bar)//4、 Symbol不能与其他值进⾏运算，否则会报错// 5、Symbol是唯⼀的与谁都不相等// 没有参数的情况var s1 = Symbol();var s2 = Symbol();s1 == s2 // false// 有参数的情况var s1 = Symbol("foo");var s2 = Symbol("foo");s1 == s2 // false// 6、Symbol 可以显⽰的转为字符串，布尔值，但是不能转为数字，转为数字会报错// 7、由于每⼀个Symbol都不相同，那么可以作为标识符作为对象的属性名，保证不会出现同名的的属性var mySymbol = Symbol();//第⼀种写法var a = {};a[mySymbol] = "Hello!";//第⼆种写法var a = {[mySymbol]: "Hellow!"}//第三种写法var a = {};Object.defineProperty(a, mySymbol, { value: "Hellow!" });//以上写法的结果都相同a[mySymbol] // "Hellow!"// 8、Symbol值作为对象的属性名时不能使⽤点运算符，同理，在对象的内部使⽤Symbol值时也必须放在⽅括号中。