学习React之前你需要知道的的JavaScript基础知识

2018/07/25 · JavaScript
· React

原文出处:

随便找一本JavaScript入门级的书籍,或者相关视频,阅读关于基础语法的章节,所需要的知识点有:
(1)JavaScript语法。包括语句、注释、变量、数据类型、数组(注意关联数组,Java、C++的数组中没有这个概念)、对象的基本只是
(2)操作运算符。这个与Java、C++基本上是一样的,读者快速过一下就行了
(3)条件语句、循环语句、switch语句。这个与Java、C++基本上是一样的
(4)函数。JavaScript中函数也是一种变量,知道了这一点,其他与Java、C++基本上是一样的
(5)对象。JavaScript的对象定义、实现比Java、C++宽松很多,需要稍微适应一下

最近开始学习JavaScript,整理了一些相关的基础知识

2017年的学习这个词成了热词之一,各种知识服务层出不穷。这当然是好事,同时对于我自己来说,有些概念需要让自己分得清楚,然后才能真的开始。

声明(Declarations)

Robin   译文出处:[众成翻译

_小生_]()   

在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript
ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用性,不变性或高阶函数。这些是基础知识,在开始使用React之前你不需要掌握这些基础知识,但在学习或实践它时肯定会出现这些基础知识。

以下演练是我尝试为您提供一个几乎广泛但简明的列表,其中列出了所有不同的JavaScript功能,以补充您的React应用程序。如果您有任何其他不在列表中的内容,只需对本文发表评论,我会及时更新。

这些基本知识点,大多与Java或者OC的相关知识点很类似,如果有基础,差不多一天就可以了,不需要搭建JavaScript的开发环境来练习、巩固这些知识点。因为在React
Native开发环境中编写代码就可以联系这些基本的JavaScript知识点。

 

翻译的书是中文版还是中译版?

举几个小事做个说明。第一个是中信出版社的《出版人》的翻译版第五章,153页上有这样的话

但是,尽管卢斯在希腊语方面要精通得多,提议杂志的语言应该取法《伊利亚特》哈登使用的可能是塞缪尔·巴特勒(Sanmuel
Butler)的译本,它是二十世纪最常用的《伊利亚特》英译本。的人却是哈登。

上面的这段话有好几处错误,我简直惊呆了。这还只是标点的错误,翻译错误有没有我也不确定。但是我看到过不少翻译错误的。

腾讯视频上有一个霍金主讲的系列视频,介绍宇宙的。其中一集《一切的开始》的有一句话的字幕是这样的:

在宇宙中找到类似我们的外星生物将会是物学的巨大成功

其实“物学”这个词在视频对应的英语是“science”,很明显的错误。

图片 1

《超越感觉:批判性思考指南》这本书的第一章有一句话,原文是:“To provide
all that information would be quite a
chore.”意思是要提供所有的信息会是一件苦差事。你知道给翻译成什么了吗?你去搜一下就知道,中译版是这样翻译的:

当然,提供所有这些信息相当地会是家务杂事。

这种例子要举的话,还可以找到很多。与其读了中译版不放心,再找原版确定,还不如尽量的读原版。

undefined值在布尔类型环境中会被当作false。

目录

  • 从JavaScript中学习React
  • React 和 JavaScript
    Classes
  • React中的箭头函数
  • 作为React中的组件的fuuction
  • React类组件语法
  • 在React中的Map, Reduce 和
    Filter
  • React中的var,let和const
  • React中的三元运算符
  • React中的Import 和
    Export
  • React中的库
  • React中的高阶函数
  • React中的解构和传播运算符
  • There is more JavaScript than
    React

JS注释方式:
//
单行注释(Ctrl+/ )
/*

讲书还是浓缩书

我看现在有很多浓缩书和讲书,这真不错,可以比较快的了解一本书的大致。话又说回来,对于我来说,还不能代替读书。更大程度上讲书是别人给我介绍某本书,浓缩是看的某书的简略版。读完一本书就能完全吸收这件事是个神话故事。读书的过程会有遗漏,而讲书和浓缩书天然就是遗漏版的。几万字甚至十几万的内容,想在二十分钟内读懂,对大部分人来说特别神话。所以这些可以当做是选书的一种依据,自己要明白那不是阅读。

有句话我很喜欢:没人能代替你学习。仔细想想也能明白,就跟只吃饭不可能长肌肉一样,读书需要一个过程,一个自己理解并据此改变的过程。这个过程无法避免,也不可能跳过去的。

数值类型环境中undefined值会被转换为NaN。

从JavaScript中学习React

当你进入React的世界时,通常是使用用于启动React项目的
create-react-app。设置项目后,您将遇到以下React类组件:

JavaScript

import React, { Component } from ‘react’; import logo from ‘./logo.svg’;
import ‘./App.css’; class App extends Component { render() { return (
<div> <header> <img src alt=”logo” />
<h1>Welcome to React</h1> </header> <p> To get
started, edit <code>src/App.js</code> and save to reload.
</p> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
 
class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

可以说,React类组件可能不是最好的起点。新手有许多东西需要消化,不一定是React:类语句,类方法和继承。导入语句也只是在学习React时增加了复杂性。尽管主要焦点应该是JSX(React的语法),但通常所有的事情都需要解释。这篇文章应该揭示所有的东西,大部分是JavaScript,而不用担心React。

段落注释(Ctrl+shift+/ )
*/

对一个空变量求值时,空值 null
在数值类型环境中会被当作0来对待,而布尔类型环境中会被当作false

React和JavaScript类

在开始时遇到React类组件,需要有关JavaScript类的基础只是。JavaScript类在语言中是相当新的。以前,只有JavaScript的原型链也可以用于继承。JavaScript类在原型继承之上构建,使整个事物更简单。

定义React组件的一种方法是使用JavaScript类。为了理解JavaScript类,您可以花一些时间在没有React的情况下学习它们。

JavaScript

class Developer { constructor(firstname, lastname) { this.firstname =
firstname; this.lastname = lastname; } getName() { return this.firstname

  • ‘ ‘ + this.lastname; } } var me = new Developer(‘Robin’, ‘Wieruch’);
    console.log(me.getName());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
 
  getName() {
    return this.firstname + ‘ ‘ + this.lastname;
  }
}
 
var me = new Developer(‘Robin’, ‘Wieruch’);
 
console.log(me.getName());

类描述了一个实体,该实体用作创建该实体实例的蓝图。一旦使用new语句创建了类的实例,就会调用该类的构造函数,该实例化该类的实例。因此,类可以具有通常位于其构造函数中的属性。此外,类方法(例如getName())用于读取(或写入)实例的数据。类的实例在类中表示为此对象,但实例外部仅指定给JavaScript变量。

通常,类用于面向对象编程中的继承。它们在JavaScript中用于相同的,而extends语句可用于从另一个类继承一个类。具有extends语句的更专业的类继承了更通用类的所有功能,但可以向其添加其专用功能。

