Java8 Stream 拼接字符串 Collect

Java8 Stream 拼接字符串 Collectors.joining

有一個文本文件。需要讀取出來，自動拼接成一個 JavaScript 語句： console.table

在沒有 Collectors.joining 之前，我們總是無法優雅地處理開頭和結尾。現在就舒服多了。

// 文件路徑
String in="E:\\temp\\test\\in\\in.txt";
Path path=Paths.get(in);
// 從字符輸入流中讀取文本
BufferedReader bufferedReader=Files.newBufferedReader(path);
// Java8 的新方法 lines() 獲流
Stream<String> stream=bufferedReader.lines();
// 定義分隔符、前綴、后綴 （加了換行方便看）
String delimiter="',\n'";
String prefix="console.table([\n'";
String suffix="']);";
// 拼接字符串
String str=stream.collect(Collectors.joining(delimiter, prefix , suffix));
// 輸出看效果
System.out.println(str);

輸出 JavaScript：

console.table([
'花開無鑫人有淚',
'相期別時更易醉',
'撫花還問花開處',
'把酒卻是罷酒徒',
'飾新觀，做新娘',
'抱上他人床',
'紅燭淚落做哭狀',
'燃盡相思郎',
'天一方，海一方',
'相連似在天盡處',
'相隔又在海盡旁',
'為爾做情郎']);

F12 打開調試窗口測試一下：

#文者傷心##原創##詩詞##java##javascript#

avaScript 是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。

作用: 負責給頁面添加動態效果語言
特點:屬于腳本語言(不需要編譯直接由瀏覽器解析執行)
基于面向對象
屬于弱類型語言

//java: 
String name="tom"; int age=18; int x; x="abc";
//JS: 
let name="tom"; let age=18; let x; x="abc"; age="xyz"

安全性強: JS語言只能訪問瀏覽器內部的數據,瀏覽器以外電腦上的數據禁止訪問.
交互性強: 因為JS語言是嵌入到html頁面中最終執行在客戶端的語言可以和用戶直接進行交互, 而像Java語言是運行在服務器的語言和用戶交互需要借助于網絡,所有交互性JS語言會更強一些

如何在HTML頁面中添加JS語言

三種引入方式:

內聯: 在標簽的事件屬性中添加js代碼,當事件觸發時執行. ①事件: 是系統提供的一系列時間點. ②點擊事件: 當點擊元素時觸發的時間點
內部: 在html頁面中的任意位置(推薦寫在/body上面)添加script標簽,標簽體內寫js代碼
外部: 在單獨的js文件中寫js代碼, 然后在html頁面中通過script標簽的src屬性引入到html頁面

<!--onclick點擊事件   alert()彈出提示框   方式一 -->
<input type="button" value="按鈕" onclick="alert('按鈕點擊了!')">

<!--內部引入JS  方式二 -->
<script>
    /*在瀏覽器的控制臺輸出*/
    console.log("內部引入成功!");
</script>
<!--引入外部js文件 如果script標簽引入了外部js文件 則不能在標簽體內寫js代碼-->
<script src="my.js"></script>

瀏覽器終端 Console 窗口調試 JavaScript 代碼

瀏覽器終端執行js

變量

JS屬于弱類型語言
let和var關鍵字的區別, 作用域有區別 let：局部作用域 var：全局作用域
使用let聲明的變量,作用域和Java語言的作用域類似
使用var聲明的變量,不管在什么位置聲明都相當于是一個全局變量
const 關鍵字來定義一個常量

const常量

java:
for(int i=0;i<10;i++){
  int y=i+1;
}
// int z=i+y; 報錯 i和y超出了自身的作用域
JS:
for(let i=0;i<10;i++){ 
  let y=i+1;
}
let z=i+y;  
//不報錯,但是訪問不到i和y 因為超出了作用域
for(var i=0;i<10;i++){ 
  var y=i+1;
}
var z=i+y;  
//不僅不報錯還能夠訪問到i和y的值

數據類型

JavaScript中只有對象類型
常見的對象類型包括:

字符串: string 可以用單引號或雙引號修飾
數值: number 相當于Java中所有數值類型的綜合
布爾值: boolean true和false
未定義: undefined 當變量只聲明不賦值時屬于未定義
對象(Object)、
數組(Array)、
函數(Function)
正則（RegExp）--特殊的對象：
日期（Date）--特殊的對象：

獲取變量類型的方法 typeof 變量;

