初学者学习JavaScript的实用技巧! 1.删除数组尾部元素 2.使用对象解构(object destructuring)来模拟命名参数 3.使用对象解构来处理数组 4.在 Switch 语句中使用范围值 5.await 多个 async 函数 6.创建 pure objects 7.格式化 JSON 代码 8.从数组中移除重复元素 9.平铺多维数组

初学者学习JavaScript的实用技巧!
1.删除数组尾部元素
2.使用对象解构(object destructuring)来模拟命名参数
3.使用对象解构来处理数组
4.在 Switch 语句中使用范围值
5.await 多个 async 函数
6.创建 pure objects
7.格式化 JSON 代码
8.从数组中移除重复元素
9.平铺多维数组

Javascript是一种高级编程语言,通过解释执行。它是一门动态类型,面向对象(基于原型)的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言标准化,它被世界上的绝大多数网站所使用。也被世界主流浏览器(Chrome、IE、FireFox等)支持。那初学者如何入门呢?下面就跟大家分享下初学者学习JavaScript的实用技巧!

  • JavaScript组成部分
  1. 文档对象类型: (DOM) document object module
  2. 浏览器对象类型:(BOM) broswer object module
  • JavaScript能干嘛?
  1. 在HTML静态页面中写动态效果
  2. 对浏览器事件作出响应
  3. 在数据提交到后台之前进行数据验证
  4. 通过node.js擦作数据库
  • JavaScript的特点
  1. 脚本语言
  2. 基于对象
  3. 动态性
  4. 跨平台

 

好了,以上小伙伴们就已经了解了JavaScript是做什么的了,也了解了它的特点,那么下面就来分享一些JavaScript的实用教程技巧。

一个简单方法就是改变数组的 length值:

const arr = [11, 22, 33, 44, 55, 66];

// truncanting

arr.length = 3;

console.log(arr); //=> [11, 22, 33]

// clearing

arr.length = 0;

console.log(arr); //=> []

console.log(arr[2]); //=> undefined

2.使用对象解构(object destructuring)来模拟命名参数

如果需要将一系列可选项作为参数传入函数,你很可能会使用对象(Object)来定义配置(Config)。

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });

function doSomething(config) {

const foo = config.foo !== undefined ? config.foo : 'Hi';

const bar = config.bar !== undefined ? config.bar : 'Yo!';

const baz = config.baz !== undefined ? config.baz : 13;

// ...

}

不过这是一个比较老的方法了,它模拟了 JavaScript 中的命名参数。

在 ES6 中,你可以直接使用对象解构:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {

// ...

}

让参数可选也很简单:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {

// ...

}

3.使用对象解构来处理数组

可以使用对象解构的语法来获取数组的元素:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';

const { 2: country, 4: state } = csvFileLine.split(',');

4.在 Switch 语句中使用范围值

可以这样写满足范围值的语句:

function getWaterState(tempInCelsius) {

let state;

switch (true) {

case (tempInCelsius <= 0):

state = 'Solid';

break;

case (tempInCelsius > 0 && tempInCelsius < 100):

state = 'Liquid';

break;

default:

state = 'Gas';

}

return state;

}

5.await 多个 async 函数

在使用 async/await 的时候,可以使用 Promise.all 来 await 多个 async 函数

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6.创建 pure objects

你可以创建一个 100% pure object,它不从 Object中继承任何属性或则方法(比如constructor,toString()等)

const pureObject = Object.create(null);

console.log(pureObject); //=> {}

console.log(pureObject.constructor); //=> undefined

console.log(pureObject.toString); //=> undefined

console.log(pureObject.hasOwnProperty); //=> undefined

7.格式化 JSON 代码

JSON.stringify除了可以将一个对象字符化,还可以格式化输出 JSON 对象

const obj = {

foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }

};

// The third parameter is the number of spaces used to

// beautify the JSON output.

JSON.stringify(obj, null, 4);

// =>"{

// => "foo": {

// => "bar": [

// => 11,

// => 22,

// => 33,

// => 44

// => ],

// => "baz": {

// => "bing": true,

// => "boom": "Hello"

// => }

// => }

// =>}"

8.从数组中移除重复元素

通过使用集合语法和 Spread 操作,可以很容易将重复的元素移除:

const removeDuplicateItems = arr => [...new Set(arr)];

removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);

//=> [42, "foo", true]

9.平铺多维数组

使用 Spread 操作平铺嵌套多维数组:

const arr = [11, [22, 33], [44, 55], 66];

const flatArr = [].concat(...arr);

//=> [11, 22, 33, 44, 55, 66]

不过上面的方法仅适用于二维数组,但是通过递归,就可以平铺任意维度的嵌套数组了:

function flattenArray(arr) {

const flattened = [].concat(...arr);

return flattened.some(item => Array.isArray(item)) ?

flattenArray(flattened) : flatt

ened;

}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];

const flatArr = flattenArray(arr);

//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]