JavaScript

class Developer { constructor(firstname, lastname) { this.firstname =
firstname; this.lastname = lastname; } getName() { return this.firstname

  • ‘ ‘ + this.lastname; } } class ReactDeveloper extends Developer {
    getJob() { return ‘React Developer’; } } var me = new
    ReactDeveloper(‘Robin’, ‘Wieruch’); console.log(me.getName());
    console.log(me.getJob());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
 
  getName() {
    return this.firstname + ‘ ‘ + this.lastname;
  }
}
 
class ReactDeveloper extends Developer {
  getJob() {
    return ‘React Developer’;
  }
}
 
var me = new ReactDeveloper(‘Robin’, ‘Wieruch’);
 
console.log(me.getName());
console.log(me.getJob());

基本上,它只需要完全理解React类组件。
JavaScript类用于定义React组件,但正如您所看到的,React组件只是一个React组件,因为它继承了从React包导入的React
Component类的所有功能。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { return ( <div> <h1>Welcome to React</h1>
</div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}
 
export default App;

这就是为什么render()方法在React类组件中是必需的:来自导入的React包的React组件指示您使用它在浏览器中显示某些内容。此外,如果不从React组件扩展,您将无法使用其他生命周期方法
(包括render()方法)。例如,不存在componentDidMount()生命周期方法,因为该组件将是vanilla
JavaScript类的实例。并且不仅生命周期方法会消失,React的API方法(例如用于本地状态管理的this.setState())也不可用。

但是,正如您所看到的,使用JavaScript类有利于使用您的专业行为扩展通用类。因此,您可以引入自己的类方法或属性。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
getGreeting() { return ‘Welcome to React’; } render() { return (
<div> <h1>{this.getGreeting()}</h1> </div> ); }
} export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from ‘react’;
 
class App extends Component {
  getGreeting() {
    return ‘Welcome to React’;
  }
 
  render() {
    return (
      <div>
        <h1>{this.getGreeting()}</h1>
      </div>
    );
  }
}
 
export default App;

现在您知道为什么React使用JavaScript类来定义React类组件。当您需要访问React的API(生命周期方法,this.state和this.setState())时,可以使用它们。在下文中,您将看到如何以不同的方式定义React组件,而不使用JavaScript类,因为您可能不需要始终使用类方法,生命周期方法和状态。

毕竟,JavaScript类欢迎使用React中的继承,这对于React来说不是一个理想的结果,因为React更喜欢组合而不是继承。因此,您应该为您的React组件扩展的唯一类应该是官方的React组件。

【JavaScript基础】
JavaScript:
基于浏览器
、基于(面向)对象、事件驱动、脚本语言
JavaScript的作用:
表单验证,减轻服务的压力,添加页面动画效果,动态更改页面内容,Ajax网络请求(Ajax:可以实现页面局部刷新)
JavaScript组成部分;ECMAScript(5.1/6)、DOM、BOM
ECMAScript脚本程序语言:
语法标准:语法;变量和数据类型;运算符;逻辑控制语句;关键字、保留字;对象
DOM文档对象模型
BOM浏览器对象模型

JavaScript
变量感觉上是被“提升”或移到了所有函数和语句之前。提升后的变量将返回
undefined
值,所以即使在使用或引用某个变量之后存在声明和初始化操作,这个被提升的引用仍将得到
undefined 值。

React中的箭头函数

When teaching someone about React, I explain JavaScript arrow
functions
pretty early. They are one of JavaScript’s language additions in ES6
which pushed JavaScript forward in functional programming.

在教关于React时,我很早就解释了JavaScript arrow
functions。它们是ES6中JavaScript的语言添加之一,它推动了JavaScript在函数式编程中的发展。

JavaScript

// JavaScript ES5 function function getGreeting() { return ‘Welcome to
JavaScript’; } // JavaScript ES6 arrow function with body const
getGreeting = () => { return ‘Welcome to JavaScript’; } // JavaScript
ES6 arrow function without body and implicit return const getGreeting =
() => ‘Welcome to JavaScript’;

1
2
3
4
5
6
7
8
9
10
11
12
13
// JavaScript ES5 function
function getGreeting() {
  return ‘Welcome to JavaScript’;
}
 
// JavaScript ES6 arrow function with body
const getGreeting = () => {
  return ‘Welcome to JavaScript’;
}
 
// JavaScript ES6 arrow function without body and implicit return
const getGreeting = () =>
  ‘Welcome to JavaScript’;

JavaScript箭头函数通常用在React应用程序中,以保持代码简洁和可读。尝试从JavaScript
ES5到ES6功能重构我的功能。在某些时候,当JavaScript ES5函数和JavaScript
ES6函数之间的差异很明显时,我坚持使用JavaScript
ES6的方式来实现箭头函数。但是,我总是看到React新手的太多不同的语法可能会让人不知所措。因此,我尝试在使用它们在React中全部使用之前,使JavaScript函数的不同特性变得清晰。在以下部分中,您将了解如何在React中常用JavaScript箭头函数。

JavaScript的基本结构:
<script
type=”text/javascript”>

由于存在变量声明提升,一个函数中所有的var语句应尽可能地放在接近函数顶部的地方。这大大地提升了程序代码的清晰度。

作为React中的组件的function

React使用不同的编程范例,因为JavaScript是一种多方面的编程语言。在面向对象编程的时候,React的类组件是利用JavaScript类这一种方式(React组件API的继承,类方法和类属性,如this.state)。另一方面,React(及其生态系统)中使用了很多的函数式编程的概念。例如,React的功能无状态组件是另一种在React中定义组件的方法。在React无状态组件就引发了一个新的思考:组件如何像函数一样使用?

JavaScript

function (props) { return view; }

1
2
3
function (props) {
  return view;
}

它是一个接收输入(例如props)并返回显示的HTML元素(视图)的函数(函数)。它不需要管理任何状态(无状态),也不需要了解任何方法(类方法,生命周期方法)。该函数只需要使用React组件中render()方法的呈现机制。那是在引入无状态组件的时候。

JavaScript

function Greeting(props) { return <h1>{props.greeting}</h1>;
}

1
2
3
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}

无状态组件是在React中定义组件的首选方法。它们具有较少的样板,降低了复杂性,并且比React类组件更易于维护。但是,就目前而言,两者都有自己存在的意义。

以前,文章提到了JavaScript箭头函数以及它们如何改进您的React代码。让我们将这些函数应用于您的无状态组件。
来看看Greeting组分别使用ES5和ES6不同的写法:

JavaScript

// JavaScript ES5 function function Greeting(props) { return
<h1>{props.greeting}</h1>; } // JavaScript ES6 arrow
function const Greeting = (props) => { return
<h1>{props.greeting}</h1>; } // JavaScript ES6 arrow
function without body and implicit return const Greeting = (props) =>
<h1>{props.greeting}</h1>