typeof "John"    // 返回 string
typeof 3.14        // 返回 number
typeof false        // 返回 boolean
typeof [1,2,3,4]      // 返回 object
typeof {name:'John', age:34} // 返回 object
//注意 null  返回時 object
typeof undefined     // undefined
typeof null            // object
null===undefined    // false
null==undefined      // true

運算符

算數運算符: + - * / % , JS中的除法會根據結果自動轉換整數或小數

//Java:
int x=5 ; int y=2; x/y=2;
//JS :
let x=5; let y=2; x/y=2.5; x=6 x/y=3;

關系運算符: > < >=<=!===和===
==: 先統一兩個變量的類型再比較值"666"==666 true
===:先比較類型,類型相同后再比較值 "666"===666 false
邏輯運算符: && || !
賦值運算符: =+=-=*=/=%=++ --
三目運算符: 條件?值1:值2

各種語句:

if else

//語法
if (condition)
{
    當條件為 true 時執行的代碼
}
if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

for

//語法：
for (語句 1; 語句 2; 語句 3)
{
    被執行的代碼塊
}
//語句 1 （代碼塊）開始前執行
//語句 2 定義運行循環（代碼塊）的條件
//語句 3 在循環（代碼塊）已被執行之后執行
for - 循環代碼塊一定的次數
for/in - 循環遍歷對象的屬性
while - 當指定的條件為 true 時循環指定的代碼塊
do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

while

do while

while (條件)
{
    需要執行的代碼
}
//語法  do while 至少執行一次
do
{
    需要執行的代碼
}
while (條件);

switch case

switch(n)
{
    case 1:
        執行代碼塊 1
        break;
    case 2:
        執行代碼塊 2
        break;
    default:
        與 case 1 和 case 2 不同時執行的代碼
}

方法

// java: 寫法 
public 返回值類型 方法名(參數列表){方法體}
//JS:  寫法
function 方法名(參數列表){方法體}

常見的四種方法:

無參無返回值
有參無返回值
無參有返回值
有參有返回值

三種聲明方法的格式:

function 方法名(參數列表){方法體}
let 方法名=function (參數列表){方法體}
let 方法名=new Function("參數1","參數2","方法體");

<input type="button" value="按鈕" onclick="f1()">
<script>
    //1. 無參無返回值
    function f1() {
        console.log("f1");
    }
    //調用
    f1();
    //2. 有參無返回值
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("孫尚香",50);
    //3. 無參有返回值
    function f3() {
        return "我是返回值";
    }
    let info=f3();
    console.log(info);
    //4. 有參有返回值
    function f4(x,y) {
        return x*y;
    }
    let result=f4(8,9);
    console.log(result);
    //第二種聲明方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("劉備",20);
    //第三種聲明方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("呂布",66);
</script>

和頁面相關的方法

通過選擇器獲取頁面中的元素對象

let 元素對象=document.querySelector("選擇器")

獲取和修改元素的文本內容

元素對象.innerText="xxx"; 修改文本內容
元素對象.innerText 獲取文本內容

獲取和修改input控件的值

控件對象.value="xxx"; 修改
控件對象.value 獲取

NaN

Not a Number: 不是一個數
isNaN(x) 判斷變量是否是NaN

<body>
<div>這是div</div>
<input type="text" id="i1">
<input type="button" value="按鈕" onclick="f()">
<script>
    function f() {
        //得到文本框和div
        let i=document.querySelector("#i1");
        let d=document.querySelector("div");
        //取出文本框的值并賦值給div
        d.innerText=i.value;
    }
</script>

簡易計算器 Demo

<body>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="button" value="加" onclick="f(1)">
<input type="button" value="減" onclick="f(2)">
<input type="button" value="乘" onclick="f(3)">
<input type="button" value="除" onclick="f(4)">
<div>
    結果:<span></span>
</div>
<script>
      function f(x) {
        //得到頁面中相關的元素對象
        let i1=document.querySelector("#i1");
        let i2=document.querySelector("#i2");
        let s=document.querySelector("span");
        //判斷輸入的兩個值是不是NaN
        if (isNaN(i1.value)||isNaN(i2.value)){
          s.innerText="輸入錯誤!";
          return;
      }
      switch (x) {
        case 1: //加
          //當兩個字符串進行-*/運算時會自動轉成數值,進行+運算是拼接
          //s.innerText=i.value*1+i.value*1;
          //parseFloat()將字符串轉成整數或小數
          // s.innerText=parseFloat(i.value)+parseFloat(i.value);
          s.innerText=i1.value*1+i2.value*1;
          break;
        case 2: //減
          s.innerText=i1.value-i2.value;
          break;
        case 3: //乘
          s.innerText=i1.value*i2.value;
          break;
        case 4: //除
          s.innerText=i1.value/i2.value;
          break;
      }
    }
