前言
開發中，經常會用到js的Array數組的各種迭代函數map()，filter()，some()，every()，forEach()，find() findIndex()，也是在ES6中新增一些遍歷函數。同樣是不是也是一道面試題，說說ES6新增的一些新特性？？？？
?開始正文some()函數
?一、對some()函數的定義：
some()：用于檢測數組中的元素是否滿足指定條件（函數提供）；
some()方法會依次執行數組中的每一個元素：
如果有一個元素滿足條件，則表達式返回true，剩余的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。
注意：
some()不會對空數組進行檢測。
some() 不會改變原始數組。
?二、瀏覽器支持
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
?三、語法
array.some(function(currentValue,index,arr),thisValue)
1
參數說明：
?三、示例
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行變色</title>
</head>
<body>
<table id="mytable" align="center" width="80%" border="1">
<tr bgcolor="#cccccc">
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
//獲取mytable中標簽名為tr的字節點
mytable=document.getElementById("mytable");
trs=mytable.getElementsByTagName("tr");
len=trs.length;
flag=true;
for(i=0;i<len;i++){
if(flag){
//每隔一行設置背景色
var tr=document.getElementsByTagName("tr")[i].setAttribute("bgcolor","#cccccc");
flag=false;
}else{
flag=true;
}
}
}
</script>
</body>
</html>
JS中數據類型轉換
目前為止，我了解到的JavaScript中共有6種類型。通過typeof關鍵字可以查看類型名稱。
數據的類型：
字符串：若值為字符串，則顯示為String。字符串使用單引號或雙引號括起來。在控制臺顯示為黑色。
數字：若值為數字，則顯示為Number。在控制臺顯示為藍色。
布爾值：若值為布爾值，則顯示為Boolean。它的值只有”true”和”false”。
對象：若值為對象，則顯示為Object。
未定義：若值未定義，也就是僅僅聲明，但未進行賦值，則顯示為Undefined。
空值：若值為指向不引用對象的指針，則顯示為Null，它與Undefined不同，以后慢慢深入了解。
以下表格詳細寫出了各種情況下相互轉換的結果，可作為輔助記憶。
值 轉換為字符串 轉換為數字 轉換為布爾值 轉換為對象
undefined “undefined” NaN false throw TypeError
null “null” 0 false throw TypeError
true “true” 1 new Boolean(“true”)
false “false” 0 new Boolean(“false”)
“” 0 false new String("")
“1.2” 1.2 true new String(“1.2”)
“1.2a” NaN true new String(“1.2a”)
“aaa” NaN true new String(“aaa”)
0 “0” false new Number(0)
1 “1” true new Number(1)
NaN “NaN” false new Number(NaN)
Infinity “Infinity” true new Number(Infinity)
[] “” 0 true
[9] “9” 9 true
[“a”“b”] “a,b” NaN true
在Js中，數據類型可以相互轉換，轉換的方式有兩種，隱式轉換和強制轉換，首先來說一些隱式轉換。在進行代碼書寫時，要經常提醒自己所使用的元素是什么數據類型，在進行某些操作后是否會導致數據類型的變化，原因就是Js會對數據進行類型的隱式轉換。
隱式轉換舉例：
（+）加法運算的隱式轉換：加號兩邊只要出先了字符串，就自動將兩者均轉化為字符串，使兩個字符串發生“拼接”，最后生成的結果也是一個字符串；如果前后都不是字符串，則轉化為數字類型進行計算。
（-、*、/、%）其他算數運算的隱式轉換：前后都轉化為數字類型進行計算。
（?。┻壿嫹堑碾[式轉換：他會將他后面的變量或表達式轉換為布爾值。
（<，>）比較運算符的轉換：如果前后存在一個數字，會對另一個轉化為數字進行比較；如果前后均為字符串，會依次比較對應字符的編碼大小，老大比老大，老二比老二，依次進行。
（&&，||）邏輯運算符的轉換：先將前后都轉化為布爾值再進行判斷，要記住的是，只有undefined,null,0,””,NaN會轉化成為false，其他都是true。
（== 、===）這里作為補充說明，null與Undefined相等但不全等，NaN與任何都不相等。
強制轉換的方式：
1.轉化為字符串
String（里面寫待轉化的內容）：沒什么好解釋的，就是強制將你所看到的轉化為你所看到的。
toString（里面寫目標數字是幾進制），寫法為：待轉化內容.toString（目標內容是幾進制）。括號內不寫時默認為10。
toFixed（保留小數的位數），寫法為待轉化內容.toFixed（保留小數的位數），存在精度誤差。
2.轉化為數字
Number（），只有所轉化內容在肉眼看到的全是數字，才會正常轉化；false會轉化為0，true會轉化為1；null會轉化為0；undefined會轉化為NaN；其他情況均為NaN。
parseInt（待轉化內容，待轉化內容的進制方式），與toString互為逆運算，不寫的話默認為10。如果待轉化內容為字符串，若以數字開頭，可以從開始轉換到字符前為止變成數值。布爾值，undefined，null經過轉化均為NaN。
ParseFloat（），與上面一致，不贅述。
3.轉化為布爾值
書寫方式為Boolean（），如果上面的隱式轉換你有好好看，這里很得不需要再寫了。
環境準備
創建項目
npx create-react-app my-react
進入項目并啟動
cd my-react && npm start
1
src/index.js
先把src里面的東西全部刪掉，重寫了index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return (
<div>Hellow, World</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
JSX
一個React組件中，render方法中return出去的內容就是這個組件將要渲染的內容，然后Babel 會把 JSX 轉譯成一個名為 React.createElement() 函數調用。
React.createElement(
'div',
{},
'Hello, World'
)
React.createElement() 接收三個參數：
第一個參數是必填，傳入的是似HTML標簽名稱: ul, li, div;
第二個參數是選填，表示的是屬性: className;
第三個參數是選填, 子節點: 要顯示的文本內容;
React.createElement() 會預先執行一些檢查，以幫助你編寫無錯代碼，但實際上它創建了一個這樣的對象：
// 注意：這是簡化過的結構
const element = {
type: 'div',
props: {
className: '',
children: 'Hello, world!'
}
};
元素渲染
與瀏覽器的 DOM 元素不同，React 元素是創建開銷極小的普通對象。React DOM 會負責更新 DOM 來與 React 元素保持一致。
想要將一個 React 元素渲染到根 DOM 節點中，只需把它們一起傳入 ReactDOM.render()：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
render方法接收兩個參數，第一個參數為我們的 React 根級組件，第二個參數接收一個 DOM 節點，代表我們將把和 React 應用掛載到這個 DOM 節點下，進而渲染到瀏覽器中。
組件 & props
組件，從概念上類似于 JavaScript 函數。它接受任意的入參（即 “props”），并返回用于描述頁面展示內容的 React 元素。
函數組件：
function Welcome(props){
renter (
<h1> Hello, {props.name} </h1>
)
}
<Welcome name="World"/>
該函數是一個有效的 React 組件，因為它接收唯一帶有數據的 “props”（代表屬性）對象與并返回一個 React 元素。這類組件被稱為“函數組件”，因為它本質上就是 JavaScript 函數。
class組件：
class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>
組件名稱必須以大寫字母開頭。
組件無論是使用函數聲明還是通過 class 聲明，都決不能修改自身的 props。
State & 生命周期
State 與 props 類似，但是 state 是私有的，并且完全受控于當前組件。
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時會調用，也就是掛載
}
componentWillUnmount() {
//當DOM組件Clock被刪除時，會調用，也就是卸載
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
修改state中數據：
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
//這里是Clock組件第一次被渲染到DOM時會調用，也就是掛載
this.timer = setInterval(()=>{
this.tick()
},1000)
}
tick(){
this.setState({
date: new Date()
})
}
componentWillUnmount() {
//當DOM組件Clock被刪除時，會調用，也就是卸載
clearInterval(this.timer)
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
不要直接修改 State,構造函數是唯一可以給 this.state 賦值的地方
this.setState({name: 'World'})
1
State 的更新可能是異步的,要解決這個問題，可以讓setState接受一個函數而不是一個對象，這個函數用上一個 state 作為第一個參數，將此次更新被應用時的 props 做為第二個參數：
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件處理
React 事件的命名采用小駝峰式（camelCase），而不是純小寫。
使用 JSX 語法時你需要傳入一個函數作為事件處理函數，而不是一個字符串。
在 React 中一個不同點是你不能通過返回 false 的方式阻止默認行為。你必須顯式的使用 preventDefault 。例如，傳統的 HTML 中阻止鏈接默認打開一個新頁面，你可以這樣寫：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React 中，可能是這樣的：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
class函數中綁定this
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此語法確保 handleClick 內的 this 已被綁定。
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
在循環中，通常我們會為事件處理函數傳遞額外的參數
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
列表和key
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
語法
在 JSX 中所有的屬性都要更換成駝峰式命名，比如 onclick 要改成 onClick，唯一比較特殊的就是 class，因為在 JS 中 class 是保留字，我們要把 class 改成 className 。
CSS 函數大家多多少少都使用過，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。
今天小編給大家介紹幾個特殊的 css 函數。
attr() 這是一個很強的函數，他可以讓數據傳輸到你的 css 中，不需要借助其他東西。
用法：
<style>
div::before {
content : attr(data-abc);
}
</style>
<div data-abc='我是attr'></div>
calc() 用與動態計算長度值
給大家展示快速讓子盒子在父盒子中居中的另一種方法：
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.child {
position: absolute;
/ 這里的 50px 為子盒子寬（高）的一半 /
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="child"></div>
</div>
cubic-bezier() 定義了一個貝塞爾曲線(Cubic Bezier)。在這我就不多描述了，關于貝塞爾曲線，感興趣的同學可以自行去了解。
var() 用于插入自定義的 css 屬性值。
用法：和 sass，less 中定義變量的語法相似
<style>
:root {
--abc-- : red;
}
div {
width: 100px;
height: 100px;
background-color: var(--abc--);
}
</style>
<div></div>
counters() 這是一個古老但實用的屬性，用與 css 中計數
用法：
counter-reset : item 1；
給定計數器 item 的初始值1，也可用與復位。參數 ‘item’ 為計數器的名稱，后面的 ‘1’ 參數如果不寫，默認是 0。
counter-increment: item 2;
設定當一個 item 計算器發生時計數器增加的值。參數 ‘2’為每次計數增長 2。
counters(item,’-’);
寫在content中，顯示計數器的值，‘-’ 設定倆計算器拼接時中間的符號為’-‘。它還有第三個參數，是list-style-type , 與 css 屬性 list-style-type 是一模一樣的。用與設定計數器以什么形式顯示（阿拉伯數字，英文大小寫，等）
<style>
ul {
counter-reset: item 1;
}
li:before {
counter-increment: item 2;
content: counters(item, "-");
}
</style>
<ul class="test">
<li> html
<ul>
<li> css</li>
<li> js</li>
</ul>
</li>
<li> Node</li>
<li> ts</li>
</ul>
bootstrap-multiselect動態加載數據，首先要引用bootstrap-multiselect.css和bootstrap-multiselect.js
<select id="demo" name="demo" multiple></select>
JS代碼
$("#demo").multiselect({
// 自定義參數，按自己需求定義
nonSelectedText : '--請選擇--',
inheritClass : true,
maxHeight : 350,
includeSelectAllOption : true,
numberDisplayed : 5,
//下拉回調函數
onDropdownShow : function(event) {
$.ajax({
url : "${ctx}/xx/xx",
async : false,
type : "get",
dataType : "json",
success : function(data) {
var mark = new Array();
for (var i = 0; i < data.length; i++) {
mark.push({
value : data[i].markId,
label : data[i].markName
});
}
$("#demo").multiselect('dataprovider', mark);
}
})
},
});
獲取選中的值的集合
var selectList = $('#demo option:selected');
1
遍歷集合得到選中的value和label
for (var i = 0; i < selectList.length; i++) {
value = siteList[i].value;
label = siteList[i].label;
}
希望這篇文章可以幫助到你
一、首先找到第一次發起網絡請求的地址，將服務器返回set-cookie當全局變量存儲起來
wx.request({
......
success: function(res) {
console.log(res.header);
//set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domain=.fengkui.net
// 登錄成功，獲取第一次的sessionid,存儲起來
// 注意：Set-Cookie（開發者工具中調試全部小寫）（遠程調試和線上首字母大寫）
wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
}
})
三、后臺獲取cookie中的PHPSESSID，將PHPSESSID當作session_id使用
<?php
// 判斷$_COOKIE['PHPSESSID']是否存在，存在則作session_id使用
if ($_COOKIE['PHPSESSID']) {
session_id($_COOKIE['PHPSESSID']);
}
session_start();
echo session_id();html5的新特點
1.語法更簡單
a) 頭部聲明
<!doctype html>
b) 簡化了字符集聲明
<meta charset="utf-8">
2.語法更寬松
a) 可以省略結束符的標簽
li、dt、dd、p、optgroup、option、tr、td、th
b) 可以完全省略的標簽
html、head、body
3.標簽語義化
增加了很多標簽，在作頁面的時候更加具有語義（定義了一些原本沒有語義的div模塊為有鮮明結構的語義模塊）
a) <header>標記定義一個頁面或一個區域的頭部
b) <nav>標記定義導航鏈接
c) <article>標記定義一篇文章內容
d) <section>標記定義網頁中一塊區域
e) <aside>標記定義頁面內容部分的側邊欄
f) <footer>標記定義一個頁面或一個區域的底部
語義化標簽圖示
4.表單新增常用屬性------要求掌握
required：必填
placeholder：輸入內容提示
autofocus：自動獲取焦點-----自動幫我們將光標點進去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必須的 -->
<!-- 自動獲取焦點----自動將光標定位到表單中 -->
<input type="text" placeholder="請輸入用戶名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>
5.input新增type屬性值
a) type=“email”，文本框中只能輸入email地址
b) type=“date”，日期控件
c) type=“time”
d) type=“month”
e) type=“week”
f) type=“number”，喚醒數字鍵盤
g) type=“range”，滑塊
h) type=“color”
最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網上看了很多，都說APP能喚起微信，手機網頁實現不了。也找了很多都不能直接喚起微信。
總結出來一個可以直接喚起微信的。適應手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉發的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發朋友圈分享</button>
-
<button data-mshare="2">點擊觸發發送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發微信分享到朋友圈或發送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據不同版本 加載對應的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調函數
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
1.文字滾動
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷電黃色預警！<br />
大雨黃色預警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滾動速度-----------------scroll：滾動 amount：數值
width：寬度 height：高度
onmouseover：當鼠標移上去
onmouseout：當鼠標離開
stop()：停止
start()：開始
behavior：
scroll 循環滾動
alternate 來回滾動
slide 滾動一次停止
藍藍設計的小編 http://www.syprn.cn