1
2
3
4
5
6
7
8
9
10
11
12
13
// JavaScript ES5 function
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}
 
// JavaScript ES6 arrow function
const Greeting = (props) => {
  return <h1>{props.greeting}</h1>;
}
 
// JavaScript ES6 arrow function without body and implicit return
const Greeting = (props) =>
  <h1>{props.greeting}</h1>

JavaScript箭头函数是在React中保持无状态组件简洁的好方法。当更多的时候没有计算,因此可以省略函数体和return语句。

JS语句;
</script>

(在 ECMAScript 2015
中,let(const)将不会提升变量到代码块的顶部。因此,在变量声明之前引用这个变量,将抛出错误ReferenceError。这个变量将从代码块一开始就处在一个“暂时性死区”,直到这个变量被声明为止。)

React类组件语法

React定义组件的方式随着时间的推移而演变。在早期阶段,React.createClass()方法是创建React类组件的默认方式。如今,它已不再使用,因为随着JavaScript
ES6的兴起,更多的是使用ES6的方法来创建React类组件。

然而,JavaScript不断发展,因此JavaScript爱好者一直在寻找新的做事方式。这就是为什么你会经常发现React类组件的不同语法。使用状态和类方法定义React类组件的一种方法如下:

JavaScript

class Counter extends Component { constructor(props) { super(props);
this.state = { counter: 0, }; this.onIncrement =
this.onIncrement.bind(this); this.onDecrement =
this.onDecrement.bind(this); } onIncrement() { this.setState(state =>
({ counter: state.counter + 1 })); } onDecrement() { this.setState(state
=> ({ counter: state.counter – 1 })); } render() { return (
<div> <p>{this.state.counter}</p> <button
onClick={this.onIncrement} type=”button”>Increment</button>
<button onClick={this.onDecrement}
type=”button”>Decrement</button> </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Counter extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      counter: 0,
    };
 
    this.onIncrement = this.onIncrement.bind(this);
    this.onDecrement = this.onDecrement.bind(this);
  }
 
  onIncrement() {
    this.setState(state => ({ counter: state.counter + 1 }));
  }
 
  onDecrement() {
    this.setState(state => ({ counter: state.counter – 1 }));
  }
 
  render() {
    return (
      <div>
        <p>{this.state.counter}</p>
 
        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

但是,当实现大量的React类组件时,构造函数中的class方法的绑定
以及首先具有构造函数变为繁琐的实现细节。幸运的是,有一个简短的语法来摆脱这两个烦恼:

JavaScript

class Counter extends Component { state = { counter: 0, }; onIncrement =
() => { this.setState(state => ({ counter: state.counter + 1 }));
} onDecrement = () => { this.setState(state => ({ counter:
state.counter – 1 })); } render() { return ( <div>
<p>{this.state.counter}</p> <button
onClick={this.onIncrement} type=”button”>Increment</button>
<button onClick={this.onDecrement}
type=”button”>Decrement</button> </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Counter extends Component {
  state = {
    counter: 0,
  };
 
  onIncrement = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  }
 
  onDecrement = () => {
    this.setState(state => ({ counter: state.counter – 1 }));
  }
 
  render() {
    return (
      <div>
        <p>{this.state.counter}</p>
 
        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

通过使用JavaScript箭头函数,您可以自动绑定类方法,而无需在构造函数中绑定它们。通过将状态直接定义为类属性,也可以在不使用props时省略构造函数。
(注意:请注意,类属性
尚未使用JavaScript语言。)因此,您可以说这种定义React类组件的方式比其他版本更简洁。

变量的声明和变量:
先声明变量再赋值:
var width;
width=5;
var——用于声明变量的关键字;width——变量名

同时声明变量和赋值
不声明直接赋值

对于函数,只有函数声明会被提升到顶部,不包括函数表达式。

React中的模板文字

模板文字是JavaScript
ES6附带的另一种JavaScript语言特定功能。值得一提的是,因为当JavaScript和React的新手看到它们时,它们也会让人感到困惑。以下是你正在用的连接字符串的语法:

JavaScript

function getGreeting(what) { return ‘Welcome to ‘ + what; } const
greeting = getGreeting(‘JavaScript’); console.log(greeting); // Welcome
to JavaScript

1
2
3
4
5
6
7
function getGreeting(what) {
  return ‘Welcome to ‘ + what;
}
 
const greeting = getGreeting(‘JavaScript’);
console.log(greeting);
// Welcome to JavaScript

模板文字可以用于相同的文字文字,称为字符串插值:

JavaScript

function getGreeting(what) { return Welcome to ${what}; }

1
2
3
function getGreeting(what) {
  return Welcome to ${what};
}

您只需使用和${}表示法来插入JavaScript原语。但是,字符串文字不仅用于字符串插值,还用于JavaScript中的多行字符串:

JavaScript

function getGreeting(what) { return Welcome to ${what} ; }

1
2
3
4
5
6
7
function getGreeting(what) {
  return
    Welcome
    to
    ${what}
  ;
}

基本上,这就是如何在多行上格式化更大的文本块。最近在JavaScript中引入了GraphQL也可以看出它

【使用JS的三种方式】

/* 函数声明 */
foo(); // "bar"  
function foo() {
 console.log("bar");
}  

/* 函数表达式  表达式定义的函数,成为匿名函数。匿名函数没有函数提升。*/  
baz(); // TypeError: baz is not a function
//此时的"baz"相当于一个声明的变量,类型为undefined。
由于baz只是相当于一个变量,因此浏览器认为"baz()"不是一个函数。
var baz = function() {
 console.log("bar2");
};

React中的Map, Reduce 和 Filter

为React新手教授JSX语法的最佳方法是什么?通常我首先在render()方法中定义一个变量,并在返回块中将其用作HTML中的JavaScript。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { var greeting = ‘Welcome to React’; return ( <div>
<h1>{greeting}</h1> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    var greeting = ‘Welcome to React’;
    return (
      <div>
        <h1>{greeting}</h1>
      </div>
    );
  }
}
 
export default App;

您只需使用花括号来获取HTML格式的JavaScript。从渲染字符串到复杂对象并没有什么不同。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { var user = { name: ‘Robin’ }; return ( <div>
<h1>{user.name}</h1> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    var user = { name: ‘Robin’ };
    return (
      <div>
        <h1>{user.name}</h1>
      </div>
    );
  }
}
 
export default App;

通常接下来的问题是:如何呈现一个项目列表?在我看来,这是解释React最好的部分之一。没有特定于React的API,例如HTML标记上的自定义属性,使您可以在React中呈现多个项目。您可以使用纯JavaScript来迭代项目列表并返回每个项目的HTML。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { var users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
return ( <ul> {users.map(function (user) { return
<li>{user.name}</li>; })} </ul> ); } } export default
App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    var users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <ul>
        {users.map(function (user) {
          return <li>{user.name}</li>;
        })}
      </ul>
    );
  }
}
 
export default App;

之前使用过JavaScript箭头函数,你可以摆脱箭头函数体和return语句,使你的渲染输出更加简洁。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { var users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
return ( <ul> {users.map(user =>
<li>{user.name}</li>)} </ul> ); } } export default
App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    var users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}
 
export default App;

很快,每个React开发人员都习惯了数组的内置JavaScript
map()方法。映射数组并返回每个项的渲染输出非常有意义。这同样适用于自定义的情况,其中filter()或reduce()更有意义,而不是为每个映射项呈现输出。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { var users = [ { name: ‘Robin’, isDeveloper: true }, { name:
‘Markus’, isDeveloper: false }, ]; return ( <ul> {users
.filter(user => user.isDeveloper) .map(user =>
<li>{user.name}</li>) } </ul> ); } } export default
App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    var users = [
      { name: ‘Robin’, isDeveloper: true },
      { name: ‘Markus’, isDeveloper: false },
    ];
 