</script>

定時器 Demo

<h1>0</h1>
<h2>0</h2>
<script>
    let count=0;
    //開啟定時器 每隔1秒調用一次方法
    //方法作為參數進行傳遞時不寫()
    setInterval(f,1000);
    function f() {
        count++;
        let h=document.querySelector("h1");
        h.innerText=count;
    }
    let num=0;
    //匿名方法開啟定時器
   let timer=setInterval(function () {
        num++;
        let h=document.querySelector("h2");
        h.innerText=num;
        if (num==50){
            //停止定時器
            clearInterval(timer);
        }
    },100);
    //開啟只執行一次的定時器
    setTimeout(function () {
        alert("時間到!")
    },3000);
</script>

學習記錄，如有侵權請聯系刪除

、Angular和React框架

1.Angular

Angular更適合開發一些大型應用，其強大之處在于可以把靜態頁面與動態數據綁定起來。該框架擁有良好的項目結構，適合大型項目的開發，但也因此喪失了一些靈活性。值得一提的是，Angular 由于API設計差而長期飽受開發者詬病。

2.React

React是一個構建用戶界面的 JavaScript 庫。React實際上和Vue有些類似，例如都使用虛擬Dom技術，都專注視圖層，都可以靈活的與其它框架配合。由于Facebook在17年修改了開源React的使用許可協議，引起了一些公司的不滿，進而放棄了使用React。

二、Vue.js框架介紹

下面是官方給出的對Vue.js解釋：

Vue.js是一套用于構建用戶界面的漸進式框架 。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時
Vue也完全能夠為復雜的單頁應用提供驅動。

1.漸進式框架

需要什么就用什么

從簡單到困難

組件化管理

模塊化的編程方式

2.只關注視圖層

一旦從后端拿到了數據，接下來的事情只需要交給Vue.js的虛擬DOM技術就可以啦！這樣，我們就只需要按照設計稿，寫出相應的HTML元素就可以了。當然，這需要按照Vue.js的語法方式進行書寫?？梢哉f，使用了Vue.js之后，就不需要再像jQuery那樣手動拼接Html的代碼了。

三、談談Vue.js的優點

(1)體積小

以2.6.11版本為例，只有335KB，

(2)更高的運行效率

Vue.js使用了虛擬Dom技術，虛擬Dom技術在JavaScript內存當中計算好了最后一步DOM需要展現出的那種狀態，然后將這個狀態告訴瀏覽器去渲染。這樣就很大程度提升了數據視圖展現的性能和前端用戶的體驗。

(3)雙向數據綁定

雙向數據綁定不是Vue首發，但正是由于雙向數據綁定，我們只需要關注視圖，可以把更多的精力放在業務上。

(4)生態豐富學習成本低

Vue的社區非常火爆，各種UI組件，動畫效果，現成的Demo應有盡有，直接拿來使用可以實現項目的快速開發。

學習成本：Angular > React > Vue

四、Vue.js的部署與安裝

Vue的官方比較友好，可以直接前往下載，下載完成后粘貼進項目內即可。

方式1:直接使用<Script>標簽引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

如果不想下載，也可以使用CDN的方式引入：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方式2:使用CLI命令行工具

建議先不使用CLI工具，在熟悉 Vue 本身之后再使用 CLI。

五、第一個Vue.js應用

下面的代碼是第一個Vue.js應用的小案例，后續的文章逐步介紹Vue.js框架！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
	  {{ message }} {{name}}
	</div>
	
	<script type="text/javascript">
	var app=new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!',
			name : "Vue"
		}
	});
	</script>

</body>
</html>

注：文章轉自互聯網

在線咨詢

上一篇：jquery 簡介
下一篇：IT兄弟連 HTML5教程 HTML文檔主體標記bo

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Java8 Stream 拼接字符串 Collect

二、Vue.js框架介紹

四、Vue.js的部署與安裝

五、第一個Vue.js應用

您的項目需求

二、Vue.js框架介紹

四、Vue.js的部署與安裝

五、第一個Vue.js應用