    return (
      <ul>
        {users
          .filter(user => user.isDeveloper)
          .map(user => <li>{user.name}</li>)
        }
      </ul>
    );
  }
}
 
export default App;

通常,这就是React开发人员如何习惯这些JavaScript内置函数,而不必使用React特定的API。它只是HTML中的JavaScript。

1、HTML标签中内嵌JS;
<button
onclick=”alert(‘小样你真点啊!’)”>有本事点我呀!!!</button>
2、HTML页面中直接使用JS:
<script
type=”text/javascript”>
JS语句;

全局对象是 window,你可以通过指定 window 或 frame 的名字,从一个 window
或 frame 访问另一个 window 或 frame 中声明的变量。例如,设想一个叫
phoneNumber 的变量在文档里被声明,你可以在子框架里用 parent.phoneNumber
来引用它。

React中的var,let和const

使用var,let和const的不同变量声明对于React的新手来说可能会造成混淆,即使它们不是React特定的。也许是因为当React变得流行时引入了JavaScript
ES6。总的来说,我尝试在我的工作室中尽早介绍let和const。它只是从在React组件中与const交换var开始:

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { const users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
return ( <ul> {users.map(user =>
<li>{user.name}</li>)} </ul> ); } } export default
App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}
 
export default App;

然后我给出了使用哪个变量声明的经验法则:

  • (1)不要使用var,因为let和const更具体
  • (2)默认为const,因为它不能重新分配或重新声明
  • (3)重新赋值变量时使用let

虽然let通常用于for循环来递增迭代器,但const通常用于保持JavaScript变量不变。尽管在使用const时可以更改对象和数组的内部属性,但变量声明显示了保持变量不变的意图。

</script>
3、引用外部JS文件:
<script
language=”JScript” src=”JS文件路径”></script>

常量(Constants)

React中的三目运算符

如果要在render中的JSX中使用if-else语句,可以使用JavaScripts三元运算符来执行此操作:

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { const users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
const showUsers = false; if (!showUsers) { return null; } return (
<ul> {users.map(user => <li>{user.name}</li>)}
</ul> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    const showUsers = false;
 
    if (!showUsers) {
      return null;
    }
 
    return (
      <ul>
        {users.map(user => <li>{user.name}</li>)}
      </ul>
    );
  }
}
 
export default App;

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { const users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
const showUsers = false; return ( <div> { showUsers ? ( <ul>
{users.map(user => <li>{user.name}</li>)} </ul> ) :
( null ) } </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    const showUsers = false;
 
    return (
      <div>
        {
          showUsers ? (
            <ul>
              {users.map(user => <li>{user.name}</li>)}
            </ul>
          ) : (
            null
          )
        }
      </div>
    );
  }
}
 
export default App;

另一种方法是,如果你只返回条件渲染的一边,则使用&&运算符:

JavaScript

import React, { Component } from ‘react’; class App extends Component {
render() { const users = [ { name: ‘Robin’ }, { name: ‘Markus’ }, ];
const showUsers = false; return ( <div> { showUsers && (
<ul> {users.map(user => <li>{user.name}</li>)}
</ul> ) } </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from ‘react’;
 
class App extends Component {
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    const showUsers = false;
 
    return (
      <div>
        {
          showUsers && (
            <ul>
              {users.map(user => <li>{user.name}</li>)}
            </ul>
          )
        }
      </div>
    );
  }
}
 
export default App;

我不会详细说明为什么会这样,但如果你很好奇,你可以在这里了解它和条件渲染的其他技术:React中的所有条件渲染。毕竟,React中的条件呈现仅再次显示大多数React是JavaScript而不是React特定的任何内容。

【注意事项】

在同一作用域中,不能用与变量或函数同样的名字来命名常量。然而,对象属性是不受保护的,所以下面的语句执行没有问题。

React中的Import 和 Export语句

幸运的是,JavaScript社区确定了使用JavaScript
ES6的import

export。

但是,对于React和JavaScript
ES6来说,这些导入和导出语句只是另一个需要在开始使用第一个React应用程序时需要解释的主题。很早就有了CSS,SVG或其他JavaScript文件的第一次导入。
create-react-app项目已经从那些import语句开始:

JavaScript

import React, { Component } from ‘react’; import logo from ‘./logo.svg’;
import ‘./App.css’; class App extends Component { render() { return (
<div> <header> <img src alt=”logo” />
<h1>Welcome to React</h1> </header> <p> To get
started, edit <code>src/App.js</code> and save to reload.
</p> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
 
class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src alt="logo" />
          <h1>Welcome to React</h1>
        </header>
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
 
export default App;

这对初学者项目来说非常棒,因为它为您提供了一个全面的体验,可以导入和导出其他文件。
App组件也会在
src/index.js文件中导入。但是,在React中执行第一步时,我会尝试在开始时避免这些导入。相反,我尝试专注于JSX和React组件。只有在将另一个文件中的第一个React组件或JavaScript函数分离时才会引入导入和导出语句。

那么这些导入和导出语句如何工作呢?假设您要在一个文件中导出以下变量:

JavaScript

const firstname = ‘Robin’; const lastname = ‘Wieruch’; export {
firstname, lastname };

1
2
3
4
const firstname = ‘Robin’;
const lastname = ‘Wieruch’;
 
export { firstname, lastname };

然后,您可以使用第一个文件的相对路径将它们导入到另一个文件中:

JavaScript

import { firstname, lastname } from ‘./file1.js’;
console.log(firstname); // output: Robin

1
2
3
4
import { firstname, lastname } from ‘./file1.js’;
 
console.log(firstname);
// output: Robin

因此,它不一定是关于 importing/exporting
组件或函数,而是关于共享可分配给变量的所有东西(省略CSS或SVG导入/导出,但只谈JS)。您还可以将另一个文件中的所有导出变量作为一个对象导入:

JavaScript

import * as person from ‘./file1.js’; console.log(person.firstname); //
output: Robin

1
2
3
4
import * as person from ‘./file1.js’;
 
console.log(person.firstname);
// output: Robin

importing可以有别名。您可能会从具有相同命名导出的多个文件中导入功能。这就是你可以使用别名的原因:

JavaScript

import { firstname as username } from ‘./file1.js’;
console.log(username); // output: Robin

1
2
3
4
import { firstname as username } from ‘./file1.js’;
 
console.log(username);
// output: Robin

以前的所有案例都被命名为进口和出口。但是也存在默认声明。它可以用于一些用例:

  • 导出和导入单个功能
  • 突出显示模块的导出API的主要功能
  • 具有后备导入功能

JavaScript

const robin = { firstname: ‘Robin’, lastname: ‘Wieruch’, }; export
default robin;

1
2
3
4
5
6
const robin = {
  firstname: ‘Robin’,
  lastname: ‘Wieruch’,
};
 
export default robin;

您可以省略导入的大括号以导入默认导出:

JavaScript

import developer from ‘./file1.js’; console.log(developer); // output: {
firstname: ‘Robin’, lastname: ‘Wieruch’ }

1
2
3
4
import developer from ‘./file1.js’;
 
console.log(developer);
// output: { firstname: ‘Robin’, lastname: ‘Wieruch’ }

此外,导入名称可能与导出的默认名称不同。您还可以将它与命名的export和import语句一起使用:

JavaScript

const firstname = ‘Robin’; const lastname = ‘Wieruch’; const person = {
firstname, lastname, }; export { firstname, lastname, }; export default
person;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const firstname = ‘Robin’;
const lastname = ‘Wieruch’;
 
const person = {
  firstname,
  lastname,
};
 
export {
  firstname,
  lastname,
};
 
export default person;

并在另一个文件中导入默认导出或命名导出:

JavaScript

import developer, { firstname, lastname } from ‘./file1.js’;
console.log(developer); // output: { firstname: ‘Robin’, lastname:
‘Wieruch’ } console.log(firstname, lastname); // output: Robin Wieruch

1
2
3
4
5
6
import developer, { firstname, lastname } from ‘./file1.js’;
 
console.log(developer);
// output: { firstname: ‘Robin’, lastname: ‘Wieruch’ }
console.log(firstname, lastname);
// output: Robin Wieruch

您还可以节省额外的行并直接为命名导出导出变量:

JavaScript

export const firstname = ‘Robin’; export const lastname = ‘Wieruch’;

1
2
export const firstname = ‘Robin’;
export const lastname = ‘Wieruch’;

这些是ES6模块的主要功能。它们可以帮助您组织代码,维护代码和设计可重用的模块API。您还可以导出和导入功能以测试它们。

1)页面中JS代码与引用JS代码,可以嵌入到HTML页面的任意位置。但是,位置不同会影响到JS代码的执行顺序;

const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";

React中的库

React只是应用程序的视图层。
React提供了一些内部状态管理,但除此之外,它只是一个为您的浏览器呈现HTML的组件库。其他所有内容都可以从API(例如浏览器API,DOM
API),JavaScript功能或外部库中添加。选择合适的库来补充React应用程序并不总是很简单,但是一旦您对不同的选项有了很好的概述,就可以选择最适合您的技术堆栈的库。

例如,可以使用本机fetch
API在React中获取数据:

JavaScript

import React, { Component } from ‘react’; class App extends Component {
state = { data: null, }; componentDidMount() {
fetch(”) .then(response => response.json())
.then(data => this.setState({ data })); } render() { … } } export
default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from ‘react’;
 
class App extends Component {
  state = {
    data: null,
  };
 
  componentDidMount() {
    fetch(‘https://api.mydomain.com’)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
 
  render() {
    …
  }
}
 
export default App;

但是你可以使用另一个库来获取React中的数据。
Axios是React应用程序的一个流行选择:

JavaScript

import React, { Component } from ‘react’; import axios from ‘axios’;
class App extends Component { state = { data: null, };
componentDidMount() { axios.get(”) .then(data
=> this.setState({ data })); } render() { … } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from ‘react’;
import axios from ‘axios’;
 
class App extends Component {
  state = {
    data: null,
  };
 
  componentDidMount() {
    axios.get(‘https://api.mydomain.com’)
      .then(data => this.setState({ data }));
  }
 
  render() {
    …
  }
}
 
export default App;

因此,一旦您了解了需要解决的问题,React广泛而创新的生态系统应该为您提供大量解决方案
。这又不是关于React,而是了解所有可用于补充应用程序的不同JavaScript库。

例如:<script>在body前面,会在页面加载之前执行JS代码;

数据结构和类型

React中的高阶函数

高阶函数是一个很好的编程概念,特别是在转向函数式编程时。在React中,了解这类函数是完全有意义的,因为在某些时候你必须处理高阶组件,这些组件在首先了解高阶函数时可以得到最好的解释。

可以在早期的React中展示高阶函数,而不会引入更高阶的组件。例如,假设可以根据输入字段的值过滤呈现的用户列表。

JavaScript

import React, { Component } from ‘react’; class App extends Component {
state = { query: ”, }; onChange = event => { this.setState({ query:
event.target.value }); } render() { const users = [ { name: ‘Robin’ },
{ name: ‘Markus’ }, ]; return ( <div> <ul> {users
.filter(user => this.state.query === user.name) .map(user =>
<li>{user.name}</li>) } </ul> <input type=”text”
onChange={this.onChange} /> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Component } from ‘react’;
 
class App extends Component {
  state = {
    query: ”,
  };
 
  onChange = event => {
    this.setState({ query: event.target.value });
  }
 
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <div>
        <ul>
          {users
            .filter(user => this.state.query === user.name)
            .map(user => <li>{user.name}</li>)
          }
        </ul>
 
        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}
 
export default App;

并不总是希望提取函数,因为它可以增加不必要的复杂性,但另一方面,它可以为JavaScript带来有益的学习效果。此外,通过提取函数,您可以将其与React组件隔离开来进行测试。因此,让我们使用提供给内置过滤器功能的功能来展示它。

JavaScript

import React, { Component } from ‘react’; function doFilter(user) {
return this.state.query === user.name; } class App extends Component {
… render() { const users = [ { name: ‘Robin’ }, { name: ‘Markus’ },
]; return ( <div> <ul> {users .filter(doFilter) .map(user
=> <li>{user.name}</li>) } </ul> <input
type=”text” onChange={this.onChange} /> </div> ); } } export
default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from ‘react’;
 
function doFilter(user) {
  return this.state.query === user.name;
}
 
class App extends Component {
  …
 
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <div>
        <ul>
          {users
            .filter(doFilter)
            .map(user => <li>{user.name}</li>)
          }
        </ul>
 
        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}
 
export default App;

之前的实现不起作用,因为doFilter()函数需要从状态知道查询属性。因此,您可以通过将其包含在另一个导致更高阶函数的函数中来将其传递给函数。

JavaScript

import React, { Component } from ‘react’; function doFilter(query) {
return function (user) { return this.state.query === user.name; } }
class App extends Component { … render() { const users = [ { name:
‘Robin’ }, { name: ‘Markus’ }, ]; return ( <div> <ul>
{users .filter(doFilter(this.state.query)) .map(user =>
<li>{user.name}</li>) } </ul> <input type=”text”
onChange={this.onChange} /> </div> ); } } export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Component } from ‘react’;
 
function doFilter(query) {
  return function (user) {
    return this.state.query === user.name;
  }
}
 
class App extends Component {
  …
 
  render() {
    const users = [
      { name: ‘Robin’ },
      { name: ‘Markus’ },
    ];
 
    return (
      <div>
        <ul>
          {users
            .filter(doFilter(this.state.query))
            .map(user => <li>{user.name}</li>)
          }
        </ul>
 
        <input
          type="text"
          onChange={this.onChange}
        />
      </div>
    );
  }
}
 
export default App;

基本上,高阶函数是返回函数的函数。通过使用JavaScript
ES6箭头函数,您可以使更高阶的函数更简洁。此外,这种速记版本使得将功能组合成功能更具吸引力。

JavaScript

const doFilter = query => user => this.state.query === user.name;

1
2
const doFilter = query => user =>
  this.state.query === user.name;

现在可以从文件中导出doFilter()函数,并将其作为纯(高阶)函数单独测试。在了解了高阶函数之后,建立了所有基础知识,以便更多地了解React的高阶组件。

将这些函数提取到React组件之外的(高阶)函数中也可以有利于单独测试React的本地状态管理。

JavaScript

export const doIncrement = state => ({ counter: state.counter + 1 });
export const doDecrement = state => ({ counter: state.counter – 1 });
class Counter extends Component { state = { counter: 0, }; onIncrement =
() => { this.setState(doIncrement); } onDecrement = () => {
this.setState(doDecrement); } render() { return ( <div>
<p>{this.state.counter}</p> <button
onClick={this.onIncrement} type=”button”>Increment</button>
<button onClick={this.onDecrement}
type=”button”>Decrement</button> </div> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const doIncrement = state =>
  ({ counter: state.counter + 1 });
 
export const doDecrement = state =>
  ({ counter: state.counter – 1 });
 
class Counter extends Component {
  state = {
    counter: 0,
  };
 
  onIncrement = () => {
    this.setState(doIncrement);
  }
 
  onDecrement = () => {
    this.setState(doDecrement);
  }
 
  render() {
    return (
      <div>
        <p>{this.state.counter}</p>
 
        <button onClick={this.onIncrement} type="button">Increment</button>
        <button onClick={this.onDecrement} type="button">Decrement</button>
      </div>
    );
  }
}

围绕代码库移动函数是了解在JavaScript中使用函数作为拳头类公民的好处的好方法。将代码移向函数式编程时,它非常强大。

2)页面中JS代码,使用type=”text/javascript”

六种是 原型 的数据类型 以及 Object 对象

React中的解构和传播运算符

JavaScript中引入的另一种语言特性称为解构。通常情况下,您必须从您state或组件中的props访问大量属性。您可以在JavaScript中使用解构赋值,而不是逐个将它们分配给变量。

JavaScript

// no destructuring const users = this.state.users; const counter =
this.state.counter; // destructuring const { users, counter } =
this.state;

1
2
3
4
5
6
// no destructuring
const users = this.state.users;
const counter = this.state.counter;
 
// destructuring
const { users, counter } = this.state;

这对功能无状态组件特别有用,因为它们总是在函数签名中接收props对象。通常,您不会使用道具而是使用道具,因此您可以对功能签名中已有的内容进行解构。

JavaScript

// no destructuring function Greeting(props) { return
<h1>{props.greeting}</h1>; } // destructuring function
Greeting({ greeting }) { return <h1>{greeting}</h1>; }

1
2
3
4
5
6
7
8
9
// no destructuring
function Greeting(props) {
  return <h1>{props.greeting}</h1>;
}
 
// destructuring
function Greeting({ greeting }) {
  return <h1>{greeting}</h1>;
}

解构也适用于JavaScript数组。另一个很棒的特征是其余的解构。它通常用于拆分对象的一部分,但将剩余属性保留在另一个对象中。

JavaScript

// rest destructuring const { users, …rest } = this.state;

1
2
// rest destructuring
const { users, …rest } = this.state;

之后,可以使用用户进行渲染,例如在React组件中,而在其他地方使用剩余的状态。这就是JavaScript扩展运算符
用于将其余对象转发到下一个组件的位置。在下一节中,您将看到此运算符的运行情况。

引用外部的JS文件,使用language=”JScript”

  1. Boolean. 布尔值,true 和 false.
  2. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的,因此 null
    与 Null、NULL或其他变量完全不同。
  3. 变量未定义时的属性。
  4. Number. 表示数字,例如: 42 或者 3.14159。
  5. String. 表示字符串,例如:”Howdy”
  6. Symbol ( 在 ECMAScript 6
    中新添加的类型).。一种数据类型,它的实例是唯一且不可改变的。

JavaScript比React更重要

总之,有很多JavaScript可以在React中使用。虽然React只有一个API表面区域,但开发人员必须习惯JavaScript提供的所有功能。这句话并非没有任何理由:“成为React开发人员会让你成为更好的JavaScript开发人员”。让我们通过重构更高阶的组件来回顾一下React中JavaScript的一些学习方面。

JavaScript

function withLoading(Component) { return class WithLoading extends {
render() { const { isLoading, …props } = this.props; if (isLoading) {
return <p>Loading</p>; } return <Component { …props }
/>; } } }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function withLoading(Component) {
  return class WithLoading extends {
    render() {
      const { isLoading, …props } = this.props;
 
      if (isLoading) {
        return <p>Loading</p>;
      }
 
      return <Component { …props } />;
    }
  }
  };
}

当isLoading
prop设置为true时,此高阶组件仅用于显示条件加载指示符。否则它呈现输入组件。您已经可以看到(休息)解构和传播运算符。后者可以在渲染的Component中看到,因为props对象的所有剩余属性都传递给Component。

使高阶组件更简洁的第一步是将返回的React类组件重构为功能无状态组件:

JavaScript

function withLoading(Component) { return function ({ isLoading, …props
}) { if (isLoading) { return <p>Loading</p>; } return
<Component { …props } />; }; }

1
2
3
4
5
6
7
8
9
function withLoading(Component) {
  return function ({ isLoading, …props }) {
    if (isLoading) {
      return <p>Loading</p>;
    }
 
    return <Component { …props } />;
  };
}

您可以看到其余的解构也可以在函数的签名中使用。接下来,使用JavaScript
ES6箭头函数使高阶组件更简洁:

JavaScript

const withLoading = Component => ({ isLoading, …props }) => { if
(isLoading) { return <p>Loading</p>; } return <Component
{ …props } />; }

1
2
3
4
5
6
7
const withLoading = Component => ({ isLoading, …props }) => {
  if (isLoading) {
    return <p>Loading</p>;
  }
 
  return <Component { …props } />;
}

添加三元运算符可将函数体缩短为一行代码。因此可以省略函数体,并且可以省略return语句。

JavaScript

const withLoading = Component => ({ isLoading, …props }) =>
isLoading ? <p>Loading</p> : <Component { …props }
/>

1
2
3
4
const withLoading = Component => ({ isLoading, …props }) =>
  isLoading
    ? <p>Loading</p>
    : <Component { …props } />

如您所见,高阶组件使用各种JavaScript而不是React相关技术:箭头函数,高阶函数,三元运算符,解构和扩展运算符。这就是如何在React应用程序中使用JavaScript的功能。


人们经常说学习React的学习曲线很陡峭。但是,只有将React留在等式中并将所有JavaScript排除在外。当其他Web框架正在执行时,React不会在顶部添加任何外部抽象层。相反,你必须使用JavaScript。因此,磨练您的JavaScript技能,您将成为一个伟大的React开发人员。


1 赞 2 收藏
评论

图片 2

3)引用外部JS文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!

Objects 和 functions
是本语言的其他两个基本要素。你可以将对象视为存放值的命名容器,而将函数视为你的应用程序能够执行的过程(procedures)。

【JS中的变量】
1、JS中变量声明的写法:
var width =
10;//使用var声明的变量,只在当前函数作用域有效
width1 =
11;//不适用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效
var
a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔,但是,赋值需要单独赋值,例如上式中,只有c赋值为1,a
b为undefined(未定义)。

在涉及加法运算符(+)的数字和字符串表达式中,JavaScript
会把数字值转换为字符串。

【声明变量注意事项】
1)JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行。2)同一变量可在多次不同赋值时,修改变量的数据类型
var width = 10;//width
为整型变量
width=”hahaha”;//width
被改为字符串类型
3)变量可以使用var声明,也可以省略var,[区别]不使用var,默认为全局变量
4)同一变量名,可以多次用var声明,但是并没有任何含义,也不会报错,第二次之后的声明,只会被理解为赋值。

x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"

2、变量的命名规范
1)变量名,只能有字母,数字,下划线,$组成
2)开头不能是数字
3)变量区分大小写,大写字母与小写字母为不同变量

在涉及其它运算符(译注:如下面的减号’-‘)时,JavaScript语言不会把数字变为字符串。例如(译注:第一例是数学运算,第二例是字符串运算):

3、变量命名名要符合驼峰法则:

"37" - 7 // 30
"37" + 7 // "377"

变量开头为小写,之后每个单词首字母大写;
XiaoXiZhenMeng

xiao_xi_zhen_meng

xiaoxizhenmeng ×

字符串转换为数字(converting strings to numbers)

4、JS中的变量的数据类型
Undefined:未定义,用var声明的变量,没有进行初始化赋值。var
a;
Null:表示为空的引用。var a =
null;(其中一种情况)eg:空对象,空数组。。。
boolean:真假,可选值true/false
Number:数值类型。可以是小数,也可以是正数。
String:字符串类型。用””和”包裹的内容,称为字符串。
Object(复杂数据类型):后续讲解,函数、数组等。。。

parseInt()和parseFloat()

5、常用的数值函数:
1)isNaN:用于判断一个变量或常量是否为NaN(非数值)
使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false
“111”
纯数字字符串,false “” 空字符串,false “la” 包含其他字符,true
true/false
布尔类型,false
2)Number():将其他类型转换为数值类型

将字符串转换为数字的另一种方法是使用单目加法运算符。

[字符串类型转数值]

"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2  // 注:加入括号为清楚起见,不是必需的。

>>字符串为纯数值字符串,会转为对应的数字”111″->111
>>字符串为空字符串时,会转换为0
“”->0
>>字符串包含其他非数字字符时,不能转换
“111a”->NaN

对象属性名字可以是任意字符串,包括空串。如果对象属性名字不是合法的javascript标识符,它必须用””包裹。属性的名字不合法,那么便不能用.访问属性值,而是通过类数组标记(“[]”)访问和赋值。

[布尔Boolean类型转数值]
true->1
false->0

var unusualPropertyNames = {
 "": "An empty string",
 "!": "Bang!"
}
console.log(unusualPropertyNames."");  // 语法错误: Unexpected string
console.log(unusualPropertyNames[""]); // An empty string
console.log(unusualPropertyNames.!);  // 语法错误: Unexpected token !
console.log(unusualPropertyNames["!"]); // Bang!

[null/Undefined转数值]
null->0
Undefined->NaN

注意:

[Object类型转数值]
(以后再了解哦~)先调用ValueOf方法,确定函数是否有返回值,再根据上述各种情况判断。
3)parseInt:将字符串转成数值
>>>空字符串,不能转。结果为NaN
>>>纯数值字符串,能转。”123″->”123″
“123.5”->123(小数转化时,会直接抹去小数点,不进行四舍五入)
>>>包含其他字符的字符串,会截取第一个非数值字符串前的数值部分。”123a456″->123
“a123b345”->NaN
>>>parseInt只能转String类型,Boolean/null/Undefined
均为NaN
4)parseFloat:将字符串转为数值
>>>使用方式同parseInt,但是,当转化小数字符串时,保留小数点;转化整数字符串时,保留整数;
“123.5”->123.5
“123.0”->123
5)typeOf:用来检测变量类型
未定义—>Undefined
字符串->string true/false->boolean 数值->Number
对象/null->Object
函数->function

var foo = {a: "alpha", 2: "two"};
console.log(foo.a);  // alpha
console.log(foo[2]);  // two
//console.log(foo.2); // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo["a"]); // alpha
console.log(foo["2"]); // two

 

在ES2015,对象字面值扩展支持在创建时设置原型,简写foo:foo分配,定义方法,加工父函数(super
calls),计算属性名(动态)。总之,这些也带来了对象字面值和类声明紧密联系起来,让基于对象的设计得益于一些同样的便利。

【JS中的输出语句】
document.write();
输出语句,将write的()中的内容打印在浏览器屏幕上
使用时注意:除变量/常量以外的任何内容,打印时必须放在””中,变量/常量必须放到””外
打印的内容同时有多部分组成,之间用“+”链接
例如:document.write(“输出互换前手中的纸牌:”+left+”<br
/>”);
alert();弹窗警告

var obj = {
  // __proto__
  __proto__: theProtoObj,
  // Shorthand for ‘handler: handler'
  handler,
  // Methods
  toString() {
   // Super calls
   return "d " + super.toString();
  },
  // Computed (dynamic) property names
  [ 'prop_' + (() => 42)() ]: 42
};

1、【算术运算】

能在JavaScript的字符串中使用的···特殊字符···

  • 加、- 减、* 乘、 /
    除、 % 取余、++ 自增、– 自减

转义字符

+:有两种作用,链接字符串/加法运算;当+两边均为数字时,进行加法运算;
当加号两边有任意一边为字符串时,进行字符串链接,链接之后的结果认为字符串
++:自增运算符,将变量在原来基础上+1;
–:自减运算符,将变量在原来基础上-1;

// 引号转义
var quote = "He read /"The Cremation of Sam McGee/" by R.W. Service.";
// 转义反斜线
var home = "c://temp";
// 转义换行 一条语句拆成多行书写
var str = "this string /
is broken /
across multiple/
lines."
console.log(str);  // this string is broken across multiplelines.
// Javascript没有“heredoc”语法,但可以用行末的换行符转义和转义的换行来近似实现 
var poem = 
"Roses are red,/n/
Violets are blue./n/
I'm schizophrenic,/n/
And so am I."

【n++ 与 ++n
的异同】

 n++:先使用n的值进行计算,然后再把n+1;
 ++n:
先使用n的值+1,然后再用n+1以后的值,去运算;
 相同点:不论是n++还是++n,在执行完代码以后,均会把n+1;
 eg:
var a = 3;
var
b,c;
b =
a++ +2; //a=3 b=5 c=4
c =
++a +2; //a=4 b=5 c=7

您可能感兴趣的文章:

  • javascript之正则表达式基础知识小结
  • JavaScript
    语言基础知识点总结(思维导图)
  • extjs 学习笔记(一)
    一些基础知识
  • javascript DOM
    操作基础知识小结
  • JavaScript 基础知识
    被自己遗忘的
  • 7个JS基础知识总结
  • Angularjs基础知识及示例汇总
  • javascript学习笔记(一)基础知识
  • JavaScript基础知识之数据类型
  • javascript真的不难-回顾一下基础知识

document.write(“a:”+a);

document.write(“b:”+b);

document.write(“c:”+c);

2、赋值运算
= 赋值、 += -= *= /=
%=
+=:a += 5;相当于a = a

  • 5;但是,前者的执行效率要比后者快,

3、关系运算
== 等于、===
严格等于、 != 不等于 、>、<、>=、<=

===:严格等于;类型不同,返回false;类型相同,再进行下一步判断

==:等于;类型相同,同===;类型不同,尝试将等式两边转为数字,再判断;
特例:null==Undefined
√ ; null===Undefined ×

4、条件运算符(多目运算)

a>b?true:false

有两个关键符号:?和:

当?前面的部分运算结果为true时,执行:前面的代码;

当?前面的部分运算结果为false时,执行:后面的代码;

>>>多目运算符可以多层嵌套:
例如:var jieguo =

5、逻辑运算符
&& 与、|| 或、!

6、运算符的优先级
()
! ++ —
% / *

    • > < >=
      <=
      == !=
      &&
      ||
      各种赋值= =+ *= /=
      %=

【if-else结构】
1、结构写法:

if(判断条件){

//条件为ture时执行
}else{

//条件为false时执行
}
2、if()中的表达式,运算之后的结果应该为:
1)Boolean:true 真 ;
false 假

2)string:非空字符串为真 ;空字符串为假
3)Number:0为假
;一切非0均为真

4)Null/NaN/Undefined:全为假
5)Object:全为真
3、else{}结构,可以根据具体情况省略;

【多重if、阶梯if】
1、结构写法:
if(条件一){
//条件一成立
}else
if(条件二){

//条件一不成立&&条件二成立

//else if
部分,可以有多个
}else{

//条件一不成立&&条件二不成立
}

2、多重if结构中,各个判断条件是互斥的,只能选择其中一个
3.if/else的大括号可以省略,但不提倡,如果省略,

则if/else包含的代码只包括其后最近的一行(分号结束);

else结构永远属于其前方最近的一个if结构。

【嵌套if结构】
1、结构写法:
if(条件一){

//条件一成立

if(条件二){

//条件二成立

}else{

//条件为false时执行

}

}else{

//条件为false时执行

}
2、if结构可以多重嵌套,但是原则上不超过三层

【Switch-Case结构】
1、结构写法:
switch(表达式){
case
常量表达式1:
语句一;

break;
case
敞亮表达式2:
语句二;

break;

。。。

default:

语句N

}
2、注意事项:
1)switch()中的表达式,以及每个case后面的表达式,可以为任何JS支持的
数据类型;(对象和数组不同);
2)case后面的所有常量表达式,必须各不相同,否则只会执行第一个;
3)case后的常量可以是任何数据类型;同一个switch结构的不同case,可以是多种不同的数据类型;
4)switch在进行判断时,采用的是全等判断===
5)break的作用:执行完case代码后,跳出当前switch结构;
缺少break的后果:从正确的case项开始,依次执行所有的case和defalse
6)switch结构在判断时,只会判断一次正确答案,当遇到正确的case项后,将会不再判断后续项目,依次往下执行;
7)switch结构的执行速率要快于多重if结构。在多路分支时,优先考虑switch结构。

 

【循环结构的步骤】
1)声明循环变量
2)判断循环条件
3)执行循环体(while的{}中所有代码)操作
4)更新循环变量
然后,循环执行2)3)4)

【JS中循环条件支持的数据类型】
1)Boolean:true 真 ;
false 假
2)string:非空字符串为真
;空字符串为假
3)Number:0为假
;一切非0均为真
4)Null/NaN/Undefined:全为假
5)Object:全为真

while循环特点:先判断,在执行
do-while循环特点:先执行,在判断;即使初始条件不成立,do-while循环也至少执行一次

【For循环】
1、for循环有三个表达式,分别为:①定义循环变量
② 判断循环条件 ③更新循环变量(三个表达式之间,用;分隔。)

for循环三个表达式可以省略,两个;缺一不可
2、for循环特点:先判断,再执行;
3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔,但是第二部分判断条件

需要用&&链接,最终结果需要为真/假

【循环控制语句】
1、break:终止本层循环,继续执行循环后面的语句;

当循环有多层时,break只会跳过一层循环;
2、continue:跳过本次循环,继续执行下一次循环;

对于for,continue执行后,继续执行循环变量更新语句n++

对于while,do-while,continue执行后,继续执行循环条件,

判断;所以使用这两个循环时必须注意continue一定要在n++之后,否则会造成死循环。

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图